Placement de div

[DiabloTC]

Salut a tous !

Voila, je cherche quelqu'un qui pourrait m'ajouter sur msn par exemple, pour m'aider un resoudre un message que je viens de rencontrer.

J'ai une image (banniere) placé en haut de mon site, et en dessous, une liste (ul et li) en menu horrizontale pour faire des onglet de navigation, que je remonte a l'aide du code suivant :

Code :

margin-top: -50px;

Mais quand je dépasse le chiffre -40px, et bien la moitié de mes boutons disparaissent

Voici un screen expliquant mieux le probleme :



Dans la premiere image, c'est bien placé, mais les autres boutons disparaissent (-45px)
Dans la deuxieme, c'est mal placé (-35px) mais tous les boutons y sont ..
J'espere que quelqu'un pourrait m'aider

Merci d'avance

[Shudrum]

Oula oula, regarde le problème autrement, pourquoi faire un margin-top: -50px ?

Regarde un peu ca : http://www.alsacreations.com/tuto/lire/5...horizontal

[php_addict]

cela depend à quoi est relatif ton ta div (position absolute, fixed ou relative)

[Thib4s]

Moi je veux bien t'aider
Envoie moi un MP pour ton adresse ;P

[DiabloTC]

le code concerné est le suivant :

Code :

ul
{
padding:0;
margin:0;
list-style-type:none;
}
li
{
float:left;
border-left:1px solid black;
}
ul li a
{
font-size: 18px;
display:inline;
float:left;  
width:180px;
line-height:36px;
background:black url(img/bouton.png) repeat-x;
color:#DCDCDC;
text-decoration:none;
text-align:center;
margin-top: -49px;
}
ul li a:hover
{
background:black url(img/boutonhover.png) repeat-x;
color:white;


#banniere
{
  margin-top:-20px;  
}

#menu
{
position: relative;

}

Code :

<div id="menu">
  

  
     <div id="banniere">
     </div>
  
  
     <div id="bouton">
     <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Présentation</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">Charte</a></li>
      <li><a href="#">Contact</a></li>
     </ul>
     </div>
    
    
   </div>

Je reflechis ou je pourrais mettre position, je crois que c'est la clé de mon probleme

[Thib4s]

<div id="menu">
<div id="banniere"> </div>
<ul id="button>
<li><a href="#">Accueil</a></li>
<li><a href="#">Présentation</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Charte</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

tres simple

#button {
margin:0;
padding:0;
list-style:none;
}
#button li
display:block;
float:left;
margin-right:5px; /* on les espace */
}
#button li a {
display:block;
height:tailleimage-padding;
width:tailleimage-padding;
background: url("Path/to/img") no-repeat top left;
padding:padding;
}

Et voila tu a un superbo menu fonctionnel et valide W3C

[DiabloTC]

Merci Thib4s, quelques légères modifications, et c'est niquel

[Thib4s]

De rien ;P
J'ia mis le code de base pour faire des menu horizontaux avec des listes c'est clair que j'ai pas mis en forme avec tes balises sorry :S

[DiabloTC]

Ha non mais t'inquiète c'est parfait comme ca