28172 sujets

CSS et mise en forme, CSS3

Image qui depasse

Bonjour tout le monde,
Je cherche a afficher une liste avec : une titre, plus bas : une image a gauche et du texte a droite (type blog quoi) Pour ma mise en page j'ai utilisé un des gabarit du site (avec float et largeur fixe) que j'ai modifié, voila monde code css:



#video {
margin-left: 3px;
margin-right: 3px;
border: 0px solid #D5D5D5 ;
vertical-align : top;


}

#video h3
{
    color:#7BC723;
	margin-left: 5px ;
	padding-left: 5px ;
	border-bottom: 1px solid #EC2868;
}

#video p{
...

}

#video img { 
margin: 5px 5px 5px 5px ; 
margin-top: 2px ; 
padding: 8px; 
border: 1px solid #d0d0d0; 
background-color: #ffffff; 

}


}


et mon code html :



<div id="video">
			<h3>Titre</h3>
			<img src="images/image.jpg" align="left"/> <p>paragraphe</p>
</div>


mon probleme est que l'image ne reste pas dans le block et depasse meme sur le blok precedent.
http://choumtest.free.fr/im.jpg
Quelqu'un peut m'aider?
Modifié par mike06 (11 Mar 2008 - 19:27)
Bonjour mike06,

Ton code ne me semble pas correspondre à ta capture d'écran. Tu n'a pas un float:left quelque part pour ton image ?

La paragraphe et l'image étant habituellement et sauf contre instructions préalables dans ton code CSS des éléments de type Block , ils devraient se placer l'un sous l'autre.
Si c'est le cas ( c à d si tu as un float qui traîne ) , ce comportement est tout à fait normal car ton image est désormais sortie du flux, le conteneur parent se positionne donc pour englober le plus proche éléement dans le flux qui est ton élément <p></p>.

Une astuce qui vaut ce qu'elle vaut car il y a tjs plein de possibilités est de rajouter un <hr /> muni de la propriété clear:left après ton <p></p> et de le cacher comme suit 
<hr style="clear:left;visibility:hidden;margin:0;"/>


Le <hr /> devant se placer "sous" l'élément flottant , mais étant contenu dans #Vidéo, ton conteneur va s'allonger ! Smiley ravi
Merci pour ta réponse, je dois afficher une liste, le probleme avec cette methode c'st que cela m'affiche un element et le reste loin en dessous ... je débute le css mais je m'accroche lol ! je pourrais coller mon fichier css ici mais ça va faire chargé lol
Bonsoir,

Je te conseil de créer une classe CSS de ce type:

.break {
clear:both;
}


Et par la suite, à chaque fois que tu en as besoin tu l'utilises de cette façon :

<div id="video">
     <h3>Titre</h3>
     <img src="images/image.jpg" align="left"/> <p>paragraphe</p>
     <div class="break"></div>
</div>


C-a-d en la plaçant à la fin d'un bloc contenant un "float" succeptible de deborder.
Modifié par Lavazzo (12 Mar 2008 - 21:15)
Non.

<div id="video">
     <h3>Titre</h3>
     <img src="images/image.jpg" align="left"/> <p>paragraphe</p>
</div>



#video {
overflow: hidden;
zoom: 1;
}
overflow hidden modifie le mode de calcul de la hauteur du conteneur : il prend maintenant en compte ses enfants flottants alors qu'il les ignorait avant. overflow:auto, float, et d'autres propriétés aboutiraient aussi à ce résultat. C'est ce qu'on a pris l'habitude d'appeller un "contexte de formatage".

zoom:1 émule ce comportement dans IE6 qui n'implémente pas ce point particulier de CSS2.1, en faisant un détour par un mécanisme qui lui est propre et qu'on appelle le haslayout.
Sujet clos
Aller à