[RESOLU] Span utilisant :before et :after plus centrage vertical

Bonjour à tous et Bonne Année !

Ceci est mon premier post, car vraiment je ne trouve pas de solution (si déjà elle existe).

Je désire "enrober" certains liens graphiquement, jusque là tout va bien : un balise span, une classe qui va bien est le tour est joué.

Là où ça se complique, c'est que j'aimerais (doux rêve ou réalité possible ?) donner à l'habillage une forme différente au départ et à l'arrivée, sans bien-sûr me fendre de code. Jusque là aussi, tout semble simple : les pseudo-classe :before et :after sont là pour ça !

Oui mais voilà, une fois les pseudos-classes mises en œuvre, le texte se pose insensiblement (le méchant !!!) sur la ligne de base .

Démonstration :

pour la partie HTML :

<p><a href="http://www.bi884.com/avantages"><span class="bouton">test de bouton</span></a></p>

et pour le css (l'image de fond fait 50px de haut):

.bouton {
	background-image: url(images/bt01-bg.jpg);
	display:inline-block;
	line-height:50px;
	vertical-align:middle;
}

Jusque là pas de pb, le texte apparaît au centre, mais la misère vient ci-après :
si j'ajoute les pseudo-classes :before et/ou :after, impossible de positionner le texte. il vient alors s'aligner sur la base de l'image issue du :before... Oh ! Rage ! ^^

pour info le code des pseudo-classes (l'image bt01-after.jpg fait elle aussi 50px de haut pour info)

.bouton:before{
	content: url(images/bt01-before.jpg);	
}

.bouton:after {
	content: url(images/bt01-after.jpg);	
}

Vous l'aurez peut-être compris, le but et d'utiliser le sélecteur de balises des éditeurs genre tinymce et consors pour enrober de manière ultra simple un texte ou un lien, et comme ces éditeurs utilisent la balise span, cela en fait La contrainte technique.

PS : je joins l'image que j'utilise pour le test (à découper en trois tranches : bt01-before.jpg, bt01-after.jpg et bt01-bg.jpg)
Modifié par Leoo (06 Jan 2011 - 19:23)

Hello,
A quel résultat souhaites tu arriver au final?

Whoua, quelle rapidité, merci Vdo93

voilà ce que j'aimerai :

je tape dans l'éditeur de texte d'un joomla ou d'un wordpress du texte, je sélectionne le texte et je vais chercher la classe "bouton" dans le sélecteur par exemple. Automatiquement et quelle que soit sa longueur, le texte se voit habillé avec l'image 'bt01-before.jpg' à sa gauche (qui va permettre de mettre un arrondi du bouton, par exemple) et l'image 'bt01-after.jpg à sa droite.

Ainsi, en une seule étape, j'ai crée un bouton, qui s'adapte à la longueur de mon texte.

résultat escompté dans l'image ci jointe :

Tout serait dans le meilleur des mondes, si j'arrivais à pouvoir gérer l'alignement vertical des pseudo classes, mais peut-être y a t-il une autre solution (mais à part :before et :after, je ne voit pas bien...)

En tout cas merci pour la réactivité et vu que je ne trouve pas de réponse sur le web, soit la méthode n'est tout simplement pas possible, soit si on trouve, c'est bonnard, parce que créer un texte et l'habiller aussi simplement, ce serait le top !
Modifié par Leoo (06 Jan 2011 - 17:48)

C'est tout à fait possible de produire cet effet, et sans utilisation de :after ou :before.

Par contre, j'ai besoin de savoir comment vont apparaitre ces liens? Au fil du texte ou tel un block à part?
Et c'est toujours un span qui sera dans tes liens?

dans l'idée, ce serait déjà de pouvoir faire ce genre de liens à part, genre un lien sur une ligne.

ça serait déjà pas mal non ? Bien sûr si tu as mieux, je suis preneur

Maintenant, j'imagine qu'avec un float (je ne vois pas comment tu vas t'y prendre) on pourra mettre du contenu en drapeau.

Merci encore.

Le plus simple est effectivement d'utiliser le lien tel un block, car au moins tu peux spécifier une taille...pour l'image de fond c'est nécessaire.

Par contre tu auras d'autre soucis, notamment en fonction de longueur de ton texte. Le plus simple est d'utiliser 2 images.

Bref, pour répondre à ta question voila un exemple qui marche avec :before

a{
background: url(../img/bt01.jpg) top right no-repeat; 
display:inline-block; 
line-height:50px; 
text-decoration:none; 
padding-right:10px; 
} 

a:before{
content:"";
position:absolute;
height:50px;
width:10px;
margin-left:-10px;
background: url(../img/bt01.jpg) top left no-repeat;
}

Yeaaaaaaaaah, un sacré génie hahaha

je ne procédais pas comme il faut, j'utilisais la méthode content: pour afficher l'image, alors qu'il fallait utiliser le block de manière plus classique, en mettant l'image en background !!!

du coup j'ai re travaillé ton code pour arriver exactement à ce que je voulais :

.bouton {
	background: url(images/bt01-bg.jpg) top right repeat-x;  
display:inline-block;
line-height:50px;  
padding-right:10px;  
padding-left:10px;
}

.bouton:before {
	content:""; 
	position:absolute; 
	height:50px; 
	width:10px; 
	margin-left:-10px; 
	background: url(images/bt01-before.jpg) top left no-repeat;

	
}

.bouton:after {
	content:""; 
	position:absolute; 
	height:50px; 
	width:10px; 
	margin-right:-10px; 
	background: url(images/bt01-after.jpg) top right no-repeat;

	
}

et là on est au top du top ! avec possibilité de mettre du texte avant, après, et patati et patala.

Ah je suis trop content, j'en pleure même

Vraiment merci beaucoup, vdo93, je vais pouvoir exporter la technique à pleins de trucs.
tu te rends compte, avec ça : un coup de span et le bouton pète la classe

@ bientôt et merci encore
Modifié par Leoo (06 Jan 2011 - 19:22)

Erf, il fallait bien que cela ne fonctionne pas sous IE

Mais bon déjà j'ai vu ce que c'est possible, et on verra pour IE demain, hein

ça va bien pour ce soir

Merci
@ bientôt
LeoO

Et non ie ne géré pas :first-child .
Il faudra que tu utilises jQuery pour insérer du contenu avant et après tes liens
Du genre
jQuery('a.monlien').before('<span class="before" />').after('span class="after" />');

Coucou Joska

Et voilà, ça recommence : du jQUERY ! Mer... ci Crosoft !

moi j'ai envie de dire : "Stop sur-armement now ! Les chti's gars qui ont IE, ils auront pas les bords arrondis ! Ça leur apprendra, tiens ! " Le problème est que je me voyais déjà coder des habillages de balises H qui tuaient, genre tâche d'encre à gauche et gouttelettes à droite... Du coup sur IE, pour le coup, graphiquement c'est mort ! erf !

Allez encore deux trois moutures de IE et on devrait être OK pour CSS2 (quoi ? on passe à CSS3 ? Oulaaaaaaaaaa, mais ils le savent chez 'Crosoft^^)

Merci pour l'info Joska, je ferai mes tests avec jQuery quand j'aurais un peu de temps. Si ça ça peut le faire.
De tout façon, du jQuery, j'en ai déjà très souvent sur mes sites, donc ça me fera pas trop de job en plus. A ce moment là d'ailleurs, je ne ferai peut-être que du jquery... Pas besoin de doublonner avec du CSS...
Mais c'est quand même dommage, le code est là à portée de clavier...

Je sais, tous les webdesigner rencontre ce problème.
Je me suis lancé à fond dans le css3 mais tu ne peux pas vraiment en abusé pour de la production.
Il existe un script qui doit permettre à ie d'agir comme les navigateurs modernes mais je n'en ai jamais été satisfait. Peut etre que je l utilise mal. Tu peux tester ce script
http://code.google.com/p/ie7-js/
Il te permettra peut etre d'utiliser les pseudo class avec ie7 voir ie6 soyons fout ^^
Personnellement j'utilise ce script pour les png transparentscript pour les png transparent
Et jquery pour profiter des sélecteurs.
Je limite au max les effets avec jquery sinon les machines rament trop.
Cela dit si tu connais le raw javascript c'est sans doute mieux optimisé mais ce n'est pas mon cas.
Statistiquement tu as moins de chance de tomber sur un visiteur qui n'a pas la js d'activé que sur un ie6
Ie7 est encore très utilisé sur les machines avec windows xp donc ne néglige pas ce navigateur. et pout ie6 c'est difficile de vendre
deathto ie6 à un client.
bonne chance.

Coucou joska,

Bon, pour faire le sur les dernières avancées :
IE 8 gère bien les :before et :after, mais à condition de lui parler correctement...

Heureusement, le code ad-hoc pour IE8 convient bien à FF et autres...

voici donc la dernière version du zouzou ^^:

.bouton {
background: url(images/bt01-bg.jpg) top right repeat-x;  
display:inline-block;
line-height:50px;  
text-decoration:none;  
padding-right:10px;  
padding-left:10px;
}

.bouton a{
text-decoration:none !important;  
}
.bouton a:hover{
text-decoration:underline;  
}

.bouton:before {
content:url(images/bt01-before.jpg); 
position:absolute; 
height:50px; 
width:10px; 
margin-left:-15px; 

	
}

.bouton:after {
	content:url(images/bt01-after.jpg); 
	position:absolute; 
	height:50px; 
	width:10px; 
	margin-right:-15px; 

	
}

Bon, et là ça pète dans tous les derniers navigateurs.

Pour IE7 malheureusement, (IE6, qu'il meure, on s'en fout ), les pseudo Classes ne fonctionneront pas du tout donc dans l'exploitation que je veux en faire, pas de coins "spécifiques" à gauche et à droite. niveau navigation ça ne gêne donc pas, c'est juste que graphiquement, un utilisateur IE7 n'aura pas la même expérience qu'un autre. il faudra juste composer avec...Mais bon n'y sommes nous pas habitués (IE< 8 et les png, décalages de positionnemen des div, ...)

On avance, on avance.
pour info joska, j'ai effectué quelques test avec le script de google : c'est la cata, mon footer se retrouve dans les limbes et mes contenus se chevauchent...

C'est dommage, en fait il aurait fallu développer le design avec l'appel au script dès le départ, pour voir ce qui fait chasser et rectifier en temps réel... Euh... Là, ça ira bien pour cette fois, hein... 'Va pas tout refaire, le gars^^.
En plus, là ça devient kafkaien : si il faut débugger le site pour le faire fonctionner avec "l'anti-bug"...

en tout cas pour moi c'est très prometteur, car on peut tout imaginer graphiquement, sans se limiter dans la longueur du lien et proposer à ses clients une façon simplissime d'habiller ses contenus

@ bientôt.

Bin super ton code est clean (perso je prefere les border-bottom que les underline )
Je pense que tu as choisi la bonne solution.
Pour l' "anti-bug" ca me rassure je ne suis pas le seul alors.
Pour ie7 tu peux facilement tweaker avec jquery du style :

jQuery('.bouton').before('<span class="btn-before" />').after('<span class="btn-after" />');

Aussi simple que ça.
Je ne suis pas certain que ca passe en une seule ligne comme je l'ai écris mais sinon en 2 lignes c'est bon.

joska a écrit :
Bin super ton code est clean (perso je prefere les border-bottom que les underline )
Je pense que tu as choisi la bonne solution.
Pour l' &quot;anti-bug&quot; ca me rassure je ne suis pas le seul alors.
Pour ie7 tu peux facilement tweaker avec jquery du style :

jQuery('.bouton').before('<span class="btn-before" />').after('<span class="btn-after" />');

Aussi simple que ça.
Je ne suis pas certain que ca passe en une seule ligne comme je l'ai écris mais sinon en 2 lignes c'est bon.

Bon ben nickel
dès que j'ai un peu de temps, je regarde pour le jQuery

En tout cas merci beaucoup, ça me tenait à cœur de trouver une soluce pour faire ça simplement.