28173 sujets

CSS et mise en forme, CSS3

[Résolu]Oups, une div qui ne s'adapte pas au contenu

Bonsoir à tous(tes),

voilà, j'ai essayé toutes les solutions proposées par la FAQ plus le tutoriel sur les colonnes de même hauteur et aussi un de Eric Meyer qui sont très bien faits d'ailleurs, mais je n'arrive pas à faire en sorte que le div qui contient entre autres deux autres div l'un à côté de l'autre reste à une bonne dimension une fois que les deux div contenus sont flottants.

Quand ils sont l'un en dessous de l'autre, tout se passe très bien, le global s'adapte en hauteur, mais tout est chamboulé une fois qu'il y a "float:left" et "float:right" pour les div contenus

Je ne sais pas si je m'exprime bien. Pour mieux vous montrer, j'ai mis en ligne deux exemples, l'un sans le problème en question et l'autre avec :

sans problème

avec problème

Sinon, voici également le code de la page avec le problème posé.

l'xhtml

<body id="css-zen-garden">
<div id="container">
	<div id="intro">
		<div id="pageheader"></div>
		<div id="vrai-menu"><p>emplacement du futur menu</p></div>
		<div id="quicksummary"></div>
		<div id="supportingtext">	[b] <-- div avec le problème[/b]
				<div id="contenu-texte"> [b]<-- élément div en "float:left"[/b]
					<h3><span>texte</span></h3>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
					<p>contenu de l'id "contenu-texte"</p>
				</div>
				<div id="galerie"> [b]<-- élément div en "float:right"[/b]
					<table summary="Galerie">
					<caption class="txt-photos">Photos</caption>
						    	<table width="239" border="0" cellspacing="7">
                              	<tr>
                                	<td height="50"><a class="galerie" href="#"><img src="img-1.gif" /></a></td>
                                	<td><a class="galerie" href="#"><img src="img-2.gif" /></a></td>
                                	<td><a class="galerie" href="#"><img src="img-3.gif" /></a></td>
                              	</tr>
                              	<tr>
                                	<td height="50"><a class="galerie" href="#"><img src="img-4.gif" /></a></td>
                                	<td><a class="galerie" href="#"><img src="img-5.gif" /></a></td>
                                	<td><a class="galerie" href="#"><img src="img-6.gif" /></a></td>
                              	</tr>
                              	<tr>
                                	<td height="50"><a class="galerie" href="#"><img src="img-7.gif" /></a></td>
                                		<td><a class="galerie" href="#"><img src="img-8.gif" /></a></td>
                                		<td><a class="galerie" href="#"><img src="img-9.gif" /></a></td>
                              		</tr>
                            	</table>
								<p id="lien-galerie-entiere">visitez notre galerie enti&egrave;re<br/>en cliquant <a href="#">ici</a></p>
				</div>
				<div id="footer"></div>
			</div>
	</div>
</div>
</body>
</html>


et voici pour le css :

#css-zen-garden {
	margin:0;
	padding:0; 
	text-align:center; 
	color:#000;
	background:#c06;
	}

acronym {
	border:none;
	}

a {
	text-decoration:none;
	}
	
a:link {
	color:rgb (179,63,96);
	}
	
a:visited {
	color:rgb (90,32,48);
	}
	
a:hover {
	text-decoration:underline;
	}
		
#container {
	width:791px;
	margin-bottom:0;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	padding:0 0 0 0;
	text-align:left;
	position:relative;
	}
	
#pageheader {
	background: url(pageheader.jpg) no-repeat;
	height:135px; 
	width:auto;
	margin-left:-45px;
	}
	
#vrai-menu {
	background:#c06;
	height:20px;
	margin-top:0;
	padding-top:-10px;
	}
	
#vrai-menu p {
	color:#FFF;
	}

#quicksummary {
	height:160px;
	font:italic 1em/2 times, "times new roman", serif;
	background:rgb(42%,92%,42%) url(entete-blanc.gif) 0 no-repeat;
	color:rgb(42,92,42);
	margin:0 0;
	padding:0 180px;
	}
#suportingtext p {
	font-size:90%;
	line-height:1.66em;
	margin: 0 1.5em;
	padding: 0.5em 0;}

[b]#supportingtext {
	background-color:#0FF;
	padding-right:0;
	padding-top:1px;
	margin:0 0 0 0;
	background-image:url(fond-contenu.gif);
	background-repeat:repeat-y;
	}[/b]
	
[b]#contenu-texte {
        float:left;
	}[/b]

#contenu-texte p, #contenu-texte h3 {
	padding-left:60px;
	}

[b]#galerie {
	padding-left:60px;
        float:right;
	}[/b]

.galerie img{
	border:1px solid #666;
	}

a:hover.galerie img {
	border:1px solid #f60;
	}

#footer {
	background-color:#F0F;
	margin:0 0 20px 0;
	height:50px;
	background:#fff url(fond-footer.gif) 100% no-repeat;
	padding:0 1em 0 0;
	}


Voilà, merci d'avance pour votre aide précieuse Smiley smile Smiley cligne
Modifié par touvert (25 Jan 2007 - 07:27)
Rholala, je viens tout juste d'essayer, c'est vraiment génial Smiley biggrin , tout est très bien positionné, et cela dans tous les navigateurs. Et dire que ça tenait juste à une petite ligne de code et que je me cassais les dents dessus depuis plusieurs jours Smiley biggol .

Enfin, en tout cas, merci beaucoup(une fois de plus car tu m'avais déjà aidé à solutionner un petit problème en php y a pas longtemps Smiley biggrin )

à+ Smiley cligne
Salut,

trois choses,

1. Pourquoi #intro vient il doubler purement et simplement #container ?

<div id="container">
[b]<div id="intro">[/b]

    <div id="supportingtext">

         <div id="contenu-texte">

        </div><!-- Fin #contenu-texte -->

        <div id="galerie">

        </div><!-- Fin #galerie -->

        <div id="footer">

       </div<!-- Fin #footer -->

   </div><!-- Fin #supportingtext" -->

[b]</div><!-- Fin #intro" -->[/b]
</div><!-- Fin #container" -->


Rien à voir avec le sujet mais c'est curieux...

. 2 Qu'est ce que vient faire ton <div id="footer"> inséré ainsi dans la <div id="supportingtext"> ?

Pourquoi ne pas avoir tout bêtement et tout logiquement avoir construit ton html en insérant #footer comme dernier élément de #container.
Donc, ainsi (j'enlève #intro en attendant que tu dises quoi en faire) :

code]
<div id="container">

    <div id="supportingtext">

         <div id="contenu-texte">

        </div><!-- Fin #contenu-texte -->
        <div id="galerie">

        </div><!-- Fin #galerie -->
        
   </div><!-- Fin #supportingtext" -->

   <div id="footer">

   </div<!-- Fin #footer -->

</div><!-- Fin #container" -->


3. cela étant fait, petite lecture :
http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

et solution évidente :

#supportingtext {
overflow:hidden;
}
clb56 a écrit :
1. Pourquoi #intro vient il doubler purement et simplement #container ?


Salut clb56 et merci de t'intéresser à ce code Smiley smile , oui, en fait, je dois le supprimer ce #intro, il ne me sert plus à rien.

a écrit :
. 2 Qu'est ce que vient faire ton <div id="footer"> inséré ainsi dans la <div id="supportingtext"> ?


Oui, ça c'est une grossière erreur de placement, elle est réparée.

a écrit :
et solution évidente :

#supportingtext {
overflow:hidden;
}


Là, par contre, je viens d'essayer de cette manière, et ça fonctionne très bien avec ff et IE 7, par contre, avec IE 6 et 5, ça donne ce qui suit Smiley ohwell
Smiley cligne upload/9302-rendu-bug.gif

Mais bon, je te fais confiance, j'imagine qu'il doit s'agir de quelque chose à adapter à IE 6 et 5 en commentaires conditionnels ou quelque chose dans ce gout là Smiley cligne

et merci pour ton lien et ton analyse Smiley cligne
Modifié par touvert (23 Jan 2007 - 23:32)
touvert a écrit :

j'imagine qu'il doit s'agir de quelque chose à adapter à IE 6 et 5 en commentaires conditionnels ou quelque chose dans ce gout là


Oui, je problème ne peut que se contourner en dotant le conteneur (#supportingtext) du haslayout.

Il en est d'ailleurs question dans le lien que j'ai donné.

par exemple :

<!--[if lt IE 7]>
<style type="text/css">
     #supportingtext {
     zoom:1;
     }
</style>
<![ endif]--><!-- Attention à enlever l'espace après le crochet ouvrant [b] [ [/b] -->
Sujet clos
Aller à