Nu blir jag snart galen - div och center

5 svar · 355 visningar · startad av Nson 5 mars 2005

NsonMedlem sedan juni 2001145 inlägg

Frågan5 mars 2005 21:33#1

Försöker centrerera div's. Detta fungerar super fint om jag sätter en storlek i pixlar. Men på sidans topp vill jag ha en div som är 100%.. Då blir allt höger centrerat. Både i IE och i Firefox.

body {
	font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #999999;
	padding:0px;
	margin:0px;
	margin-left:auto; 
	margin-right:auto;
}

 ... (klippt)

#header
{
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	background: #7365c6;
	padding-bottom: 0px;
	margin: 0px auto;
	padding-top: 0px;
	height: 57px;
	text-align: center;
}
 ... (klippt)

Detta resulterar i att den blir vänster ställd. Snälla jag ber o bönar på mina bara knän! kanelbulle till den som hjälper mig :)

Skall ochså säga att jag har på samma sida en rad andra div's som snyggt är centrerade med skillnaden att dom har en fast bredd på 750px.

frankofMedlem sedan jan. 20016 874 inlägg

5 mars 2005 22:04#2

Förklaringen är att webläsaren inte har en susning om hur brett 100% är, och då blir det svårt att centrera.

R:testat lite med din kod nu, och det fungerar som du tänkt dig, det måste vara något annat fel, url?

NsonMedlem sedan juni 2001145 inlägg

5 mars 2005 22:10#3

Löjligt att den inte vet det... Men hur löser jag nu detta då... Suckar... Nån som har ett bra tips...

frankofMedlem sedan jan. 20016 874 inlägg

5 mars 2005 22:17#4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body {
	font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	background: #999999;
	padding:0px;
	margin-top:0px;
	margin-left:auto; 
	margin-right:auto;
}
#header
{
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	background: #7365c6;
	padding-bottom: 0px;
	margin:auto;
	padding-top: 0px;
	height: 57px;
	text-align: center;
}
.content
{
	width: 750px;
	padding-right: 0px;
	padding-left: 0px;
	background: #7365c6;
	padding-bottom: 0px;
	margin:auto;
	padding-top: 0px;
	text-align: justify;
}
</style>
<title></title>
</head> 
<body>
<div id="header"><h1>heading</h1></div>
<div class="content"><p style="width:100%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac felis sit amet metus feugiat malesuada. Sed ultricies purus quis augue. Nullam sed eros vel sem ultrices commodo. Donec vulputate odio id eros. Suspendisse potenti. Suspendisse nisl. Donec eu urna. Quisque dictum, quam vitae pharetra convallis, dui urna accumsan ante, quis posuere orci augue sit amet eros. Curabitur pharetra interdum mi. Quisque cursus purus sed lacus. Aliquam ut nulla blandit eros luctus nonummy. Aenean non leo. Maecenas ultricies purus ac purus. Fusce vel orci ac velit sagittis ullamcorper. Proin sit amet elit. Nam posuere urna sit amet felis. Proin gravida arcu id sem. Ut iaculis quam ut diam.</p></div>
</body> 
</html>

Detta fungerar väl?

NsonMedlem sedan juni 2001145 inlägg

6 mars 2005 08:43#5

Nej fick inte till det i alla fall.. Gjorde så att jag la en : background med bild i stället och kunde då plocka bort 100% ...

frankofMedlem sedan jan. 20016 874 inlägg

6 mars 2005 11:48#6

Nson skrev:

Nej fick inte till det i alla fall.. Gjorde så att jag la en : background med bild i stället och kunde då plocka bort 100% ...

Vad fick du inte till att fungera, min kod? den fungerar, det är något annat på din sida som strylar till det.