18041 sujets

Questions générales et questions de débutants

Centrer son texte...

Bonsoir,

Je sais qu'as là premiere vu du titre de mon sujet, vous vous etes dit que je n'avais du pas chercher assez de moi meme avant de venir vous poser cette question...

Pourtant je sais centrer du texte dans un bloc mais j'ai un probleme...

Voici mon site : IcI

Comme vous pouvez le remarquer, mon menu est constitué de 5 images différentes avec un effet dit de "Roll-Over".

Ces 5 images sont contenus dans un seul bloc et aligner horizontalement, mais, elles ne font pas toute la même largeur et voila le probleme...

Exemples :

http://cder-immo.fr/images/bouton1.gif et http://cder-immo.fr/images/bouton2.gif

Vous pouvez le constater, elle ne font pas la meme largeur et donc quand je donne comme "ordre" dans le css de tout centrer, ca centre mal (surtout pour les deux boutons aux extrémités).

Ce que j'aimerais savoir c'est comment centrer dans les 5 images, les 5 textes comme je veux ?

Voici mon code HTML : 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenue sur CDER</title>
</head>

<body>
<div id="transparence">
   <!-- Ici on mettra la bannière -->

<div id="en_tete">
   <!-- Ici on mettra la bannière -->
</div>

<div id="menuh">
<ul>
<li><a href="#" id="un">&nbsp;<span>Notre Société</span></a></li>
<li><a href="#" id="deux">&nbsp;<span>Nos Missions</span></a></li>
<li><a href="#" id="trois">&nbsp;<span>Nos Projets</span></a></li>
<li><a href="#" id="cat">&nbsp;<span>Nos Partenaires</span></a></li>
<li><a href="#" id="sink">&nbsp;<span>Nous Contacter</span></a></li>
</ul>
</div>

		
<div id="corps"></div>

<div id="pied_de_page">
  Designed & Created By CDER<br/>
  All Rights Reserved  </div>


</body>
</html>


et CSS :

body
{
   width: 814px; /* Largeur de notre Site */
   margin:auto;
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-image:url(images/fond.gif);
   background-repeat:repeat-x;
  
}

/* L'en-tête */

#en_tete
{
   width: 814px;
   height: 216px;
   background-image: url("images/header.gif");
   background-repeat: no-repeat;
 
}

/* Le Menu */

#menuh  {
    padding:0;  
    text-align:center;
	margin-bottom:41px;

}

#menuh ul  {
    float:left;
    list-style-type:none;
    display:block;
	text-align: center;
    padding:0;
    margin:0;
}

#menuh ul li {
    float:left;
    display:block;
	text-align: center;
    margin:0;
    padding:0;
}

#menuh  a {
    color:#FFFFFF;
    text-decoration:none;
	text-align: center;
    display:block;
    float:left;
    margin:0px ;
    height:41px;

}

#menuh #un {
     width:172px;
     height: 41px;
     background-image: url("images/bouton1.gif");
	 background-repeat: no-repeat;
	 }
	 
	 
#menuh #deux {
     width:153px;
     height: 41px;
     background-image: url("images/bouton2.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #trois {
	 width:158px;
	 height: 41px;
	 background-image: url("images/bouton3.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #cat {
	 width:157px;
	 height: 41px;
	 background-image: url("images/bouton4.gif");
	 background-repeat: no-repeat;
	 }
	 
#menuh #sink {

	 width:174px;
	 height: 41px;
	 background-image: url("images/bouton5.gif");
	 background-repeat: no-repeat;
	 }	
			

#menuh #un:hover {
    width:172px;
    background-image:url("images/bouton1_P.gif");
    height:41px;
    background-position:0px
	 }

#menuh #deux:hover {
    width:153px;
    background-image:url("images/bouton2_P.gif");
    height:41px;
    background-position:0px
}

#menuh #trois:hover {
    width:158px;
    background-image:url("images/bouton3_P.gif");
    height:41px;
    background-position:0px
}

#menuh #cat:hover {
    width:157px;
    background-image:url("images/bouton4_P.gif");
    height:41px;
    background-position:0px
}

#menuh #sink:hover {
    width:174px;
    background-image:url("images/bouton5_P.gif");
    height:41px;
    background-position:0px
}

/* Le Corps */

#corps
{
   width: 814px;
   height: 651px;
   background-image: url("images/corps.gif");
   background-repeat: no-repeat;
}

/* Le Pied de Page*/

#pied_de_page
{
   width: 814px;
   height: 60px;
   color:#FFFFFF;
   text-align: center;
   padding-bottom:1px;
   padding-top:1px;
   font-family: Times New Roman, Georgia, arial, Times, serif; /* Soit mise en Arial si possible*/
   background-image: url("images/footer.gif");
   background-repeat: no-repeat;

}


Merci de votre aide Smiley smile
Sujet clos
Aller à