Website centreren

[HiddenWolf]

Ik ben bezig voor de lol, en de oefening een website te bouwen.
Nu heb ik de layout met divs en een extern css-stijlblad geregeld.

Ik werk nu op 800x600 (een oude laptop), en hiervoor is mijn site dus op het moment ook alleen maar geschikt.
Een mooie oplossing lijkt me, dat als de gebruiker een grotere resolutie gebruikt dan waar ik rekening mee heb gehouden, de hele website door de browser in het middan van de pagina weergegeven word, dus met zowel links als rechts vrije ruimte, in plaats van de site links in de hoek weergeven.

Is dit mogelijk in HTML4 Strict en CSS?
Kan iemand mij uitleggen hoe ik dit kan doen? Of beter nog linken naar een tutorial die mij wijzer maakt?

[RM-rf]

ja

code:

BODY, HTML { width: 100%; text-align: center; }

als je echter (absoluut) gepositioneerde DIVs gebruikt zal je er mogelijk meer aan moeten veranderen, maar dat kunnen wij, zonder inzicht in je code niet oplossen (en eerlijk gezegd zou ik je eerst aanraden om eens op te zoeken wat er precies allemaal mogelijk is met CSS, alvorens het anderen te vragen)

kijks eens op
http://glish.com/css/
http://w3schools.com/css/

[ Voor 9% gewijzigd door RM-rf op 30-04-2004 11:38 ]

[HiddenWolf]

Ik ben aan het zoeken, en geef aan dat ik graag een tutorial onder ogen krijg, ik kon hier alleen geen oplossing voor vinden.

Tot nu toe. ;-)

[MarkvE]

RM-rf schreef op 30 april 2004 @ 11:37:

code:

BODY, HTML { width: 100%; text-align: center; }

Vergeet je niet de...

code:

margin: 0px auto;

...die toegepast moet worden op de (container) div?

[ Voor 4% gewijzigd door MarkvE op 30-04-2004 11:45 ]

[HiddenWolf]

Dit is de manier waarop ik het voorlopgi heb opgelost. Zit te twijfelen of ik nog een divje erboven ga plakken.

(hoe post je code als code hier?)

/* Layout */
*.left { position: absolute; top: 0px; left: 0px; width: 150px; margin: 20px; padding: 10px; background-color: #FFFFCC; }
*.right { position: absolute; top: 0px; right: 0px; width: 150px; margin: 20px; padding: 10px; background-color: #FFFCCC; }
*.center { margin: 20px 190px 20px 190px; padding: 10px; background-color: #CCCCCC; }

[Verwijderd]

http://annevankesteren.nl/test/templates/center-h © anne

kan me niet voorstellen dat je dat niet kan vinden, anne heeft het al heel vaak gepost

[ Voor 7% gewijzigd door Verwijderd op 30-04-2004 12:28 ]

[Noork]

Misschien 1 grote tabel centreren met een vaste of variabele breedte. Bijvoorbeeld vast breedte 770. Dan krijg je zoiets als got. Of bijvoorbeeld 90%. Altijd mooi gecentreerd met nog wat loze ruimte aan de zijkanten.

[DJSmiley]

ik deed het altijd op de lompe manier: een frameset maken: *,800,*

[Verwijderd]

Ik zou toch maar CSS gebruiken ipv frameset...

Voor alle UBB Tags:

http://gathering.tweakers.net/forum/faq

[bat266]

als je 1 div wil centreren kun je ook in de css-defenitie van die div margin-left:auto;en margin-right:auto; zetten
dan doet ie t ook

[Grijze Vos]

Noork schreef op 30 april 2004 @ 12:35:
Misschien 1 grote tabel centreren met een vaste of variabele breedte. Bijvoorbeeld vast breedte 770. Dan krijg je zoiets als got. Of bijvoorbeeld 90%. Altijd mooi gecentreerd met nog wat loze ruimte aan de zijkanten.

* Grijze Vos zijn ranzigheid alert begint te draaien.

Dat is toch echt een zwaar oude loze methode hoor. Wat hierboven staat, is gewoon prima, jouw voorstel is echt niet netjes.

Cascading Stylesheet:

Body {
  width: 100%;
}

DIV#main {
        position: relative; /* (of static) */
        width: 751px;   /* max total width for everything */
        margin: auto;  /* zonder dit werkt het in w3c conforme browsers niet */
}

Zet die Div met ID=main als eerste div in je page, en je bent klaar.

[Grijze Vos]

DJSmiley schreef op 30 april 2004 @ 12:38:
ik deed het altijd op de lompe manier: een frameset maken: *,800,*

Gelukkig staat daar het woordje 'deed'. Kheb mn schoonbroertje, die net is begonnen met webdesign voor wat bedrijfjes, ook even op die fout gewezen. Hij had een frameset met 5 frames, om het geheel helemaal te centreren.

Een tip, als je voor 800*600 wilt werken, maak het ding dan geen 800 pixels breed, er is nog zoiets als een scrollbar. Ikzelf werk meestal rond de 750 pixels, je kunt natuurlijk ook rond de 770 zitten als hierboven vermeld werd.

[Clay]

wat ook op 't voorbeeld op anne z'n site staat; zonder text-align:center; op de body werkt het niet in IE5.x (en ik meen ook niet in IE6 in quirksmode). Die moet je dan ff herstellen met een text-align:left; op de #main, of gewoon op * {}

[HiddenWolf]

code:

/* Layout */
html, body  { margin: 0px; padding: 0px; }
#top        { position: absolute; top: 0px; left: 0px; height: 200px; margin: 20px; padding: 10px; background-color: #CCCCCC}
#left       { position: absolute; top: 200px; left: 0px; width: 150px; margin: 20px; padding: 10px; background-color: #FFFFCC; }
#right      { position: absolute; top: 200px; right: 0px; width: 150px; margin: 20px; padding: 10px; background-color: #FFFCCC; }
#center     { position: relative; top: 200px; margin: 20px 170px 20px 170px; padding: 10px; background-color: #CCCCCC; }

Dit werkt, hoewel de rechter-div te ver uit de rand blijft staan in zowel firefox als editplus, en de top-div rechts helemaal door loopt tot de rand, in editplus, en juist niet ver genoeg doorloopt in firefox. wat dus ook niet de bedoeling is.

Doe ik iets fout of ligt dit aan de browser?

[ Voor 5% gewijzigd door HiddenWolf op 30-04-2004 13:09 ]

[henkleerssen]

je kunt met layers en divjes werken..... maar waarom niet gewoon met frames? kijk eens op www.dnachip.nl .. staat ook gecentreerd, dankzij frames.. de zijkanten zijn dan wel empty HTML pagina's.

[Sjeik]

Schaamteloos gejat van een andere tweaker, maar het werkt prima!

code:

#center {
  position: absolute;
  height: 480px;
  width: 640px;
  top: 50%;
  left: 50%;
  margin-top: -240px; /* de helft van je height */
  margin-left: -320px; /* de helft van je width */
}

Zo staat ie echt in het midden, zowel horizontaal als verticaal.

[crisp]

henkleerssen schreef op 30 april 2004 @ 13:06:
je kunt met layers en divjes werken..... maar waarom niet gewoon met frames? kijk eens op www.dnachip.nl .. staat ook gecentreerd, dankzij frames.. de zijkanten zijn dan wel empty HTML pagina's.

Omdat frames eigenlijk meer nadelen hebben dan voordelen tegenwoordig, en het dus prima met css op te lossen is.

Maar dit onderwerp is echt een zoekvraag hoor.

En voor de topicstarter: als je niet weet hoe je code moet posten, dan heb je ws de GoT FAQ ook niet doorgelezen, want daar staat een mooie opsomming van alle beschikbare UBB tags