28106 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai une liste classique, saif peut-être qu'elle contient des boutons de form :

<ul id="menuhaut">
<li><input type="submit" name="choix" value="Votre compte" class="pge" onmouseover="this.className='pga'" onmouseout="this.className='pge'"></li>
<li><input type="submit" name="choix" value="Nous contacter" class="pge" onmouseover="this.className='pga'" onmouseout="this.className='pge'"></li>

...etc...

Tous les margins de tous les éléments sont à 0, tous les padding aussi (sauf ceux des class des INPUT) et pourtant j'ai pourtant toujours un léger espace du 2px environ entre chaque bouton de la liste.

On peut s'en sortir avec un positionnement relatif, mais c'est lourd.
Connaissez-vous le problème et avez-vous une solution ?

MERCI d'avance
Avec si peu, la seule chose qui me vient à l'esprit est :

li {
line-height: 1em; /* ou la hauteur de ton bouton */
}

Sinon, un lien vers ta page ou ta feuille de style serait utile...
MERCI de ta réponse, mais mon menu est en ligne, donc ce n'est pas line-height qui est en jeu.

Si tu veux la page (expérimentale), c'est à l'adresse :
http://www.pharmimmo.com/mieux/cable.php

C'est le menu sous la bannière qui est concerné.

La plupart des styles sont à voir dans le head, la feuille externe ne gère en gros que les CSS1 communs à toutes les pages (et donc les classes des boutons), tu la trouves à l'adresse.

http://www.pharmimmo.com/manet/chanc.css

Je trouve ce bug bizarre, j'ai parcouru un bouquin de Meyer sans trouver la solution Smiley rolleyes .

MERCI d'avance.
Depuis quand on code des menus avec des boutons ?!? C'est voulu ou c'est une grosse bourde ? C'est quel bouquin de Meyer ?


Sinou pour ton problème d'espace, change cela :

.gge, .pge {color: #FFFFFF; background: #C0C0C0; border-color: #969696; float:left;}


Mais c'est pas correct dans la facon de coder !
Modifié par Julien L (14 Mar 2005 - 23:14)
Car tu as utilisé le mot menu dans ton premier post et un menu c'est un menu.

Un bouton, c'est pour un formulaire, pour valider un choix et non pour naviguer
Merci de ta réponse,

Je connais la différence entre un bouton et un lien, mais utiliser des boutons comme menu de navigation présente de nombreux avantages, notamment tu peux véhiculer des variables favorisant l'environnement de l'utilisateur plus rapidement et facilement qu'avec des SESSION.

L'inconvénient, c'est que de nombreux navigateurs marginaux ne gèrent pas les styles dans les INPUT, notamment sous Mac

En quoi cette façon de coder est-elle incorrecte ?

Le code html subit l'épreuve du W3C.
Il te faut un float: left; sur tes <li> :

ul#menuhaut li { float: left; }

et un clear: both; sur <div id="panier"> :

div#panier { clear: both; }

(Testé seulement sur Firefox/Mac)
Administrateur
Julien L a écrit :
Car tu as utilisé le mot menu dans ton premier post et un menu c'est un menu.

Un bouton, c'est pour un formulaire, pour valider un choix et non pour naviguer

Comme je suis d'humeur espiègle aujourd'hui, je t'ai trouvé un peu de chipotage dans les Specs.
http://www.la-grange.net/w3c/html4.01/interact/forms.html (les Formulaires)

Morceaux choisis :
W3C a écrit :

17.1 Introduction aux formulaires

Un formulaire HTML est une partie du document constituée d'un contenu normal, d'un balisage, d'éléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.) et de labels sur ces commandes. L'utilisateur « remplit » généralement le formulaire en modifiant ses commandes (en saisissant un texte, en sélectionnant les articles d'un menu, etc.), avant de soumettre le formulaire à un agent pour son traitement (par exemple, à un serveur Web, à un serveur de courrier, etc.).


W3C a écrit :
Les menus

Les menus proposent des options aux utilisateurs parmi lesquelles faire un choix. L'élément SELECT crée un menu, en conjonction avec les éléments OPTGROUP et OPTION.


W3C a écrit :
L'élément SELECT

L'élément SELECT crée un menu. Chaque option offerte par le menu est représentée par un élément OPTION. L'élément SELECT doit contenir au moins un élément OPTION.


W3C a écrit :
Quand l'élément SELECT se présente comme une zone de liste défilante [ndt. scrolled list box], cet attribut spécifie le nombre de rangées de cette liste qui devraient être visibles en même temps. Les agents utilisateurs ne sont pas tenus de présenter l'élément SELECT sous forme d'une zone de liste ; ils peuvent faire appel à un autre mécanisme, tel qu'un menu déroulant [ndt. drop-down menu].


Etc. Smiley cligne
Modifié par Raphael (15 Mar 2005 - 09:58)
Pour ma part, c'est ça qui me choque plus en fait :
boteha a écrit :
onmouseover="this.className='pga'" onmouseout="this.className='pge'"

Pourquoi ne pas en effet utiliser simplement le :hover ? quel intéret le javascript enfin si j'ai bien pigé ce à quoi il sert...
Pourquoi ne pas utiliser le hover ?

Car, sauf erreur, la plupart des navigateurs, dont IE, n'appliquent l'effet hover que sur les liens <a href=...etc...>. Or un <input> n'est pas un lien, mais je me trompe peut-être, il faudrait essayer, ce que je ferai dès que je peux.

Normalement, ils devraient le faire, c'est prévu dans la norme, je crois que Mozilla applique l'effet hover sur tous types de balises <h1>, <img>, etc...

Par ailleurs, ce javascript est plutôt léger. Et la combinaison des javascripts légers et des CSS est redoutable.

J'ai le dernier bouquin de Meyer. il ne dit pas un mot des formulaires, ce qui est dommage, car les pages ne se résument pas toutes à des menus en liste et des background savamment postionnés.

Merci du débat, mais pas de polémique, SVP.
Un petit [Résolu] en éditant ton premier post (celui qui a servi à créer ton sujet) serait apprécié Smiley cligne
Encore mes excuses, mais, avec Mozilla/Mac/OS9, j'ai quelques problèmes pour l'édition des mails, comme j'en ai déjà parlé.

Hier, j'ai voulu inscrire [résolu], mais le titre du Post qui s'affichait n'était pas le bon... J'avais sans doute commencé la discussion avec un autre navigateur, ce qui explique peut-être cela si vous employez des cookies pour identifier le titre du Post, enfin j'ai fait ce que j'ai pu.

Idem aujourd'hui, j'ai voulu corriger, mais j'ai dû me planter...

Bon, c'est la troisième fois que je m'excuse... les experts pourraient peut-être se pencher un peu sur mon (gros) problème... Smiley rolleyes