Positionnement menu

Question

juju.92

23 Mar 2011 à 21:19

Bonjour,
J'ai quelques problèmes à placer mon menu comme je veux ... Smiley sweatdrop

Voici ce que j'obtiens :

http://img684.imageshack.us/f/imprecran.jpg/

Voici mon code css :

body{
background:#26211d;
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFFFFF;
}

/* ///////////////////////////////

             HEADER
			 
////////////////////////////////*/

#header{
height:278px;
margin:-20px 0 0 0;
background:url(theme/titre.png) no-repeat top center;
}

/* ///////////////////////////////

             footer
			 
////////////////////////////////*/

#menufooter_liens ul{
padding:0;
margin:0;
margin-left:118px;
}

#menufooter_liens ul li{
list-style:none;
float:left;
padding:0;
}

#menufooter_liens ul li a{
height:66px;
width:138px;
background:url(theme/bouton_liens.png) no-repeat top left;
display:block;
}

#menufooter_liens ul li a:hover{
background-position:bottom left;
}

/*///////////////////////////////*/


#menufooter_livre_or ul{
margin:0;
padding:0;
margin-left:118px;
}

#menufooter_livre_or ul li{
list-style:none;
float:left;
padding:0;
}

#menufooter_livre_or ul li a{
height:66px;
width:205px;
background:url(theme/bouton_livre_or.png) no-repeat top left;
display:block;
}

#menufooter_livre_or ul li a:hover{
background-position:bottom left;
}

/*///////////////////////////////*/

#menufooter_telechargements ul{
margin:0;
padding:0;
margin-left:118px;
}

#menufooter_telechargements ul li{
list-style:none;
float:left;
padding:0;
}

#menufooter_telechargements ul li a{
height:66px;
width:280px;
background:url(theme/bouton_telechargements.png) no-repeat top left;
display:block;
}

#menufooter_telechargements ul li a:hover{
background-position:bottom left;
}

/* ///////////////////////////////

             CONTENU
			 
////////////////////////////////*/

#conteneur{
position:relative;
width:838px;
height:1318px;
margin:0 auto;
background:no-repeat top center;
background-color:#26211d;
}

#a_la_une{
position:absolute;
height:296px;
width:838px;
margin:80px 0 0 0;
background:url(theme/cadre_a_la_une.png) no-repeat top center;
}

#breves{
position:absolute;
top:664px;
height:173px;
width:563px;
background:url(theme/cadre_breves.png) no-repeat left;
}

#articles{
position:absolute;
top:847px;
height:299px;
width:562px;
background:url(theme/cadre_articles.png) no-repeat left;
}

#commentaires{
position:absolute;
left:569px;
top:665px;
height:479px;
width:269px;
background:url(theme/cadre_commentaires.png) no-repeat right;
}

#footer{
position:absolute;
height:152px;
width:838px;
bottom:11px;
background:url(theme/cadre_footer.png) no-repeat center;
}

Voici mon code html :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title> Julien-ultra </title>
	   <link href="style.css" rel="stylesheet" type="text/css" media="screen"></link>
   </head>
   
   <body>
   
   <div id="menufooter_liens">
    <ul>
		  <li><a href="#"></a></li>
    </ul>
    </div>
			
	<div id="menufooter_livre_or">
	<ul>
		  <li><a href="#"></a></li>
	</ul>
	</div>
			
	<div id="menufooter_telechargements">
	<ul>
		  <li><a href="#"></a></li>
    </ul>
    </div>
   
     <div id="conteneur">
       <div id="header"></div>
	   <div id="a_la_une"></div>
	   <div id="breves"></div>
	   <div id="articles"></div>
	   <div id="commentaires"></div>
	   <div id="footer"></div>
	       
	
		  
		  
	 </div> 
	   
	   
	   
	   
	   
  
   </body>
</html>

Comme vous pouvez le voir mon menu se trouve coupé tout en haut et je ne sais pas comment faire pour le placer correctement , à savoir j'aimerais le mettre dans le bloc tout en bas ...
Ce serait très sympa si quelques personnes prenaient le temps de m'aider car je ne m'en sors pas ...
De plus quand j'arrive à déplacer mon menu un petit peu aléatoirement et que les boutons croisent un bloc " commentaires " " a la une " etc , les boutons passent derrières ces images ...ce qui fait qu'on ne les voit plus ...

Si vous voyez des erreurs qui n'ont rien à voir avec le sujet dans mon code , je vous invite à me les signaler Smiley lol

spirou0069

23 Mar 2011 à 22:44

Salut

Juste de passage et une idée qui me vient comme ça, as tu essayer avec un margin-top?

pourquoi utilise tu plusieurs div pour ton menu?

bon travail

spirou

juju.92

23 Mar 2011 à 23:47

Je m'y prend peut être mal , j'ai utilisé plusieurs div pour décomposer chaque bouton car en faisant tout en même temps la taille des boutons doit être la même d'après ce que j'ai compris et d'après mes essais or ce n'est pas le cas , chacun de mes boutons à une taille spécifique ... cela me permet de les mettre avec un même intervalle d'espacement ...sinon comme chaque boutons à une taille différentes cela ne fait pas le même espace entre chaque boutons , c'est peut être pas clair ?
Après peut être que c'est mauvais mais ça à l'air plutôt bien parti pour l'instant Smiley ravi

Pour margin-top je viens d'essayer ça ne change rien , ça décale juste tout le site vers la bas , je l'ai rentrer dans ici :

#menufooter_liens ul{
padding:0;
margin:0;
margin-top:500px;
}

Ce n'est peut être pas là qu'il faut le rentrer ...
Bref merci pour ta réponse mais je reste toujours bloqué , mon menu est coincé en haut et couper par le conteneur ... Smiley bawling

fufu

24 Mar 2011 à 00:29

Salut,

pour tes div, tu peux les faire gicler en stylant directement le lien au moins pour garder une structure de liste correcte.

<ul id="toto">
<li><a href="#">blabla 1</a></li>
<li><a href="#">blabla 2</a></li>
<li><a href="#">blabla 3</a></li>
</ul>

et dans ton css :

#toto {}
#toto li {display:inline;}
#toto li a {display:block;float:left;width:200px;height:50px;background-color:red;margin-right: 20px;}

Modifié par fufu (24 Mar 2011 - 00:37)

Sujet clos

CSS et mise en forme, CSS3

Positionnement menu