PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
Z

Div's centreren

Door Zero XT op 28-07-2006 01:58
929 views
Goedendag,

Ik probeer mijn site in het midden van de pagina te krijgen maar het wil niet echt lukken
hij moet alleen horizontaal gecentreerd worden
in layer 34 zitten alle andere layers
voorbeeld: http://84.83.30.85/SkullDump

dit is de css die ik gebruik voor mijn site:


body {
border: 0;
padding: 0;
text-align: center;
height: 96%;
}

#Layer34 {
width: 955px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 9%;
}



#Layer1 {
    position:absolute;
    left:0px;
    top:0px;
    width:180px;
    height:77px;
    z-index:8;
    background-image: url(Afbeeldingen/Grid 3.gif);
    background-image: url(Afbeeldingen/Grid%204.png);
}
#Layer2 {
    position:absolute;
    left:180px;
    top:0px;
    width:626px;
    height:77px;
    z-index:9;
    background-color: #191919;
}
#Layer3 {
    position:absolute;
    left:806px;
    top:0px;
    width:190px;
    height:77px;
    z-index:10;
    background-image: url(Afbeeldingen/Grid%201.PNG);
}
body {
    background-color: #191919;
}
#Layer4 {
    position:absolute;
    left:0px;
    top:77px;
    width:996px;
    height:25px;
    z-index:11;
    background-image: url(Afbeeldingen/Balk%201.PNG);
}
#Layer5 {
    position:absolute;
    left:0px;
    top:102px;
    width:180px;
    height:350px;
    z-index:12;
    background-image: url(Afbeeldingen/Grid%202.PNG);
}
#Layer6 {
    position:absolute;
    left:180px;
    top:102px;
    width:816px;
    height:350px;
    z-index:13;
    background-color: #354147;
}
#Layer7 {
    position:absolute;
    left:0px;
    top:450px;
    width:996px;
    height:25px;
    z-index:14;
    background-image: url(Afbeeldingen/Balk%201.PNG);
}
#Layer8 {
    position:absolute;
    left:0px;
    top:477px;
    width:180px;
    height:133px;
    z-index:15;
    background-image: url(Afbeeldingen/Grid%203.gif);
}
#Layer9 {
    position:absolute;
    left:25px;
    top:118px;
    width:98px;
    height:27px;
    z-index:9;
}
#Layer10 {
    position:absolute;
    left:25px;
    top:310px;
    width:98px;
    height:27px;
    z-index:10;
}
#Layer11 {
    position:absolute;
    left:25px;
    top:246px;
    width:98px;
    height:27px;
    z-index:11;
}
#Layer12 {
    position:absolute;
    left:25px;
    top:182px;
    width:98px;
    height:27px;
    z-index:12;
}
#Layer13 {
    position:absolute;
    left:25px;
    top:214px;
    width:98px;
    height:27px;
    z-index:13;
}
#Layer14 {
    position:absolute;
    left:25px;
    top:278px;
    width:98px;
    height:27px;
    z-index:14;
}
#Layer15 {
    position:absolute;
    left:25px;
    top:150px;
    width:98px;
    height:27px;
    z-index:15;
}
#Layer16 {
    position:absolute;
    left:937px;
    top:78px;
    width:62px;
    height:25px;
    z-index:16;
}
#Layer17 {
    position:absolute;
    left:2px;
    top:576px;
    width:136px;
    height:25px;
    z-index:17;
}
#Layer18 {
    position:absolute;
    left:2px;
    top:568px;
    width:64px;
    height:43px;
    z-index:18;
    background-color: #FFFFFF;
}
#Layer19 {
    position:absolute;
    left:176px;
    top:0px;
    width:225px;
    height:78;
    z-index:19;
}
#Layer20 {
    position:absolute;
    left:363px;
    top:511px;
    width:83px;
    height:57px;
    z-index:19;
}
#Layer21 {
    position:absolute;
    left:194px;
    top:121px;
    width:703px;
    height:25px;
    z-index:18;
    background-color: #191919;
}
#Layer22 {
    position:absolute;
    left:183px;
    top:596px;
    width:321px;
    height:13px;
    z-index:19;
}
#Layer23 {
    position:absolute;
    left:264px;
    top:270px;
    width:78px;
    height:39px;
    z-index:20;
}
#Layer24 {
    position:absolute;
    left:279px;
    top:207px;
    width:59px;
    height:33px;
    z-index:20;
}
#Layer25 {
    position:absolute;
    left:39px;
    top:0px;
    width:66px;
    height:40px;
    z-index:20;
}
#Layer26 {
    position:absolute;
    left:25px;
    top:134px;
    width:98px;
    height:27px;
    z-index:20;
}
#Layer27 {
    position:absolute;
    left:25px;
    top:171px;
    width:98px;
    height:27px;
    z-index:21;
}
#Layer28 {
    position:absolute;
    left:25px;
    top:207px;
    width:98px;
    height:27px;
    z-index:22;
}
#Layer29 {
    position:absolute;
    left:25px;
    top:243px;
    width:98px;
    height:27px;
    z-index:23;
}
#Layer30 {
    position:absolute;
    left:25px;
    top:279px;
    width:98px;
    height:27px;
    z-index:24;
}
#Layer31 {
    position:absolute;
    left:25px;
    top:315px;
    width:98px;
    height:27px;
    z-index:25;
}
#Layer32 {
    position:absolute;
    left:25px;
    top:387px;
    width:98px;
    height:27px;
    z-index:26;
}
#Layer33 {
    position:absolute;
    left:25px;
    top:351px;
    width:98px;
    height:25px;
    z-index:27;
}



Iemand enig idee hoe ik dit kan oplossen?
Dat ik als ik een resolutie heb van 1280x786 de site netjes horizontaal is gecentreerd op het beeldscherm?
Z
Zero XT
28-07-2006 15:02
heb 2 vraagjes:

1. moet die doctype zin ook in een css?
2. ik heb het geprobeerd wat u zei over het centreren van div's door deze code erin te typen:


#mijndiv {
    margin: 0px auto;
    width: 900px; /* of wat je wilt */
    border: 1px solid black; /* ter controle, later weghalen */
}


alleen het werkt niet

nu heb ik zit in mijn css:


body {
border: 0;
padding: 0;
text-align: center;
height: 96%;
}

#Layer34 {
margin: 0px auto;
    width: 900px; /* of wat je wilt */
    border: 1px solid black; /* ter controle, later weghalen */
}



#Layer1 {
    position:absolute;
    left:0px;
    top:0px;
    width:180px;
    height:77px;
    z-index:8;
    background-image: url(Afbeeldingen/Grid 3.gif);
    background-image: url(Afbeeldingen/Grid%204.png);
}
#Layer2 {
    position:absolute;
    left:180px;
    top:0px;
    width:626px;
    height:77px;
    z-index:9;
    background-color: #191919;
}
#Layer3 {
    position:absolute;
    left:806px;
    top:0px;
    width:190px;
    height:77px;
    z-index:10;
    background-image: url(Afbeeldingen/Grid%201.PNG);
}
body {
    background-color: #191919;
}
#Layer4 {
    position:absolute;
    left:0px;
    top:77px;
    width:996px;
    height:25px;
    z-index:11;
    background-image: url(Afbeeldingen/Balk%201.PNG);
}
#Layer5 {
    position:absolute;
    left:0px;
    top:102px;
    width:180px;
    height:350px;
    z-index:12;
    background-image: url(Afbeeldingen/Grid%202.PNG);
}
#Layer6 {
    position:absolute;
    left:180px;
    top:102px;
    width:816px;
    height:350px;
    z-index:13;
    background-color: #354147;
}
#Layer7 {
    position:absolute;
    left:0px;
    top:450px;
    width:996px;
    height:25px;
    z-index:14;
    background-image: url(Afbeeldingen/Balk%201.PNG);
}
#Layer8 {
    position:absolute;
    left:0px;
    top:477px;
    width:180px;
    height:133px;
    z-index:15;
    background-image: url(Afbeeldingen/Grid%203.gif);
}
#Layer9 {
    position:absolute;
    left:25px;
    top:118px;
    width:98px;
    height:27px;
    z-index:9;
}
#Layer10 {
    position:absolute;
    left:25px;
    top:310px;
    width:98px;
    height:27px;
    z-index:10;
}
#Layer11 {
    position:absolute;
    left:25px;
    top:246px;
    width:98px;
    height:27px;
    z-index:11;
}
#Layer12 {
    position:absolute;
    left:25px;
    top:182px;
    width:98px;
    height:27px;
    z-index:12;
}
#Layer13 {
    position:absolute;
    left:25px;
    top:214px;
    width:98px;
    height:27px;
    z-index:13;
}
#Layer14 {
    position:absolute;
    left:25px;
    top:278px;
    width:98px;
    height:27px;
    z-index:14;
}
#Layer15 {
    position:absolute;
    left:25px;
    top:150px;
    width:98px;
    height:27px;
    z-index:15;
}
#Layer16 {
    position:absolute;
    left:937px;
    top:78px;
    width:62px;
    height:25px;
    z-index:16;
}
#Layer17 {
    position:absolute;
    left:2px;
    top:576px;
    width:136px;
    height:25px;
    z-index:17;
}
#Layer18 {
    position:absolute;
    left:2px;
    top:568px;
    width:64px;
    height:43px;
    z-index:18;
    background-color: #FFFFFF;
}
#Layer19 {
    position:absolute;
    left:176px;
    top:0px;
    width:225px;
    height:78;
    z-index:19;
}
#Layer20 {
    position:absolute;
    left:363px;
    top:511px;
    width:83px;
    height:57px;
    z-index:19;
}
#Layer21 {
    position:absolute;
    left:194px;
    top:121px;
    width:703px;
    height:25px;
    z-index:18;
    background-color: #191919;
}
#Layer22 {
    position:absolute;
    left:183px;
    top:596px;
    width:321px;
    height:13px;
    z-index:19;
}
#Layer23 {
    position:absolute;
    left:264px;
    top:270px;
    width:78px;
    height:39px;
    z-index:20;
}
#Layer24 {
    position:absolute;
    left:279px;
    top:207px;
    width:59px;
    height:33px;
    z-index:20;
}
#Layer25 {
    position:absolute;
    left:39px;
    top:0px;
    width:66px;
    height:40px;
    z-index:20;
}
#Layer26 {
    position:absolute;
    left:25px;
    top:134px;
    width:98px;
    height:27px;
    z-index:20;
}
#Layer27 {
    position:absolute;
    left:25px;
    top:171px;
    width:98px;
    height:27px;
    z-index:21;
}
#Layer28 {
    position:absolute;
    left:25px;
    top:207px;
    width:98px;
    height:27px;
    z-index:22;
}
#Layer29 {
    position:absolute;
    left:25px;
    top:243px;
    width:98px;
    height:27px;
    z-index:23;
}
#Layer30 {
    position:absolute;
    left:25px;
    top:279px;
    width:98px;
    height:27px;
    z-index:24;
}
#Layer31 {
    position:absolute;
    left:25px;
    top:315px;
    width:98px;
    height:27px;
    z-index:25;
}
#Layer32 {
    position:absolute;
    left:25px;
    top:387px;
    width:98px;
    height:27px;
    z-index:26;
}
#Layer33 {
    position:absolute;
    left:25px;
    top:351px;
    width:98px;
    height:25px;
    z-index:27;
}
Joren de Wit
28-07-2006 15:05
Kris Kuiper schreef op 28.07.2006 15:02
heb
1. moet die doctype zin ook in een css?


Nee doctype hoor niet in een css stylesheet. Dat is immers geen op zichzelf staande pagina, maar wordt geladen binnen een andere pagina...
Jan Koehoorn
28-07-2006 15:06
Voorbeeld:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Een gecentreerde div</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style type="text/css">
		#container {
			margin: 0px auto;
			width: 800px;
			border: 1px solid blue;
			padding: 8px;
		}
	</style>
</head>

<body>
	<div id="container">
		<h1>Deze div is gecentreerd</h1>
		<p>En er staat wat tekst onder...</p>
	</div>
</body>
</html>
Z
Zero XT
28-07-2006 15:08
Maar ik heb een css geincluded en heb geen container gebruikt (weet ook niet hoe) sorry
ik ben niet goed hierin
K i p
28-07-2006 16:05
csshulp!!!!!!! waar blijf je!!!!!!
Jan Koehoorn
28-07-2006 16:19
Kris Kuiper schreef op 28.07.2006 15:08
Maar ik heb een css geincluded en heb geen container gebruikt (weet ook niet hoe) sorry
ik ben niet goed hierin

Heb je een link naar een voorbeeld?
Jan Koehoorn
28-07-2006 18:15
Je site wil niet naar het midden omdat je bijna alle layers een position: absolute hebt gegeven. Door dat te doen wordt hun positie op het scherm absoluut en is hij niet meer te beinvloeden door de div waar ze zich in bevinden.

Reageren

Inloggen om te reageren