28172 sujets

CSS et mise en forme, CSS3

[Résolu] Balise span dans une balise a qui glisse sous une balise div

Bonjour,

Après avoir recherché sur le forum, je n'ai pas trouvé de réponse à mon problème.

Afin d'être validé W3C, pour créer un bouton j'utilise :


<p>
<a target="_top" href="http://www.cardiologie.info/default.php?pageId=2159&amp;siteId=10">
<span class="btnValide22x220">Test Cardio-Vasculaire</span>
</a>
</p>





.btnValide22x220 {
	background-image:url(../img/boutons/22x220_valide.gif);
	background-repeat: no-repeat;
	padding-left:22px;
	padding-top:3px;
	height:19px;
	width:198px;
	display:block;
}


Problème, sous IE8 et FF, le background de mon span en block glisse sous une div qui est à sa gauche.
cf pb : cardiologie

Mon cadre de liens à gauche à lui comme réglages :


.sommaireSpe {
	border:1px solid #186D92;
	padding:10px; 
	width: 150px; 
	margin-bottom: 10px;
	float: left; 
	margin-right: 10px;
}


J'ai essayé d'utiliser la balise clear mais sans résultats. A force de tâtonner je tourne chèvre, une solution pour moi?

Merci d'avance !

Thibaut
Modifié par kichilibuz (26 Jan 2010 - 15:45)
As-tu essayé en ne mettant pas ton span dans un nouveau <p> mais à la suite de ton texte avec des <br /> ?
Je n'avais pas essayé, mais cela ne donne rien non plus !
Bien ten(a)té
T.
Modifié par kichilibuz (26 Jan 2010 - 11:27)
La solution que j'ai trouvé (mais surement pas la meilleure) est d'ajouter une classe à ton <p> qui commence par "Les fumeurs ou les personnes [...] " avec
float : left ;
width : 300px ;

et de mettre ton <span> dans ce paragraphe là avec des <br /> comme je te l'avais suggestionné ci dessus Smiley cligne
Modifié par Luleen (26 Jan 2010 - 11:36)
Cela peut solutionner le problème pour cette page en particulier, mais la longueur de mes textes peut différer. Mon paragraphe peut être amené à dépasser le cadre de liens et il faut que mes css et ma construction reste la même (je n'ai pas encore d'autres pages d'exemple avec un bouton).
Merci quand même pour cette solution.

Thibaut
Tu veux que si le texte dépasse du cadre de liens, qu'il se poursuivre sous le cadre de liens sans laisser de blanc ?
Alors autre solution :

Sur le <p> qui contient ton bouton, une class avec "clear: both" et tu supprimes ton img spacer en haut de #content, dont je ne comprends pas l'utilité en fait.

Ton bouton sera aligné à gauche, et ca devrait être bon Smiley smile
@Sorano : J'étais en plein test, mais toujours mon problème !

@Luleen : Le img spacer sert apparemment (le site initial n'est pas de moi et est dans un cms donc légèrement bridé!) à définir une hauteur minimum de page, sans définir celle-ci dans le #content directement car sinon pour les longues pages, le texte déborde du contenant.
En mettant un clear:both dans le p de mon bouton, il n'est plus à la suite du texte (à droite du cadre) et est défini en position par rapport au bas de la page, si j'augmente le height du img spacer, le blanc entre le pied de mon cadre et le bouton est de plus en plus garnd !

Smiley confus
Ok je pense avoir (enfin) la solution à ton soucis.

Sur ton span, c'est le display block qui cloche.

Passe le en
display : inline-block;


Et normalement c'est bon. Chez moi le bug n'existe plus.

J'espère que ca résoudra ton soucis ! Smiley smile
Génial, c'est le résultat escompté et c'est toujours W3C !

J'espère que cela ne vas pas mettre le souk ailleurs car les class des boutons sont utilisées à plusieurs endroits.

Merci beaucoup !
Je lis souvent le forum de alsacréation, c'est la première fois que je ne trouve pas le résultat sans poser la question... résultat solution en 1/2 journée génial !

Bon code à tous

Thibaut
Sujet clos
Aller à