Centreren

Status
Niet open voor verdere reacties.
B

bartvj

Gebruiker
Lid geworden
21 okt 2009
Berichten
49
Het is me al gelukt om de website te centreren met margin: 0 auto; maar nu heb ik een divtag die breder is dan de andere divtags ( de andere 900 px en deze 1160 px).
Hoe kan ik er voor zorgen dat alles gecentreerd onder elkaar staat?. Nu is het zo dat de bredere divtag aan de linker zijde van de andere divtags begint, en rechts veel uitsteekt. Het moet zo zijn dat het links en rechts evenveel uitsteekt.

[smallimg]http://img594.imageshack.us/img594/3549/printscreen.jpg[/smallimg]
(Klikbaar)

Heeft iemand een oplossing? Ik werk met Adobe Dreamweaver CS4
 
Laatst bewerkt door een moderator:
CSS meesturen is ook handig.

Waarschijnlijk heb je nu een Wrapper van 900px breed, deze heeft margin: auto;. Maak de breedte hiervan 1160px breed. Je hebt dan je MenuBalk, deze is als het goed is ook 1160px breed. Dan heb je ook nog je Content, deze wil je 900px breed hebben en centreren. Deze heeft dus width: 900px; en margin: auto;.

Dus je code zou er ongeveer zo uit kunnen zien.
Code: 
#Wrapper {
 width: 1160px;
 margin: auto;
}
#MenuBalk {
 width: 1160px;
}
#Content {
 width: 900px;
 margin: auto;
}

Er is ook nog een andere oplossing, maar ik denk zelf dat deze beter is.
 
ik begrijp er eigenlijk niets van, dit is de code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
	width: 900px;   /* toevoegen */
	margin: 0 auto; /* toevoegen*/
	text-align:center;
	background-color: #333;
}

#apDiv1 {
	position:absolute;
	top:150px;
	width: 22px;   /* toevoegen */
	height:35px;
	margin: 0 auto; /* wijzigen */
	z-index:1;
}
#apDiv2 {
	position:absolute;
	top:185px;
	width:900px;
	height:600px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	top:20px;
	width:370px;
	height:130px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	top:150px;
	width:1160px;
	height:35px;
	margin: 0 auto; /* wijzigen */
	z-index:4;
	background-image: url(Optie%203.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18pt;
}

-->
</style>
</head>

<body>
<div id="apDiv2"><img src="../B Art/Images/Untitled-8.png" width="900" height="600" /></div>
<div id="apDiv3"><img src="top.png" width="370" height="130" /></div>
<div id="apDiv4"></div>
</body>
</html>
 
Ik geloof dat dit het gewenste resultaat oplevert:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
	width: 1160px; /**/
	margin: 0 auto;
	text-align:center;
	background-color: #333;
}

#apDiv1 {
	position:absolute;
	top:150px;
	width: 22px;
	height:35px;
	margin: 0 auto;
	z-index:1;
}
#apDiv2 {
       /**/
	width:900px;
	height:600px;
        margin: 185px auto; /**/
	z-index:2;
}
#apDiv3 {
	position:absolute;
	top:20px;
	width:370px;
	height:130px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	top:150px;
	width:1160px;
	height:35px;
	margin: 0 auto;
	z-index:4;
	background-image: url(Optie%203.png);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18pt;
}

-->
</style>
</head>

<body>
<div id="apDiv2"><img src="../B Art/Images/Untitled-8.png" width="900" height="600" /></div>
<div id="apDiv3"><img src="top.png" width="370" height="130" /></div>
<div id="apDiv4"></div>
</body>
</html>
 
technisch gezien klopt het nog niet, omdat ook de divtag met het logo naar links is geplaatst. Maar dmv aanpassingen van de breedte is het logo een stuk weer terug naar rechts geplaatst. De divtag zelf staat niet goed, maar levert wel het gewenste resultaat op.
 
Je moet de boel in dat geval (1160-900)/2 pixels naar rechts verplaatsen. Oftewel:
Code: 
#apDiv3 {
height:130px;
margin-left:130px; /**/
position:absolute;
top:20px;
width:370px;
z-index:3;
}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan