Voila, je me présente, Sébastien, 19 ans. Je suis actuellement en stage dans une entreprise et je dois m'occuper de mettre en forme les templates sur un blog php de type lifetype pour le customiser aux couleurs de l'entreprise, seulement j'y connais pas grand chose... J'ai passé toute la journée a chercher partout, testé differents trucs, et rien a faire 
Voila mon probleme:
J'ai:
- Une page avec un fond gris
- Un conteneur avec une image de fond positionnée en top / np repeat
- Un header qui marche parfaitement bien, ou divers elements comme des menus / logos se placent en position relative par rapport au conteneur
- Un main divisé en 3 blocs (menu gauche , menu droit, et corps), ou se trouve le probleme!
- Un footer
Mon probleme c'est que j'ai beau chercher, je n'arrive pas a placer les blocs du main cote a cote, et voila ce que ca donne en screen:
ICI
http://img141.imageshack.us/my.php?image=screenshot4vz.jpg
Ici, on ne voit pas le footer, ni le bloc corps du bloc main, car en fait, seul le premier bloc du main est bien positionné, tous les autres se mettent automatiquement en dessous de celui-ci...
J'ai essayé diverses solutions, mais sachez que j'ai des contraintes quand meme: étant donné que je travaille sur des templates, les 3 blocs du main sont de taille variable... il m'est donc impossible d'utiliser des positions telles que top: -200px ou autre, car si un nouvel article est posté sur le blog, tout va se redécaller...
Je ne peux pas non plus vraiment utiliser de positions absolues ni de float, car la taille de mon conteneur doit dépendre du plus grand élément du bloc main, sinon l'image de background ne se déroule pas entierement, et le fond blanc ne va pas jusqu'en bas (en gros le corps du main va dépasser sur le fond blanc et se retrouver sur le background gris de la page...)
En code ca donne, en simplifé:
Et le css:
Voila
Ca doit vraiment pas etre sorcié a résoudre comme probleme, mais moi j'y arrive vraiment pas, et pourtant c'est pas faute d'avoir cherché je peux pas trop avancer tant que j'ai pas résolu ce probleme... donc si quelqu'un passe par la et a une ptite astuce pour m'aider...
Pour le moment j'ai trouvé une solution qui me convient moyennement:
- Etant donné que j'arrive a placer comme il faut un des elements du bloc main, je peux placer la partie du milieu qui sera considérée comme la plus longue. Les menus a gauche et a droite placés en absolute, si le corps n'est pas assez grand, ils vont dépasser de l'arriere plan blanc et aller sur le gris... En gros le probleme ne sera la que sur les blogs vides ou peu remplis (les menus + grand que le contenu), mais j'aimerai quand meme bien le regler ^^
PS: je précise que je ne souhaite avoir que des solutions aux normes xhtml / css2
Merci d'avance
Modifié par rQL (11 May 2006 - 16:30)
Voila mon probleme:
J'ai:
- Une page avec un fond gris
- Un conteneur avec une image de fond positionnée en top / np repeat
- Un header qui marche parfaitement bien, ou divers elements comme des menus / logos se placent en position relative par rapport au conteneur
- Un main divisé en 3 blocs (menu gauche , menu droit, et corps), ou se trouve le probleme!
- Un footer
Mon probleme c'est que j'ai beau chercher, je n'arrive pas a placer les blocs du main cote a cote, et voila ce que ca donne en screen:
ICI
http://img141.imageshack.us/my.php?image=screenshot4vz.jpg
Ici, on ne voit pas le footer, ni le bloc corps du bloc main, car en fait, seul le premier bloc du main est bien positionné, tous les autres se mettent automatiquement en dessous de celui-ci...
J'ai essayé diverses solutions, mais sachez que j'ai des contraintes quand meme: étant donné que je travaille sur des templates, les 3 blocs du main sont de taille variable... il m'est donc impossible d'utiliser des positions telles que top: -200px ou autre, car si un nouvel article est posté sur le blog, tout va se redécaller...
Je ne peux pas non plus vraiment utiliser de positions absolues ni de float, car la taille de mon conteneur doit dépendre du plus grand élément du bloc main, sinon l'image de background ne se déroule pas entierement, et le fond blanc ne va pas jusqu'en bas (en gros le corps du main va dépasser sur le fond blanc et se retrouver sur le background gris de la page...)
En code ca donne, en simplifé:
<div id="BLOC_PRINCIPAL">
PARTIE SUR LE HEADER: SANS PROBLEME
<div id="MAIN">
<div id="BARRE_GAUCHE">
CONTENU DE LA BARRE GAUCHE (la hauteur n'est pas fixe vu que template...)
</div>
<div id="BARRE_DROITE">
CONTENU DE LA BARRE DROITE (la hauteur n'est pas fixe vu que template...)
</div>
<div id="CONTENU">
CONTENU DU CORPS (la hauteur n'est pas fixe vu que template...)
</div>
</div> (main)
<div id="FOOTER">
CONTENU DE LA BARRE DROITE (la hauteur n'est pas fixe vu que template...)
</div>
</div> (bloc principal)
Et le css:
#BLOC_PRINCIPAL {
position:relative;
width:900px;
background-image:url("./fond_formation.jpg");
background-position:top;
background-repeat:no-repeat;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top:0;
}
#MAIN {
width:900px;
text-align:center;
heigth: 100%;
}
#BARRE_GAUCHE {
position: relative;
top:10px;
width: 170px;
left:15px;
font:12px/1.5 trebuchet ms, verdana, arial, helvetica, sans-serif;
color:#666;
background-color:#FFFFFF;
text-align: left;
}
#BARRE_DROITE {
position:relative;
left:715px;
width: 170px;
font:12px/1.5 trebuchet ms, verdana, arial, helvetica, sans-serif;
color:#666;
background-color:#FFFFFF;
text-align: left;
clear:both;
}
#CONTENU {
position: relative;
left: 210px;
width: 480px;
color: #333;
text-align:center;
background-color:#FFCCFF;
clear:both;
}
#FOOTER {
position:relative;
width:900px;
bottom:0px;
text-align:center;
background-color:#00FF00;
font:10px verdana, arial, helvetica, sans-serif;
color:#333;
text-transform: uppercase;
}
Voila
Ca doit vraiment pas etre sorcié a résoudre comme probleme, mais moi j'y arrive vraiment pas, et pourtant c'est pas faute d'avoir cherché
je peux pas trop avancer tant que j'ai pas résolu ce probleme... donc si quelqu'un passe par la et a une ptite astuce pour m'aider... Pour le moment j'ai trouvé une solution qui me convient moyennement:
- Etant donné que j'arrive a placer comme il faut un des elements du bloc main, je peux placer la partie du milieu qui sera considérée comme la plus longue. Les menus a gauche et a droite placés en absolute, si le corps n'est pas assez grand, ils vont dépasser de l'arriere plan blanc et aller sur le gris... En gros le probleme ne sera la que sur les blogs vides ou peu remplis (les menus + grand que le contenu), mais j'aimerai quand meme bien le regler ^^
PS: je précise que je ne souhaite avoir que des solutions aux normes xhtml / css2
Merci d'avance
Modifié par rQL (11 May 2006 - 16:30)
