divs hauteur égale - compliquée avec plusieurs arrière-plans

J'essaye de créer un site Web et son design me force à utiliser plusieurs arrière-plans. Je parle d'une technique qui ressemble à cecidivs hauteur égale - compliquée avec plusieurs arrière-plans

<div id="left"> 
     <div id="left_1"> 
       <div id="left_2"> 

       </div> 
     </div> 
    </div> 

#left{ 
width:235px; 
margin:0; padding:0; float:left; 
background:url(../images/left_middle.jpg) top left repeat-y; 
} 
#left_1{ 
width:235px; 
margin:0; padding:0; float:left; 
background:url(../images/left_top.jpg) top left no-repeat; 
} 
#left_2{ 
width:218px; 
margin:0; padding:0 0 0 17px; float:left; 
background:url(../images/left_bottom.jpg) bottom left no-repeat; 
}

En même temps il faut créer une structure de hauteur égale div/colonne pour la page.

<div id="container"> 

    <div id="left"> 
      <div id="left_1"> 
       <div id="left_2"> 

       </div> 
      </div> 
    </div> 

    <div id="center"> 

    </div> 

    <div id="right"> 
      <div id="right_1"> 
       <div id="right_2"> 

       </div> 
      </div> 
    </div> 
</div>

Les divs #left, #center et #right devraient avoir la même hauteur et sembler plein avec l'arrière-plan. J'ai lu beaucoup de techniques sur internet à propos de equal-height-divs mais en ajoutant le problème des backgrounds multiples, il m'est impossible de trouver une solution ici. Je me demandais si quelqu'un pouvait m'aider là-bas. Merci à l'avance

alt text http://img341.imageshack.us/img341/6418/problemo.jpg

Source

2010-02-22 zekia

Je suis confus. Quel est le problème des fonds multiples que vous rencontrez? Il semble que la disposition des colonnes ne soit pas un problème, mais vous dites "Les divs #left, #center et #right devraient ... avoir l'air complet avec le fond" - que voulez-vous dire? –

La colonne de gauche utilise trois images d'arrière-plan qui ressemblent à une, mais permettent également à la hauteur de la colonne de se développer sans causer de problème de mise en page. Une image de fond est répétée-y, une image reste toujours en haut de la div et une image reste toujours en bas. Le problème est que la div #left ne devrait pas avoir la même hauteur aveC#center et #right, mais # left1, # left2 et # left3 aussi. – zekia

si vous ne me dérange pas en utilisant javascript/jquery, vous pouvez ajouter à votre code html:

<script type='text/javascript' 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 

<script type='text/javascript'> 
$(document).ready(function() { 

    // get the heights 
    l = $('#left_2').height(); 
    r = $('#right_2').height(); 
    c = $('#center').height(); 

    // get maximum heights of all columns 
    h = Math.max(c, Math.max(l, r)); 

    // apply it 
    $('#left_2').height(h); 
    $('#right_2').height(h); 
    $('#center').height(h); 
    }); 
</script>

Source

2010-02-22 15:19:01 widyakumara

J'ai testé ce que vous avez suggéré et ça marche bien :) Pensez-vous qu'il est risqué d'utiliser javascript pour ce problème? – zekia

bien, autant que je peux dire, aucun risque du tout, comme la plupart des navigateurs modernes le supportent, et la plupart des gens le permettent probablement [citation nécessaire: P] il y a plusieurs solutions de css seulement, tho. mais parfois, lorsque des images d'arrière-plan sont impliquées, il devient difficile, surtout parce que nous devons faire face à la compatibilité des navigateurs croisés. de toute façon, vérifiez ces: - http://www.ejeliot.com/blog/61 - http://redmelon.net/tstme/3cols2/ - http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – widyakumara

Epargnez-vous la peine et il suffit d'utiliser des tables pour la mise en page externe. Ils travaillent juste.

Voici l'exemple de table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<head> 
<title>left</title> 
    <style type="text/css"> 
     .side { background-color:blue;color:white;width:235px;vertical-align:top;margin:0px;padding:0px;} 
     .left3 {padding:0px 0px 0px 17px;vertical-align:top;} 
     .mainContent {margin:0px;vertical-align:top;} 
     table {width:100%;height:100%;border-collapse:collapse;} 
     html,body{width:100%;height:100%;margin:0px;} 
    </style> 
</head> 

<body> 
<table> 
    <tr> 
     <td class="side">left 
      <table> 
       <tr><td class="side">left side 2 
        <table><tr><td class="left3">Left Side 3</td></tr></table> 
       </td></tr> 
      </table> 
     </td> 
     <td class="mainContent">center</td> 
     <td class="side">right</td> 
    </tr> 
</table> 
</body> 

</html>

Source

2010-02-22 14:55:41 NotMe

vous voulez dire remplacer "tous" divs par des tables et des cellules ou simplement "certains" divs? – zekia

+1 pour une réponse basée sur la réalité. Parfois, les mises en page div/css posent plus de problèmes qu'elles n'en valent. – Ray

@ktsixit: J'utilise généralement une combinaison de tables et de divs. Dans ce cas, j'utiliserais des tables pour obtenir les hauteurs exactement comme j'en ai besoin. La plupart des zones de contenu à l'intérieur que je ferais en tant que divs afin qu'ils puissent ajuster au besoin. – NotMe

divs hauteur égale - compliquée avec plusieurs arrière-plans

Répondre

Questions connexes