CSS Alignement des blocs horizontal

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS Alignement des blocs horizontal

jacques33-40

Vivre c'est déjà lutter !

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

Publicité

tityus

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.

aspirateur

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

jacques33-40

Vivre c'est déjà lutter !

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

jacques33-40

Vivre c'est déjà lutter !

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,

jacques33-40

Vivre c'est déjà lutter !

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

FORUM HardWare.fr

Programmation

HTML/CSS

CSS Alignement des blocs horizontal

Sujets relatifs
[Résolu] Bug: le texte est gros aléatoirement...	Vérifier l'utilisation d'un CSS sur tout un site
CSS et pages en chinois : aide bienvenue !	Problème feuille de style CSS
Menu CSS déroulant, problème IE8	Créer un comprtement avec du CSS
Créer un comprtement avec du CSS	Css sous IE.
Convertir inline CSS en règles ? Converts inline style into CSS rules
Plus de sujets relatifs à : CSS Alignement des blocs horizontal

Page générée en 0.065 secondes