PDA

View Full Version : Problem med DIV

lillebror
2004-12-09, 22:13
Hej!

Jag har klurat och klurat men inte riktigt fått ordning på min CSS-kod. Det jag vill åstadkomma är en HEADER-, MENU-, CONTENT- och FOOTER-del (enligt bifogad bild).

Jag vill att "hela paketet" skall vara positionerat jämt med vänsterkanten. Nu finns det ett vitt mellanrum både till vänster och högst upp. Hur löser jag detta så att de vita kanterna försvinner i css-koden? Följande kod använder jag nu.


#header
{
position: relative;
top: 0px;
left: 0px;
width: 770px;
height: 200px;
border: 1px solid #000000;
background-color: #3379BA;
}

#footer
{
position: relative;
top: 0px;
width: 770px;
height: 100px;
border: black solid 1px;
border-top: black solid 0px;
background-color: #3379BA;
}

#menu
{
position: relative;
top: 0px;
left: 0px;
width: 770px;
height: 30px;
margin-left: 0px;
border: black solid 1px;
border-top: black solid 0px;
background-color: #3379BA;
}

#content
{
position: relative;
top: 0px;
left: 0px;
width: 770px;
height: 600px;
border: black solid 1px;
border-top: black solid 0px;
background-color: #3379BA;
padding: 0px;
}


<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>XForum 1.0</title>
<link rel="stylesheet" href="objektmall3.css" type="text/css" />
</head>

<body>

<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>

</body>
</html>


Någon som har några förslag?! :)

Mvh,
Fredrik
icaaq
2004-12-09, 22:17
body
{
margin:0;
padding:0:
}

mv icaaq
Type
2004-12-09, 22:17
Kanske något sånt här:

html, body{
margin:0px;
padding:0px;
}


Det brukar jag skriva och det kan lösa liknande problem... sen vet jag inte.. jag har inte satt mig in i ditt problem riktigt men testa!
jarvklo
2004-12-09, 22:22
Hmm...

Tänk också på att position:absolute i själva verket positionerar relativt sitt "omgivande blocks" interna "koordinatsystem" och inte i förhållande till det koordinatsystem som begränsas av webbläsarfönstrets kanter!!!
Iofs blir det inte så stor skillnad när den ligger i <body> (förutom marginaler/padding då som påpekats ovan ;) ), men... Det är en viktig detalj!!

Rekommenderar denna nyskrivna artikel i ämnet CSS och positionering: http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute
lillebror
2004-12-09, 22:22
Det gjorde visst susen! Är inte marginalen per default satt till 0px? Tack för det snabba svaret iaf!
jarvklo
2004-12-09, 22:25
Hmm...
Defaulten är olika i MSIE och Mozillorna.
I den ena är marginalen 0 men inte paddingen och i den andra är det tvärtom...
Hursomhelst får du som resultat per default några pixlars indrag på innehållet i <body> om du inte gör något åt det ;)
icaaq
2004-12-09, 22:33
Eftersom detta är ett svenskt forum skickar jag in den svenska varianten av jarvklo´s länk ;)

http://www.autisticcuckoo.net/arkiv.php?id=2004/12/07/relativt-absolut

mv icaaq
lillebror
2004-12-09, 22:36
Tack för alla tips...e nybörjare på det här området och söker mig fram längs den krokiga stigen :)
lillebror
2004-12-09, 22:37
Border-varianten "groove", jag får den ej att fungera i MSIE 6. Stödjer inte IE den varianten?
icaaq
2004-12-09, 22:51
Den stöds, men den visas anorlunda i olika webbläsare.
IE´s referens
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/borderstyle.asp
W3C´s referens
http://www.w3.org/TR/CSS21/box.html#border-style-properties

mv icaaq