+- 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]](http://s2.noelshack.com/old/up/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
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
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
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
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