bonjour,
j'ai refais mon code css en supprimant les "height"
alors je met le nouveau code css
J'ai ma div centrale qui descend.
quand je fais taille des blocks, ils n'ont pas la même taille alors qu'à div gauche, centre, droite je leur ai mit un height identique.
il faut que je meuble gauche et droite avec des <br /> pour les faire descendre ou autre moyens?
ou alors celà vient de mon menu de gauche qui deborde trop? taille des images?
http://jeromei.phpnet.org/copie_de_travail/
ps: phpnet à l'air d'etre en carafe aujourd'hui
voici mon code css
j'en profite pour mettre le code html
merci pour votre aide
Modifié par jeromei (24 Jun 2008 - 09:15)
j'ai refais mon code css en supprimant les "height"
alors je met le nouveau code css
J'ai ma div centrale qui descend.
quand je fais taille des blocks, ils n'ont pas la même taille alors qu'à div gauche, centre, droite je leur ai mit un height identique.
il faut que je meuble gauche et droite avec des <br /> pour les faire descendre ou autre moyens?
ou alors celà vient de mon menu de gauche qui deborde trop? taille des images?
http://jeromei.phpnet.org/copie_de_travail/
ps: phpnet à l'air d'etre en carafe aujourd'hui
voici mon 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;
}
j'en profite pour mettre le code html
<!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>
merci pour votre aide
Modifié par jeromei (24 Jun 2008 - 09:15)