défi CSS: Deux images de fond, colonne centrée avec fixe avec, min-height 100%

En un motdéfi CSS: Deux images de fond, colonne centrée avec fixe avec, min-height 100%

Je besoin d'une solution CSS pour les exigences suivantes:

Deux arrière-plan répétées verticalement images, alignées sur la gauche, alignées sur la droite
Une colonne centrée sur le dessus avec une largeur fixe et une hauteur minimale de 100%
Compatibilité inter-navigateur

Un peu plus de détails

Aujourd'hui, une nouvelle exigence pour mon projet actuel du site Web est venu: Une image de fond avec des gradients à gauche et à droite (remplace l'image d'arrière-plan du corps en cours). Le défi consiste maintenant à spécifier deux images d'arrière-plan différentes tout en conservant le reste de la spécification de mise en page. Malheureusement, la mise en page (simple) ne va pas avec les deux arrière-plans.

Ma mise en page est essentiellement centrée sur une colonne avec une largeur fixe:

#main_container { 
    background-color: white; 
    margin: 0 auto; 
    min-height: 100%; 
    width: 800px; 
}

En outre, il est nécessaire d'étirer la colonne à une hauteur minimale de 100%, car il y a pas mal de pages avec seulement peu de contenu. Les styles CSS suivants prennent soin de cela:

html { 
    height: 100%; 
} 

body { 
    background-image: url('old-background.png'); 
    margin: 0; 
    height: 100%; 
    padding: 0; 
}

Jusqu'ici tout va bien - jusqu'à l'arrivée de la nouvelle image de fond du corps avec des dégradés. J'ai essayé les solutions suivantes

Deux divs positionnés absolu derrière le conteneur principal
Une image définie avec le corps, l'un avec la classe html CSS
Une image définie avec le corps, l'autre avec un une grande div engendre le conteneur principal

Avec l'un ou l'autre d'entre eux, la solution de hauteur dynamique a été détruite. Soit le conteneur principal n'a pas étirer à 100% quand il était trop petit, ou l'arrière-plan est resté à 100% lorsque le contenu était en fait plus

Source

2010-04-05 laurent

Quelle est la largeur des images d'arrière-plan? –

Pekka, on dirait que vous avez supprimé votre premier commentaire. Je voulais dire ce que vous avez d'abord compris: deux images de fond dans le dos, et la colonne centrée sur le dessus avec backgroun blanc solide. – laurent

Donc, votre première solution de table fonctionnerait je suppose. Cependant, à propos de la largeur de l'image de fond: je peux réellement les rendre aussi large que nécessaire. La chose la plus importante est les gradients à gauche et à droite qui sont la raison réelle de l'exigence de deux images. – laurent

[refonte]

Je suis stupide. Très.
Problème: body doit avoir des images bg, #main_container doit avoir 800 largeur et au centre.
(approche Lousy: je faisais #main_container avec des images bg, non centré, 800px.)

Une nouvelle approche: Je suggère un div intérieur body et un span intérieur de cette nouvelle div:

<body> 
<div> 
<span> 
    <div id="main_container"> 
    Regular contents. 
    </div> 
</span> 
</div> 
</body>

Puis:

body { 
    background: url(img/bg_left.gif) repeat-y top left; 
} 
body>div { 
    background: url(img/bg_right.gif) repeat-y top right; 
} 
body>div: { 
    text-align: center; 
} 
body>div>span { 
    display: inline-block; 
    /* IE only likes this rule on elements that are inline by nature, thus the use of span. 
    I'm not sure 100% height will work on #main_container. */ 
}

Et vos règles régulières:

#main_container { 
    background-color: white; 
    margin: 0 auto; 
    min-height: 100%; 
    width: 800px; 
}

Source

2010-04-05 14:17:09 ANeves

Les deux images d'arrière-plan sont censées être derrière le #main_container. Le #main_container lui-même a un fond blanc uni. Je pense que la première version de ma question n'était pas assez précise - désolé pour ça. Je l'ai reformulé maintenant. – laurent

Je suis désolé, je ne comprends pas. Si vous dites que le '# main_container' a quelque chose à l'intérieur avec du BG blanc solide que vous ne pouvez pas changer, alors évidemment aucun arrière-plan sur n'importe quel parent ne le montrerait jamais. Vous voulez être plus précis? Je vais éditer ma réponse pour être plus explicite. – ANeves

Je lisais tout faux ... remanié la réponse à réellement ** rencontrer ** vos problèmes. Désolé pour le désordre. – ANeves

En utilisant un "tableau de mise en page", mon problème peut être résolu. Une solution CSS pure, cependant, serait préférée!

est ici une solution basée sur une table de travail:

table.layout { 
    border-collapse: collapse; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

table.layout td { 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 

td.layout_left { 
    background-image: url('background-left.png'); 
    background-position: top left; 
    background-repeat: repeat-y; 
} 

td.layout_center { 
    background-color: white; 
    width: 800px; 
} 

td.layout_right { 
    background-image: url('background-right.png'); 
    background-position: top right; 
    background-repeat: repeat-y; 
}

Et le code HTML:

<table class="layout"> 
    <tr> 
    <td class="layout_left">&nbsp;</td> 
    <td class="layout_center"> 
     <!-- content --> 
    </td> 
    <td class="layout_right">&nbsp;</td> 
    </tr> 
</table>

Source

2010-04-05 15:07:58 laurent

Modifié:

<body> 
    <div class="container"><div> 
    <div id="main_content"></div> 
</body>

Avec css:

html { 
    height: 100%; 
} 
body { 
    background: url(left.png) repeat-y top left; 
    background-attachment:fixed; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
div.container { 
    background: url(right.png) repeat-y top right; 
    height: 100%; 
    width: 100%; 
    position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */ 
} 
#main_content { 
    height: 100%; 
    width: 800px; 
    margin: 0 auto; 
    background-color: white; 
}

Edit:

Cette version fonctionne pour les navigateurs qui prennent en charge position:fixed (non IE6).

page Exemple: http://jsbin.com/ebozi3/4/edit

Source

2010-04-05 16:05:05 Joel

Salut Joel, merci pour votre réponse. Le problème avec votre solution est la hauteur div.container. Le conteneur reste à 100% même s'il y a plus de contenu. – laurent

+1 @laurent: supprimer 'height: 100%;' de 'div.container' devrait le faire fonctionner comme vous voulez. – ANeves

en supprimant la hauteur ou en la remplaçant par min-height fonctionne avec un contenu supérieur à 100%. mais la colonne blanche ne s'étire pas lorsque le contenu est inférieur à 100%. – laurent

défi CSS: Deux images de fond, colonne centrée avec fixe avec, min-height 100%

Répondre

Questions connexes