28173 sujets

CSS et mise en forme, CSS3

RESOLU Probleme mise en page

Voila j ai posté dans la rubrique HTML mais je pense que celle ci sera mieux appropriée...

Bonjour, je suis confronté a un petit problème récurent...

Je cree actuellement une page web contenant une DIV ID="PAGE" placée juste apres la balise BODY et qui se ferme en fin de page juste avant BODY, dans mon CSS je lui attribue BLANC comme couleur de fond... Jusque là tous va bien... mais lorsque je remplis ma page et que les BLOCCONTENU s'agrandisse.. la DIV PAGE elle ne s'agrandit pas.

<body>

<div id="page">

<!--header-->

<div id="header"></div>

<!--MENU-->

<div id="blocMenu">

<div class="blocTitre"><div class="titre">MENU</div></div>

<div class="menuLiens"><div class="texte">LIEN PAGE</div></div>

</div>



<!--CONTENU-->

<div id="blocContenu">

<div class="blocTitre"><div class="titre">CONTENU</div></div>

<div class="contenuTexte"><div class="texte">TEXTE DE CONTENU</div>

</div>
<!--FOOTER-->
<div id="footer"><div class="partenaire"></div></div>
<div id="copyright"></div>
</div>
<!--Fin de page-->
</body>



voici le CSS qui n'est pas terminé mais le probleme est deja present.


/* Bloc de la page */

body{

background-color:#00FF00;

margin: 0;

font-family: verdana, arial, sans-serif;

font-size:12px;

text-align:center;

}

#page{

border:1px solid #000000;

background-color:#FFFFFF;

width:760px;

height:auto;

margin-right:auto;

margin-left:auto;

margin-top:10px;

padding:0px;

text-align:left;

}

#header{

border-bottom:1px solid #000000;

}

#blocMenu{

margin-top:5px;

margin-left:10px;

width:150px;



float:left;

}

#blocContenu{

margin-top:5px;

margin-right:10px;

width:570px;

height:400px;

float:right;

border:1px solid #000000;

}



#footer{

float:left;

margin-top:5px;

margin-left:10px;

}

#copyright{

margin-top:5px;

margin-right:0px;

float:right;

font-size:10px;

color:#FFFFFF;



}



/* Bloc de contenu */

.blocTitre{ 

background-color:#00CC00;

text-align:center;

border-bottom:1px solid #000000;

}

.menuLiens{

}

.menuLiens li a { color:#00CC00;

text-decoration: none ;}

.contenuTexte{

}

.titre{ 

font-size:14px;

color:#FFFFFF;

text-shadow:#333333;

text-transform:capitalize;

}

.texte{

}

.partenaire{

font-size:10px;

color:#999999;

}

.partenaire a {

font-size:10px;

color:#999999;

text-decoration:none;

}




J espere que cela vous aider à m'aider car je n arrive pas a comprendre pq ce probleme... la DIV PAGE est sensé suivre l'allongement de la page, non? qu ai je mal codé?

Merci de votre aide.
Modifié par Webconcept (12 May 2006 - 23:54)
Salut

Pour commencer il te manque la fermeture du div "page" Smiley smile

Mais ce n’est pas ton problème principal Smiley smile
Tu as mis ton div "blocContenu" en float ce qui le sort du flux normal et donc ne remplis pas ton div "page"

Utilise plutôt le css ci dessous


#blocContenu{
	margin-top:5px;
	margin-right:10px;
	width:570px;
	height:400px;
	border:1px solid #000000;
	margin-left: 170px;
}


A+
Merci effectivement cela fonctionne :d je pensais qu'il etait possible de mettre en FLOAT RIGHT... mais la resolution semblait simple.

Merci a toi... Smiley cligne
Sujet clos
Aller à