Containeren som indeholder header, left, content, right og footer
er sat til 760 pixels!
Left er 180 pixels bred og Right ligeså. Content har derfor 400
pixels (180 + 180 + 400 = 760) at gøre godt med men nej..?
Jeg er tilsyneladende nødsaget til at fjerne 10 pixels fra
Content så den nu kun er 390 pixels bred? Hvor blev de sidste 10
pixels lige af..?
Desuden er der den yderste højre Border som tilsyneladende ligger
2 pixels mod venstre og altså overlapper sig selv, selvom den er
sat til 180 pixels så det hænger sammen matematisk.
Forsøger jeg at lægge 2 pixels til enten Content eller Right
ødelægger det igen layoutet?
Der er endnu et problem med Borders på Left og Right. De følger
ikke med ned som de gør det i Content selvom både Left, Content
og Right er sat med en height:auto; ???
Det er jo meningen at indholdet i Content automatisk skal flytte
Footer nedad jo mere tekst der fyldes i og derfor kan jeg
naturligves ikke sætte Left og Right borders til en bestemt værdi
men er nødsaget til at sætte den til AUTO, men det virker ikke?
-Det er sgu da egentlig en underlig detalje at der kun er en
Border i Left og Right ud for teksten? Hvorfor følger den ikke
med hele vejen ned når det ikke er teksten men selve felterne
Left og Right som angives med en border???
Håber nogen kan hjælpe inden jeg ryger på den lukkede...
Da jeg ikke må referere til den aktuelle side må jeg jo fylde ud
her forneden:
CSS:
body {
padding:0;
margin:0;
}
/* Links */
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}
/* Tekst */
h1, h2, h3, p {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}
h1 {
font-size: 20px;
}
h2 {
font-size:16px;
font-weight:normal;
}
p {
font-size:11px;
font-weight:normal;
}
/* Container */
#container {
width: 760px;
margin-bottom: 10px;
margin: 0 auto;
background-color: #EBD3E0;
}
/* Header */
#header {
border:1px solid #000000;
background-repeat:no-repeat;
background-image:url("../images/banner.jpg");
width:760px;
height:121px;
}
#header img {padding:10px 0px;}
/* Content */
#content {
height:auto;
width:390px;
background-color: #ffffff;
border-left:1px solid #000000;
border-right:1px solid #000000;
}
/* Left */
#left {
height:auto;
width:180px;
float:left;
border-left:1px solid #000000;
}
/* Right */
#right {
height:auto;
width:180px;
float:right;
border-right:1px solid #000000;
}
/* Footer */
#footer {
clear: both;
width:760px;
height:21px;
border:1px solid #000000;
background-color: #ededed;
text-align:center;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link type="text/css" rel="stylesheet" media="screen"
href="css/layout.css" />
</head>
<body>
<div id="container">
<div id="header"><p>HEADER</p>
</div>
<div id="left"><p>LEFT</p>
</div>
<div id="right"><p>RIGHT</p>
</div>
<div id="content"><p>CONTENT</p>
<h1>CSS gør mig VANVITTIG!!!</h1>
<p>Containeren som indeholder header, left, content, right og
footer er sat til 760 pixels!</p>
<p>Left er 180 pixels bred og Right ligeså. Content har
derfor 400 pixels (180 + 180 + 400 = 760) at gøre godt med
men nej..?</p>
<p>Jeg er tilsyneladende nødsaget til at fjerne 10 pixels
fra Content så den nu kun er 390 pixels bred? Hvor blev de
sidste 10 pixels lige af..?</p>
<p>Desuden er der den yderste højre Border som
tilsyneladende ligger 2 pixels mod venstre og altså
overlapper sig selv, selvom den er sat til 180 pixels så det
hænger sammen matematisk.</p>
<p>Forsøger jeg at lægge 2 pixels til enten Content
eller Right ødelægger det igen layoutet?</p>
<p>Der er endnu et problem med Borders på Left og Right. De
følger ikke med ned som de gør det i Content selvom
både Left, Content og Right er sat med en
<strong>height:auto;</strong> ???</p>
<p>Det er jo meningen at indholdet i Content automatisk skal
flytte Footer nedad jo mere tekst der fyldes i og derfor kan jeg
naturligves ikke sætte Left og Right borders til en bestemt
værdi men er nødsaget til at sætte den til AUTO,
men det virker ikke?</p>
<p>-Det er sgu da egentlig en underlig detalje at der kun er en
Border i Left og Right ud for teksten? Hvorfor følger den
ikke med hele vejen ned når det ikke er teksten men selve
felterne Left og Right som angives med en border???</p>
<p>Håber nogen kan hjælpe inden jeg ryger på den
lukkede...</p>
</div>
<div id="footer"><p>FOOTER</p>
</div>
</div>
</body>
</html>
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials