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

centreer een div

Door wesley Overdijk op 05-10-2008 19:20
1.062 views
Hallo phpers en dus... divvers :d

Ik ben togh maar achter mijn muur vandaan geklommen, en heb besloten om te leren diven.

En guess what, het lukt, maar, het lukt me nu niet om het geheel te centreren...


dit is de container:


.geheel {
position: relative;
text-align: center;
width: 795px;
height: 582px;
}

dit is niet bepaald 'center' als ik het bekijk:

http://www.waysoflife.eu/solow/wolletjemeholletje/

alvast merci.
M
Mitchell
06-10-2008 10:34
HTML

<div class="outer">
 <div class="inner">
  eee
 </div>
</div>


CSS

div.outer { text-align: center; }
div.inner { text-align: left; margin: 0 auto; width: 800px; /* Definieer breedte */ }


Overigens, position zou ik zo en zo bijna nooit gebruiken voor een lay-out.
w
wesley Overdijk
06-10-2008 10:41
dat werkt niet, dat heb ik al geprobeerd. en ik doe dat wel omdat het niet even hoge afbeeldingen zijn. en het is nog niet center.
R
Rens nvt
06-10-2008 10:42
http://www.sitemasters.be/?pagina=tutorials/tutorials&cat=2&id=90
Wat veel mensen denk is dat de 'absolute' uitgaat van de gehele pagina, terwijl dit niet zo is, het gaat uit van de div waar hij inzit. Hierbij moet je wel de container div 'relative' geven omdat, anders neemt hij de pagina en niet de container.

En dit hangt maar net af van de browser... IE6 denkt hier anders over...

@Wesley: waarom kom je hier nu pas achter? als je een gecentreerde lay-out wilt is het het beste om te beginnen met een gecentreerde div, en daar de rest van je site in te gaan bouwen. Zo kun je uitsluiten dat latere CSS het centreren beinvloed, of je ziet per direct welke CSS dit doet...

Om te centreren via margin: 0 auto; is de beste manier, en om het ook nog compatible te krijgen met IE6 kun je onderstaande gebruiken (verschil zit hem in de text-align)

<html>
	<head>
		<title>Gecentreerde div</title>
		<style type="text/css">
			body {
				text-align			: center;
				margin				: 0px;
			}
			
			div#container {
				text-align			: left;
				margin				: 0 auto;
				width				: 800px;
				background-color	: #ffeedd;
			}
		</style>
	</head>
	<body>
		<div id="container">
			Content
		</div>
	</body>
</html>


* Als je hierin de div#container ook nog position: relative meegeeft, kun je als het goed is ook weer absoluut positioneren binnen die div...
* Scrollbalk kleuren === slecht idee...
M
Mitchell
06-10-2008 10:44
wesley schreef op 06.10.2008 10:41
dat werkt niet, dat heb ik al geprobeerd. en ik doe dat wel omdat het niet even hoge afbeeldingen zijn. en het is nog niet center.
Dan doe je toch echt iets fout, text-align centreren werkt altijd, maar die positions van je halen het overhoop. Zet is op de inner div een position: relative?
Rens schreef op 06.10.2008 10:42

Scrollbalk kleuren === slecht idee...
Mee eens. :)
w
wesley Overdijk
06-10-2008 10:50
scrollbalk is geen slecht idee, doet niks verkeerds, werkt alleen niet op sommige browsers.

en mensen lees alstjeblieft wat ik zeg, ik heb NOOIT wat aan div gedaan, en ik krijg dingen naar mijn hoofd, waar ik geen zak van snap. ik heb nooit aandacht besteed aan css, divjes, html, als het maar werkte, en tables. dus ik heb geen idee..
M
Mitchell
06-10-2008 10:58
wesley schreef op 06.10.2008 10:50
scrollbalk is geen slecht idee, doet niks verkeerds, werkt alleen niet op sommige browsers.

en mensen lees alstjeblieft wat ik zeg, ik heb NOOIT wat aan div gedaan, en ik krijg dingen naar mijn hoofd, waar ik geen zak van snap. ik heb nooit aandacht besteed aan css, divjes, html, als het maar werkte, en tables. dus ik heb geen idee..
Google -> Div html. Begin met makkelijke lay-outs en ga over een week/maand weer kijken naar de lay-out waar je momenteel aan werkt.
R
Rens nvt
06-10-2008 11:11
wesley schreef op 06.10.2008 10:50
scrollbalk is geen slecht idee, doet niks verkeerds, werkt alleen niet op sommige browsers.


Werkt inderdaad maar in een paar browsers, wat dat betreft ook geen slecht idee... je doet alleen iets wat je gebruiker niet verwacht, en wat dus vragen oproept... Design is NOOIT belangrijker dan de usability...

Wat betreft de opmerkingen over divjes, en dat je daar nog nooit mee gewerkt hebt... Start dan eens met een legel HTML file om de template opnieuw op te bouwen, als je nog nooit een goeie fundering gelegd heb gooi je ook niet ergens wat beton in, start met bouwen, en dan advies vragen over hoe je je fundering moet leggen...
R
Robert Deiman
06-10-2008 11:32
Waarom die text-align toch elke keer terug komt snap ik inet helemaal:

http://www.robertdeiman.net/vogels/

Kijk hier maar, de div staat keurig gecentreerd en er is geen text-align center te vinden en het centreren werkt ook gewoon in IE6.
T
Thijs Damen
06-10-2008 11:42
idd, makkelijkst is opnieuw beginnen en alleen geheel te maken. adh. van border: 1px solid black; kun je controleren of deze juist staat.


Daarnaast nog een tip voor wes, als je idd opnieuw begint, bezoek eens www.browsershots.org en test daar je design stap voor stap.


een laatste tip: begin je css met het volgende:

body { text-align: center; }
#geheel { width: 795px; margin: 0 auto; text-align: left; }


op deze manier moet alles gecentered zijn in zowel IE als in andere browsers.

(ps, maak geheel een ID niet een CLASS, ID's gebruik je maar 1 keer. Classes komen terug. geheel zul je nooit 2 keer gebruiken opdezelfde pagina)
R
Rens nvt
06-10-2008 11:43
@Robert: misschien zit dat hem in de px aanduiding die jij in je margin gebruikt... ga ik ff naar kijken binnenkort :D

Reageren

Inloggen om te reageren