Titre: Positionner des boutons dans une liste
Posté par: Gizmil le le 14-11-2007 a 17:07:09
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">
<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):
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! |
Titre: Re:Positionner des boutons dans une liste
Posté par: lefou le le 14-11-2007 a 18:30:14
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 (http://www.siteduzero.com/tuto-3-3588-1-un-menu-horizontal.html)
|
Titre: Re:Positionner des boutons dans une liste
Posté par: Gizmil le le 14-11-2007 a 21:00:22
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">
<span id="menu1extgauche"></span>
<span id="menu1extdroite"></span>
<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;
} |
|
|
Titre: Re:Positionner des boutons dans une liste
Posté par: lefou le le 15-11-2007 a 08:36:45
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 |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|