[HTML & CSS] header/menu/content layout in divs - Softwareontwikkeling

donderdag 14 september 2006 10:23

Acties:

Verwijderd

Topicstarter

Hoi. Tijdje geleden dat ik hier heb gepost (met m'n vorige probleem

), maar ik kom er weer eens niet uit!

Ik ben bezig met een webapplicatie in .NET, waarmee ik jullie niet tot in 't eind der dagen zal gaan vervelen. Het grote probleem zit em in het krijgen van de juiste layout met de juiste scrollbalkjes en dergelijke.

De pagina bestaat uit een header, een menu en een content deel (niet spannends tot zover). met een table is zoiets makkelijk te maken, maar ik wil 't netjes semantisch correct, omwille van de compatibiliteit met text-to-speech programma's (als je in tables werkt krijg je vaak verrotte resultaten: 'table of two rows and three columns' oid.).

Een heel erg simpel voorbeeld van hoe het er uit moet komen te zien heb ik in dit plaatje geprobeerd te visualiseren.

De header (rood) is een <x> aantal pixels hoog (vaste waarde, geen %).
Het menu (blauw) is qua hoogte 100% van de overgebleven hoogte, breede is een vaste waarde in pixels.
Het content gedeelte is de overgebleven ruimte.

Hier op tweakers heb ik wel een voorbeeld gevonden wat dicht in de buurt komt, maar toch niet helemaal werkt zoals gehoopt. Dit is hier te vinden:
http://erik.kabel.utwente.nl/got/test11.html

Met dit voorbeeld zijn een aantal problemen:
Er wordt gebruik gemaakt van (lees: gehackt met) border models. Dit zou op zich een goede oplossing zijn, ware het niet dat IE7 deze hack niet meer slikt.
Opera herkent het css attribuut 'box-sizing'. mozilla/firefox herkent '-moz-box-sizing'. Deze worden beide op 'border-box' gezet, zodat ze zich gedragen zoals IE doet als ie het doctype niet herkent (dus met een xml declaratie bovenaan in dit geval).
IE7 slikt echter de xml declaratie wel, waardoor hij gewoon in z'n strict rendering mode werkt. Aangezien ik geen zin heb om de boel te moeten fixen als IE7 uitkomt, is dit dus niet werkbaar.

Ik wordt op 't moment een beetje moedeloos van het non-stop gehack met CSS, dus als iemand dit ooit fatsoenlijk heeft weten op te lossen, je doet me er een groot plezier mee als je me weet te helpen!

donderdag 14 september 2006 10:26

Acties:

Rowanov

Kop eens wat anders...

Niet echt moeilijk, je geeft je header een kleurtje en gebruikt een repeatende achtergrond op de body, die je de illusie van twee kolommen geeft. Dat heet faux-collumns en heeft vrijwel alleen maar voordelen

donderdag 14 september 2006 10:31

Acties:

Verwijderd

Topicstarter

Rowanov schreef op donderdag 14 september 2006 @ 10:26:
Niet echt moeilijk, je geeft je header een kleurtje en gebruikt een repeatende achtergrond op de body, die je de illusie van twee kolommen geeft. Dat heet faux-collumns en heeft vrijwel alleen maar voordelen

Hier had ik inderdaad ook wat over gevonden. Wat ik me dan afvraag: hoe krijg ik een divje (de content) in het groene vlak in mijn plaatje? Op zo'n manier dat 't precies de grootte is van de breedte + hoogte van 't scherm, minus de breedte van de linker kolom en de header? Vooral 't verkrijgen van de breedte is gewoon zwaar irritant.
Als ik er niet uitkom dan zal ik 't met een javascriptje moeten doen, maar da's misschien nog wel ranziger dan tables

donderdag 14 september 2006 10:58

Acties:

Rowanov

Kop eens wat anders...

Je denkt in tabellen, je moet het meer in deze richting zoeken:

HTML:

<body>
  <div id="container">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
</body>

Heb alleen geen tijd om een css voorbeeld er bij te typen, maar het zou opzich lonen om wat faux-collumn voorbeelden en tutorials op internet op te zoeken. Dit stukje behandelen ze namelijk pracktisch allemaal.

donderdag 14 september 2006 11:40

Acties:

Verwijderd

Topicstarter

Goed, met faux columns dan...

Waar ik vast kom te zitten is bij het automatisch schalen van de content. Ik heb even een test pagina in elkaar gedraaid om het een en ander te illustreren.

http://www.sliver.nl/faux/main.html

Het groene vlak is de boosdoener, de rest lukt wel geloof ik. De breedte wordt mooi automatisch geschaald, daar hoef ik niets aan te doen. De hoogte wil niet. Ik heb 't geprobeerd met paddings/margins, positionering, ik kom er niet uit

Als je daar een oplossing voor hebt ben ik klaar denk ik...

donderdag 14 september 2006 13:36

Acties:

DamadmOO

Ik heb eigenlijk nog een vraag voor de TS.

Als er veel content in je groene gedeelte komt. Wil je dan dat je het hele browser scherm naar beneden scrolled (je verliest dan dus je header en je menu). Of wil je dat de text binnen het groene gedeelte scrolled.

donderdag 14 september 2006 13:42

Acties:

Rowanov

Kop eens wat anders...

Zet de faux achtergrond eens op je body, dat lost iig een gedeelte van de problemen op. Je groene vlak is namelijk absoluut gepositioneerd dus staat het niet meer in de flow, waardoor je container blijft hangen op het punt waar je menu stopt. Dit gedrag vertoont je body niet

Daarnaast is de overflow: scroll een beetje zinloos en veroorzaakt die allerlei irritante scrollbalken.

Cascading Stylesheet:

body {
  margin: 0;
  padding: 0;
  background: green url('faux-bg.gif') repeat-y;
}
#header {
  width: 100%;
  height: 100px;
  background-color: red;
}
#menu {
  width: 150px;
}
#content {
  position: absolute;
  left: 150px;
  top: 100px;
  margin-bottom: -100px;
}

Ik heb even de vrijheid genomen je code te optimaliseren, zodat het er ook nog netjes uitziet als je menu langer wordt dan de content div

Zie ook dat ik "html" uit de eerste selector heb geknikkerd en alle overbodige meuk geschrapt heb

DamadmOO schreef op donderdag 14 september 2006 @ 13:44:
Dat is normaal wel zo. maar misschien wil de TS dat alleen die div scrolled. dan heeft hij die scrollbar dus wel nodig

Ik ging er vanuit dat het een recht toe, recht aan pagina zou zijn waar het menu ook langer kan zijn (moet je in een dynamische setting altijd rekening mee houden). Als dit niet zo is, excusez moi

[ Voor 60% gewijzigd door Rowanov op 14-09-2006 13:51 ]

donderdag 14 september 2006 13:44

Acties:

DamadmOO

Rowanov schreef op donderdag 14 september 2006 @ 13:42:
Daarnaast is de overflow: scroll een beetje zinloos en veroorzaakt die allerlei irritante scrollbalken.

Dat is normaal wel zo. maar misschien wil de TS dat alleen die div scrolled. dan heeft hij die scrollbar dus wel nodig

donderdag 14 september 2006 14:08

Acties:

Verwijderd

Topicstarter

Hmm, nee, mijn fout om het niet aan te geven. Het menu+header blijven altijd zichtbaar, het enige dat scrollen moet (liever niet, maar bij veel content wel) is het groene vlak. Dat is ook de reden dat ik die scrollbars geforceerd in m'n styles heb gegooid, om te kijken waar die scrollbars precies terecht komen. Ik ben namelijk vaak leuke oplossingen tegen gekomen, maar daarbij komen de scrollbars, en dan met name de onderste scrollbar, buiten het scherm. Dat is het enige probleem wat ik nu heb

In ieder geval al heel erg bedankt voor de hulp!

donderdag 14 september 2006 14:11

Acties:

Rowanov

Kop eens wat anders...

Zorg dan wel, door wat te spelen met afmetingen en margin/padding van de #container en zijn content, dat je alleen maar een verticale scrollbar krijgt. Horizontale scrollbar kreeg je namelijk net wel in FF.