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 :
et pour le css (l'image de fond fait 50px de haut):
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)
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)
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)
! 
! 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 !
), 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, ...)