[CSS] Zone extensible

Dev
1

Je suis actuellement en train de faire mon premier site ayant la mise en page exclusivement en CSS. Habituer aux vieux tableaux Html, je peine un peu pour arriver à mes fins.

Là, j’essai de faire ceci :

Pour obtenir ce résultat, voici le code.

Css :

[code].zonegauche {
float: left;
width: 110;
height: 116;
background-image: url(img/bordgauche.gif);
}

.zonetexte {
float: left;
width: 558;
min-height: 116;
background: 333;
text-align: justify;
}

.zonedroite {
float: left;
width: 196;
height: 116;
background-image: url(img/borddroite.gif);
}[/code]

Et le html :

<span class="zonegauche"></span> <span class="zonetexte"> ... Du texte ... </span> <span class="zonedroite"></span>

Ma « zonetexte » est donc une zone destinée à contenir … du texte. Lorsque j’écris plusieurs paragraphes dans cette zone, celle-ci s’étend correctement. Par contre, « zonegauche » et « zonedroite » reste à leurs dimensions d’origine et n’accompagne pas la « zonetexte » (la hauteur ne change pas en fonction du texte).

Comment faire pour obtenir un tel résultat ? Merci.

2

Ho, un grand classique ça B)

Tiens, tu trouveras plein d’info par là : http://www.allhtml.com/articles/detail/533 (y a un truc equivalent sur alsacreations, mais là, je suis retombé sur celui là en premier … B))

Au passage, si tu mets “en dur” la taille (height:xx px;), c’est “normal” que la taille reste fixe … sous Firefox (mais par contre, sous IE, height se comporte de manière équivalente a “min-height” sous FF)

3

J’ai lu le lien que tu m’as donner ainsi que celui d’Alsacréation. Ca donne donc ce genre de chose :

#conteneur { position: relative; width: 864px; margin: 0 auto; background-color:#CCCCFF; } #centre { background-color:#9999CC; margin-left: 110px; margin-right: 196px; } #gauche { position: absolute; left:0; width: 110px; } #droite { position: absolute; right:0; width: 196px; }

[code]

<div id="gauche"></div>	  
<div id="droite"></div>	  
<div id="centre">Le texte</div>
[/code]

Toutes les solutions proposé oblige d’avoir un fond identique pour la colonne gauche et droite. En gros, le fond des deux colonnes est déclaré dans “#conteneur”. Mais impossible de déclarer directement le fond de chaque colonne à partir de “#gauche” ou “#droite”.

J’aimerais mettre un fond différent entre les ces deux colonnes. Existe t-il une solution pour contourner ce problème ?

4

Colonnes factices : “Cette technique consiste à appliquer à un conteneur global (englobant les trois colonnes) une image de fond, répétée en hauteur, qui viendra « dessiner » les colonnes” (Alsacréations, tout en bas)
Regardes ici et un exemple là.

5

Franchement, tu viens de mettre le doigt sur le truc qui fait que franchement, faire de la mise en page dans des tableaux plutot que des div, c’est quand meme bien plus simple.
Perso j’avais fini par trouver en jouant sur les alignements verticaux et en mettant des marges négatives, un truc de fou.
Si je retrouve ca quand je retourne au boulot (mais pas tout de suite hein !), je posterais !

6

[quote=“MegaMax, post:4, topic: 45698”]Colonnes factices : “Cette technique consiste à appliquer à un conteneur global (englobant les trois colonnes) une image de fond, répétée en hauteur, qui viendra « dessiner » les colonnes” (Alsacréations, tout en bas)
Regardes ici et un exemple là.[/quote]

J’avais déjà vu ces pages. Cependant les seules solution proposé consiste à mettre un des fonds directement dans le body. Hors je veux assigner le fond uniquement au niveau de la colonne pas sur le body.

7

Si tu es à l’aise en anglais, jette un oeil du coté de one true layout ou du Holly Grail. Have fun!

8

overflow:hidden; ?