bonjour,
je n'arrive pas à centrer mon menu horizontal, j'ai essayer en float left et en float center. aucun ne fonctionne et je n'arrive pas à center mes liens sur ma page index sous les logos voiture et carte de france.
merci si quelqu'un peut m'aider
je vous joins html et css
Bonjour,
j'ai un soucis avec mes div, des que je rajoute le menu horizontal en haut de page. 1 il n'est pas centré et. je n'arrive pas à corriger le tir.
pouvez vous m'aider svp
<body>
<div id="global">
<div id="header">
photo dans l'entete
</div><!-- fin div header -->
<div id="navglobal"> c'est mon menu horizontal
<div id="nav">
<ul>
<li><a class="ici" href="index.php" title="">accueil</a></li>
<li><a href="questions.php" title="">faq</a></li>
<li><a href="intranet.php" title="">Intranet</a></li>
<li><a href="recrut.php" title="">Recrut</a></li>
<li><a href="mail.php" title="">Nous contacter</a></li>
</ul>
</div><c'est la fin de ma div nav-->
</div> <!--fin div nav global-->
<div id="container"> debut de mon container
<div id="gauche">
<div id="menu" debut de mon menu vertical dans div gauche
</div> c'est la fin de ma div menu
</div><!--fin div gauche-->
<div id="centre"><!-- debut de ma div du milieu-->
<h3>Eligo-france au coeur de vos projets</h3>
<img src="images/photoaccueil.jpg" alt="photopubmaison" title="selectionner le meilleur constructeur" />
<div id="interlocuteur"> debut de ma div blabla lire la suite....
blllalalallalblable
<p class="photo"><a href="implantation.php"><img src="images/cartefrance.jpg" ><br />implantation</a></p>
</div><!--fin div interlocuteur-->
</div><!-- fin centre-->
<div id="droite">
<div id="newsletter">
<marquee height="140px" width :200px ;
0 behavior="scroll" direction="down" scrollamount="2"
scrolldelay="50" loop="-1" onmouseover="this.stop();" onmouseout="this.start();"
>code HTML à faire défiler<br />llllllllllllllllllllllllll<br /> llllllllllll
<br /> llllllllllll<br /> llllllllllll<br /> llllllllllll</marquee>
<a href="newsletter.php">abonnez vous</a>
</div><!-- fin newsletter-->
<p> <img src="images/cartefrance.jpg" alt="carte de france" title="logo carte de france" />
<img src="images/plan.jpg" alt="plan d'acces" title="image du plan d'acces" /></p>
</div> <!-- div fin droite-->
</div> <!--fin div container-->
<div id="pied">
<a href="recrute.php">Eligo recrute</a> | <a href="newsletter.php">Newsletter</a> | <a href="mail.php">Contact</a> |
<a href="developpement.php">Développement durable</a> | <a href=" conditions.html">Conditions générales</a> | <a href="partenaire.php">Partenaires</a> |
</div> <!--fin div pied-->
</div> <!--fin div global-->
</body>
</html>
les css
structure.css
body{
margin:0;
padding:0;
background: #33CCFF url(../images/degrade-bleu.jpg) repeat-x;
}
#global{
width:776px;
background-color:transparent;
margin-top:4%;
margin-left:auto;
margin-right:auto;
}
#header{
height: 151px;
width:776px;
background: #ffffff url(../images/bandeau.jpg) ;
}
/*---------ici nav haut*/
#navglobal{
width: 99,9%;
height:20px;
background: #ffffff;
}
#nav ul, li{
width:99,9%;
list-style: none;
margin: 0px;
padding: 0px;
line-height: 20px;
text-indent:50px;
float: left;
}
#nav a,
#nav a:link,
#nav a:visited,
#nav a:active{
display:block;
text-decoration: none;
color: blue;
font-size: 12px;
font-weight: normal;
text-align: center;
font-family: arial, verdana, sans-serif;
}
#nav a:hover{
color: orange;
}
#nav a.ici,
#nav a.ici:link,
#nav a.ici:visited,
#nav a.ici:active,
#nav a.ici:hover{
color: orange;
}
/*---------ici fin du nav haut*/
#container{
width: 776px;
background-color: #ffffff;
float:left;
/*margin-left: 120px;
margin-top: 38px;*/
}
#gauche{
width:180px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#2ab2e2;
padding-top:30px;
text-align:center;
padding-left:10px;
background-color:#ffffff;
}
#menu ul{
padding-top:30px;
margin:0;
padding-left:5px;
background-color: #ffffff;
width: 170px;
float:left;
}
#menu li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
width:160px;
}
#menu a,
#menu a:link,
#menu a:visited,
#menu a:active{
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
display:block;
text-indent: 5px;/*colle les textes menus à gauche*/
width: 100%;
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
background: #106488 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
color:#ffffff;
}
#menu a:hover{
color: #FFFFFF;
background: #ff1f61 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#centre{
width:360px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
margin-left:10px;
padding-top:30px;
padding-right:20px;
background-color:#ffffff;
}
img{
align:center;
float:left;
border-style:none;
width:80px;
}
h4 {
text-align:center;
}
h3 {
text-align:center;
color:#797979;
}
.photo{
float: left;
margin-left: 5px;
margin-right:5px;
border-style:none;
text-align: center;
width: 105px;
border-style:none;
}
.photo a,
.photo a:link,
.photo a:active,
.photo a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
.photo a:hover{
color: #106488;
background-color: #ffffff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#interlocuteur{
width:300x;/*340px*/
text-align:justify;
color:#797979;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left:5px;
margin-right:5px;
float:left;
}
#interlocuteur ul{
padding-top:30px;
margin:0;
padding-left:55px;
background-color: #ffffff;
}
#interlocuteur li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
}
#interlocuteur a,
#interlocuteur a:link,
#interlocuteur a:active,
#interlocuteur a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
#interlocuteur a:hover{
color: #106488;
background-color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#droite{
width:180x;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
float:left;
text-align:center;
float:left;
padding-top:30px;
background-color:#ffffff;
}
#newsletter{
width:140px;
height:200px;
text-align:center;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#797979;
}
#newsletter a,
#newsletter a:link,
#newsletter a:active,
#newsletter a:visited{
color:#106488;
text-decoration:none;
width:60px;
height:15px;
}
#newsletter a:hover{
color:#797979;
}
#pied{
height:15px;
width:776px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#pied a,
#pied a:link,
#pied a:active,
#pied a:visited{
color:#106488;
text-decoration:none;
}
#pied a:hover{
color:#797979;
}
#pied
{
margin:0;
clear:both;
}
Modifié par jeromei (17 Jun 2008 - 21:24)
je n'arrive pas à centrer mon menu horizontal, j'ai essayer en float left et en float center. aucun ne fonctionne et je n'arrive pas à center mes liens sur ma page index sous les logos voiture et carte de france.
merci si quelqu'un peut m'aider
je vous joins html et css
Bonjour,
j'ai un soucis avec mes div, des que je rajoute le menu horizontal en haut de page. 1 il n'est pas centré et. je n'arrive pas à corriger le tir.
pouvez vous m'aider svp
<body>
<div id="global">
<div id="header">
photo dans l'entete
</div><!-- fin div header -->
<div id="navglobal"> c'est mon menu horizontal
<div id="nav">
<ul>
<li><a class="ici" href="index.php" title="">accueil</a></li>
<li><a href="questions.php" title="">faq</a></li>
<li><a href="intranet.php" title="">Intranet</a></li>
<li><a href="recrut.php" title="">Recrut</a></li>
<li><a href="mail.php" title="">Nous contacter</a></li>
</ul>
</div><c'est la fin de ma div nav-->
</div> <!--fin div nav global-->
<div id="container"> debut de mon container
<div id="gauche">
<div id="menu" debut de mon menu vertical dans div gauche
</div> c'est la fin de ma div menu
</div><!--fin div gauche-->
<div id="centre"><!-- debut de ma div du milieu-->
<h3>Eligo-france au coeur de vos projets</h3>
<img src="images/photoaccueil.jpg" alt="photopubmaison" title="selectionner le meilleur constructeur" />
<div id="interlocuteur"> debut de ma div blabla lire la suite....
blllalalallalblable
<p class="photo"><a href="implantation.php"><img src="images/cartefrance.jpg" ><br />implantation</a></p>
</div><!--fin div interlocuteur-->
</div><!-- fin centre-->
<div id="droite">
<div id="newsletter">
<marquee height="140px" width :200px ;
0 behavior="scroll" direction="down" scrollamount="2"
scrolldelay="50" loop="-1" onmouseover="this.stop();" onmouseout="this.start();"
>code HTML à faire défiler<br />llllllllllllllllllllllllll<br /> llllllllllll
<br /> llllllllllll<br /> llllllllllll<br /> llllllllllll</marquee>
<a href="newsletter.php">abonnez vous</a>
</div><!-- fin newsletter-->
<p> <img src="images/cartefrance.jpg" alt="carte de france" title="logo carte de france" />
<img src="images/plan.jpg" alt="plan d'acces" title="image du plan d'acces" /></p>
</div> <!-- div fin droite-->
</div> <!--fin div container-->
<div id="pied">
<a href="recrute.php">Eligo recrute</a> | <a href="newsletter.php">Newsletter</a> | <a href="mail.php">Contact</a> |
<a href="developpement.php">Développement durable</a> | <a href=" conditions.html">Conditions générales</a> | <a href="partenaire.php">Partenaires</a> |
</div> <!--fin div pied-->
</div> <!--fin div global-->
</body>
</html>
les css
structure.css
body{
margin:0;
padding:0;
background: #33CCFF url(../images/degrade-bleu.jpg) repeat-x;
}
#global{
width:776px;
background-color:transparent;
margin-top:4%;
margin-left:auto;
margin-right:auto;
}
#header{
height: 151px;
width:776px;
background: #ffffff url(../images/bandeau.jpg) ;
}
/*---------ici nav haut*/
#navglobal{
width: 99,9%;
height:20px;
background: #ffffff;
}
#nav ul, li{
width:99,9%;
list-style: none;
margin: 0px;
padding: 0px;
line-height: 20px;
text-indent:50px;
float: left;
}
#nav a,
#nav a:link,
#nav a:visited,
#nav a:active{
display:block;
text-decoration: none;
color: blue;
font-size: 12px;
font-weight: normal;
text-align: center;
font-family: arial, verdana, sans-serif;
}
#nav a:hover{
color: orange;
}
#nav a.ici,
#nav a.ici:link,
#nav a.ici:visited,
#nav a.ici:active,
#nav a.ici:hover{
color: orange;
}
/*---------ici fin du nav haut*/
#container{
width: 776px;
background-color: #ffffff;
float:left;
/*margin-left: 120px;
margin-top: 38px;*/
}
#gauche{
width:180px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#2ab2e2;
padding-top:30px;
text-align:center;
padding-left:10px;
background-color:#ffffff;
}
#menu ul{
padding-top:30px;
margin:0;
padding-left:5px;
background-color: #ffffff;
width: 170px;
float:left;
}
#menu li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
width:160px;
}
#menu a,
#menu a:link,
#menu a:visited,
#menu a:active{
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
display:block;
text-indent: 5px;/*colle les textes menus à gauche*/
width: 100%;
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
background: #106488 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
color:#ffffff;
}
#menu a:hover{
color: #FFFFFF;
background: #ff1f61 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#centre{
width:360px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
margin-left:10px;
padding-top:30px;
padding-right:20px;
background-color:#ffffff;
}
img{
align:center;
float:left;
border-style:none;
width:80px;
}
h4 {
text-align:center;
}
h3 {
text-align:center;
color:#797979;
}
.photo{
float: left;
margin-left: 5px;
margin-right:5px;
border-style:none;
text-align: center;
width: 105px;
border-style:none;
}
.photo a,
.photo a:link,
.photo a:active,
.photo a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
.photo a:hover{
color: #106488;
background-color: #ffffff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#interlocuteur{
width:300x;/*340px*/
text-align:justify;
color:#797979;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left:5px;
margin-right:5px;
float:left;
}
#interlocuteur ul{
padding-top:30px;
margin:0;
padding-left:55px;
background-color: #ffffff;
}
#interlocuteur li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
}
#interlocuteur a,
#interlocuteur a:link,
#interlocuteur a:active,
#interlocuteur a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
#interlocuteur a:hover{
color: #106488;
background-color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#droite{
width:180x;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
float:left;
text-align:center;
float:left;
padding-top:30px;
background-color:#ffffff;
}
#newsletter{
width:140px;
height:200px;
text-align:center;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#797979;
}
#newsletter a,
#newsletter a:link,
#newsletter a:active,
#newsletter a:visited{
color:#106488;
text-decoration:none;
width:60px;
height:15px;
}
#newsletter a:hover{
color:#797979;
}
#pied{
height:15px;
width:776px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#pied a,
#pied a:link,
#pied a:active,
#pied a:visited{
color:#106488;
text-decoration:none;
}
#pied a:hover{
color:#797979;
}
#pied
{
margin:0;
clear:both;
}
Modifié par jeromei (17 Jun 2008 - 21:24)
,
