Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» [résolu] Menu : choisir display ou float ?
Auteur
jpv56
# 19 Mar 2010 - 21:27:37
Citer
68 Posts
 Bonsoir à tous,
J'ai besoin de réaliser un menu horizontal (déroulant).
Mon menu prendra toute la largeur du design sans qu'il y ait de bloc adjacent.

Puis-je me satisfaire d'un display:inline afin de rendre ce menu horizontal ? Ou bien dois-je plutôt opter pour un menu flottant ?

Je pensais la première solution la plus logique (car pas de bloc adjacent) mais j'ai lu un peu tout et son contraire.

Le fait de prévoir un menu déroulant impose peut être de choisir un "flottant" ?

Merci de m'indiquer quelle solution est la meilleure.

jpv56
Modifié par jpv56 (19 Mar 2010 - 22:30)
http://tutomaster.free.fr 
^
Raphael
# 19 Mar 2010 - 21:37:12
Citer
twitter.com/goetter
Administrateur
12017 Posts
 Hello,

Les 2 méthodes te permettront de parvenir au résultat, mais selon tes contraintes l'une sera mieux adaptée que l'autre.
A savoir que dans l'idéal il vaut toujours mieux privilégier le flux (donc display).

- Float sort du flux, il y aura donc de nouvelles contraintes à gérer (peut-être) : bugs éventuels, dépassement de flottants, etc. Par contre, un élément flottant hérite d'un rendu block (il sera donc dimensionnable, entre autre)
- Display inline reste dans le flux donc ne posera pas de souci d'affichage, mais les éléments ne pourront pas être dimensionnés.
- Display: inline-block me semble être une solution de plus en plus envisageable dans ce cas de figure cligne
Modifié par Raphael (19 Mar 2010 - 21:38)
Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
http://www.goetter.fr 
^
jpv56
# 19 Mar 2010 - 21:48:25
Citer
68 Posts
 Merci pour ta réponse Raphael.
Comme je débute (laborieusement) je vais suivre tes conseils et privilégier le display:inline.

Je me permets une autre question.
J'ai suivi ton tuto permettant d'arrondir un menu et le résultat me convient bien (sauf ie qui fait encore des siennes).

Mais évidemment ce formatage s'applique aussi à mes "sous items". Or je voudrais les rendre rectangulaires (avec arrêtes). Comment faut-il procéder ? Et surtout où dois-je intervenir dans le CSS ?

Merci d'avance.

jpv56
http://tutomaster.free.fr 
^
Raphael
# 19 Mar 2010 - 22:14:44
Citer
twitter.com/goetter
Administrateur
12017 Posts
jpv56 a écrit :
Mais évidemment ce formatage s'applique aussi à mes "sous items". Or je voudrais les rendre rectangulaires (avec arrêtes). Comment faut-il procéder ? Et surtout où dois-je intervenir dans le CSS ?

Difficile de deviner ce que tu as pu faire sans voir... ce que tu as fait.
Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
http://www.goetter.fr 
^
jpv56
# 19 Mar 2010 - 22:29:21
Citer
68 Posts
 Oui c'est vrai...
En fait je réalise actuellement des essais et je n'ai pas encore placé de menu déroulant en ligne. J'essaie déjà de comprendre comment ça marche en local.
Mais je vais m'y employer rapidement afin de solliciter votre aide.
En attendant, bonne soirée et merci encore.
http://tutomaster.free.fr 
^
fvsch
# 19 Mar 2010 - 22:33:41
Citer
Administrateur
19942 Posts
jpv56 a écrit :
Mon menu prendra toute la largeur du design sans qu'il y ait de bloc adjacent.

C'est le comportement d'une ligne de tableau, ça. Donc quelque chose me dit que tu vas avoir besoin de display:table-cell, ou éventuellement d'un tableau de mise en page pour être compatible IE7.

jpv56 a écrit :
Puis-je me satisfaire d'un display:inline afin de rendre ce menu horizontal ?

Si ta seule contrainte est d'avoir un menu horizontal, oui. Si tu veux pouvoir mettre en forme chaque item de menu comme une boite, non. Si tu veux disposer tes items de menu sur toute la largeur de manière dynamique, non plus.

jpv56 a écrit :
Ou bien dois-je plutôt opter pour un menu flottant ?

Un menu flottant, ça sert à rien pour faire un menu horizontal. Si par contre ce sont les items de menu que tu veux faire flotter, là ça devient plus logique. Alors oui, c'est une piste viable. Par contre il faudra mettre tous les items à gauche ou tous à droite.

jpv56 a écrit :
j'ai lu un peu tout et son contraire

Il y a plusieurs solutions (pour l'essentiel, quatre type de positionnement utilisables) pour un menu horizontal. La solution à retenir va dépendre de la compatibilité attendue (vieux navigateurs ou pas?), et des besoins précis en termes de répartition des éléments dans l'espace.

jpv56 a écrit :
Le fait de prévoir un menu déroulant impose peut être de choisir un "flottant" ?

Ça implique un internement en hopital psychiatrique, mais pas l'utilisation de float.

jpv56 a écrit :
Merci de m'indiquer quelle solution est la meilleure.

La meilleure solution est celle qui répond aux contraintes que tu n'exprimes pas. smile
Modifié par Florent V. (19 Mar 2010 - 22:33)
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
Hermann
# 19 Mar 2010 - 22:38:39
Citer
4045 Posts
Raphael a écrit :

- Display: inline-block me semble être une solution de plus en plus envisageable dans ce cas de figure cligne

Salut Raphael,
personnellement je recommande plutôt d'utiliser le float.
Le problème du display:inline comme de l'inline-block c'est que ça génère comme tu le sais des espaces non significatifs lorsqu'il y a des espaces ou des retours chariot dans le code.
La solution des marges négatives pour pallier à ça n'est pas hyper fiable (différence d'un navigateur à l'autre). A moins qu'il existe une astuce?
^
gc-nomade
# 19 Mar 2010 - 23:08:25
Citer
gcyrillus en mode portable
790 Posts
 bonsoir hermann
on peut aussi jouer sur le letter-spacing du parent et le recalibrer pour les elements enfants , jouer sur le font-size , ne pas indenter son code , etc ... tout reste un peu aléatoire quand même.

GC
GC rien , mais GC encore ... et ça marche via la V.A.E. je passe d'un B.E.P. a un B.T.S. ... ce qui apparemment ne flatte que mon ego !?
Je vois le monde de ma porte, pas vous ?
http://yidille.free.fr/plux/valign 
^
Hermann
# 20 Mar 2010 - 11:36:33
Citer
4045 Posts
gc-nomade a écrit :
bonsoir hermann
on peut aussi jouer sur le letter-spacing du parent et le recalibrer pour les elements enfants , jouer sur le font-size , ne pas indenter son code , etc ... tout reste un peu aléatoire quand même.
GC

Bonjour Cyril, combien caches tu encore d'astuces comme celle-ci dans ta petite valise err
Cette technique me rappelle celle que j'avais utilisée pour le centre vertical cligne
C'est un peu du bricolage mais j'y aurais pas pensé, merci !
Pour la clarté du code je préfère le présenter avec des retours à la ligne, d'autre part c'est assez risqué : suffit d'utiliser un outil de formatage de code pour remettre les li sur plusieurs lignes.
Modifié par Hermann (20 Mar 2010 - 17:49)
^
Raphael
# 20 Mar 2010 - 15:03:41
Citer
twitter.com/goetter
Administrateur
12017 Posts
gc-nomade a écrit :
bonsoir hermann
on peut aussi jouer sur le letter-spacing du parent et le recalibrer pour les elements enfants , jouer sur le font-size , ne pas indenter son code , etc ... tout reste un peu aléatoire quand même.

GC

Oui, ou de rajouter des commentaires vides entre la balise fermante et la balise ouvrante suivante.
PS : rien n'indique que les éléments de liste doivent être collés les uns aux autres non-plus cligne
Le livre qui va vous permettre d'aller (vraiment) plus loin avec CSS : "CSS avancées - vers HTML5 et CSS3"
http://www.goetter.fr 
^
jpv56
# 20 Mar 2010 - 16:18:17
Citer
68 Posts
 Bonjour à tous,

J'essaie désespérément de créer un menu horizontal avec des sous menus déroulants.
Et c'est vraiment la catastrophe !

J'ai choisi display:inline car mon menu prendra toute la largeur du design (pas de bloc adjacent) et parce que je ne veux pas ajouter d'effets particuliers sur les boutons (un simple survol suffira et au mieux un coin arrondi).

Lorsque j'essaie d'ajouter un menu déroulant, les boutons item3 et item 4 quittent leur position en ligne. Voir image ci-dessous (le menu déroulant est en orange). Est-ce normal ? Par ailleurs ce menu déroulant est toujours décalé vers la droite sous le bouton principal.
Je dois avoir des erreurs dans mon code. Si quelqu'un pouvait me corriger ou m'orienter dans la bonne direction, merci d'avance !
upload/22902-essai.png


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

   <head>

       <title>Apprendre l'informatique en video sur tuto master</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	   <link rel="stylesheet" media="screen" type="text/css" title="mon design" href="styles.css" />

   </head>

   <body>

   <div id="header">

   <!--vide mais faudra insérer ici un moteur de recherche-->

   </div>

   <ul id="menuzone"><!--zone d'accès rapide sous forme d'un menu horizontal - on donne un id car on aura un autre menu dans la page-->

   <li><a href="...">Accueil</a> |</li><!--utiliser alt+6 (au dessus du T) pour faire le trait vertical-->

   <li><a href="...">item02</a> |</li>

	<li><a href="...">item03</a> |</li>

   <li><a href="...">item04</a></li>

   </ul>

   <ul id="menuprincipal"><!--le menu principal avec un id spécifique-->

  <li><a href="...">item1</a></li>

  <li><a href="...">item2</a></li>

  <ul><!--menu imbriqué-->

  <li><a href="...">essai</a>

  </ul>

  </li>

  <li><a href="...">item3</a></li>

  <li><a href="...">item4</a></li>

  </ul>

   </body>

</html>



CSS:

body{

width:960px;

margin:auto;

background-color:rgb(143,143,143);

margin-top:40px;

margin-bottom:20px;

}

#header{

width:960px;

height:100px;

background-image:url(images/banniere.png);

margin-bottom:0px;

-moz-border-radius: 10px 10px 0 0; 

        -webkit-border-radius: 10px 10px 0 0; 

        border-radius: 10px 10px 0 0;         

        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 

        -webkit-border-top-right-radius: 10px; /* pour Chrome */ 

}

ul#menuzone{ /*le menu de zone d'accès rapide juste sous le header*/

background-color:rgb(254,254,254);

margin:0;/*conseillé de faire pour tout menu : assurer compatibilité des différents navigateurs*/

padding:0;/*conseillé de faire pour tout menu : assurer compatibilité des différents navigateurs*/

font: bold 0.7em trebuchet,verdana,arial,times,serif;

list-style-type:none;

border-top: thin solid rgb(255,158,32);

}

#menuzone li{

display:inline;/*pour aligner le menu horizontalement on le fait devenir inline*/

margin:0 5px;

}

#menuzone li a{

color:green;

text-decoration:none;/*pour enlever le trait du lien*/

line-height:25px; /*pour aérer l'espace entre les liens*/

}

#menuzone li a:hover{ /*au passage de la souris le lien change de couleur*/

color:rgb(255,158,32);/*couleur orange*/

}

/*le menu principal commence ici*/

#menuprincipal{

margin-top:10px;

margin-bottom:0;

padding:5px;/*espacement sens de la hauteur*/

list-style-type:none;

font: bold 0.8em trebuchet,verdana,arial,times,serif;

background-color:white;/*couleur blanche sous le menu et sur toute la largeur*/

border-bottom:2px solid black;

}

#menuprincipal li{

display:inline;

}

#menuprincipal li a{

padding:5px 20px;/*5 pour hauteur de chaque bouton, 20 pour largeur de chaque bouton*/

margin:0;

background: rgb(78,185,73);

color:white;/*couleur blanche pour texte du menu*/

border:2px solid black;

text-decoration: none;

}

#menuprincipal li a:hover{

background:rgb(255,158,32);

color:white;

}
http://tutomaster.free.fr 
^
fvsch
# 20 Mar 2010 - 21:05:24
Citer
Administrateur
19942 Posts
 Pour commencer, ton HTML est faux. Tu as une erreur d'imbrication (un UL enfant d'un UL, c'est pas possible), et une erreur d'ordre de fermeture de balises (</ul></li> là où on attendrait </li></ul>).
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
gc-nomade
# 20 Mar 2010 - 21:13:24
Citer
gcyrillus en mode portable
790 Posts
 Tu devrais aussi extraire du flux les elements que tu veut afficher ponctuellement en sus .

@hermann & @rapahael , ah oui Les commentaires html c'est plus propre que le letter-spacing , pas besoin de commenter les css du coup.

Sinon , pas vraiment une besace d'astuces , de l'observation , un peu de memoire , des test empirique . En fait IE6 est surtout le fautif a la base et aussi ce satanée layout .
Modifié par gc-nomade (20 Mar 2010 - 22:18)
GC rien , mais GC encore ... et ça marche via la V.A.E. je passe d'un B.E.P. a un B.T.S. ... ce qui apparemment ne flatte que mon ego !?
Je vois le monde de ma porte, pas vous ?
http://yidille.free.fr/plux/valign 
^
jpv56
# 20 Mar 2010 - 21:18:22
Citer
68 Posts
 Ok merci j'ai rectifié le tir.
Bonne soirée.
http://tutomaster.free.fr 
^
Le sujet est clos.
Aller à