JeuWeb - Crée ton jeu par navigateur
Placement de div - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Placement de div (/showthread.php?tid=4882)



Placement de div - DiabloTC - 06-06-2010

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 :

[Image: sans_titre-900b05fb79.png]

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 Smile


RE: Placement de div - Shudrum - 06-06-2010

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

Regarde un peu ca : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#menuhorizontal


RE: Placement de div - php_addict - 06-06-2010

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


RE: Placement de div - Thib4s - 06-06-2010

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


RE: Placement de div - DiabloTC - 06-06-2010

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 Confused


RE: Placement de div - Thib4s - 06-06-2010

<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


RE: Placement de div - DiabloTC - 07-06-2010

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


RE: Placement de div - Thib4s - 07-06-2010

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


RE: Placement de div - DiabloTC - 07-06-2010

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