Reisan Medlem sedan feb. 2007 32 inlägg Frågan 7 juli 2007 23:53 #1 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 V Medlem sedan aug. 2006 8 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>
Reisan Medlem sedan feb. 2007 32 inlägg Ja, din korrigering funkar jättebra! :D Tack för hjälpen!
Danne V Medlem sedan aug. 2006 8 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.
Reisan Medlem sedan feb. 2007 32 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! :)
