28173 sujets

CSS et mise en forme, CSS3

Bonjour à vous tous,
J'ai créer un bouton avec 3 SPAN (pour que ca soit extensible en fonction du texte). Ca fonctionne sous FF, mais rien à faire sous IE, a coté des dédicaces ca me bouffe le menu.
Pouvez vous me dire pk :
http://www.win-click.com/annonceurs.php
Merci d'avance, cordialement.

Charlie
Bonjour et bievenue sur le Forum,

3 span pour faire un bouton extensible ?
Ca fait un peu beaucoup, non ? Smiley rolleyes
Tu ne voudrais pas nous donner un exemple par hasard ?

Au passage...
Le code de ton site n'est pas valide, je pense que si tu veux obtenir un résultat quasi-identique partout, il te faudrait commencer par là ... Smiley cligne
Modifié par Cygnus (28 Feb 2007 - 09:39)
Je suis en train de passer à un code valide, mais tout n'est pas en ligne et jsutement j'ai besoin de votre aide pour ce bouton.

Pouquoi 3 span, car :

1. Partie de gauche (coin de gauche)
2. Partie du centre avec le texte
3. Partie de droite (coin de droite).

Cordialement.

Charlie
Alors ...
Ton menu est une liste, donc si tu utilises le balisage suivant, tu ne devrais pas avoir besoin de tout ça :

<ul>
 <li><a hre="#">Lien 1</a></li>
</ul>

Ton élément de liste <li> recevra la partie gauche de ton bouton (aligné à gauche avec le padding adapté en conséquence).
La partie droite de ton bouton se trouvera sur ton lien <a> (aligné à droite avec le padding adapté en conséquence).
Comme cela, ton bouton s'étirera automatiquement en fonction de la longueur du texte. Smiley cligne
Mouais j'ai pas compris, tu pourra me mettre un code CSS + HTML que je test sur un page toute simple. Merci.
ps : Je parle du bouton Inscription + Envoyer à coté des dédicace sur la page citée plus haut ...
Charlie
Modifié par winclick (28 Feb 2007 - 11:14)
winclick a écrit :
Mouais j'ai pas compris, tu pourra me mettre un code CSS + HTML que je test sur un page toute simple. Merci.


Bonjour et bienvenue winclick Smiley smile

Heuuuuuuuuuuu ! Et ton café, tu le veux sucré et touillé ?

Je te renvoi vers les règles du forum que tu as acceptées lors de ton inscription et plus précisement la règle 16 Smiley cligne
Modifié par dominique (28 Feb 2007 - 12:45)
Je n'attend pas un code tout fait, mais la je patoge ... je sais pas du tout pourquoi les boutons sont coupés sur IE quand il est dans un tableau, alors que sur la page il ne l'est pas... c'est surrement le padding, je ne sais pas.
Euh sinon le café deux sucres Smiley langue
Modifié par winclick (28 Feb 2007 - 13:51)
Et que dirais-tu de quelque chose comme ça ?

CSS
span {
float:left;
margin:0 5px 0 0;
background:url(menu_summary_left.gif) left top no-repeat;
}

span a {
display:block;   /* correcting IE5 bug */
float:left;
height: 29px;
padding: 6px 10px 0 10px;
margin:0;
text-decoration:none;
text-align:center;
color:#66cc33;
font:bold 0.9em "Verdana",Arial, sans-serif;
background:url(menu_summary_right.gif) right top no-repeat;
}


XHTML

    <span><a href="#">Texte</a></span>
    <span><a href="#">Texte beaucoup plus long</a></span>


C'est l'idée de départ adaptée à ton cas particulier.
Un seul <span> englobant le lien est nécessaire. Et le bouton s'allonge automatiquement en fonction du texte.
Il faut que je test ce soir en effet ca semble plus simple que la solution que j'ai trouvé (mettre mes 3 spans dans un div). Est t-il possible ensuite d'associer un bouton de formulaire a un SPAN ?
winclick a écrit :
Est t-il possible ensuite d'associer un bouton de formulaire a un SPAN ?

Euhm ... Smiley rolleyes
De quel type de bouton veux-tu parler ?
Un bouton de type File ou Submit ?
Tu peux tout à fait entourer un bouton de type submit (un input pour être tout à fait exact) à l'aide d'une balise <span> en vue de le styler.