pagina centreren

Status
Niet open voor verdere reacties.
feint

feint

Gebruiker
Lid geworden
3 jun 2008
Berichten
273
Hallo allemaal,

Ik ben bezig met een website voor wat vrienden en ik kom tegen een probleem.
het gaat om deze website
http://test.mathvandermullen.nl

Op mijn resolutie: 1366x768 staat die "ongeveer" in het midden.
Maar als ik naar de grootte resoluties ga kijken dan weer niet.

Nu zie ik overal dat ik bovenaan de css
Margin: 0 auto;
Padding: 0;

moet zetten maar als ik dat doe doet die niks.

Ik werk met position: absolute om posities aan te geven voor bepaalde onderdelen (zo heb ik dat zelf aangeleerd, weet niet hoe ik dat anders gemakkelijk kan doen)

Nu vraag ik mij af hoe ik de pagina gecentreerd krijg.

CSS

Code: 
* {
margin: 0px auto;
padding: 0;
}


body {
margin: 0; padding: 0;
background-attachement: fixed;
font-family: Tahoma, Verdana, Arial, "Trebuchet MS";
font-size: 12px;
color: #ffffff; text-align: center;
background: #282a34 url('images/background.png') repeat-x top center ;
width: 500px;



}



h1, h2, h3 {
Margin-bottom: 15px;
font-family:Tahoma, Verdana, Arial, "Trebuchet MS";
font-weight:400;
color:#ffffff;
}

h1 {
letter-spacing:-1px;
font-size:198%;
}

h2 {
font-color:#030;
letter-spacing:-1px;
}

p,ol,ul {
}

p {
color:white;
}

img {
border:none;
}

#drake2 {
background: #000 url('images/112.png') repeat-y;
width: 820px;
height: 170%;
position: absolute;
left: 220px;
}

#webcontainer {
	margin: 0 auto;
}



#container {
margin: 0 auto;
width: 500px;
text-align: left;
}

#page {
position: absolute; 
top: 212px; 
left: 80px;
width: 100%;
height: 100%;
margin:0 auto;
padding:0 25px;
}



#position {
margin: auto;
width: 1px;
text-align: left;
position: absolute;
top: 270px;
left: 548px;
}

#position2 {
margin: auto;
width: 1px;
text-align: left;
position: absolute;
top: 270px;
left: 225px;
}

#left {
	width: 296px;
	margin: 1px 0 33px 5px; padding: 0;
	float: left;
	text-align: left;
	
}
	.item2 {
		background: url('images/rbackground.png') repeat-y top center;
		width: 296px; 
		margin: 12px 0 0 0; padding: 0;
	}
		.item_foot2 {
			background: url('images/rfooter.png') no-repeat bottom center;
			width: 296px; height: 16px;
			margin-top: -1px; 
		}
		.item2 h2 {
			background: url('images/rec.png') no-repeat top center;
			width: 296px /*478*/; height: 43px /*43*/;
			text-align: center; 
			font-size: 12px;
		}
		.item2 h3 {
			background: url('images/rec2.png') no-repeat top center;
			width: 296px /*478*/; height: 43px /*43*/;
			text-align: center; 
			font-size: 12px;
		}
			html>body .item h2 {
				width: 136px; height: 34px;
			}
			.item2 p {
				font-weight: bold;
				padding: 0px 7px 11px 7px; margin: 0;
			}
			.item2 a {
				color: #CCCCCC;
				text-decoration: none;
}



#content {
	width: 478px;
	margin: 1px 0 33px 5px; padding: 0;
	float: left;
	text-align: left;
	
}
	.item {
		background: url('images/main_bg.jpg') repeat-y top center;
		width: 478px; 
		margin: 12px 0 0 0; padding: 0;
	}
		.item_foot {
			background: url('images/main_footer.jpg') no-repeat bottom center;
			width: 478px; height: 14px;
			margin: 0; padding: 0;
		}
		.item h2 {
			background: url('images/main_title.png') no-repeat top center;
			width: 478px /*478*/; height: 43px /*43*/;
			padding: 9px 299px 0 43px; margin: 0;
			text-align: center; 
			font-size: 12px;
		}
			html>body .item h2 {
				width: 136px; height: 34px;
			}
			.item p {
				font-weight: bold;
				padding: 7px 11px 7px 11px; margin: 0;
			}
			.item a {
				color: #CCCCCC;
				text-decoration: none;
}


#banner {
background: url(images/header.png) no-repeat;
width: 850px;
height: 250px;
position: absolute;
top: 5px;
left: 231px;
}


#sub {
background: url(images/sub.jpg);
width: 100%;
height: 150px;
position: absolute;
top: 50px;
}

#drake {
background: url(images/drake.png) no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 30px;
}

#bird {
background: url(images/bird.png) no-repeat;
width: 290px;
height: 100%;
position: absolute;
top: -40px;
left: 1024px;
}

#header ul {
list-style: none;
height: 31px;
overflow: hidden;
padding-left: 7px;
}

#header ul li, #header ul li a {
float: left;
}

#header ul li {
padding-right: 8px;
height: 31px;
}

#header ul li a {
display: block;
width: 190px;
text-align: center;
height: 39px;
line-height: 27px;
padding: 5px 0 0 0;
background: url('images/nav.png') no-repeat top;
color: #fff;
text-transform: uppercase;
font-size: 0.8em;
text-decoration: none;
overflow: hidden;
margin: 2px 0 0 0;
}

#header ul li a:hover, 

#header ul li.active a {
background-position: bottom;
margin-top: 0px;
}


#headerbackground {
background: url(images/sidebar.png) no-repeat;
width: 800px;
height: 50px;
position: absolute;
top: 243px;
left: 231px;
}


#align {
align: left;
}
Is nog niet opgeruimt gezien ik nog altijd bezig ben met de website, ben vandaag pas begonnen x)

een tweede vraag is hoe ik ervoor zorg dat de pagina op alle resoluties even groot lijkt, en of dit mogelijk is en of dit wel nuttig is.

alvast bedankt.
 
PHP: 
/* css */

marin: 0 auto;
zet de margin-top op 0 (geen waarde) en margin-right op 'auto'; dit heeft tot resultaat dat het element in het midden gaat staan. Echter:
Ik werk met position: absolute om posities aan te geven voor bepaalde onderdelen
Klik om te vergroten...
dit (margin: 0 auto) werkt niet op elementen die absoluut zijn gestijld; ze hebben een gefixde links/top, en negeren dus de margin-auto.

Ik zou proberen zo weinig mogelijk geen position:absolute te gebruiken als het niet nodig is. Mocht je niet weten hoe, neem dan eens grondig een aantal online css-tutorials door of koop een boek!


:thumb:
 
En waar precies zou ik naar moeten zoeken?

Gezien ik het altijd zelf heb aangeleerd was het voor mij gemakkelijker om het met position absolute te doen omdat ik altijd problemen heb dat als je de pagina verkleint dat alles dan weer verspringt.

weet niet hoe jij css heb geleerd. misschien dat je tips hebt waar ik kan zoeken?
 
Tsja... heel erg veel proberen, knippen, plakken, google'n, etcetera.

Ik raadje aan eens hier te kijken (beetje flauw, maar lees verder), en te beginnen met de 1e hit (die van W3C). Gewoon helemaal doorwerken, en ook echt daadwerkelijk begrijpen wat ze zeggen, niet zomaar alles aannemen.

Daaraast is het 'bouwen' van een met css (uiutgaande van een correcte html) niet heel lastig. Het idee is als volgt: bedenk (en schets) eerst eens hoe je wilt dat het eruit gaat zien. Dan begin je pas met je CSS code. Het voordeel van niet-absolute is dat je je site geweldig kan aanpassen aan elk scherm. Check mn site eens (http://that-guy.net), en resize je window. Als het goed is, blijft alles nogsteeds op zn plek staan! OP een absolute-site (zoals die van jezelf: http://www.mathvandermullen.nl/) zie je dat als je m resized, het of verdwijnt (te klein maakt) of een gigantische open plek maakt (te groot maakt).

Tsja, voor de rest is het gewoon lekker proberen, en nog meer proberen. Ikzelf gebruik position:absolte NOOIT in mn websites, maargoed, dat is natuurlijk aan de developer :)


:thumb:


ps. je kan ook eens een goed boek over CSS kopen, want daar leer je soms wel eens meer uit dan al die websites. Eens 20 euro neerleggen, en je hebt een geweldige referentie.​
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan