Sujet Précédent Sujet Suivant

Mes div ne sont pas à la meme hauteur

jeromei Messages postés 14 Statut Membre -  
jeromei Messages postés 14 Statut Membre -
Bonjour, 
http://jeromei.phpnet.org/copie_de_travail</code>



je n'arrive pas à mettre mes trois divs gauche, centre et droite à la même heuteur.



pouvez vous m'aidez svp.



phpnet ne fonctionne peut etre pas ce matin, je n'arrive pas y accéder.



bonjour,



je n'arrive pas à mettre mes trois blocks gauche, centre et droite à la même hauteur.



pouvez vous m'aidez svp.



voici le code css


/**********************************
 ***********************************
 ***         structure css de tout le site   **
 ***********************************
 **********************************/




body{
  margin:0;
  padding:0;
  background: #33CCFF url(../images/degrade-bleu.jpg) repeat-x;

}
#global{
  width:776px;
  background-color:#ffffff;
  margin-top:4%;
  margin-left:auto;
  margin-right:auto;
}
#header{
  
  height: 190px;
  width:776px;
  background-color:#ffffff;
}

#container{
	width: 776px;
	background-color: #ffffff;
	

}


/**********************************
 ***********************************
 ***         div gauche dans laquelle se trouve le menu
 ***********************************
 **********************************/

#gauche{
  width:170px;
 height:525px;
  float:left;
   background: url(../images/fond-boutons-gauche.jpg) no-repeat;
}



/**********************************
 ***********************************
 ***         structure du menu vertical dans div menu incorpore dans div gauche ***
 ***********************************
 **********************************/

#menu ul li {
	
	margin-bottom: 31px;/*espacement entre les differents rectangles du menu*/	
	width:130px;
	height:28px;
	border-style:none;
	list-style-type:none;		
	}

#menu ul {
    padding: 8px;/*mozilla par defaut applique un padding de 40px;*/
	margin:0;/*ie par defaut applique un margin de 40px;*/
	}


#menu ul li.l1 a {background:url(../images/accueil1.jpg) no-repeat 0 0;}
#menu ul li.l2 a {background:url(../images/presentation1.jpg) no-repeat 0 0;}
#menu ul li.l3 a {background:url(../images/nosservices1.jpg) no-repeat 0 0;}
#menu ul li.l4 a {background:url(../images/nosengagements1.jpg) no-repeat 0 0;}
#menu ul li.l5 a {background:url(../images/votremaison1.jpg) no-repeat 0 0;}
#menu ul li.l6 a {background:url(../images/contact1.jpg) no-repeat 0 0;}
#menu ul li.l7 a {background:url(../images/rejoignezeligo1.jpg) no-repeat 0 0;}
#menu ul li.l8 a {background:url(../images/devenezcourtier1.jpg) no-repeat 0 0;}
#menu ul li.l9 a {background:url(../images/espacepartenaire1.jpg) no-repeat 0 0;}


#menu ul li.l1 a:hover {background:url(../images/accueil2.jpg) no-repeat 0 0;}
#menu ul li.l2 a:hover {background:url(../images/presentation2.jpg) no-repeat 0 0;}
#menu ul li.l3 a:hover {background:url(../images/nosservices2.jpg) no-repeat 0 0;}
#menu ul li.l4 a:hover {background:url(../images/nosengagements2.jpg) no-repeat 0 0;}
#menu ul li.l5 a:hover {background:url(../images/votremaison2.jpg) no-repeat 0 0;}
#menu ul li.l6 a:hover {background:url(../images/contact2.jpg) no-repeat 0 0;}
#menu ul li.l7 a:hover {background:url(../images/rejoignezeligo2.jpg) no-repeat 0 0;}
#menu ul li.l8 a:hover {background:url(../images/devenezcourtier2.jpg) no-repeat 0 0;}
#menu ul li.l9 a:hover {background:url(../images/espacepartenaire2.jpg) no-repeat 0 0;}
      
		
#menu a{
		display:block;
		width:130px;
		height:28px;
        text-decoration: none;
		text-indent:-999em; 
		overflow:hidden  /*chasse tres loin le texte */
}




/**********************************
 ***********************************
 ***         div du centre       ***
 ***********************************
 **********************************/
 
	#centre{
  width:478px;
  height:495px;
  float:left;
  font-family: Arial, verdana, sans serif;
  font-size:12px;
  color:#666666; 
  border-style:none; 
  background-color:#ffffff;
  padding-bottom:150px;
}



 p{
	padding-bottom:15px; 
	margin-left:20px;
	font-family: Arial, verdana, sans serif;
	font-size:14px;
	color:#666666;
	font-weight:bold;
	
  }


h6 {
text-align:justify;
}

h5 {
text-align:center;
color:#797979;
}

h4 {
text-align:center;
}

h3 {
text-align:center;
}

h2 {
text-align:center;
}

h1 {
text-align:center;
}


/**********************************
 ***********************************
 ***         navigation du menu horizontal***
 ***********************************
 **********************************/

 
#nav ul li  {
        
		float:left;
        width: 60px;
		height:40px;
       
	}
	#nav li{
	margin-right:20px;
	}



#nav  a {
        display: block;
	    width: 60px;
		height:40px;		
        text-decoration: none;	
       
	}

#nav ul {
		
		 
        list-style-type: none; 
		zoom:1;		 
		overflow:hidden;
		 margin-left:15px;
}

        #nav ul li.l1 a {background:url(../images/offres1.jpg) no-repeat 0 0;}
        #nav ul li.l2 a {background:url(../images/implantation1.jpg) no-repeat 0 0;}        
		#nav ul li.l3 a {background:url(../images/espaceclient1.jpg) no-repeat 0 0;}
		#nav ul li.l4 a {background:url(../images/devis1.jpg) no-repeat 0 0;}
		#nav ul li.l5 a {background:url(../images/calculatrice1.jpg) no-repeat 0 0;}
		

        #nav ul li.l1 a:hover {background:url(../images/offres2.jpg) no-repeat 0 0;}
        #nav ul li.l2 a:hover {background:url(../images/implantation2.jpg) no-repeat 0 0;}       
		#nav ul li.l3 a:hover {background:url(../images/espaceclient2.jpg) no-repeat 0 0;}
		#nav ul li.l4 a:hover{background:url(../images/devis2.jpg) no-repeat 0 0;}
		#nav ul li.l5 a:hover {background:url(../images/calculatrice2.jpg) no-repeat 0 0;}
		
        #nav ul li a span {display:none;} /*On cache le texte qui nous sert juste à remplir le lien*/


 
	#nav img{
        border-style: none;
}




/**********************************
 ***********************************
 ***         DIV droite     ***
 ***********************************
 **********************************/

#droite{
	padding:auto;
	  margin:auto;
	   float:left;
	width:125px;
  height:525px;
    font-family: Arial, verdana, sans serif;
  font-size:12px;
  color:#666666;
   text-align:center;
  border-style:none;  
   background-color:#ffffff;
}



/**********************************
 ***********************************
 ***         DIV PIED     ***
 ***********************************
 **********************************/

#pied{

margin:auto;
padding:auto;	
height:15px;
width:776px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	clear:both;

}
#pied a,
#pied a:link,
#pied a:active,
#pied a:visited{
  color:#106488;
	text-decoration:none;
}
#pied a:hover{
  color:#797979;
	
}


/**********************************
 ***********************************
 ***         FORMULAIRE          ***
 ***********************************
 **********************************/

/* Formulaire de contact*/
form{
  margin: 40px 0 0 20px;

}
label{
  display:block;
  font-weight:bold;
  margin:10px 0 5px 0;
}

input, textarea{
  width:300px;
  display:block;
  border:1px solid #ffccff; /**/
  background: #f1f1f1
}

textarea{
  height:200px;
}

fieldset {
  border:0;
}

input {
  padding:3px 0 3px 3px;
  font-size:10px;
}

input#envoyer{
  width:auto;
  padding:0;
  margin:16px 0 0 145px;
  border: none;


/**********************************
 ***********************************
 ***         CALENDRIER PAGE DROITE        ***
 ***********************************
 **********************************/

caption /* Titre du tableau */
{
margin: auto; /* Centre le titre du tableau, ça rend mieux */
font-family: "Trebuchet MS", Arial, "Times New Roman", serif;
font-size: 1.2em; /* taille de la police */
color: #556dff; /* Couleur du texte */
margin-bottom: 10px; /* Marge avec le tableau */
}

table /* Le tableau en lui-même */
{
margin: auto; /* Centrons notre tableau */
border: 4px inset blue; /* Bordure bleue effet 3D */
border-collapse: separate; /* Rend les cellules indépendantes les unes des autres */
}

th /* Les cellules d'en-tête */
{
background-color: #7ba3ff; /* couleur de fond */
color: white; /* couleur du texte */
font-size: 1.1em; /* taille des jours */
font-family: "Trebuchet MS", Arial, "Times New Roman", serif;
}

td /* Les cellules normales */
{
border: 1px solid black;
border-style: dotted; /* une bordure en pointillés */
font-family: "Trebuchet MS", Arial, "Times New Roman", serif;
text-align: center; /* Tous les numéros des cellules seront centrés*/
padding: 1px; /* marge intérieure aux cellules */
empty-cells: show; /* révèle les cellules vide */
}

.lienCalendrier /* Les cellules normales */
{
   border: 1px solid black;
   border-style: dotted; /* une bordure en pointillés */
   font-family: "Trebuchet MS", Arial, "Times New Roman", serif;
   text-align: center; /* Tous les numéros des cellules seront centrés*/
   padding: 1px; /* marge intérieure aux cellules */
   empty-cells: show; /* révèle les cellules vide */
}

.lienCalendrierJour {
    /* La cellule du jour actuel dans le calendrier */
    background-color: rgb(86, 139, 239);
}



/**********************************
 ***********************************
 ***         les mentions       ***
 ***********************************
 **********************************/

#droite a {
color:#33ccff;
}

h3 {
color:#33ccff;
text-decoration:underline;
margin:0 0 4px 0;
}

/**********************************
 ***********************************
 ***         les print page css      ***
 ***********************************
 **********************************/

@page {
  size:21.0cm 29.7cm;
  margin-top:1.7cm;
  margin-bottom:1.4cm;
  margin-left:2cm;
  margin-right:2cm;
}


le code html est celui-ci 


<body>

<header>

<global>

<container>

<gauche>
<menu>

<centre>

<nav>

<droite>

<pied>

<global>

<body>


merci pour votre aide</pre>

1 réponse

Réponse 1 / 1
alexdelareunion Messages postés 555 Statut Membre 142
 
peux-tu fournir le 'vrai' code html de ta page, parceque le code que tu fournis ici est incorect et incomplet. L'accesseur de style avec un caractère dièse '#' identifie l'id d'un élément de ta page, et non une balise ( cf le div 'centre')
0
jeromei Messages postés 14 Statut Membre
 
Comme demandé, voici le code html complet

désolé de ne pas l'avoir mit avant.

mon "centre" est bien une div mais sans le code ce n'était effectivement pas visible... 


<!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" lang="fr">


<head>

</head>


<body>

<div id="global"><!-- div debut de la page entière-->


  <div id="header"> <!--debut header-->
  
<object type="application/x-shockwave-flash" width="776" height="190" data="flash/bandeau-eligo.swf">
<param name="movie" value="flash/bandeau-eligo.swf" /></object>

	</div> <!--fin header--> 


  <div id="container">
  
    <div id="gauche">
		
		<br />

	<div id="menu">
     
        <ul>		
		
			<li class="l1"><a href="index.php" alt="accueil" title="page d'accueil">Accueil</a></li>
			<li class="l2"><a href="presentation.php" alt="presentation eligo" title="presentation eligo">Presentation</a></li>
			<li class="l3"><a href="service.php" alt="les services d'eligo"title="presenttaion des services eligo">Nos services</a></li>
			<li class="l4"><a href="engagement.php" alt="les engagements d'eligo"title="nos engagements">Nos engagements</a></li>
			<li class="l5"><a href="maison.php" alt="votre maison" title="votre maison">Votre maison</a></li>
			<li class="l6"><a href="mail.php" alt="icone de contact"title="contactez nous">Contact</a></li>
			<li class="l7"><a href="rejoignez.php" alt="rejoignez le groupe eligo"title="rejoindre notre groupe">Rejoignez Eligo</a></li>
			<li class="l8"><a href="courtier.php" alt="devenir courtier" title="devenir courtier eligo">Devenez Courtier</a></li>
			<li class="l9"><a href="partenaire.php" alt="notre espace partenaire"title="espace partenaire">Espace Partenaire</a></li>				
			
			
        </ul>

      </div>< !fin div menu-->
  	
		  
      
    </div><!--fin div gauche-->
	
	
    <div id="centre"><!-- debut milieu-->
   
	  <div id="nav">< !--barre de navigation menu du haut-->

    <ul>

        <li class="l1"><a href="affichage_annonce.php" alt="affichage des annonces" title="afichage annonces"><span>nos offres</span></a></li>

        <li class="l2"><a href="implantation.php" alt="logo implantation" title="logo implantation"><span>implantation</span></a></li> 

		<li class="l3"><a href="espace.php" alt="logo espace client" title="logo espace client"><span>espace client</span></a></li>

		<li class="l4"><a href="devis.php" alt="logo devis en ligne" title="devis en ligne"><span>devis en ligne</span></a></li>
				
		<li class="l5"><a href="demo-camembert.php" alt="camembert dynamique indiquant des valeurs" title="logo calculatrice"><span>camembert dynamique</span></a></li>
	
    </ul>
	
	<br /><br />

</div>< !--fin div nav -->
  
	<p>NEGOCIER VOTRE PROJET,<br/><br />
	C'EST NOTRE METIER</p>

    
      <img src="images/pub.jpg" alt="photopubmaison" title="selectionner le meilleur constructeur" />
			
		
    </div><!-- fin centre-->
			
    <div id="droite">

	
	<img src="images/4raisons.jpg" alt="trait" title="trait de separation"/><br />
	  
	     

    </div>   <!-- div fin droite--> 
    
	</div>	<!--fin div container-->
	
	</div>   <!--fin de global-->

<div id="pied">

<a href="recrute.php"alt="recrutement eligo" title="eligo recrute" >Eligo recrute</a>    |   <a href="newsletter.php"alt="newsletter eligo" title="newsletter">Newsletter</a>    |   <a href="mail.php" alt="contact" title="contactez nous">Contact</a> | 
<a href="developpement.php"alt="developpement maisons"title="developpement energie maison">Développement durable</a> | <a href=" conditions.php"alt="les conditions générales d'eligo france" title="les conditions générales">Conditions générales</a> | <a href="partenaire.php">Partenaires</a> | 
 <a href="mentions.php"alt="les mentions légales du site" title="les mentions légales du site">Mentions légales</a> 
 
 </div><!--fin div pied-->

</body>

</html>
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
Donnée des ponts de france
Magouel -
Raymond PENTIER -

12 réponses
Aligner 2 photos côte à côte...
Dri80 -
tkyt -

10 réponses
gps poid lourd comparatif, info...
kimi -
Kevin -

11 réponses
Calcul d'itinéraire pour poids lourd gratuit
jean*jean -
mozart13 -

48 réponses