[résolu]Je n'ai pas d'ascenceur horizontal

Bonjour,

Je suis retraité et débutant d'une façon générale et j'ai acheté le bouquin CSS 2 pour potasser et pratiquer le CSS. Mon pb est le suivant : j'ai fabriqué une page avec 2 colonnes avec 2 div en float left. Tout va bien sauf que quand je réduis ma fenêtre la 2 ème colonne passe sous la 1 ère et je perds mon design. Je pense que pour que ça marche il faudrait que j'ai un ascenceur horizontal et je ne sais pas comment faire. Ma page est ici : http://j.handsc.free.fr/css/voyages.html

Merci de votre aide.
Modifié par silex (24 Nov 2005 - 08:02)

Bonsoir

Pourrais tu nous afficher le code css des div des deux colonnes stp ?

Je pense que tu as mis la largeur de tes colonnes en pixel. Donc c'est normal d'avoir ce fonctionnement, par contre si tu met les valeurs en % alors quand tu reduira la taille de ta fenetre, les largeurs suivront

Voilà le code :

#voyage {
float: left;
width: 470px;
border: 1px solid red;
margin-top: 0;
margin-left: 70px;
background-color: #ADD8E6;
}
.logement {
float: left;
width: 470px;
border: 1px solid red;
margin-left: 15px;
margin-top: 0;
margin-bottom: 15px;
background-color: #ADD8E6;
}

merci

#voyage {
	float: left;
	width: 45%;
	border: 1px solid red;
	background-color: #ADD8E6;
	margin: 15px 15px 15px 15px;
	position: fixed;
}
.logement {
	float: left;
	width: 45%;
	border: 1px solid red;
	background-color: #ADD8E6;
	margin: 15px 15px 15px 15px;
	position: fixed;
}

Modifié par Super_baloo8 (22 Nov 2005 - 21:45)

Essais de modifier ton style voyage et logement pour ce qui suit. Je l'ai essayé et ça fonctionne bien.

En fait tu n'aligne pas à gauche. Tu te contente de positionner ta zone voyage en absolu à l'endroit désiré, puis tu positionne ta zone logement avec l'aide de la marge à gauche.

#voyage {
width: 470px;
border: 1px solid red;
margin-top: 0;
margin-left: 70px;
background-color: #ADD8E6;
position: absolute;
}
.logement {
width: 470px;
border: 1px solid red;
margin-left: 555px;
margin-top: 0;
margin-bottom: 15px;
background-color: #ADD8E6;
}

Ça me semble clair...mais n'hésite pas si tu ne comprend pas bien.

Ca met tout en l'air ce que tu viens de faire Metou7, je vien de réediter mon message ou je donnais du code, celui la fonctionne, manque plus qu'a bloquer en largeur pour ne pas que les bloc se mettent les un en dessous des autres

<edit> le code donner plus haut permet jusqu'a une certaines redimmension de garder les cadres les un a coté des autre, mais apres ca repart en dessous. Dans un sens c'est mieux comme ca, car je pense que d'avoir deux scrollbar (ascenseur) m'embeterais plus qu'autre chose </edit>
Modifié par Super_baloo8 (22 Nov 2005 - 21:46)

Merci à vous deux, je vais tester ça demain

Bonjour à tous ,


Je me suis basé sur le code de metou7 et ça marche aussi bien dans ie6 que dans firefox . Mais je ne comprends pas pourquoi ça marche : ça vient du fait qu'il y a une boite positionnée en absolu ?

Je préfèrerais comprendre parce que la prochaine fois que je veux conserver mon design dans une fenêtre réduite, je vais avoir le même problème.