[CSS] Container DIV moet horizontaal meerekken met Contents

[Makkelijk]

Ik heb het volgende probleem:

Bij een site heb ik een header, menu, contents en footer layer. Dit zit in een container met min-height: 100%, zodat de footer layer altijd onderaan de container geplakt zit. De header, menu en footer zijn altijd 100% breed. De contents layer is 78em breed en hierin zitten een aantal floating div's. Op lage resoluties, of bij een het gebruik van grote letters betekent dit dat de contents layer een scrollbar zal veroorzaken, dit is gewenst.

Het probleem is echter dat de header, menu en footer niet horizontaal meerekken. Het probleem lijkt een beetje op het bekende verticaal meerekken probleem met floating divs, waarvoor je een clear layer kan gebruiken als oplossing...

Ik heb al geprobeerd om de 100% brede layers breedte mee te geven en container 100% breed te maken, dit helpt niet. Zonder breedte of met width: auto (in principe zelfde) werkt het ook niet... In meerdere browsers getest.

CNN.com heeft een soortgelijke layout, maar heeft het probleem niet. Hun CSS is echter niet erg makkelijk doorheen te komen

PROBLEEM!

[ Voor 37% gewijzigd door Makkelijk op 09-04-2008 21:09 ]

[TheBorg]

Heb je #container ook 100% gemaakt?

[Makkelijk]

TheBorg schreef op woensdag 09 april 2008 @ 17:32:
Heb je #container ook 100% gemaakt?

yep, heb ik ook geprobeerd, ik zal het even in verhaal zetten

[Bozozo]

Is dit niet op te lossen met overflow?

[Pkunk]

Het probleem is echter dat de header, menu en footer niet horizontaal meerekken.

Ik zie dat niet terug in je plaatje. Ik zie wel een menu bovenaan wat niet helemaal mee rekt. Bedoel je dat soms?
Ik zie ook nergens een footer. Wat ik wel zie is een rode vlak waar wat wits uit steekt (wat idd lijkt op iets wat je met overflow prima kan oplossen). Maar als ik je relevante code gebruik, heb ik alleen maar een menutje wat aan de bovenkant van de pagina staat. Volgens mij is dit probleem prima op te lossen, maar ik snap niet helemaal wat je allemaal gedaan hebt. Kan je niet iets online zetten?

[Makkelijk]

Ik dacht dat het wel vrij duidelijk was, maar het blijkt van niet. Dus bij deze staat de code online op

Dankje alvast!

[Guru Evi]

Kijk eens naar mijn (recent herbouwde) website: http://rcbi.rochester.edu/, is dat zoiets dat je wilt (footer, header apart en rekbaar, content in het midden). Zoals je ziet zit in de source (gebouwd met een teksteditor) zijn mijn header en footer buiten de content container.

Ik zie geen probleem op jouw website zoals je screenshot (Safari, Firefox). Waarschijnlijk IE die zich niet houdt aan de XHTML en CSS standaarden (no surprise)

[ Voor 39% gewijzigd door Guru Evi op 09-04-2008 20:57 ]

[Makkelijk]

Guru Evi schreef op woensdag 09 april 2008 @ 20:55:
Kijk eens naar mijn (recent herbouwde) website: http://rcbi.rochester.edu/, is dat zoiets dat je wilt (footer, header apart en rekbaar, content in het midden). Zoals je ziet zit mijn header en footer buiten de content container.

Ik zie geen probleem op jouw website zoals je screenshot (Safari)

Ehhh, je hebt hetzelfde probleem als ik op je site...
Bekijk je header en footer eens op 800x600 venster

Ik heb het overigens met safari, opera, ie6, ie7 en firefox geprobeert

[ Voor 11% gewijzigd door Makkelijk op 09-04-2008 20:57 ]

[alex3305]

Geen probleem hier Alles rekt gewoon 100% mee... In FF3.0

Geef anders eens een screenshot oid

[ Voor 32% gewijzigd door alex3305 op 09-04-2008 21:03 ]

[Guru Evi]

Bedoel je dat de content (header en footer bij mij) in stukken breekt? Dat is bij mij gedaan zodat op mini-schermpjes zoals iPhone enzo, de volledige header en footer beschikbaar zou zijn zonder scrollen. Als je dat wilt oplossen, kun je een absolute min-width: instellen op de header (in pixels, stond bij mij origineel op 700px). Ik zie anders geen probleem op mijn schermen.

[ Voor 5% gewijzigd door Guru Evi op 09-04-2008 21:09 ]

[Pkunk]

Alex3305 schreef op woensdag 09 april 2008 @ 21:02:
Geen probleem hier Alles rekt gewoon 100% mee... In FF3.0

Geef anders eens een screenshot oid

idd hier ook alles prima. FF2 Safari en ie6

[Makkelijk]

Guru Evi schreef op woensdag 09 april 2008 @ 21:07:
Bedoel je dat de content (header en footer bij mij) in stukken breekt? Dat is bij mij gedaan zodat op mini-schermpjes zoals iPhone enzo, de volledige header en footer beschikbaar zou zijn zonder scrollen. Als je dat wilt oplossen, kun je een absolute min-width: instellen (in pixels, stond bij mij origineel op 700px). Ik zie anders geen probleem op mijn schermen.

Die balken moeten gewoon doorlopen, zoals op CNN.com...
Scrollen jullie wel naar rechts???

[ Voor 4% gewijzigd door Makkelijk op 09-04-2008 21:09 ]

[Guru Evi]

Ah, dat bedoel je dus (sorry). Als je een paar containers relatief width (of zonder min-width) instelt en je content absoluut en groter is dan kom je dat inderdaad tegen.

Dit komt omdat die containers opgebouwd wordt relatief aan de schermbreedte (van je browserscherm) en vervolgens verandert dat dus niet of er zou al een repaint/refresh moeten gedaan worden elke keer je scherm van resolutie verandert.

Als je dat absoluut niet wilt, moet je de min-width gelijk maken aan de absolute value of width of min-width van je content (zoals bij CNN, zie je dat de header/footer relatief min-width identiek aan de content heeft en een width van 100%) of je content ook relatief width maken (dat wordt inderdaad een probleem als je zoals bij mij een afschuwelijk groot absoluut object hebt die niet zomaar resized).

Bij CNN zie je bijvoorbeeld dat als je scherm kleiner is dan hun content je moet scrollen ook voor de header. Terwijl bij onze sites, de header/footer altijd past maar de content niet altijd. Bij ons is dat zodat mini-schermpjes altijd alle functionaliteit van de header hebben (requirement van PR).

[ Voor 41% gewijzigd door Guru Evi op 09-04-2008 21:22 ]

[Makkelijk]

Je oplossing is zo simpel, maar perfect. En ik schaam me dat ik niet aan min-width van container dacht...

Ik heb container min-width: 81em ingesteld, en hij doet het precies zoals ik wil nu....

Ik ga voor jou oplossing omdat ik het mooier vind. Maar tijdens het typen hiervan heb ik een andere oplossing bedacht en getest. Gooi een achtergrondimage bovenin body die de header kopieert, en gooi er eventueel nog een extra container layer in die ook een achtergrondimage aan de onderkant kopieert. Dan staan alle menu items netjes op het scherm en kun je alsnog naar rechts scrollen!

[Guru Evi]

Een andere oplossing die ik net veranderd heb aan onze site: in css, de body tag een min-width identiek aan je content zetten. Dan blijven je dingen wel staan aan de linkerkant maar de achtergrondkleur gaat mee (kijk maar).

Images hidden zetten of nog zo'n toeren werken wel, maar je moet ook denken aan de blinde mensen met hun readers, prentjes (imho) moeten informatie overdragen (zoals logo's), geen truukjes uithalen want de readers lezen al die alt-tags voor en om een hoopje onnodige informatie voor te lezen vinden ze waarschijnlijk niet leuk.

[ Voor 42% gewijzigd door Guru Evi op 09-04-2008 21:43 ]

[Makkelijk]

nouja idee was met background-image in css, dus dan heb je dat probleem niet, maar jou body oplossing is veel beter, ik ga dat morgen ook even met mijn site proberen!