DIV sortant de sa DIV conteneur [RESOLU]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : DIV sortant de sa DIV conteneur [RESOLU]

Beral2

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

Publicité

xtof_83

Freeride Spirit

En rajoutant un float:left dans div#colonne_berlin_a

enfin je dis cela comme ça.

Beral2

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

Roane

Pingouino's fan

clear:both sur #contenant_colonnes

Beral2

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

FlorentG

Unité de Masse

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"

Beral2

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

Roane

Pingouino's fan

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

Beral2

J'édite.

FlorentG

Unité de Masse

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

FORUM HardWare.fr

Programmation

HTML/CSS

DIV sortant de sa DIV conteneur [RESOLU]

Sujets relatifs
[CSS][Résolu] Un pixel en trop sur du li	[RESOLU] problème au lancement de VS 2003
[Résolu] Valeur & Index des CheckBox (OLEObjects)	[Résolu][SQL] Convertion de valeurs dans une requete SQL
[Résolu] Insertion de CheckBox automatique	[résolu] erreur javascript sous IE (FireFox et Opera ok)
pb résolu: utiliser un modéle pour faire plusieurs copies	(RESOLU) : Comment ajouter un message d'erreur?
Z-index et objet flash [Résolu]	Résolu : Recherche des doublons dans la base.
Plus de sujets relatifs à : DIV sortant de sa DIV conteneur [RESOLU]

Page générée en 0.053 secondes