[Résolu] Display: inline et height | décalage de listes

Bonjour à tous,

J'ai comme qui dirait l'impression qu'une liste horizontal (avec un {display: inline;} ne peut se voir appliqué de height comme ds ce que j'ai tenté de faire ci dessous:

#nav {
				list-style: none;
				margin-top: 30px;
				text-align: right;
				background: blue;
				}

			#nav li {
				 display: inline ;   /*la liste (block) s'affiche en ligne */
				background: url(pix/frontbar.gif) no-repeat ;
				height:50px;
				}		

Le but étant d'arriver à ceci

j'en suis actuellement ici ou la pour avoir quelque chose de plus lisible.




Si quelqu'un de savant pouvait confirmer, infirmer, et le cas échéant me proposer une alternative, bah ce serait bien aimable, sinon je crois que je suis ds la panade

Merci d'avance.
Modifié par xis (28 Jun 2007 - 11:22)

Passe tes éléments de liste en flottants, ils pourront dès lors garder leur propriété de block.

Ça ou utiliser un peu de padding, par exemple padding: 5px 0; (en centrant verticalement l'image de fond).

Je vais tester les deux.

Merci bien

Florent: tu noteras au passage qu'apres avoir vaincu les coins arrondis par une méthode tarabiscotée, j'en reviens a celle de ton tuto
Modifié par xis (23 Jun 2007 - 19:43)

Agné ! J'ai finalement préféré la solution du float.

Je ne sais pas si elle plus juste, mais elle semblait plus logique.

En revanche, sont apparus de nouveaux pb. Je me creuse un peu le crane avant de vous mettre a contribution a nouveau

Bonne soirée

-Edit- Quelqu'un saura m'expliquer pourquoi en passant en "inline" je perds mes propriétés de height ?

-ReEdit- Bon, bah en écrivant le message j'ai compris... =)
Modifié par xis (23 Jun 2007 - 22:00)

Grmbl: Encore une fois, j'ai vérifié que la prise de recul fait du bien au cerveau.
Ce week end j'ai pensé au 1er tuto sur la création d'un site et j'en viens à ceci:

http://css.alsacreations.com/xmedia/exemples/design_css/etape4.html

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(bg_menu.gif) repeat-x 0 -25px ;
	list-style-type: none ;
}

ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #dea ;
}

A moins que je n'ai la berlue il n'y a pas de "display inline" pour mettre la liste menu en ligne ?
Modifié par xis (26 Jun 2007 - 12:38)

Tu a oublié ceci dans ce code :

ul#menu li{
float: left ;
text-align: center ;
}

Serait ce un indice ? =))

xis a écrit :
Serait ce un indice ? =))

oui

Bonjour bonjour...

Ok merci Igor, j'ai compris (enfin je pense =)


Ne sachant pas trop si dois recréer un post à chaque question concernant une meme page, dans le doute, je continue ici.

-Les liens des li sont situés un poil trop haut par rapport aux images de fond.
Quelles méthodes préconiseriez vous pour les faire descendre d'1 ou 2 px ?

-Et il possible de supprimer le décallage vers la gauche inhérent aux ul ?
J'ai cru qu'un: { list-style-type: none ; }reglerai le pb :X

xis a écrit :


-Et il possible de supprimer le décallage vers la gauche inhérent aux ul ?
J'ai cru qu'un: { list-style-type: none ; }reglerai le pb :X

Si tu avais suivi toutes les règles élémentaires du forum tu aurais été voir dans la FAQ et tu aurais lu ceci:

FAQ a écrit :

Pour créer l'espace nécessaire aux puces d'une liste ordonnée ou non, les navigateurs n'ont pas tous adoptés la même méthode :
- Les navigateurs basés sur Gecko (FireFox, Mozilla) appliquent par défaut un padding-left de 40px à l'élément ul, et y placent la puce
- Tandis qu'IE et Opera se servent d'un margin-left de 40px

Tu aurais donc pu en déduire qu'il suffit d'appliquer aux regles css de l'ul concernée quelque chose dans ce gout la:

#liste ul { padding-left: 0;
	      margin-left: 0; }

</schyzo>

Autant je comprends bien l'action du padding-left, sur la marge interne de l'ul, mais je ne comprends pas comment le margin-left peut internvenir à l'intérieur du conteneur "liste". Toujours est il que cela fonctionne