Bonjour,
J'ai un souci à vous soumettre:
je suis en train de refaire mon site et j'ai choisi de le réaliser en utilisant au maximum les feuille de style.
Voici la page d'accueil : http://develop.sosvacances.com/.
Pour aller au plus vite, la page est conçu sur trois colonnes dans un conteneur
Code :
- <div id="contenu">
- <div id="cont_hd"></div> (Div affichant l'image de l'angle)
- <div id="cont_hg"></div> (Div affichant l'image de l'angle)
- affichage de la colonne de gauche(les box s'affichent les unes sous les autres)
- ---------------------------------------
- <div id="blocpromovol_1">
- colonne 1
- </div>
- Informations centrale (les box s'affichent les unes sous les autres)
- ---------------------------------------
- <div id="blocpromovol_1">
- colonne 2
- </div>
- <div id="blocpromovol_1">
- colonne 2
- </div>
- <div id="blocpromovol_1">
- colonne 2
- </div>
- affichage de la colonne de droite(les box s'affichent les unes sous les autres)
- ---------------------------------------
- <div id="blocpromovol_2">
- colonne 3
- </div>
- <div id="cont_bd"></div> (Div affichant l'image de l'angle)
- <div id="cont_bg"></div> (Div affichant l'image de l'angle)
- </div>
|
Mon souci vient de l'affichage de la colonne de droite: J'aimerai pouvoir dire à ma feuile de style que l'affichage doit être à droite et à 2 px du haut du conteneur.
Actuellement tel que j'ai fait cela ne va pas car en fonction des écran et des navigateur, cette colonne ne s'affiche pas au bon endroit. Elle est dépendante de la longueur de la colonne précédente.
Voici un extrait de ma feuille de style:
Code :
- #contenu {
- float: left;
- width : 974px;
- height : 100%;
- background-color : #ffffff;
- margin-top: 10px;
- margin-right: 25px;
- margin-bottom: 25px;
- margin-left: 25px;
- }
- #cont_hg, #cont_hd, #cont_bd, #cont_bg
- {
- height: 5px;
- width: 5px;
- background-repeat: no-repeat;
- }
- #cont_hg{
- background-image : url('../images/ang_sable_h_g.png');
- background-position:top;
- }
- #cont_hd{
- background-image : url('../images/ang_sable_h_d.png');
- background-position:top;
- float: right;
- }
- #cont_bd{
- background-image : url('../images/ang_sable_b_d.png');
- background-position:bottom;
- float: right;
- clear: both;
- margin-bottom: -15px;
- }
- #cont_bg{
- background-image : url('../images/ang_sable_b_g.png');
- background-position:bottom;
- clear: both;
- }
- #blocpromovol_1 {
- float : left;
- background : url('../images/fond_box_1194px.png') repeat-x top;
- background-position:top;
- width : 250px;
- height : auto;
- margin : 2px 0px 0px 8px;
- }
- #blocpromovol_2 {
- float : right;
- background : url('../images/fond_box_1194px.png') repeat-x top;
- background-position:top;
- width : 250px;
- height : auto;
- margin : -550px 6px 0px 0px!important!;
- margin : -523px 6px 0px 0px;
- position: relative;
- }
|
Quelqu'un aurait une idée pour m'aider à avancer?
Merci