pagina centreren

Status
Niet open voor verdere reacties.
J

jappertjeh

Gebruiker
Lid geworden
2 jan 2006
Berichten
432
Ik ben nu al een tijdje met html bezig, leer van alles maar 1 ding begrijp ik nog steeds niet. Misschien is het wel heel simpel maar hier de vraag:
je ziet bijna alle pagina's op t web in t midden uitgelijnd. vaak ook links en rechts dan zo'n willekeurig gekleurde leegte en de echte pagina in t midden. Hoe krijg ik dit voor mekaar?
 
Ik ga er maar even vanuit dat je niet alleen met html, maar ook met css bezig bent. Want zonder css is 't heel moeilijk om zo'n pagina in 't midden te krijgen zodat 't in alle browsers goed werkt, en met css is 't relatief simpel. Leuke vraag trouwens, zo'n basis-vraag.
't Is handig om van 't begin af aan rekening te houden met centreren. Als de pagina al helemaal af is en dan 'o ja, hij moet in 't midden' kán dat heel moeilijk worden.

Die kleur links en rechts is heel simpel. Meestal wordt aan de body 'n kleur gegeven. En overal waar niets anders staat, zie je die kleur dan.
Code: 
body {background: red;}
(Knalrood, zou ik je afraden...)
Als je links en rechts 'n verschillende kleur wilt is 'n simpele manier om 'n plaatje te maken van 1 px hoog en behoorlijk breed. Links maak je dan blauw, rechts rood, en je zet 't in 't midden van de body. Waar dan niets staat zie je links blauw, en rechts rood.
't Hoeft maar 1 px hoog, omdat 't wordt herhaald.
Code: 
body {background: url(rood-blauw-plaatje.jpg) 50% 0;}
Dit plaatje wordt bovenaan in het midden gezet en zo vaak als nodig is herhaald, zodat je 'n effen kleur krijgt. Die je dus alleen ziet waar niets anders staat.

't Centreren van de pagina doe je vrijwel altijd door alles in 'n div te zetten. De hele pagina, alles. Binnen die div werk je dan gewoon zoals normaal.
Die buitenste div kun je centreren op dezelfde manier zoals alle blok-elementen (elementen die zeg maar op 'n nieuwe regel beginnen, zoals 'n div, <p>, <h..>, e.d.). Deze manier werkt in álle browsers, zelfs in dat bug-paradijs Internet Explorer 6. Heel veel andere manieren werken niet in alle browsers.

Code: 
div#pagina {width: 770px; margin: 0 auto;}

Geef 'n breedte aan de div, anders werkt het niet. 770 px past ook nog binnen 'n 800x600-scherm, 1000px binnen 'n 1024x768-scherm. (Iets smaller dan 't scherm, want 'n scrollbar en zo nemen ook ongeveer 18 px in.)
't Hoeven geen px te zijn, procenten bijvoorbeeld mag ook, als er maar 'n breedte is.

margin: 0 auto;
Omdat er alleen 'n waarde voor boven en rechts staat, krijgen onder en links automatisch dezelfde waarde. Dus hier staat eigenlijk margin: 0 auto 0 auto.
Boven en onder niets, rechts en links auto. Auto betekent evenveel. (Ja, ik weet 't, rare naam, maar ik heb die naam niet verzonnen :D ). Ongeacht de grootte van het scherm/venster krijg je nu dus links en rechts dezelfde marge.

Vroeger, en helaas nog wel, gebeurde dit met <center>. Maar dat werkt niet in alle browsers probleemloos en heeft sowieso hordes bijwerkingen. Dit is de standaardmanier die in álle browsers goed werkt, zonder vervelende bijwerkingen.
 
Laatst bewerkt:
bedankt voor dit uitgebreide antwoord. Ik krijg het alleen niet voor elkaar. Dit is geen normale html code of ben ik gek?

als zeg maar dit mijn pagina is:

<body>
<div> enz.
blabla
</div>
</body>

hoe ziet mn pagina er dan volgens jou uit nadat ik die div pagina heb gedaan?
 
Nee, 't is geen 'normale' html, maar deels css. Als je niet weet wat css is, moet je dat maar even melden, er zijn tig gratis goede cursussen over op internet. css wordt gebruikt voor de opmaak, hoe het eruit ziet.
(Misschien begrijp ik je vraag verkeerd, maar ik leid eruit af dat je geen css kent).
Centreren hoort bij de opmaak, dus gebruik je er css voor. 't Wordt dan zoiets:

Code: 
<body style="background: red;">
<div style="width: 700px; margin: 0 auto;">
<!-- Hier komt de 'gewone' pagina -->
</div>
</body>

Die div, en dus de inhoud daarvan, zal nu altijd in het midden komen te staan.
Normaal genomen zet je css in 'n apart bestand, zodat het voor alle pagina's op 'n site geldt. Dat is vaak heel handig. Als je dan de achtergrond van <body> van red in green wilt veranderen, hoef je dat maar op één plaats te doen.
En wat achter 'style' staat is dus css. Hier staat het tussen de html, maar beter is dus om het apart te zetten.

Aanvulling voor ik even ga rennen: css werkt alleen maar goed als je ook 'n geldig doctype hebt. Anders heb je vrijwel zeker verschillen tussen aan de ene kant Internet Explorer, en aan de andere kant alle andere browsers.
 
Laatst bewerkt:
ik ken css wel hoor, maar gebruik het gewoon niet of amper eigenlijk. Is inderdaad wel handiger maar moet daar nog de echte handigheid in krijgen. Ik maak dus dit bestand voor html:

html>
<head>
<title>De titel van de pagina.</title>
<link href="bestandsnaam.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hier komt de inhoud van je pagina.
</body>
</html>

en in mijn bestandsnaam.css zet ik div style="width: 700px; margin: 0 auto;"
 
Laatst bewerkt:
Ja, precies.
Met nog twee opmerkingen (misschien overbodig...)
Die div moet je 'n id geven:
HTML: 
<div id="hier-komt-de-pagina">

En dan in je css
Code: 
div#hier-komt-de-pagina {...}

En het is dus nodig om aan het begin van je pagina 'n geldig doctype te zetten. Als je dat niet doet, schiet IE in 'quirks mode' en ziet je lay-out er (totaal) anders uit.
Geldige doctypes:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
 
Toch nog een ding. Ik heb hem keurig in het midden staan nu, dat is gelukt. Heel simpel eigenlijk trouwens. Maar die achtergrondkleur zoals in je beschrijving, als ik dat doe word alles grijs behalve 1 plaatje de achtergrond die dus al wit was. Verder is het achter mijn tekst, en achter de knoppen die als navigatie dienen grijs. Wat gaat er mis?
 
Ik begrijp je vraag niet helemaal.
Als je in je css
Code: 
body {background: red;}
of 'n andere kleur zet, zou de achtergrond gewoon rood moeten worden.

Of
Code: 
body {background: url(pad-en-zo-naar-plaatje.jpg);}

Om onduidelijke redenen heeft IE 6 wel 'ns moeite met alleen background, dan zou je background-color of background-image kunnen gebruiken.

In principe hebben divs en dergelijke geen achtergrondkleur, maar zijn doorzichtig. Als je tekst en knoppen geen achtergrondkleur/afbeelding hebben, zou je daar doorheen de kleur van body moeten zien.
 
Dat laatste wat ik heb is dus het geval. Het is doorzichtig dus komt mn body background kleur dr doorheen. Dat wil ik niet. Kan dat anders?
 
Ah, duidelijk.
Jazeker. Dan geef je gewoon alles wat niet de achtergrondkleur moet hebben 'n eigen kleur of achtergrond-afbeelding, dan is het niet meer doorzichtig.
Dat kan vrij simpel. Je hele pagina staat nu in die div die je voor centreren gebruikt. Als je die div 'n eigen achtergrondkleur geeft, zal dat ook de achtergrondkleur van de rest worden, van alles wat geen eigen achtergrond heeft.

Voor je die body 'n achtergrondkleur gaf was 't trouwens al net zo, maar dat valt niet op, omdat 'n body standaard wit is als er niets is opgegeven.
 
oke ik heb het volgende gedaan:
in html bestand:

body bgcolor="#000000"
<div id="helepagina">

in css bestand:

div#helepagina {width:700px;margin:0 auto; background-color:#FFF}

nu word de hele pagina zwart (#000000) behalve 1 afbeelding die al wit was.
wat gaat er mis?
 
Dat kan allerlei oorzaken hebben. Daarom is het op zich ook handig om eerst met de 'grote' onderdelen zoals body, div#helepagina, menu, enz. te beginnen, en die dan geleidelijk aan in te gaan vullen. Als je dan ook voortdurend controleert, zie je gelijk als iets opeens verdwijnt of zo.

Ik zou bgcolor bij body niet gebruiken, Je kunt die kleur ook in de css opgeven. Alles op één plek in je css is veel minder verwarrend. En in html 5 dat eraan zit te komen is bgcolor gewoon helemaal verboden...

Nu de weggetoverde kleur ('t is net m'n geld, dat verdwijnt ook spoorloos :) )
'n Blok-element zoals div#helepagina krijgt standaard de breedte van z'n ouder of de opgegeven breedte. Dat is hier dus 700px.
De hoogte wordt automatisch precies genoeg om wat erin staat weer te kunnen geven. Maar dat is niet zo als je dingen float of position: absolute of position: fixed gebruikt. Die dingen hebben geen invloed op de hoogte van de div.

Als er dus alleen maar gefloate en absolute of fixed gepositioneerde dingen in staan, heeft de div geen hoogte, dus ook geen achtergrondkleur, want er is niets om op te vullen. Als je div#helepagina even 'n border geeft van 1px, zie je bovenaan waarschijnlijk 'n streep van 2px verschijnen: boven- en onderkant van de border, zonder iets ertussen.

Er zijn wel oplossingen voor, maar dan moet je je code even hier neerzetten. Of 'n link naar waar hij online staat.
Als je dingen hebt gefloat, kun je onderaan (net boven de </div> van div#helepagina)
'n extra div of zo neerzetten, die je in de css alleen clear: both meegeeft.
Hoeft geen div te zijn, mag ook iets anders zijn wat er al staat en waar je dit bijzet.
Omdat dat extra element niet wordt gefloat, gaat die de hoogte van de div bepalen, En omdat die onderaan staat, krijgt de div nu de goede hoogte.
Maar dit werkt weer niet bij position: absolute of fixed.
 
zal er binnekort even naar kijken. Ben er morgen en overmorgen niet dus je hoort later mijn bevindingen en uiteraard nog meer vragen. Alvast super bedankt voor alles tot nu toe:D
 
Ik zie 't wel komen. Veel plezier / sterkte, afhankelijk van wat je gaat doen.
 
Daar ben ik weer. Heb even nagekeken hoe het in mn pagina staat, en dat clear:both er in gezet, maar hou het probleem. Komt omdat er wat absolute tags instaan( ook in spans, is dat erg?). fixed staat er niet in. Wat doen we aan die absolute tags om de achtergrond alsnog kleur te geven zonder dat alles meekleurt?
 
Ja, die absolute tags zijn heel, heel, heel erg vreselijk erg :)

In grote lijnen werkt 't zo. Alles wat in je html staat wordt gewoon van boven naar onder en van links naar rechts op 't scherm gezet. Dat heet de normale 'flow'.
fixed gebruik je niet, dus dat laten we lopen ('t werkt trouwens wat dit betreft net als absolute).
Als je nu iets float of als je iets 'n absolute positie geeft, dan staat het niet meer in de normale flow. Het telt helemaal niet meer mee voor de lay-out, je had 't net zo goed weg kunnen laten voor wat betreft de rest van de pagina. (Dit klopt niet helemaal voor wat betreft float, maar om 't even simpel te houden.)
Dus als je 'n div 'n achtergrond wilt geven, en daarin staan gefloate of absoluut gepositioneerde dingen, dan tellen die helemaal niet mee. Ze hebben ook geen enkele invloed op de hoogte van de div. En die hoogte heb je nou net nodig voor de achtergrond.

Als 't om gefloate elementen gaat, kun je dat opvangen door bijvoorbeeld iets eronder te zetten met clear: both. (Sommige mensen zijn hier fel op tegen, omdat 't opmaak met inhoud mengt, maar die stammenstrijd zal ik je even besparen.)
clear: both heeft geen enkel effect als 't om absoluut gepositioneerde elementen gaat. Dan moet je 'n andere manier vinden om de div die de achtergrond moet krijgen de juiste hoogte te geven. Dat kan door 'n bijvoorbeeld 'n height te geven. Maar dat werkt weer niet altijd bij tekst, want als iemand de lettergrootte verandert of zo klopt de hoogte vaak niet meer.
Als 't om kolommen gaat wordt vaak 'faux columns' gebruikt: nepkolommen.

Je zult dus op een of andere manier die div waar de achtergrond in moet komen 'n hoogte moeten geven. Misschien kun je die spans niet absoluut positioneren? Dan tellen ze weer mee voor de hoogte van de div.
Op zich zijn dit vaak wel leuk puzzels. Maar als je er helemaal niet uitkomt, dan moet je hier maar even je code neerzetten, of 'n link geven naar waar hij online staat.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan