Sujet Précédent Sujet Suivant

Positionner des boutons dans une liste

Gizmil Messages postés 749 Statut Membre -  
Gihef Messages postés 5165 Statut Contributeur -
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!
A voir également:

6 réponses

Réponse 1 / 6
Gihef Messages postés 5165 Statut Contributeur 2 779
 
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 749 Statut Membre 65
 
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 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
 
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
 
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 5165 Statut Contributeur 2 779
 
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 749 Statut Membre 65
 
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 5165 Statut Contributeur 2 779
 
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

Comment classer des noms par ordre alphabétique dans un tableau?
Rozario -
piquesous -

2 réponses