ReisanMedlem sedan feb. 200732 inlägg Har problem att få sista div-taggen som heter "footer" att placera sig inom div-taggen "container", som omsluter alla div-boxar. Se css nedan, samt bifogad screenshot.
HTML-koden
<body>
<div id="container">
<div id="logotype">logotype</div>
<div id="toolbar">toolbar</div>
<div id="leftcontent">leftcontent</div>
<div id="content">content</div>
<div id="rightcontent">rightcontent</div>
<div id="footer">footer</div>
</div>
</body>
CSS-koden
#logotype {
height: 100px;
width: 820px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 0px;
}
#toolbar {
height: 40px;
width: 820px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#leftcontent {
width: 200px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
float: left;
}
#content {
width: 400px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
}
#rightcontent {
width: 200px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
float: right;
}
#footer {
width: 800px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
height: 20px;
float: left;
}
#container {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
body {
margin-top: 0px;
}
Danne VMedlem sedan aug. 20068 090 inlägg Du behöver ingen "float" i footern. Dessutom behöver du "cleara" float innan footern. Jag gjorde en <br /> med en class. (Åsså la jag till lite färger. Det underlättar när man vill se hur divvarna ligger)
#logotype {
height: 100px;
width: 820px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 0px;
background: #FFCC33;
}
#toolbar {
height: 40px;
width: 820px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
background: #66FFCC;
}
#leftcontent {
width: 200px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
float: left;
background: #FF6699;
}
#content {
width: 400px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
background: #66CCFF;
}
#rightcontent {
width: 200px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
float: left;
background: #CC66CC;
}
#footer {
width: 800px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
height: 20px;
background: #FFFF66;
}
#container {
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background: #CCCCCC;
}
body {
margin-top: 0px;
}
.clearFloat {
clear:both;
line-height: 0px;
}
</style>
<div id="container">
<div id="logotype">logotype</div>
<div id="toolbar">toolbar</div>
<div id="leftcontent">leftcontent</div>
<div id="content">content</div>
<div id="rightcontent">rightcontent</div>
<br class="clearFloat" />
<div id="footer">footer</div>
</div>
ReisanMedlem sedan feb. 200732 inlägg Ja, din korrigering funkar jättebra! :D Tack för hjälpen!
Danne VMedlem sedan aug. 20068 090 inlägg Inga problem.
Tips för att göra CSS:n lite behändigare: Du behöver inte skriva ut marginalerna i varje div så här:
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
Det räcker om du skriver:
margin:0 10px 10px 0;
Första siffran är alltid "top", andra är "right", tredje är "bottom" och fjärde är "left". Notera mellanslag mellan dom.
När det är "0" så behöver ingen sort eftersom 0 pixlar är samma som 0 procent eller 0 ems osv. men när du skriver in ett värde som "10" så måste du lägga till sorten direkt efteråt.
ReisanMedlem sedan feb. 200732 inlägg Aha, det var ju mycket behändigare att skriva ut det på det viset. Det ska jag göra! :D Tack för tipset! :)
