webForumDet fria alternativet

css / xhtml / positioneringsproblem

5 svar · 284 visningar · startad av tobias1

tobias1Medlem sedan apr. 20053 inlägg
#1

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

pic.gif
silfverMedlem sedan apr. 20039 709 inlägg
#2

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; }
tobias1Medlem sedan apr. 20053 inlägg
#3

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).

silfverMedlem sedan apr. 20039 709 inlägg
#4

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. :)

tobias1Medlem sedan apr. 20053 inlägg
#5

tackar :) nu är det bara floatgrejen kvar som man måste fundera på.. men tack för hjälpen!

icaaqMedlem sedan okt. 20004 910 inlägg
#6

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

Genererad på 391 ms · cache AV · v20260730165559-full.f96bc7eb