28120 sujets

CSS et mise en forme, CSS3

[résolu] Pb IE6 : Glissement #div en réduisant fenêtre navigateur

Bonjour,

J'ai bien fait le tour, ai également fait des tests en fonction des posts existants sur le sujet, notamment celui-ci qui a été résolu : http://forum.alsacreations.com/topic.php?fid=4&tid=29376&s=r%E9duction+fen%EAtre
et en suivant notamment la page écrite par Alsacréations sur la mise en page avec trois colonnes position float.

Le problème se pose uniquement sous IE6, et de façon quasi différente de ceux exposés : nous avons les deux colonnes distinctes qui sont bien placées et lorsqu'on réduit la fenêtre, la colonne de droite se glisse vers le bas, mais pas en dessous de la colonne de gauche, simplement elle glisse en bas de sa propre colonne.
Je vous joins une image pour voir en partie le problème.
(pour des raisons de confidentialité vis à vis du client, je ne peux fournir le lien ni une image complète, en espérant que cela suffise)

upload/1141-shrink.jpg

Sachant qu'il s'agit d'une intégration dans un CMS, et que je ne travaille que sur la CSS, je ne vous joins une partie du code CSS concernant ces éléments, et aussi le "body" si ça peut servir.

body 
{
background-image: url(/img/bg_deg.jpg);
background-color:#ffffff;
background-repeat: repeat-x;	
text-align: center;
margin: 0px;
padding: 0;
font: normal 0.7em arial,sans-serif;
color: #666;
}

[...]

/**Le conteneur des deux colonnes avec les séparateurs rouge et jaune**/
#dottedLine2
{	
background-image: url(/img/sep4.gif);
background-repeat: repeat-y;
background-position: 50%;
margin: 0px;
padding: 8px 7px 0 0;
float: left;
width: 98%;
}

/**La colonne gauche**/
div#col1
{
font-size:1em;
margin-left: 13px !important;
margin-left: 8px;
margin-right: 0px !important;
margin-right: -3px;
width: 47% !important;
width: 46%;
float: left;
line-height:1.4em;
}

/**La colonne droite**/
div#col2
{
font-size:1em;
margin-right: -11px !important;
margin-right: -11px;
margin-left: 0px !important;
margin-left: 25px;
width: 49% !important;
width: 50%;
float: right;
line-height:1.4em;
}

/**Separateur gauche**/
.sepYellow
{
background: url(/img/line1.gif) top repeat-x;
margin-right: 3px !important;
margin-right: 0px;
height: 3px;
margin-top: 8px;
margin-bottom: 5px;
}

/**Separateur droit**/
.sepRed
{
background: url(/img/line2.gif) top repeat-x;
height: 3px;
margin-top: 8px;
margin-bottom: 5px;
}

/**Contenu colonne gauche**/
#col1 .content 
{
float: left;
margin: 0px;
margin-bottom: 20px;
text-align: justify !important;
text-align: justify;
}

/**Contenu colonne droite**/
#col2 .content
{
padding-right: 0px !important;
padding-right: 5px;
float: left;
margin: 0px;
margin-bottom: 20px;
text-align: justify !important;
text-align: justify;
}

#col1 .content small 
,#col2 .content small
{
font-size: 1.0em;
margin-bottom: 0px;
}

#col1 .content h2
,#col2 .content h2
{
font: 1.2em Arial, Helvetica, sans-serif;
color: #666;
font-weight: bold;
display: inline;
}

#col1 img 
,#col2 img
{
margin-left: 5px;
}


J'ai essayé le * html {margin:0;padding:0;border:0;} ça n'a rien fait.

Si cela vous fait "tilt", je suis preneuse... merci de votre coup de pouce, ça fait des jours que je cherche et je ne trouve pas.
L'absolute, le relativ, rien à faire. Le overflow:hidden, peut être que je l'ai mal appliqué... le haslayout n'est pas en question car il "a" le layout...

Merci de votre coup de pouce très précieux... Smiley sweatdrop

Surf
Modifié par Surferin (07 Nov 2007 - 13:30)
J'aurais bien aimé mais la page de test et par là le site sur serveur pré-prod, sont protégés par mot de passe... Smiley ohwell
Re,

Que ta colonne passe dessous et reste à droite c'est normal vue qu'elle est en float right.
C'est surement un problème de calcul de width pour ie6, tu peux essayer si ton code le permet de passer cette colonne en display: inline ???

ps avec le code html ça serait mieux !!
Regarde en pm Smiley smile

Edit : D'ailleurs comment y accède t-on aux messages privés ? Smiley confus
Modifié par Surferin (07 Nov 2007 - 14:18)
Pour information, le display:inline; ne fait pas d'effet.
Le redimenssionnement des width idem, ça fait même un sacré bordel si on y touche de trop...
Surferin a écrit :
et en suivant notamment la page écrite par Alsacréations sur la mise en page avec trois colonnes position float.

Tu ne l'as pas vraiment suivi à ce que je constate, vu que tes deux blocs sont flottants. Or, le principe de ce tutoriel est de ne faire flotter que le nombre nécessaire d'éléments.

Tu pourrais donc, en gardant le principe exposé dans ce tutoriel (mais en supprimant une des deux colonnes latérales), faire quelque chose dans ce style:
div#col1 {
float: left;
width: 50%;
}
div#col2 {
margin-left: 50%;
}

Et pas de margin-right ou margin-left sur le premier, pas de margin-right sur le second, pas de hacks CSS à base de !important, etc.
Si besoin d'un correctif particulier pour IE6, on passera par un commentaire conditionnel qui va bien. Smiley smile
Florent V. a écrit :

Tu ne l'as pas vraiment suivi à ce que je constate, vu que tes deux blocs sont flottants. Or, le principe de ce tutoriel est de ne faire flotter que le nombre nécessaire d'éléments.


Si si je les ai suivis mais j'ai remis la css de départ, les tests n'ont pas été concluants.

a écrit :
Tu pourrais donc, en gardant le principe exposé dans ce tutoriel (mais en supprimant une des deux colonnes latérales), faire quelque chose dans ce style:
div#col1 {
float: left;
width: 50%;
}
div#col2 {
margin-left: 50%;
}

Et pas de margin-right ou margin-left sur le premier, pas de margin-right sur le second, pas de hacks CSS à base de !important, etc.


Merci je vais reessayer.

a écrit :
Si besoin d'un correctif particulier pour IE6, on passera par un commentaire conditionnel qui va bien. Smiley smile


Si j'ai bien compris, les commentaires conditionnels c'est à mettre dans le HTML...? Dans ce cas, j'ai bien précisé qu'il s'agit là d'un CMS et que je ne peux toucher qu'à la feuille de style.

Merci à toi !
Bon, il fallait mettre un float:inherit... et changer les mesures des margin.

La proposition précédente :

div#col1 {
float: left;
width: 50%;
}
div#col2 {
margin-left: 50%;
}

ne marche pas pour ce problème.

Merci pour votre temps Smiley smile
Modifié par Surferin (07 Nov 2007 - 16:48)
Surferin a écrit :
Bon, il fallait mettre un float:inherit

Heu... la propriété float n'accepte pas la valeur "inherit". Donc je suppose que c'est comme si tu n'utilisais pas du tout la propriété float pour l'élément en question... ce qui se rapproche de ma solution. Smiley cligne

Surferin a écrit :
Si j'ai bien compris, les commentaires conditionnels c'est à mettre dans le HTML...?
Oui.
Surferin a écrit :
Dans ce cas, j'ai bien précisé qu'il s'agit là d'un CMS et que je ne peux toucher qu'à la feuille de style.

Tu n'as pas accès aux templates du site?
Ça limite tes possibilités...
Florent V. a écrit :

Heu... la propriété float n'accepte pas la valeur "inherit". Donc je suppose que c'est comme si tu n'utilisais pas du tout la propriété float pour l'élément en question... ce qui se rapproche de ma solution. Smiley cligne


Apparemment faut croire que si, car si on ne met rien ça ne marche pas.
C'est à se tirer les cheveux...

a écrit :
Tu n'as pas accès aux templates du site?
Ça limite tes possibilités...


Oui pour ce projet là, je n'ai accès qu'au CSS, et pas au BO du site. C'est ainsi... et c'est sûr que ça limite un peu.

Merci à toi
Smiley smile
Sujet clos
Aller à