28172 sujets

CSS et mise en forme, CSS3

Ma colonne de droite bascule sous la colonne de gauche

Bonjour tout le monde,

mon site est fait en 3 colonnes, tout allait bien (en plein écran) juqu'à ce que je le test en 800x600 et là Smiley bawling la colonne de droite bascule sous la colonne de gauche. A ce que j'ai compris il faut que je mette clear:both; mais je ne trouve pas où.

Je vous donne le lien du site de tests ici.


Pourriez-vous m'aider svp ?

Merci d'avance.
Modifié par lordbdp (11 Mar 2011 - 11:40)
bonjour,

il suffirait de fixer une largeur minimale au site a priori:
exemple:
body {min-width:1024px;}


sans plus de précisions, difficile d'en dire plus.
Il semble que ce soit uniquement IE qui ne reconnait pas ce code. Pour la version je n'ai pas vu de précision.

Pour ma part je viens de m'apercevoir que sous IE c'est encore pire car j'ai le footer qui disparaît...
tu a fixé la largeur de ton élément wrapper à 53% (de son parent qui prend toute la largeur de page). quoique tu fasses, en réduisant la taille de la fenêtre, la colonne de droite glissera à droite.

une idée de première solution envisageable : ne pas fixer de largeur au wrapper mais en fixer une aux 2 colonnes.

sinon, j'aurai plutôt fait ça (mais ça change pas grand chose, une habitude ...) :

<div id="gauche">
</div>
<div id="droite">
</div>
<div id="wrapper">
</div>

avec l'élement gauche flottant à gauche et droite.. flottant à droite. (avec aussi largeurs fiwes pour les colonnes). ce n'est pas vraiment un avantage mais ton contenu principal "wrapper" n'est plus flottant, il passe dans le flux.

en espérant t'avoir aidé
Une page en ligne ou des extraits de code qui mettent en evidence le(s) probléme(s) serait utile pour t'aider.
<edit<>je n'avais pas vu que tu avais editer ton premier post et fourni un lien</>

P.S. une pensée pour le japon
Modifié par gc-nomade (11 Mar 2011 - 13:06)
Voilà ce que j'ai actuellement :

.left1
{
    padding:0px 0 0 0px;
    float: left;
    margin:10px 3% 10px 0px;
    width: 19%;
    position:relative
}

#right
{
    float:left;
    margin:10px 0px 10px 2%;
    padding:0px 0px 5px 0px;
    position:relative;
}

#wrapper
{
    width:53%;
    float:left;
    position:relative;

}


En mettant un width pour la colonne de droite ça ne change rien...
salut lordbdp,
le soucis est que tu n'as pas de largeur minimale donc forcement, si l'on reduit la taille à 800x600 le dernier bloc dans le flux passe en dessous des autres. Pour éviter le min-height il y a une solution avec un "spacer" une image png transparente de 1px de haut sur 800px de large pour bloc la largeur minimal. ça te donnerai un truc comme ça:

<div id="gauche">

</div>

<div id="droite">

</div>

<div id="wrapper">

</div>
<div>ton image ici</div>

ça devrait régler ton probleme Smiley cligne
par contre si tu utilises des % pour fixer la largeur des blocs tu ne devrais pas avoir de souci, sinon c'est que tu as des éléments à l'intérieur de tes blocs qui ont une largeur fixe
+1 pour ZinZinMoreta

Il suffit de fixer la largeur des divs en % et le tour est joué !

Cordialement
Il faudrait remettre à plat tes objectifs de mise en page:
- Largeur fixe (en pixels) ou fluide (en pourcentages)?
- Si largeur fluide, y a-t-il des contraintes à ajouter, notamment des largeurs minimales et maximales? Pour info, on peut utiliser min-width et max-width dans tous les navigateurs. (Seul IE6 ne les supporte pas et tant pis pour ce navigateur à l'agonie.)
- Quelles doivent être les largeurs des différentes colonnes? Toutes fluides (quels pourcentages)? Toutes fixes (quelles dimensions en pixels)? Certaines de largeur fixes (lesquelles, et quelles dimensions en pixels) et les autres prenant l'espace restant?

Une fois qu'on saura ce que tu veux faire exactement on pourra te donner des conseils corrects. Smiley cligne

lddsoft a écrit :
Il suffit de fixer la largeur des divs en % et le tour est joué !

Pas toujours souhaitable pour une bonne lisibilité. Lorsque les lignes de texte deviennent trop longues (disons plus de 100 caractères par ligne), la lisibilité diminue fortement.

ZinZinMoreta a écrit :
une image png transparente de 1px de haut sur 800px de large pour bloc la largeur minimal

OMFG. Une image «spacer», en 2011? C'est une blague, j'espère?
OMFG. Une image «spacer», en 2011? C'est une blague, j'espère?

s'il ne veut pas utiliser min-width comment peut-il fixer une largeur minimal avec des blocs en %?
je suis d'accord avec toi sur le fait qu'un spacer est ridicule mais pour régler son problème sans passer par la case "refait une structure de page correct" je vois pas trop...
Au final j'ai ajouté le min-width:800px et pour le body j'ai ajouté clear:both;

Et ça passe partout...
Modifié par lordbdp (15 Mar 2011 - 13:14)
ZinZinMoreta a écrit :
s'il ne veut pas utiliser min-width comment peut-il fixer une largeur minimal avec des blocs en %?

Il ne peut pas. On utilise min-width, c'est fait pour ça, et puis c'est tout. Smiley smile
Si on commence à filer des solutions antédiluviennes parce que certains sont rétifs aux techniques un peu modernes, on a pas fini d'écrire des horreurs.
Sujet clos
Aller à