[xhtml / css] faux columns met bg image voor alle div's

[Verwijderd]

Topic nummer zoveel over dit onderwerp. Ik heb al een aantal dagen gespendeerd om alle topics mbt dit onderwerp hier op got te lezen en ook de rest van het internet afgezocht. Ik hoop dat ik jullie nog een keer kan aanzetten om samen een oplossing te verzinnen.

Ook ik wil een bestaande website waarvan de layout is bepaald met behulp van tabellen omzetten naar xhtml waarvan de layout wordt bepaald mbv div's.

Het idee:

code:

 -------------------------------------------------------------------------
| header met background-image van 86px hoog en 1024px breed               |
 -------------------------------------------------------------------------
| linkerkolom       |       Content kolom met een background image        |
| met background-   |       (image is zeer licht)logo met een witte       |
| image van 530px   |       achtergrond)                                  |
| hoog en 237px     |                                                     |
| breed             |                                                     |
|                   |                                                     |
|                   |                                                     |
|                   |                                                     |
--------------------------------------------------------------------------

Het idee is als volgt: De pagina toont ten alle tijden de header, de linker kolom is minimaal 530px hoog zodat het achtergrond plaatje getoond wordt en de content kolom is ook altijd 530px hoog zodat ook hier het achtergrond plaatje getoond wordt. De achtergrondkleur van de linkerkolom (groen) en de contentkolom (wit) heb ik opgenomen in een gifje van 2px hoog en 1024 breed. Deze gebruik ik als herhalende achtergrond voor de parent div.

Het probleem is nu dat ik het achtergrond plaatje van de content div niet kan tonen als er niet genoeg tekst in de content div geplaatst wordt. Ik kan deze div een hoogte geven van 530px net als de linkerkolom maar dan wordt de hoogte van de parent div (ingesteld op auto) nooit hoger dan 530px.

Hoe kan ik faux columns toepassen met 1achtergrond plaatje voor de parent div en ook achtergrond plaatjes die volledig zichtbaar zijn voor de child div's?

[ Voor 9% gewijzigd door Verwijderd op 17-05-2006 16:51 ]

[BtM909]

Totwaar wil je je background image (in je parent div) getoond hebben?

[Rowanov]

In firefox zou de min-height property je probleem oplossen, maar dit wordt niet ondersteund door IE. Er staat met wel iets bij dat IE height behandeld alszijnde min-height, waardoor een conditional comment met height voor IE het op zou lossen. Ik kijk het even voor je na.

edit:
JHS

[ Voor 11% gewijzigd door Rowanov op 17-05-2006 16:55 ]

[JHS]

Min-height gebruiken in plaats van height voor Fx, IE doet het wel juist met height .

edit:

Nouja, IE doet het natuurlijk verkeerd, maar doet in dit geval wat je beoogt . Je zal dus zoals * Rowanov al aangeeft een height moeten specificeren met behulp van conditional comments.

[ Voor 60% gewijzigd door JHS op 17-05-2006 16:55 ]

[Verwijderd]

Rowanov schreef op woensdag 17 mei 2006 @ 16:53:
In firefox zou de min-height property je probleem oplossen, maar dit wordt niet ondersteund door IE. Er staat met wel iets bij dat IE height behandeld alszijnde min-height, waardoor een conditional comment met height voor IE het op zou lossen. Ik kijk het even voor je na.

Met min-height ben ik inderdaad aan de slag geweest door eerst heigt op te geven en vervolgens min-heigt. IE leest als het goed is over de min-heigt heen. Vervolgens wordt de parent div volledig opgerecht in IE maar in firefox wordt de div niet groter dan de 530px plus de 86px van de header.

[Verwijderd]

BtM909 schreef op woensdag 17 mei 2006 @ 16:52:
Totwaar wil je je background image (in je parent div) getoond hebben?

Als de text in de content div meer ruimte inneemt dan de 530px hoogte van de linker bg image. Het lijkt dan als het ware dat de linker kolom langer wordt...

[JHS]

IE mag dan wel over de min-height heen lezen, maar Fx niet over de height. Als iets minimaal 530px is, en maximaal 530px (height), dan wordt het natuurlijk niet langer dan 530px . De height declaratie moet je dus aangeven met een hack, of beter: inline in een conditional comment, of nog beter: in een iefix.css bestand geïnclude via een conditional comment.

Zie ook deze testcase.

[Rowanov]

Heb even wat code gefrut en het werkt prima op de manier die ik aangaf:

Cascading Stylesheet:

<style type="text/css">
#container {
    width: 700px;
    overflow: auto;
}
#links, #content {
    float: left;
    min-height: 500px;
}
#links {
    width: 200px;
}
#content {
    width: 400px;
    }

</style>
<!--[if IE]>
<style type="text/css">
    #links, #content {
        height: 500px;
    }
    #container {
        height: 1%;
    }
</style>
<![endif]-->

HTML:

<div id="container">
    <div id="links">test</div>
    <div id="content">test</div>
</div>

De enige glitch die ik zo snel tegenkom is dat je een extra element nodig hebt om de floats te clearen, aangezien overflow: auto; niet meer gaat werken in IE. Mijn fout; als je in de conditional comment een height: 1% geeft voor IE, dan werkt de overflow auto weer (Code voorbeeld is aangepast!)

[ Voor 27% gewijzigd door Rowanov op 17-05-2006 17:11 ]

[Verwijderd]

JHS schreef op woensdag 17 mei 2006 @ 17:01:
IE mag dan wel over de min-height heen lezen, maar Fx niet over de height. Als iets minimaal 530px is, en maximaal 530px (height), dan wordt het natuurlijk niet langer dan 530px . De height declaratie moet je dus aangeven met een hack, of beter: inline in een conditional comment, of nog beter: in een iefix.css bestand geïnclude via een conditional comment.

Zie ook deze testcase.

Nou deze testcase was genoeg om het geheel goed te tonen. Nu nog even afwachten of het in IE7 ook gaat werken.

Ik ga nog even zoeken naar voorbeelden over geïnclude conditional comments

thx

[Verwijderd]

Rowanov schreef op woensdag 17 mei 2006 @ 17:06:
... code ...
De enige glitch die ik zo snel tegenkom is dat je een extra element nodig hebt om de floats te clearen, aangezien overflow: auto; niet meer gaat werken in IE. Mijn fout; als je in de conditional comment een height: 1% geeft voor IE, dan werkt de overflow auto weer (Code voorbeeld is aangepast!)

Hardstikke bedankt voor je moeite. Ik heb het nu opgelost zonder if statement maar zo:

Cascading Stylesheet:

_height: 530px;
min-height: 530px;

[ Voor 38% gewijzigd door Verwijderd op 18-05-2006 09:51 ]

[Rowanov]

Je weet wel dat je dan in de problemen komt met de release van IE7? De hacks worden niet ondersteund! De netste oplossing blijft een conditional comment; dat scheelt je met de IE7 release weer werk. Je zou er eventueel nog een conditional comment van kunnen maken die checkt op IE6 en lager, maar dat is aan jezelf

[Verwijderd]

Verwijderd schreef op donderdag 18 mei 2006 @ 09:50:
Hardstikke bedankt voor je moeite. Ik heb het nu opgelost zonder if statement maar zo:

Cascading Stylesheet:

_height: 530px;
min-height: 530px;

Als het een en ander moet valideren zou ik toch voor de conditional comments gaan.

[Verwijderd]

Rowanov schreef op donderdag 18 mei 2006 @ 11:06:
Je weet wel dat je dan in de problemen komt met de release van IE7? De hacks worden niet ondersteund! De netste oplossing blijft een conditional comment; dat scheelt je met de IE7 release weer werk. Je zou er eventueel nog een conditional comment van kunnen maken die checkt op IE6 en lager, maar dat is aan jezelf

okay dan, ik heb het nu als volgt opgelost:

in de head van de pagina heb ik twee css bestanden en eventueel een IE fix

HTML:

<link href="../layout/css/cim_style.css" rel="stylesheet" type="text/css" />
        <!--[if IE]>
            <style type="text/css">
                @import url(../layout/css/ie_fix.css);
            </style>
        <![endif]-->
        <link href="../layout/css/cim_menu.css" rel="stylesheet" type="text/css" />

vervolgens het css bestand voor alle browsers:

Cascading Stylesheet:

#container
{
    width:1024px;
    height:auto;
    background: url(../gfx/container_background.gif);
}
#header
{
    font-size: 12px;
    background: #FFFFFF url(../gfx/header.gif) no-repeat bottom left;
    height: 86px;
}
#left, #main
{
    min-height:530px;
    float:left;
}
#left 
{
    width: 237px;
    background: black url(../gfx/logo_left_home.gif) no-repeat top right;
    
}
#main 
{
    width: 747px;
    padding : 20px;
    background: #FFFFFF url(../gfx/logo_right.gif) no-repeat;
}

en als laatste de IE fix:

Cascading Stylesheet:

#left, #main 
{
    height: 530px;
}
#container 
{
    height: 1%;
}

Bedankt allemaal