[CSS & HTML] Lay-out maken mbv layers (centreren?).

[Rexomnium]

Goed, een klein tijdje terug heb ik mijn website een nieuwe lay-out gegeven en uiteraard was ik daar erg trots op. Helaas zitten er nogal wat schoonheidsfoutjes in en komt de lay-out niet helemaal goed uit. Waarschijnlijk is dit te weiten aan het feit dat ik tabellen heb gemaakt om alle inhoud te positioneren. Achterhaald, ik weet het. Ik had CSS moeten gebruiken, ik weet het. Helaas weet ik te weinig van CSS om te doen wat ik wil doen.

Toch krijg ik van diverse mensen te horen dat ik layers moet gebruiken mbv CSS. Divjes zijn dé manier om een goede, prettige lay-out te krijgen. Dus ok, ik ga mij erin verdiepen.

Gisteren heb ik twee tutorials gedaan die ik heb gevonden op WC3.org. deze en deze.

Door deze tuts ben ik een hoop te weten gekomen van de wondere wereld die CSS heet, maar ik heb nog wel wat probleempjes die ik niet weet op te lossen. Ik kan dus nog steeds niet mijn lay-out in CSS krijgen.

Ik wil dit te zien krijgen:

code:

---------------
|  Headerpic  |
---------------
|M| Content |M|
|E|     |E|
|N|         |N|
|U|     |U|
|_|         |_|
  |         |
  |         |
  |         |
  |_________|

Dit geheel moet in totaal 750 px breed zijn en in het midden van de pagina worden gecentreerd.

Het eindresultaat moet er uitzien als deze site.

Wil iemand zo vriendelijk zijn om mij een eind op de goede weg te schoppen? Alvast mijn dank daarvoor.

[Harm]

Ik kwam laatst op GoT deze site tegen waar een behoorlijk aantal voorbeelden te vinden zijn van de meest voorkomende layouts. De layout die jij wil hebben staat er ook bij: hier.

[Tim Schuhmacher]

recht boven in staat jouw layout: http://www.thenoodleincid...als/box_lesson/boxes.html

edit:
Naah, net te laat

[ Voor 15% gewijzigd door Tim Schuhmacher op 30-05-2003 12:13 ]

[Rexomnium]

Thx *added to favorites*

Maar, die lay-out is uitgesmeerd over het hele scherm. Ik wil een lay-out die in het midden gecentreerd is en die 750px breed is.

Hoe krijg ik dat dan voor elkaar?

//nah allebei fout

Dit geheel moet in totaal 750 px breed zijn en in het midden van de pagina worden gecentreerd.

[ Voor 26% gewijzigd door Rexomnium op 30-05-2003 12:15 ]

[Hmzaniac]

Een div zonder content links met een breedte van x pixels, dan je content, en dan een div zonder content rechts met een breedte van x pixels.

Simpel toch?

[Rexomnium]

Nee, want dat is toch niet op alle resoluties hetzelfde? Het moet iets van relative zijn of zo, maar ik weet daar het stukje code niet van. Het moet dus op iedere resolutie 750 px breed zijn en in het midden gecentreerd...

[Eärendil]

Het kan netter door beide margins (left en right) op auto te zetten, zie ook http://www.allmyfaqs.com/faq.pl?Center_with_CSS

[Rickets]

Even snel:

Cascading Stylesheet:

#wrapper
{
    position         : absolute;
    left             : 50%;
    height           : auto;
    width            : 750px;
    margin-left      : -375px; /* -(width/2) */
}
#header
{
    width            : 750px;
}
#menu_left
{
    position         : absolute;
    width            : 125px;
}
#menu_right
{
    position         : absolute;
    left             : 625px;
    width            : 125px;
}
#content
{
    position         : absolute;
    width            : 500px;
    left             : 125px;
}

HTML:

<div id="wrapper">
    <div id="header">
        Header :-)
    </div>
    <div id="menu_left">
        Links
    </div>
    <div id="content">
        Content
    </div>
    <div id="menu_right">
        Rechts
    </div>
</div>

[Rexomnium]

Eärendil schreef op 30 mei 2003 @ 12:32:
Het kan netter door beide margins (left en right) op auto te zetten, zie ook http://www.allmyfaqs.com/faq.pl?Center_with_CSS

Rickets schreef op 30 mei 2003 @ 12:39:
Even snel:

Cascading Stylesheet:

#wrapper
{
    position         : absolute;
    left             : 50%;
    height           : auto;
    width            : 750px;
    margin-left      : -375px; /* -(width/2) */
}
#header
{
    width            : 750px;
}
#menu_left
{
    position         : absolute;
    width            : 125px;
}
#menu_right
{
    position         : absolute;
    left             : 625px;
    width            : 125px;
}
#content
{
    position         : absolute;
    width            : 500px;
    left             : 125px;
}

HTML:

<div id="wrapper">
    <div id="header">
        Header :-)
    </div>
    <div id="menu_left">
        Links
    </div>
    <div id="content">
        Content
    </div>
    <div id="menu_right">
        Rechts
    </div>
</div>

Ik ben weer een enorm eind op weg geschopt. Hartstikke bedankt.

[Verwijderd]

Als je alleen horizontaal wilt centreren, geef ik sterk de voorkeur aan het gebruik van text-align: center;

Cascading Stylesheet:

body
{
   text-align: center;
}

#wrapper
{
   width: 750px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

Waarom? Nou, maak met Rickets manier maar eens je venster smaller.
Als je zowel horizontaal als verticaal wilt centreren, dan ontkom je daar niet aan.

[Clay]

Die url is idd erg geniaal ook op glish (plat? gister deed die het nog) en bluerobot staan wat aardige truuks al is het meer van hetzelfde eigenlijk.

Alleen die "voice-family" hack vind ik eigenlijk maar niks.

Cascading Stylesheet:

voice-family:"\"}\"";

Dit zorgt er (blijkbaar) op IE5.x voor dat deze line door de accolade erin gezien wordt als een sluit tag voor de css rule. Daardoor kan je erna dingen neerzetten (bv voor moz, ie6 en opera) om de boxmodelverschillen te compenseren, een soort browsercheck dus.
Omdat die waarde inhoudelijk nergens op slaat wordt de voice-family daarna weer op inherit gezet.

Zo hoef je dan niet nog meer "container" divjes te gebruiken zonder padding of margin om daarin elementen te nesten die alle beschikbare ruimte nemen en zo niet uit hun voegen lopen met paddings en margins (door deze boxmodelverschillen), maar kan je dus met 1 element inc. padding en margin volstaan.
Alleen ben je wel de sjaak als er een browser komt die die regel wel snapt, maar toch de boxmodel fout doet. Verder is het wel een geniale vinden hoor, maar het jeukt gewoon.

Is het echt zo erg om een extra divje te hebben? "desnoods" categoriseer je de structuur met divjes, en zet je je content in P's.

[Bosmonster]

Harm schreef op 30 mei 2003 @ 12:11:
Ik kwam laatst op GoT deze site tegen waar een behoorlijk aantal voorbeelden te vinden zijn van de meest voorkomende layouts. De layout die jij wil hebben staat er ook bij: hier.

Jammer dat deze constant 1 pixel verspringt rechts... leuk trucje, maar dit maakt het voor mij al onbruikbaar.

Bovendien kost dit tig keer zoveel code en wazig 'gehack' als een andere mogelijke oplossing

[ Voor 9% gewijzigd door Bosmonster op 30-05-2003 14:55 ]

[Rexomnium]

Al gelukt

[ Voor 100% gewijzigd door Rexomnium op 31-05-2003 13:21 ]

[Rexomnium]

We gaan verder in deze topic

[ Voor 101% gewijzigd door Rexomnium op 31-05-2003 13:20 ]

[Willem]

OK