CSS Alignement des blocs horizontal

Marsh Posté le 23-04-2010 à 16:22:16

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

Reply

Marsh Posté le 23-04-2010 à 16:22:16

Reply

Marsh Posté le 26-04-2010 à 12:27:43

Salut,

J'ai pas tout bien compris mais bon en principe pour le décalage ta margin ou padding si c'est à l'interieur du div, puis ta text-align pour l'affichage mais je vois pas trop ou est le problème.

Reply

Marsh Posté le 26-04-2010 à 15:50:19

Salut, je te remets la réponse que je t'ai mis sur l'autre topic :

Citation :

Dans ton code HTML place la div "blocpromovol_2" après la div "blocformulairevol"

Ensuite dans le CSS modifie le comme ca:
#blocpromovol_2 {
float : left;
background : url('../images/fond_box_1194px.png') repeat-x top;
background-position:top;
width : 250px;
height : auto;

}

Message édité par aspirateur le 26-04-2010 à 15:50:32

Reply

Marsh Posté le 05-05-2010 à 17:37:32

Bonjour aspirateur et merci pour ton aide.
Cela m’a permis de comprendre le principe d’imbrication des div dans une css.
En revanche j’ai un autre souci que je remarque :
http://develop.sosvacances.com
J’ai mis dans ma page un sélecteur de ville qui permet à l’internaute de faire son choix. Je me suis grandement inspiré des explications données sur le blog de Pascal Martin http://blog.pascal-martin.fr/post/ [...] dune-ville
Le souci que j’ai c’est que mon bloc de suggestion, s’affiche correctement sur FireFox mais pas sur IE.
As-tu une idée ?
Merci d’avance,

Message édité par jacques33-40 le 05-05-2010 à 17:38:44

Reply

Marsh Posté le 10-05-2010 à 12:02:41

Bonjour,
En fait, je pense avoir compris d’où venait mon souci mais je n’arrive pas à le corriger :
Dans mon code html, j’ai un div « selecteurDep »qui contient notamment un input (id : departure )et ma lite de suggestion (id : propal_departure) qui par défaut est en display : none.

Code :

<div class="selecteurDep">
<input name="departure" type="text" id="departure" size="45" style="height:1,2em;"/>
<span id="indicateur-chargement-ville" style="display: none;"></span>
<div id="propal_departure" class="autocomplete"> </div>
<br />
<span id="city_name_fr" style="display: none;"></span>
</div>

Il faut tout simplement que je puisse indiquer dans ma CSS que propal_departure doit s’afficher dessous selecteurDep. Apparemment, IE8 ne l’entends pas de cette façon…
Comment donc pouvoir lui indiquer ceci ?

Merci de votre aide,

Reply

Marsh Posté le 13-05-2010 à 17:11:21

Bon, tout est résolu maintenant, j’ai repris pas à pas ma feuille de style (excellent exercice)… décidément les CSS n’acceptent aucune approximation !!

Message édité par jacques33-40 le 13-05-2010 à 17:15:26

Reply

CSS Alignement des blocs horizontal

Sujets relatifs:

Leave a Replay