[résolu] Faire passer le titre sous l'image

Bonjour,

Sur cette page :

http://philippebessiere.free.fr/article.php3?id_article=10

Dans la colonne de droite sous l'image il y a des boutons. Il peut y en avoir 1 à 6. Ca dépend du nombre d'images à voir. S'il y a moins de 6 boutons (comme sur cette page) le titre en dessous "DOMAINES D’INTERVENTION :" ne passe pas à la ligne; Comment faire ?

Voici les éléments de ma CSS nécessaires ici :

mes boutons :

a.imagebouton1 { /* définition de la classe "image" de la balise <a> */
     float: left;
	 display: block; /* la balise a doit être en bloc */
     width: 30px; /* largeur de l'image réactive */
     height: 30px; /* hauteur de l'image réactive */
	 margin-top: 15px;
	 margin-left: 12px;
	 margin-right: 5px;
         margin-bottom: 26px;
     background-image:  url(images/bouton_off.gif); /* source de l'image de départ */
     background-repeat: no-repeat;
}
	 
a.imagebouton1:hover { /* définition de la classe "image" de la balise <a> au survol */
    background-image:  url(images/bouton_on_1.gif); /* source de l'image d'arrivée */
} 

ce code se répète de 1 à 6 : imagebouton2....

Puis mon titre :

h3.spip {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px; 
	color: #FFFFFF;
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 0px;
	margin:0;
} 

Le code de la page est visible.

Merci pour votre aide
Philippe
Modifié par ensemblevide (01 Feb 2006 - 10:41)

salut.

h3.spip {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 11px; 

	color: #FFFFFF;

	font-weight: bold;

	padding-top: 15px;

	padding-bottom: 0px;

	margin:0;     /* ajoute ce qui suit */

        clear:left;

}

Intervention dominique : J'ai juste ajouté les balises "code"
Modifié par dominique (01 Feb 2006 - 10:27)

Bonjour

> ensemblevide : Ton lien est trop long et explose le forum en faisant apparaître un scoll horizontal, peux-tu corriger ton post en utilisant les balises "url" prévues à cet effet, s'il te plait... Merci d'avance

> jpl949 : Merci d'avoir apporté une réponse à cette question, toutefois, peux-tu éditer ton post et placer tout ce qui est code dans les balises prévues à cet effet "code", s'il te plait... Merci d'avance

Bonjour,

Il semblerait que le clear:left évoqué ci-dessus renvoie le h3 sous l'horizontale de la colonne1.

Je pencherai plutôt pour : soit fixer la largeur (égale à la colonne2) du div conteneur des boutons ; soit insérer un hr avec, effectivement, un clear:left entre le div des boutons et le h3 suivant.

Tiens nous au courant et n'oublie pas le [résolu] si la solution est trouvée

Bonjour

et merci pour vos aides.

Toutefois, zzzazzz, aucune des deux solutions ne règle le problème :

a écrit :
fixer la largeur (égale à la colonne2) du div conteneur des boutons

le titre s'aligne en dessous mais verticalement après le 4e bouton;

a écrit :
insérer un hr avec, effectivement, un clear:left entre le div des boutons et le h3 suivant

Le hr et le h3 sont renvoyés sous l'horizontale de la colonne1 (cf ma page)

j'ai ajouté dans ma css :

hr {
height: 1px;
margin: 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
clear:left;
}

Est-ce que le blocage peut venir des boutons qui sont en en float:left ?

Philippe

desolé je ne peux pas editer les messages depuis mon pc j'ai un bug

bonjour,

peut-etre un probleme de fusion de marge ? qui ferait "chevauché"? les images de #cadreBoutons et le texte de h3 ?
En appliquant un : margin-bottom:5px; a #cadreBoutons, ou un padding-bottom:5px;le textes du h3 peut revenir sur la gauche sans etre repoussé par les images boutons..

(Pour mieux voir ta page sous firefoxe, j'ai ajouter un : overflow:auto; a #corps)

a plus

jpl949 a écrit :
desolé je ne peux pas editer les messages depuis mon pc j'ai un bug

ok, c'est fait

Bonjour gcyrillus

Sur tes conseils j'ai ajouté margin-bottom:5px; à #cadreBoutons et tout ok comme tu pourras t'en rendre compte en ligne

Merci beaucoup

Philippe