Positionner des boutons dans une liste - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Positionner des boutons dans une liste

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Positionner des boutons dans une liste (Lu 1212 fois)

Positionner des boutons dans une liste
« sur: le 14-11-2007 a 17:07:09 »

Gizmil
Membre récent

Hors-Ligne

Messages: 16

Je suis un lama!

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:

http://www.studiocreapix.com/fr/fr_body.php?a=8&contenu=fr%5Faccueil

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!

Code:
<ul id="menu1">
 
 
 <li class="btnmenu"><a class="btnmenu" href="http://www.studiocreapix.com">INDEX</a></li>
 
 <li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
 
 <li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
 
 <li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS?</a></li>
 
 <li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
 
 <li class="btnmenu"><a class="btnmenu" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
 
 <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):

Code:
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!

Rapporter au modérateur

Re:Positionner des boutons dans une liste
« Répondre #1 sur: le 14-11-2007 a 18:30:14 »

lefou
P'tit nouveau

Hors-Ligne

Messages: 104

Première remarque : on ne claque pas de span dans une balise ul

Ensuite li est un élément inline donc :
* soit tu travailles avec un display:inline;
* soit tu gardes le float:left et tu définis une largeur pour ton li;

Un lien sympa : http://www.siteduzero.com/tuto-3-3588-1-un-menu-horizontal.html

Rapporter au modérateur

Conception de sites web : http://www.crea-fr.com

Re:Positionner des boutons dans une liste
« Répondre #2 sur: le 14-11-2007 a 21:00:22 »

Gizmil
Membre récent

Hors-Ligne

Messages: 16

Je suis un lama!

Je crois que c'est assez impossible malgré tes directives et le tuto que tu m'as passé! J'ai tout élagué mais ça reste insoluble, j'y arrive pas! Je poste le code pour le cas où quelqu'un y arriverait! Je crois que je vais devoir me résoudre à utiliser les div pures et dures!

Code:
<div id="menu1">
 
 
 <ul id="menu1">
 <li><a id="btnmenu1" href="http://www.studiocreapix.com">INDEX</a></li>
 <li><a id="btnmenu2" href="fr_body.php?a=8&contenu=fr%5Faccueil">ACCEUIL</a></li>
 <li><a id="btnmenu3" href="fr_body.php?a=8&contenu=fr%5Fgaleries">GALERIES</a></li>
 <li><a id="btnmenu4" href="fr_body.php?a=8&contenu=fr%5Fqui%5Fsommes%5Fnous">QUI SOMMES-NOUS?</a></li>
 <li><a id="btnmenu5" href="fr_body.php?a=8&contenu=fr%5Fstudio">LE STUDIO</a></li>
 <li><a id="btnmenu6" href="fr_body.php?a=8&contenu=fr%5Fproduits">NOS PRODUITS</a></li>
 <li><a id="btnmenu7" href="mailto:aymeric.lephotographe@gmail.com">CONTACT</a></li>
 </ul>
</div>

Code:
#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;
}
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:600px;
 height:28px;
 margin:0;
 padding:0;
 list-style-type:none;
}
ul#menu1 li{
 float:left;
 line-height:28px;
}
li#btnmenu1{
 width:55px;
}
li#btnmenu2{
 width:70px;
}
li#btnmenu3{
 width:75px;
}
li#btnmenu4{
 width:150px;
}
li#btnmenu5{
 width:80px;
}
li#btnmenu6{
 width:105px;
}
li#btnmenu7{
 width:75px;
}
a.btnmenu{
 display:block;
 color:#A0B5E5;
 text-decoration:none;
 font-weight:bold;
}
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;
}

Rapporter au modérateur

Re:Positionner des boutons dans une liste
« Répondre #3 sur: le 15-11-2007 a 08:36:45 »

lefou
P'tit nouveau

Hors-Ligne

Messages: 104

Si le problème vient du fait que tu cherches à avoir une séparation entre chaque li dans ce cas rajoute border:solid 1px #xxxxxx
avec #xxxxxx = couleur de ton fond

Rapporter au modérateur

Conception de sites web : http://www.crea-fr.com