[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > liste à puce > Lecture du sujet

liste à puce

comment faire pour pas sauter de ligne

Vous devez être inscrit pour pouvoir poster des messages

Auteur	Message
Page : 1
1 visiteur sur ce sujet (1 anonyme)
Page : 1
et1103	# Posté le 26/11/2005 à 22:08:01
Groupe : Membres	Bonjour, Pour mon site je veux utiliser des listes à puce pour faire un menu principal en haut. Mais je ne sais pas comment faire pour que la liste n'aille pas à la ligne à chaque puce. Voici mon code : Code : HTML <div id="boutonmenuprincipal"> <ul> <li><a href="index.php?page=accueil" > accueil </a> </li> <li><a href="index.php?page=logiciel" > Logiciel </a> </li> <li><a href="index.php?page=materiel" > Matériel </a> </li> <li> <a href="index.php?page=blog" > Blog </a> </li> <li><a href="phpbb/index.php" > Forum </a> </li> <li ><a href="index.php?page=divers" > Divers </a> </li> </div> Quel est la propriété CSS pour que ça fonctionne? Car j'ai regardé le code source du Site du zero et il y a aussi une liste à puce dedans pour le menu du haut et elle ne retournent pas à la ligne automatiquement... EDIT : J'ai oublié de mettre le CSS Code : CSS #boutonmenuprincipal ul { list-style-position:outside; } #boutonmenuprincipal ul { list-style-type: none; } Édité le 26/11/2005 à 22:10:10 par et1103 et1103 pourfendeur d'écran bleus !
Exca	# Posté le 26/11/2005 à 22:10:39
Groupe : Membres	Bonsoir, essaie ça : Code : CSS #boutonmenuprincipal li { display: inline, } Édité le 26/11/2005 à 22:11:14 par Exca Montage d'une Puce D2CKEY sur Wii Chipset D2C
et1103	# Posté le 26/11/2005 à 22:13:02
Groupe : Membres	ça ne fonctionne pas aparemment merci quand meme EDIT : si en fait ça fonctionne. c'est moi qui avait fait une faute de frappe Édité le 26/11/2005 à 22:16:02 par et1103 et1103 pourfendeur d'écran bleus !
Exca	# Posté le 26/11/2005 à 22:15:27
Groupe : Membres	Tu as bien mis display (j'mettais trompé au début). Sinon essaie Code : CSS #boutonmenuprincipal ul, li { display: inline } ou Code : CSS #boutonmenuprincipal ul li { display: inline } Édité le 26/11/2005 à 22:18:18 par Exca Montage d'une Puce D2CKEY sur Wii Chipset D2C
et1103	# Posté le 26/11/2005 à 22:16:42
Groupe : Membres	oui c'est bon ça fonctionne maintenant Ediit (encore ) Et si maintenant je veux que la liste à puce prenne 80% de la page en partant de la droite tu me réponds quoi :)? Édité le 26/11/2005 à 22:19:46 par et1103 et1103 pourfendeur d'écran bleus !
Nubster	# Posté le 26/11/2005 à 22:21:35
Groupe : Membres	Attention, quand dans ta CSS tu met ul, li ou ul li c'est pas du tout pareille. Quand tu met ul li, ta propriètée s'adresse au li dans les ul, mais quand tu met ul, li ta propriètée s'adresse au ul et li. Ici, ça n'avais aucunne importance, d'ailleur, juste li suffirais.... Amicalement, Nubster
Exca	# Posté le 26/11/2005 à 22:24:40
Groupe : Membres	C'est pour ça j'avais mis li au début mais comme ça avait l'air de pas marché j'ai eu des doutes ^^". Montage d'une Puce D2CKEY sur Wii Chipset D2C
et1103	# Posté le 26/11/2005 à 22:28:47
Groupe : Membres	oui je me demandais aussi la difference entre un li, ul ou un ul li... Alors, COmment on fait pour alligner à droite ma liste à puce et faire qu'elle prenne 80% de la page ? et1103 pourfendeur d'écran bleus !
Nubster	# Posté le 26/11/2005 à 22:37:34
Groupe : Membres	Il y a plein de solution pour aligner ta liste à puce à droite, soit avec la propriètée float: Code : HTML #boutonmenuprincipal { float: right; width: 80% } Bien sur après, il faut voir ce qui peu gèner dans ta page, mais théoriquement ça doit marcher. Sinon, tu peux essayer avec la propriètée position absolute. Code : HTML #boutonmenuprincipal { position: absolute; top: 0; right: 1em; width: 80% } Après, il faut règler à ta guise ton positionnement
Deeder	# Posté le 26/11/2005 à 22:37:50
Libriste et standardiste... Groupe : Membres	Je pense que tu peux essayer un truc du genre : Code : CSS width: 80%; float: right; text-align: right;
et1103	# Posté le 26/11/2005 à 22:50:29
Groupe : Membres	Re bonjour, J'ai utilisé cette solution : Code : CSS #boutonmenuprincipal ul { list-style-position:outside; list-style-type: none; float:right; width:80%; } #boutonmenuprincipal ul, li { display: inline; } Maintenant je voudrai (exigeant moi ) que mes <li> se répartissent automatiquement sur l'espace qui leur ait alloué. Je sais pas si c'est très compréhensible... et1103 pourfendeur d'écran bleus !
jp949	# Posté le 27/11/2005 à 07:52:21
toujours dispo ou presque Groupe : Membres	c'est la que le probleme se corse avec les display:inline; tu ne peux pas dimensionner tes <li>. Alors la tecnique c'est #menu li { float:left; width:XYpx; height:XYpx; display:block; } decoupediz jp949
Inquisitor	# Posté le 27/11/2005 à 13:09:48
Groupe : Membres	Question d'un gros zero (hé oui): si je transforme mes "li" en inline avec "display: inline;", et que je mets des liens dedans (comme pour un menu), est-ce sémantiquement correct? Car du coup on a une balise inline (<li></li>) avec une autre balise inline à l'intérieur (<a></a>). Peut-on imbriquer des balises inlines les unes dans les autres. Cela ne pose-t-il tout simplement aucun problème? Je m'y connais pas assez, c'est pour ça que je demande, merci!
dworkin	# Posté le 27/11/2005 à 14:09:43
zCorrecteur	Ca ne pose aucun problème. Jette un oeil sur ce tutoriel de AlsaCréation. Dans l'étape 4 (je crois) ils utilisent cette méthode de liste pour faire un menu. C'est très bien expliqué. Tutoriel Parenthèse : cette méthode gagnerait à être reconnue. C'est sans doute la meilleure et la plus maléable pour faire des menus. N'ayons l'air de rien... Soyons désinvoltes... web agency rennes \|\| Services à domicile \|\| Faire part naissance, mariage, deces, bapteme \|\| Paquet cadeau \|\| calendrier 2009