DIV sortant de sa DIV conteneur [RESOLU]

Marsh Posté le 23-10-2005 à 12:01:37

Bonjour et au secours tout le monde.

Voilà, j'ai une DIV contenant 2 DIVs (2 colonnes). Comment se fait-il que la 2ème colonne puisse sortir de la DIV qui la contient : lorsque l'on réduit la fenêtre et que sa hauteur augmente, elle passe "par dessus" la DIV conteneur.

HTML :

Code :

<div id="contenant_colonnes">
<h3>Accès rapide</h3>
<div id="colonne_berlin_b" class="colonne_choix">
<ul>
<li><a href="charente_maritime/brouage_00.php">Bords de la Spree</a></li>
<li><a href="charente_maritime/talmont_00.php">Camp de concentration de Sachsenhausen / KZ Sachsenhausen</a></li>
<li><a href="charente_maritime/la_coubre_la_foret_00.php">La Philarmonie / Stiftung Berliner Philarmoniker</a></li>
<li><a href="charente_maritime/la_coubre_le_phare_00.php">Musée d'Art contemporain, Gare de Hambourg / Museum für Gegenwart Berlin, Hamburger Bahnof</a></li>
<li><a href="charente_maritime/la_coubre_la_plage_00.php">Reichstag, coupole de Norman Foster</a></li>
<li><a href="charente_maritime/brouage_00.php">Allée Karl Marx / Karl-Marx-Allee (Stalinallee de 1949 à 1961)</a></li>
</ul>
</div>
<div id="colonne_berlin_a" class="colonne_choix">
<ul>
<li><a href="berlin_02-2005_00.php">Alexander Platz et ses environs</a></li>
<li><a href="charente_maritime/la_coubre_le_phare_00.php">La Cathédrale de Berlin / Berliner Dom</a></li>
<li><a href="charente_maritime/la_coubre_le_phare_00.php">Galeries Lafayette, Quartier 206</a></li>
<li><a href="charente_maritime/la_coubre_la_foret_00.php">Bibliothèque municipale de Berlin / Staatsbibliothek zu Berlin </a></li>
<li><a href="charente_maritime/la_coubre_le_phare_00.php">Musée juif / Jüdisches Museum Berlin (JMB)</a></li>
<li><a href="charente_maritime/la_coubre_la_plage_00.php">Aéroport de Tempelhof</a></li>
</ul>
</div>
</div>

CSS :

Code :

div#contenant_colonnes
{
_width: 640px;
border-bottom: 1px solid #ABB6CA;
}
div#colonne_berlin_a
{
background: #FFFFFF url(/photographies/allemagne/berlin_02-2005/images/fond_colonne_a_berlin.jpg) right 0px no-repeat;
}
div#colonne_berlin_b
{
float: right;
background: #FFFFFF url(/photographies/allemagne/berlin_02-2005/images/fond_colonne_b_berlin.jpg) right 0px no-repeat;
}
div.colonne_choix
{
width: 49%;
}

Ca fait depuis le début du we que je suis dessus (entre autre).

Merci.

Message édité par Beral2 le 23-10-2005 à 18:12:17

Reply

Marsh Posté le 23-10-2005 à 12:01:37

Reply

Marsh Posté le 23-10-2005 à 13:23:52

En rajoutant un float:left dans div#colonne_berlin_a

enfin je dis cela comme ça.

Reply

Marsh Posté le 23-10-2005 à 13:41:06

Pas tout à fait, parce que la DIV contenant (id="contenant_colonnes" ) a alors une hauteur nulle (enfin juste la hauteur du <h3>Accès rapide</h3> ). Et sa border-bottom, dont j'aimerais qu'elle souligne les 2 colonnes "colonne_berlin_x" puisque les contenant, se retrouve juste en dessous du h3, cad en haut des 2 colonnes contenues.

Je me fais comprendre ?

Message édité par Beral2 le 23-10-2005 à 13:41:30

Reply

Marsh Posté le 23-10-2005 à 13:42:47

clear:both sur #contenant_colonnes

Reply

Marsh Posté le 23-10-2005 à 13:44:36

Nop, hauteur de <div id="contenant_colonnes"> toujours nullle, au h3 près.

EDIT: une image valant mille mots... j'ai mis un "background-color: #000000;" dans <div id="contenant_colonnes"> pour que le problème se voit mieux :

Il devrait y avoir du noir entre les 2 colonnes puisqu'elles ne font que 49% chacune.

A noter que cela fonctionne sous IE (gloups) :

Message édité par Beral2 le 23-10-2005 à 14:02:36

Reply

Marsh Posté le 23-10-2005 à 16:41:36

C'est le comportement naturel des float [:spamafote] C'est juste IE qui agrandi le conteneur tout seul...

Donc pour faire comme sous IE, suffit d'une petite règle bien sympathique, baptisée self-clearing float, à découvrir sur PositionIsEverything.net :

#contenant_colonnes:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Note aditionnelle : Evite de nommer tes éléments selon leur présentation. "colonne_berlin_a", est un nom extrêmement mal choisi. Sachant qu'il est conseillé de proposer une CSS alternative ayant une présentation linéaire (Zoom Layout), la notion de colonne disparaîtra totalement, non des id avec "colonne" dedans n'auront plus aucun sens. L'interêt du CSS est de séparer le contenu/structure de la présentation. Il faut donc le faire à 100%, et s'afranchir de toute notion de présentation de l'HTML. Donc jamais de classes "colonne", ni de classes "gauche" ou "rouge"...

L'id de ton conteneur, je le renommerai en "acces_rapide" par exemple, car c'est ce que c'est : c'est la section "Accès rapide" de ta page, ce n'est pas "conteneur colonne machin chouette"

Reply

Marsh Posté le 23-10-2005 à 18:06:28

Merci Florent, ça marche impec'.

P..... que c'est compliqué de faire des trucs simples. Prochaine bataille, un vrai pied de page.

J'ai "bookmarké" ton lien.

Sinks.

Message cité 1 fois

Reply

Marsh Posté le 23-10-2005 à 18:11:17

Résolu se met à la fin du titre du sujet, comme ça pas de problèmes pour les recherches

Reply

Marsh Posté le 23-10-2005 à 18:11:56

J'édite.

Reply

Marsh Posté le 24-10-2005 à 09:48:16

Beral2 a écrit :

Merci Florent, ça marche impec'.

P..... que c'est compliqué de faire des trucs simples. Prochaine bataille, un vrai pied de page.

J'ai "bookmarké" ton lien.

Sinks.

Le problème, c'est IE dans l'histoire. Sinon, avec des display: table-cell; par exemple, tu pourrais reproduire un beau tableau, et faire tes deux colonnes facilement. Mais c'est pas géré par IE

Reply

DIV sortant de sa DIV conteneur [RESOLU]

Sujets relatifs:

Leave a Replay