5 svar · 284 visningar · startad av tobias1
hej! har fått till så bottom lägger sig längst ned på sidan och har sedan en "maindiv", men tänkte lägga en "leftdiv" som också tar precis som maindiven upp hela "sidan" men inte förstör bottom.
vill dessutom få det centrerat i både ie och firefox. har fått det centrerar genom att lägga en text-align:center i en ny div, men det fungerar dåligt i vissa webbläsare.
någon som kan hjälpa?
css:
html,body { /**/
color: #fff;
background-color:#fff;
margin:0;
padding:0;
margin-right:auto;
margin-left:auto;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #333;
line-height: 18px;
height:100%; /**/
}p {
font-family: verdana, helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
color: #000;
margin:0;
padding: 5px 10px 5px 10px;
}
#center {
text-align: center;
}
#container {
width:740px;
min-height:100%; /**/
background-color:#c0c0c0; /* samma som main */
text-align: left;
}#header{
width: 740px;
height: 140px;
margin:0;
text-align: left;
}
#menu {
width:740px;
height: 23px;
background-color:#666;
margin:0;
text-align: left;
}
#main {
width:auto;
background-color:#c0c0c0;
margin:0;
text-align: left;
}
#left {
border:1px dashed #000;
width:150px;
background-color:#666;
margin:0;
text-align: left;
float:left;
}
#belowthebottom {
height:28px; /* samma som #bottom */
}
#bottom{
width:740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color:#999;
margin-top:-28px; /* samma som height */
text-align: left;
}
sida:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<link rel="stylesheet" href="stilar.css" type="text/css">
<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]--></head>
<body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000">
<div id="container"><div id="header"><p>header</p></div>
<div id="menu"><p>menu</p></div>
<div id="left"><p>Meny</p></div>
<div id="main"><p>main</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p></div><div id="belowthebottom"> </div>
</div>
<div id="bottom"><p>nere</p></div>
</body>
</html>
alltså: 1.
"meny" som har en border runt sig ska precis som "main" ta upp hela sidan.
2. Centrera enklast?
tacksam för svar. //Tobias
Du kan börja med att lägga in all din kod innanför kod-taggarna så blir det lättare för oss som läser koden. :)
2. Centrera enklast, menar du så att hela sidan blir centrerad, eller så att texten blir centrerad? Centrera sidan gör du enklast så här tycker jag.
#container { margin: 0 auto; }
så kanske?
din kod fungerade silfver, men bottom är fortfarande vänsterställd, och lägger jag in din kod i bottom så blir det fel(dvs bottom fungerar inte som det ska, flyttas ned).
tobias1 skrev:
så kanske?
din kod fungerade silfver, men bottom är fortfarande vänsterställd, och lägger jag in din kod i bottom så blir det fel(dvs bottom fungerar inte som det ska, flyttas ned).
Ersätt
margin-top:-28px; /* samma som height */
med
margin: -28px auto 0 auto;
så bör det fungera. :)
tackar :) nu är det bara floatgrejen kvar som man måste fundera på.. men tack för hjälpen!
silfver skrev:
...
margin: -28px auto 0 auto;så bör det fungera. :)
För att spara 4 byte så..... ;)
[red]
margin: -28px auto 0;
[/red]
mv icaaq