14. juli 2005 - 22:01
Der er
64 kommentarer og1 løsning
3 hurtige
align="left/center/right" = hvilket i CSS?
valign="top/middle/bottom" = hvilket i CSS?
<div align="center"> = hvilket i CSS?
- kort og godt :)
Annonceindlæg fra Thales
1) Lidt mere kompliceret:
Måske dette er måden?
Ah, så ikke dit indlæg :)
Hov, hvad mener du med dit svar i 3'eren?
Mener du dette?
Istedet for dette:
<div align="center">
<table ..>
<tr>
<td> </td>
</tr>
</table>
</div>
- kan man springe <div></div> over, og istedet benytte det ovenstående CSS?
<table class="myTable">
............
</table>
Nej, det kan man vist ikke. Venter spændt på hvad det er du mener :)
Du kan da sagtens:
<table style="width:784px;margin:0 auto;">
Det vil centrere tabellen?
15. juli 2005 - 00:24 #10
Ja, prøv det !-)
15. juli 2005 - 00:27 #11
Jeg prøver og prøver! :)
15. juli 2005 - 00:34 #12
F.eks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Centreret tabel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
</style>
</head>
<body>
<table style="width:784px;margin:0 auto;background:yellow;height:100%;">
<tr>
<td>Noget</td>
</tr>
</table>
</body>
</html>
15. juli 2005 - 00:41 #13
Fedest, jeg kigger på det i morgen. Nu vil jeg til at studere øjenlåg indefra :)
15. juli 2005 - 00:51 #14
Sorry, det er jo den doctype jeg altid bruger :)
16. juli 2005 - 00:05 #15
Sorry, har haft meget travlt :)
16. juli 2005 - 00:06 #16
16. juli 2005 - 00:06 #17
Nej !-)
16. juli 2005 - 00:11 #18
Det var et dumt spørgsmål. Men lad det nu ligge :oD Takker for hjælpen :)
16. juli 2005 - 00:23 #19
Kan jeg nå et hurtigt tillægsspørgsmål? Har længe rodet med det - FOR længe :)
16. juli 2005 - 00:27 #20
Ja, ifølge min regnebog er 9+180+9+1+610+1+180 også 990 ...
16. juli 2005 - 00:30 #21
Ok, men min tvivl var om border-left og border-right skulle med i regnestykket. Nu har jeg lavet dette i CSS:
16. juli 2005 - 00:33 #22
Sorry:
16. juli 2005 - 00:35 #23
maincolumn bliver da 614px: 1 + 612 + 1 !-)
16. juli 2005 - 00:36 #24
Sludder! Det er kun i MSIE, det går galt.
16. juli 2005 - 00:38 #25
Hm? Det kan jeg ikke se ...
16. juli 2005 - 00:39 #26
Indhold i midten = 612px - (sort venstreborder på 1px + sort højreborder på 1px) = 610px
16. juli 2005 - 00:42 #27
Jeg har sat det ned til 610px, men har nu også tjekket i andre browsere. Det er ikke korrekt sat op, bredderne passer ikke ....
16. juli 2005 - 00:44 #28
Box-modellen siger, at et lements bredde beregnes sådan:
16. juli 2005 - 00:46 #29
Dvs. det kan ikke sættes ordentligt op i MSIE?
Jeg bruger denne doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
16. juli 2005 - 00:50 #31
roenving, jeg er godt nok træt. Jeg håber du vil hjælpe med denne her. Opretter endnu et spørgsmål i morgen. Snakkes :)
16. juli 2005 - 00:50 #32
Desværre er det først med de nyeste IE 6'ere, at M$ har tilladt deres browser at følge standarden på dette punkt ...
-- og selvom jeg ikke tror det, så kunne små forskelle udenfor tekststrengene måske betyde noget (indeni betyder de meget !-)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
16. juli 2005 - 00:54 #33
Ok, jeg kigger mere på det i morgen, men jeg kan ikke holde mig vågen længere, må hellere daffe :)
16. juli 2005 - 09:23 #34
Hvis margin ikke er angivet til 0px, er margin så automatisk 1px eller 2px? Jeg mener, at hvis man ikke angav cellpadding og cellspacing i en tabel, blev der som default sat 2px af.
<table> = 2 px i cellpadding og cellspacing
<table border="0" cellpadding="0" cellspacing="0"> = 0 px i cellpadding og cellspacing
16. juli 2005 - 09:24 #35
Det ligner noget der er løgn (16/07-2005 00:33:07) - i MSIE er det værst :/
16. juli 2005 - 10:23 #36
I almindelige elementer skulle der ikke gerne være noget, men jeg har på et tidspunkt opdaget en mærkværdelighed omkring borders på fullsize elementer, men kan ikke helt huske det !-)
16. juli 2005 - 12:06 #37
Ok. Nu havde jeg lavet en fejl, så det hjalp at rette id="menu" til id="menucolumn" :)
16. juli 2005 - 12:10 #38
Såvidt jeg kan se, vil din css da betyde at maincolumn bliver 630px inklusive padding og border ...
16. juli 2005 - 13:05 #39
Det skulle det også gerne:
16. juli 2005 - 14:01 #40
maincolumn: 634px (skulle være 579px) = maincolumn: 634px (skulle være 630px)
16. juli 2005 - 14:53 #41
Håber du har tid og lyst til at kigge på det roenving. Opretter et nyt spørgsmål :)
16. juli 2005 - 14:59 #42
-- prøv at indsætte diver i dine tabelceller !-)
16. juli 2005 - 14:59 #43
-- med eksplicit bredde ...
16. juli 2005 - 15:03 #44
Noget i retning af dette:
<td id="menucolumn">
<div style="width: 162px;">
- INDHOLD -
</div>
</td>
16. juli 2005 - 15:10 #45
Jeg skal trække padding fra bredden på div'en?
16. juli 2005 - 15:15 #46
Selvfølgelig, du skal sørge for at indholdet præcis matcher bredderne !-)
16. juli 2005 - 15:54 #47
Så er der noget, der er blevet rigtigt. Men ikke det hele. Jeg roder lidt videre og giver dig resultatet om lidt.
Vi er enige om, at højden ingen indflydelse får på bredden? Hele tabellen blev pludselig 10-15px bredere, og da jeg fjernede padding fra højden i banneret, rettede tabellen sig en lille smule ind ....?
Du får lige HELE siden og HELE CSS:
<html>
<head>
<title>Min hjemmeside</title>
<!-- #include virtual="/includes/header.asp" -->
</head>
<body onload="funclock();">
<table id="maintable">
<tr>
<td colspan="5" class="text11white" id="dato"><span id="uret"></span></td>
</tr>
<tr>
<td colspan="5" id="banner">Banner</td>
</tr>
<tr>
<td id="menuleftborder"><div class="divmenuborder"></div></td>
<td id="menucolumn">
<div class="divmenu">
Menu
</div>
</td>
<td id="menurightborder"><div class="divmenuborder"></div></td>
<td id="maincolumn">
<div class="divmain">
Content
</div>
</td>
<td id="newscolumn">
<div class="divnews">
News
</div>
</td>
</tr>
<tr>
<td colspan="5" id="bottom">Bottom</td>
</tr>
</table>
</body>
</html>
CSS:
html, body {
background-color: #396da5;
height: 100%;
margin: 0px;
border: 0px;
padding: 0px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
color: black;
font-style: normal;
font-weight: normal;
font-size: 11px;
line-height: 18px;
}
#maintable {
width: 990px;
margin: 0px auto;
border: 0px;
border-collapse: collapse;
}
#dato {
text-align: right;
// padding: 3px 20px 3px 0px; -->
background-color: #396da5;
}
#banner {
width: 990px;
height: 90px;
padding: 0px;
background-image: url('/images/bannerbg.gif');
// border-bottom: 1px solid black; -->
}
.divmenuborder {
width: 9px;
}
#menuleftborder {
width: 9px;
background-image: url('/images/menu/menuleft.gif');
}
.divmenu {
width: 162px;
}
#menucolumn {
width: 162px;
background-color: #fff;
text-align: left;
vertical-align: top;
margin: 0px;
border: 0px;
padding: 0px;
}
#menurightborder {
width: 9px;
background-image: url('/images/menu/menuright.gif');
}
.divmain {
width: 629px;
}
#maincolumn {
width: 629px;
background-color: #fff;
border-top; 0px;
border-right: 1px solid black;
border-bottom: 0px;
border-left: 0px;
text-align: left;
vertical-align: top;
margin: 0px;
}
.divnews {
width: 180px;
}
#newscolumn {
width: 180px;
background-color: #fff;
text-align: left;
vertical-align: top;
margin: 0px;
border: 0px;
padding: 0px;
}
#bottom {
border-top: 1px solid black;
background-color: fff;
text-align: left;
vertical-align: top;
margin: 0px;
border: 0px;
padding: 0px;
}
.CapitolLetter {
text-transform: capitalize;
}
.text11white {
color: white;
font-style: normal;
font-weight: normal;
font-size: 11px;
font-family: verdana, helvetica, tahoma, sans-serif, arial;
line-height: 18px;
}
16. juli 2005 - 16:01 #48
menuleftborder: 11px (Skulle være 9px)
16. juli 2005 - 22:36 #49
Jeg tror jeg har fundet ud af det: Jeg prøvede med dette på tabellen:
#maintable {
width: 990px;
margin: 0px auto;
border: 0px;
border-collapse: collapse;
}
Jeg troede det skulle gøres på den måde for at undgå
border="0" cellpadding="0" cellspacing="0"
Nu har jeg rettet det tilbage til dette:
<table border="0" cellpadding="0" cellspacing="0" style="width: 990px; margin: 0px auto;">
<tr>
<td style="width: 9px; background-image: url('/images/menu/menuright.gif');"></td>
<td style="width: 162px; background-color: #efefef;"></td>
<td style="width: 9px; background-image: url('/images/menu/menuright.gif');"></td>
<td style="width: 630px; background-color: #fff000;"> </td>
<td style="width: 180px; background-color: #ff0000;"></td>
</tr>
</table>
Og så har kolonnerne de rigtige bredder. Har du et forslag til hvordan man kan få
border="0" cellpadding="0" cellspacing="0"
ind i CSS?
16. juli 2005 - 22:39 #50
Jada, du skal bare benytte dig af cascading:
16. juli 2005 - 22:42 #51
Ok, og hvordan skal det stå i hhv. tabel og celle? Sådan her?
<table id="maintable">
<tr>
<td id="maintable td"> </td>
</tr>
</table>
16. juli 2005 - 22:46 #52
... og hvorfor skal margin:0;border:0;padding:0; ikke være i #maintable {...}? Og det er ligemeget med at sætte px bagefter? margin: 0px; border: 0px; padding: 0px; istedet for margin:0;border:0;padding:0;
16. juli 2005 - 23:00 #53
Ups, det skal vist laves som en class istedet for id, hvis det skal på alle cellerne?
16. juli 2005 - 23:00 #54
Det eneste du skal gøre er:
<table id="maintable">
<tr>
<td> </td>
</tr>
</table>
-- for css-syntaksen betyder:
-- at maintable skal være 990px bred, have automatisk margin i siderne, men ingen for oven, ikke have nogen border samt at børneelementer op ad hinanden skal have deres border lagt sammen ...
-- at td'er, som findes indeni elementet med id="#maintable" hverken skal have margin, border eller padding ...
-- og en længde skal i css defineres med en enhed, med een undtagelse, nemlig når længden er 0, så er enheden frivillig !-)
16. juli 2005 - 23:03 #55
TAK, roenving! NU tror jeg bollerne er barberede! :) 2 sek .....
16. juli 2005 - 23:06 #56
Der er lige en sidste lille ting: Jeg vil have højrejusteret datoen:
16. juli 2005 - 23:12 #57
Og endnu en ting: sort border-right på maincolumn kommer ikke frem?
16. juli 2005 - 23:15 #58
Ok, det er fordi
16. juli 2005 - 23:24 #59
css virker efter et princip om nærhed og væsentlighed, således at først kommer inline styles på tagget, så rules med id-selektor, class-selektor, element-selektor og mindst væsentlig er den generelle selektor * ...
16. juli 2005 - 23:38 #61
Ok. Hvis jeg har forstået det ret, så er det ikke nok at gøre det på denne måde:
16. juli 2005 - 23:39 #62
<td id="dato" style="padding:3px 20px 3px 0px;"><span class="text11white" id="uret"></span></td>
16. juli 2005 - 23:48 #63
Det virker ihvertfald. Men så må dette være dobbelt konfekt?
16. juli 2005 - 23:51 #64
Ja, det skulle du kunne !-)
16. juli 2005 - 23:57 #65
Tak, roenving! Den er lige i øret!
Jeg har givet 15 + 50 point i dette spørgsmål. Du får de resterende 135 også. Kan du ikke lige svare på
http://www.eksperten.dk/spm/633022?
Vi tilbyder markedets bedste kurser inden for webudvikling
Ny bruger
Nybegynder
Opret
Preview
