Sujet Précédent Sujet Suivant

Mes div ne sont pas à la meme hauteur

Fermé
jeromei Messages postés 14 Date d'inscription jeudi 10 janvier 2008 Statut Membre Dernière intervention 3 septembre 2008 - 24 juin 2008 à 06:32
jeromei Messages postés 14 Date d'inscription jeudi 10 janvier 2008 Statut Membre Dernière intervention 3 septembre 2008 - 24 juin 2008 à 08:55
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
A voir également:

1 réponse

Réponse 1 / 1
alexdelareunion Messages postés 545 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 9 octobre 2023 142
24 juin 2008 à 07:14
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 Date d'inscription jeudi 10 janvier 2008 Statut Membre Dernière intervention 3 septembre 2008
24 juin 2008 à 08:55
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

Aligner 2 photos côte à côte...
Dri80 -
tkyt -

10 réponses
Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
camping car
jopic -
Alsyl -

2 réponses
Taille jeans US
Poupoupidou -
Utilisateur anonyme -

1 réponse
Excel: hauteur lignes en cm ?
txiki -
Gorri -

5 réponses