Sujet Précédent Sujet Suivant

Positionner des boutons dans une liste

Fermé
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 - 14 nov. 2007 à 17:03
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 14 nov. 2007 à 23:32
Salut,

Je suis en train de créer des barres de menu horizontales. J'utilise pour ça les balises de liste pour respecter la syntaxe! Problème: quand j'utilise ces balises, ça me semble tout de suite plus compliqué...

Pour ma part, côté xhtml, j'ai l'impression d'avoir placé correctement mes balises mais faut croire que non... ou alors, c'est du côté css qu'il faut chercher.

Voici ma page:

[url=http://www.studiocreapix.com/fr/fr_body.php?a=8&contenu=fr%5Faccueil]http://www.studiocreapix.com/fr/fr_body.ph...nu=fr%5Faccueil[/url]

J'essaye qu'il y aie une séparation (une petite barre verticale) entre mes boutons mais les blocs contenant ces barres ne se placent pas correctement!

<ul id="menu1">
<span id="menu1extgauche"></span>
<span id="menu1extdroite"></span>
<li class="btnmenu"><a class="btnmenu" href="http://www.studiocreapix.com">INDEX</a></li>
<span class="btnseparateur"></span>
<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
<span class="btnseparateur"></span>
<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
<span class="btnseparateur"></span>
<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS?</a></li>
<span class="btnseparateur"></span>
<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
<span class="btnseparateur"></span>
<li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
<span class="btnseparateur"></span>
<li class="btnmenu"><a class="btnmenu" href="mailto:aymeric.lephotographe@gmail.com">CONTACT</a>
</li>
</ul>

Ma css (j'ai retiré tout ce qui n'entrait pas en interaction directe avec les boutons):

html{
width:100%;
}
body {
background-color:#060B14;
width:100%;
text-align: center;
}
* {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#293C66;
margin: 0;
padding: 0;
border: 0;
}
/*---------------------------------------------------------------------------------------------*/
#contenerglobal{
width:800px;
margin:auto;
text-align:center;
}
#margehaut1 {
width:784px;
height:150px;
font-size:5px;
color:#000000;
margin-left: auto;
margin-right: auto;
}
#margehaut2 {
width:784px;
height:20px;
font-size:5px;
color:#000000;
margin-left: auto;
margin-right: auto;
}
#menu1{
display:block;
width:780px;
height:28px;
margin:auto;
background-image:url(images/menu_surface_spacer.gif);
background-repeat:repeat-x;
list-style-type:none;
}
#menu1extgauche{
float:left;
display:block;
width:3px;
height:28px;
background-image:url(images/menu1_extremity_left.gif);
background-repeat:no-repeat;
}
#menu1extdroite{
float:right;
display:block;
width:3px;
height:28px;
background-image:url(images/menu1_extremity_right.gif);
background-repeat:no-repeat;
}
#menu2extgauche{
float:left;
display:block;
width:11px;
height:28px;
background-image:url(images/menu2_extremity_left.gif);
background-repeat:no-repeat;
}
#menu2extdroite{
float:right;
display:block;
width:11px;
height:28px;
background-image:url(images/menu2_extremity_right.gif);
background-repeat:no-repeat;
}
li.btnmenu{
float:left;
display:block;
height:28px;
background-image:url(images/menu_rollover.gif);
background-repeat:repeat-x;
}
a.btnmenu:link{
color:#A0B5E5;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
a.btnmenu:hover{
color:#ABDA4D;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
a.btnmenu:visited{
color:#A0B5E5;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
.btnseparateur{
float:left;
display:block;
width:7px;
height:28px;
background-image:url(images/btn_separator.gif);
background-repeat:no-repeat;
}

Merci d'avance si vous avez la patience d'y regarder!

6 réponses

Réponse 1 / 6
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
14 nov. 2007 à 19:21
Bonjour,

Je m'étais déjà penché sur ton précédent message. Sans résultats probants.

Avant de continuer, peux-tu corriger ces quelques erreurs ?
Dis-nous quand c'est fait.

Ici, pas besoin de [url]. Il suffit de coller le lien.
Cependant, dans le lien qui suit et comme ce forum fait des choses bizarres de liens imbriqués, recolle les 2 parties avant de lancer le lien.

Lien vers les erreurs CSS :
1— http://jigsaw.w3.org/css-validator/validator?uri=
2— http%3A%2F%2Fwww.studiocreapix.com%2Ffr%2Fdesign.css&warning=1&profile=css21&usermedium=all

--
0
Réponse 2 / 6
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 65
14 nov. 2007 à 21:56
Hello! Merci de t'intéresser à mon cas, c'est sympa! J'ai été sur le validateur et j'ai réglé tout les problèmes évalués!

Pour le reste, mon code à évolué, j'ai commencé par élaguer comme en éliminant les blocs de séparation des boutons, on verra ça après si j'arrive déjà à faire les bases!

Je pense que c'est déjà plus propre même s'il y a encore des problèmes! A savoir: le bloc de mes boutons est comme dédoublé en hauteur. Il y aussi la couleur et l'image de fond de rollover qui ne s'affichent pas.

Mon code actuel:

XHTML: 

<div id="menu1">
<span id="menu1extgauche"></span>
<span id="menu1extdroite"></span>
<ul id="menu1">
	<li><a class="btnmenu" href="http://www.studiocreapix.com">INDEX</a></li>
	<li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
	<li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
	<li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS?</a></li>
	<li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
	<li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
	<li><a class="btnmenu" href="mailto:aymeric.lephotographe@gmail.com">CONTACT</a></li>
</ul>
</div>



CSS: 

span#menu1extgauche{
	float:left;
	display:block;
	width:3px;
	height:28px;
	background-image:url(images/menu1_extremity_left.gif);
	background-repeat:no-repeat;
}
span#menu1extdroite{
	float:right;
	display:block;
	width:3px;
	height:28px;
	background-image:url(images/menu1_extremity_right.gif);
	background-repeat:no-repeat;
}
div#menu1{
	width:780px;
	height:28px;
	margin:auto;
	text-align:center;
	background-image:url(images/menu_surface_spacer.gif);
	background-repeat:repeat-x;
}
ul#menu1{
	width:770px;
	height:28px;
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:12px;
	font-weight:bold;
}
ul#menu1 li{
	float:left;
	width:110px;
	height:28px;
}
a.btnmenu{
	display:block;
	color:#A0B5E5;
	text-decoration:none;
}
a.btnmenu:hover{
	color:#ABDA4D;
	background-image:url(images/btn_menu_rollover.gif);
	background-repeat:repeat-x;
	text-decoration:none;
}
a.btnmenu:visited{
	color:#A0B5E5;
	text-decoration:none;
}
0
Réponse 3 / 6
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
14 nov. 2007 à 22:20
salut,

je lis juste ton code en passant et salue Gihef.

pourquoi utilises-tu une imbrication de deux '<span>' pour ensuite les passer à {display:block;} ?
tu pourrais directement utiliser deux '<div>' à la place.

pour les liens place la pseudo-classe ':hover' après ':visited' dans la feuille de style.

et tu utilises deux fois l'identifiant 'menu1' qui devrait être unique.
0
Réponse 4 / 6
Mama Mia
14 nov. 2007 à 22:27
Bonjour,
Juste en passant!
Tu fais la même erreur que moi

dans le css
au lieu de
div#bidule
span#machin

fait
div.bidule
span.machin

et dans le html au lieu de
<div id="bidule">
<span id="machin">

fait

<div class="bidule">
<span class="machin">

Bonne continuation
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
14 nov. 2007 à 23:32
Bonjour,

Non, ici, il ne s'agit pas de ça.
Il y a juste un #menu1 utilisé 2 fois.

--
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Gizmil Messages postés 706 Date d'inscription mercredi 14 avril 2004 Statut Membre Dernière intervention 3 octobre 2022 65
14 nov. 2007 à 23:29
Parfait, merci les gars! Le résultat est déjà meilleur! Reste plus qu'à déterminer pourquoi mon texte est sous le bloc de ma div (en apprence, du moins)! Info: pour le test, j'ai mis un background-color à la balise <ul> mais celui-ci n'est pas apparu sur la page! 

<div id="menu1">
	<div id="menu1extgauche"></div>
	<div id="menu1extdroite"></div>
	<ul id="menu1liste">
		<li id="contbtn1"><a class="btnmenu" href="http://www.studiocreapix.com">INDEX</a></li>
		<li id="contbtn2"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
		<li id="contbtn3"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
		<li id="contbtn4"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS?</a></li>
		<li id="contbtn5"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
		<li id="contbtn6"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
		<li id="contbtn7"><a class="btnmenu" href="mailto:aymeric.lephotographe@gmail.com">CONTACT</a></li>
	</ul>
</div>



#menu1extgauche{
	float:left;
	width:3px;
	height:28px;
	background-image:url(images/menu1_extremity_left.gif);
	background-repeat:no-repeat;
}
#menu1extdroite{
	float:right;
	width:3px;
	height:28px;
	background-image:url(images/menu1_extremity_right.gif);
	background-repeat:no-repeat;
}
#menu1{
	width:780px;
	height:28px;
	margin:auto;
	text-align:center;
	background-image:url(images/menu_surface_spacer.gif);
	background-repeat:repeat-x;
}
#menu1liste{
	width:770px;
	height:28px;
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:12px;
	font-weight:bold;
}
#contbtn1{
	float:left;
	width:55px;
}
#contbtn2{
	float:left;
	width:70px;
}
#contbtn3{
	float:left;
	width:75px;
}
#contbtn4{
	float:left;
	width:140px;
}
#contbtn5{
	float:left;
	width:80px;
}
#contbtn6{
	float:left;
	width:110px;
}
#contbtn7{
	float:left;
	width:75px;
}
a.btnmenu{
	display:block;
	height:28px;
	color:#A0B5E5;
	text-decoration:none;
}
a.btnmenu:visited{
	color:#A0B5E5;
	text-decoration:none;
}
a.btnmenu:hover{
	color:#ABDA4D;
	background-image:url(images/btn_menu_rollover.gif);
	background-repeat:repeat-x;
	text-decoration:none;
}
0
Réponse 6 / 6
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
14 nov. 2007 à 23:30
Après ces quelques remarques (salut les autres), quelques propositions.
[edit] Et avant ta précédente intervention [/edit].

Même si je ne vois pas trop “le bloc de mes boutons est comme dédoublé en hauteur”.
Tu veux dire que le “Contact” passe à la ligne ?
Si ce n'est que ça, réduis tes “menu1 a” de 1px.
770 - 3 - 3 = 766 / 7 = 109
Si c'est au sujet de la hauteur des boutons, il suffit que attribues les dimensios aux <a> plutôt qu'aux <ul>.

“l'image de fond de rollover qui ne s'affichent pas”
Chez moi, un fond noir s'anime (1 fois dans Safari, à chaque fois dans Firefox).
Il me semble que c'est parce que tu demandes au navigateur “background-repeat:repeat-x;”.
Crée plutôt une image aux bonnes dimensions (110px) sans le repeat.

Après une petit adaptation, j'ai fait fonctionner ça
div#menu1{
  width:780px;
  height:28px;
  margin:auto;
  text-align:center;
  background-image:url(http://www.studiocreapix.com/fr/images/menu_surface_spacer.gif);
  background-repeat:repeat-x;
}
ul#menu1{
  width:770px;
  height:28px;
  margin:0;
  padding:0;
  list-style-type:none;
  font-size:12px;
  font-weight:bold;
}
ul#menu1 li{
  float:left;
}
a.btnmenu{
  display:block;
  color:#A0B5E5;
  width:108px;
  height:28px;
  line-height:28px;
  text-decoration:none;
  }
a#btnmenu_2l{
  display:block;
  color:#A0B5E5;
  width:115px;
  height:28px;
  text-decoration:none;
}
a.btnmenu:visited, a#btnmenu_2l:visited{
  color:#A0B5E5;
}
a.btnmenu:hover, a#btnmenu_2l:hover{
  color:#ABDA4D;
  background-image:url(btn_menu_rollover.gif);
}
avec
    <ul id="menu1">
      <li><a class="btnmenu" href="http://www.studiocreapix.com">INDEX</a></li>
      <li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
      <li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
      <li><a id="btnmenu_2l" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS&nbsp;?</a></li>
      <li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
      <li><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
      <li><a class="btnmenu" href="mailto:aymeric.lephotographe@gmail.com">CONTACT</a></li>
    </ul>


Je ne comprends pas le décalage du texte du menu.

++
Ajoute
  margin-left: auto;
  margin-right: auto;
au “#contenu”.

Pour éviter les <span> aux extrémités, tu pourrais utiliser une image de fond au menu qui couvrirait toute la largeur.
Ça ne devrait pas ajouter des tonnes d'octets à la page.

--
0

Discussions similaires

liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses
Accéder à la liste de numéros de téléphone en 07
cbhr -
syma 59 -

41 réponses
Annuaire inversé liste rouge
caro2lille -
gwendolyne72 -

13 réponses
avoir la liste de tous les habitants d'une ville
kornmagic -
tad42 -

2 réponses
Rechercher un numéro sur liste rouge
pierr-89 -
KARDAN -

4 réponses