[css] column layout optimaliseren/generieker maken

[anoniem]

Voor een applicatie waaraan ik heb meegewerkt wordt de layout gebruikt die in onderstaande image wordt getoond. Vrij basic zoals je ziet: een header met o.a. de applicatienaam (is meestal een graphic), een navigation (UL) en een contentvlak met daarnaast een sidebar waarin boxes worden geplaatst die van toepassing zijn op dat deel van de applicatie. [img:7bc991a8e2]http://www.hurkmans.demon.nl/ct/layout/layout.gif[/img:7bc991a8e2] De content en sidebar zijn variabel van lengte. En de positionering is vast, m.a.w. de sidebar mag niet floaten. Bij verkleinen van het venster moet gewoon een horizontale scrollbalk worden getoond, de sidebar blijft gewoon strak rechts naast de content staan. De design afdeling heeft bedacht dat de content en sidebar omgeven moeten worden door lijntjes (aangegeven met rood) die altijd tot onderaan de pagina moeten doorlopen. Nu is dat opgelost door daar een background image van te maken op de body (repeat-y). Werkt prima. Maar deze werkwijze heeft als nadeel dat je als je bijvoorbeeld de kolombreedtes of lijnkleur wil aanpassen je ook de background image moet aanpassen. Dus dacht ik: kom laten we eens wat gaan stoeien met borders. Ik heb immers een aantal DIV's die zonder moeite een border kunnen krijgen. Maarrr...., dat was dus iets te simpel gedacht ;) Ik heb een aantal opties geprobeerd, maar telkens loop ik tegen een probleem aan. Waar ik intussen tegenaan ben gelopen: [list:7bc991a8e2] [*:7bc991a8e2]lijntjes van kortste kolom wil niet meeschalen naar totale hoogte, [*:7bc991a8e2]lijntjes vullen goed uit naar onderkant van de viewport, maar als 1 van beide kolommen langer is dan de viewport (overflow) dan is het lijntje van de andere kolom weg in dat deel wat buiten de viewport valt (als je naar beneden scrollt), [*:7bc991a8e2]alles lijnt goed uit, maar ik krijg standaard een verticale scrollbalk omdat ineens de height van de header en navigation bij de content-container (blok om content en sidebar) wordt opgeteld. [/list:u:7bc991a8e2] Intussen ben ik door mijn opties heen en op diverse css-gerelateerde sites ben ik nog geen oplossing tegengekomen. Er bestaan tig sites waarin multi-column layouts worden beschreven of waar de background optie wordt besproken. Maar dat is mijn probleem dus niet, zo'n layout heb ik al. Ik krijg alleen die vervloekte lijntjes niet goed :'( Iemand een idee waarmee ik weer verder kan? Of een site die ik over het hoofd heb gezien? p.s. Als er een oplossing is dan moet deze zeker werken in IE5.5, IE6 en MOZ (alles op Win). Alle andere zijn mooi meegenomen, maar niet noodzakelijk. p.s.2 excuses voor de wazige titel, kon niets bedenken wat de lading goed dekt. edit: ik heb een gestripte versie [url=http://www.hurkmans.demon.nl/ct/layout/layout.html]online gezet[/url].

[anoniem]

Heb je een template/code waar we mee kunnen testen? Sorry, ik ben liever lui dan moe. Geen zin om zelf iets in elkaar te flansen.

[anoniem]

Is het niet een idee om simpelweg de "plaatje-als-achtergrond"-oplossing te gebruiken icm een generieke afbeelding? Op die manier ben je je probleem kwijt en ik denk dat het op die manier het makkelijkst en meest cross-browser is. 't Is maar een idee, wellicht heb je er wat aan... - Bas

[anoniem]

[quote:22599973fe="mw22"]Heb je een template/code waar we mee kunnen testen? Sorry, ik ben liever lui dan moe. Geen zin om zelf iets in elkaar te flansen.[/quote:22599973fe] Ik ben niet lui, maar een beetje druk ;) Zal 's kijken of ik vanavond een voorbeeldje online kan zetten. [quote:22599973fe="BasHamar"]Is het niet een idee om simpelweg de "plaatje-als-achtergrond"-oplossing te gebruiken icm een generieke afbeelding? Op die manier ben je je probleem kwijt en ik denk dat het op die manier het makkelijkst en meest cross-browser is. [/quote:22599973fe] En hoe zie je dat generieke dan voor je? Qua kleurstelling kan ik me nog wel een voorstelling maken, maar bij gewijzigde positionering/breedtes of bijvoorbeeld het wegvallen van 1 van de lijnen in een gewijzigde grafische opzet weet ik niet hoe ik dat op zou moeten zetten.

[anoniem]

Helpt http://css-discuss.incutio.com/?page=TwoColumnLayouts niet? Misschien kan je ook de 3 column-versies aanpassen.

[anoniem]

[quote:892393f877="[m]"]Helpt http://css-discuss.incutio.com/?page=TwoColumnLayouts niet? Misschien kan je ook de 3 column-versies aanpassen.[/quote:892393f877] Heb nog geen tijd gehad om de site door te nemen. Dat ga ik nog zeker doen. Heb wel even snel een gestript voorbeeldje [url=http://www.hurkmans.demon.nl/ct/layout/layout.html]online gezet[/url].

[anoniem]

Zoiets ongeveer?: [code:1:25af9018fe] body { font-family: verdana,sans-serif; } #logo { background: transparent url(logo.gif) no-repeat; height: 115px; width: 100%; } #logo span { display: none; } #navigation ul { background: transparent url(nav_bg.gif) no-repeat; height: 28px; margin: 2px 0 0; list-style-type: none; } #navigation li { border-right: 1px solid #373d95; float: left; position: relative; padding: 0 .6em; margin: 0; } .contentwrapper { color: #000; } #contentwrapper{ background-color:green; position:relative; } #workspace { width: 600px; margin: 0px; } #sidebars { width: 200px; position:absolute;left:620px;top:0px;bottom:0px; _height:expression(this.parentNode.offsetHeight);/*lame IE hack*/ } #sidebars p { margin: 5px 0 20px; border: 1px solid #000; } /* borders */ #workspace { border-left: 1px solid red; border-right: 1px solid red; } #sidebars { border-left: 1px solid red; border-right: 1px solid red; } #contentwrapper { padding-right: 5px; border-right: 1px solid red; } [/code:1:25af9018fe] Ik heb dit alleen in de nieuwste versies van de drie win-browsers getest (dus geen IE5). Ik weet ook niet of dit is wat je wil. Het is ook zeker niet ideaal. Ik wil eigenlijk niet die lamme hack voor IE erin. Ik had ook eerst height:100% voor #sidebars ipv bottom:0; maar Opera rekte daarmee de hoogte niet op. Vreemd (bug?)

[anoniem]

[quote:10aebeb456="mw22"]Zoiets ongeveer?: [stukkie css][/quote:10aebeb456] Niet helemaal, maar dat geeft me wel wat aanknopingspunten om op verder te gaan. Dank daarvoor. Ik bedenk me nu dat ik me helemaal heb lopen blindstaren op de css, deze expressions heb ik helemaal niet aangedacht. En ik zou ook 's kunnen kijken naar het onderbrengen van functionaliteit/hacks in behaviours. [quote:10aebeb456="mw22"]Ik wil eigenlijk niet die lamme hack voor IE erin.[/quote:10aebeb456] Ach, daar kan ik wel mee leven :) Als het zonder kan is het wat mooier, maar wie het kleine niet eert, .... ;) btw. IE5.5 werkt ook.