Problem med DIV

9 svar · 308 visningar · startad av lillebror 9 dec. 2004

lillebrorMedlem sedan apr. 20041 597 inlägg

Frågan9 dec. 2004 22:13#1

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

icaaqMedlem sedan okt. 20005 273 inlägg

9 dec. 2004 22:17#2

[red]
body
{
margin:0;
padding:0:
}
[/red]

mv icaaq

TypeMedlem sedan mars 20021 239 inlägg

9 dec. 2004 22:17#3

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!

jarvkloMedlem sedan juli 20013 378 inlägg

9 dec. 2004 22:22#4

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

lillebrorMedlem sedan apr. 20041 597 inlägg

9 dec. 2004 22:22#5

Det gjorde visst susen! Är inte marginalen per default satt till 0px? Tack för det snabba svaret iaf!

jarvkloMedlem sedan juli 20013 378 inlägg

9 dec. 2004 22:25#6

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

icaaqMedlem sedan okt. 20005 273 inlägg

9 dec. 2004 22:33#7

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

lillebrorMedlem sedan apr. 20041 597 inlägg

9 dec. 2004 22:36#8

Tack för alla tips...e nybörjare på det här området och söker mig fram längs den krokiga stigen :)

lillebrorMedlem sedan apr. 20041 597 inlägg

9 dec. 2004 22:37#9

Border-varianten "groove", jag får den ej att fungera i MSIE 6. Stödjer inte IE den varianten?

icaaqMedlem sedan okt. 20005 273 inlägg

9 dec. 2004 22:51#10

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