IE le rebelle ou quand les divs se mettent à table

(reprise du message précédent)

clb56 a écrit :
Comme je t'avais prévenu :
http://forum.alsacreations.com/topic.php?fid=4&tid=15733&s=#p120239

Oui, je crois que c'est à ce moment là que j'avais rajouté la parenthèse. Apparamment ça ne suffit pas pour éviter les confusions.
Ou alors c'est moi, je ne sais pas pourquoi je donne à l'adjectif « fixe » un sens un peu différent de celui du dictionnaire. Hmm, c'est peut-être un glissement de sens depuis l'anglais, il faudrait que je vérifie.
Enfin bon, maintenant ça devrait aller.

Le problème dans cette affaire c'est que le terme fixe a un sens beaucoup trop établi dans le champ sémantique (pas troll/pas vendredi/pas tapé) du développement web. A manié avec précaution de ce simple fait.
Modifié par clb56 (29 Aug 2006 - 23:29)

Bonjour,
Attention au commentaire conditionnel qui a mal été écrit (il manque les crochets autour de « endif »). Sur ce forum, [endif ] est considéré comme du BBcode pour une image et le code est généré en conséquence.
donc :

<!--[if IE]>
<![endif ]-->

sans l'espace avant le crochet fermant (quoique celui-ci semble ne rien changer)
De plus il est inutile de reproduire tout le bloc de déclaration.
Enfin il n'est pas besoin de donner ici de largeur de 100%, une propriété qui dotera div.centre de layout comme zoom aura moins de conséquence (enfin avec la valeur 1...) en cas d'utilisation de float

<!--[if IE]><style type="text/css">
.centre {zoom:1; _height:1%;}
</style><![endif ]-->

le hack « _height:1%; » n'étant utile que pour IE 5.01 et non lu à partir de la version 7.

Concernant l'autre question, il faut utiliser la propriété float plutôt que le positionnement absolu pour les parties latérales et appliquer au pied de page clear:both afin que celui-ci soit toujours sous ces parties latérales :

#gauche {
float: left;
display: inline;
width: 150px;
margin:15px 0 0 5px;
background-color:#ffffff;
}

#bordure_inf{
border-bottom:  solid 2px #7ab03a;
clear: both;
}

ceci dit, plutôt que d'ajouter une DIV seulement pour une bordure, il faudrait ajouter directement cette bordure au pied de page...
Modifié par Alan (30 Aug 2006 - 07:22)

Merci Alan. Effectivement, la correction du commentaire conditionnel a réglé un problème d'affichage .

Pour la seconde question, j'ai appliqué les modifs à #gauche et à #bordure_inf (en fait j'ai mis un div rien que pour elle car il y a différence d'interprétation - encore une fois - entre IE et Firefox et sous IE, les bordures viennent se superposer à l'image de fond).
Sous Firefox, impeccable. La colonne de gauche est inclue dans le reste de la page. Mais sous IE...
Ca propulse le contenu de la partie centrale sous le pied de page .

Maintenant, autre question, les développeurs de Microsoft avaient-ils l'intention de s'attaquer au système nerveux des webmasters en programmant IE ???

Bonjour,

Je n'ai pas vu les changements sur la page en ligne ?
Normalement, en appliquant zoom:1; à div.centre, le bloc ne devrait pas passer sous la partie de gauche.

Pour le clear:both; : le mieux serait de tout appliquer au pied de page (#bdeorg), la bordure (et donc l'enlever l'autre div) et la propriété clear

Par ailleurs

.centre {
 width="100%";
}

n'aurait aucun effet en mode standard : IE ne tolère cette syntaxe qu'en mode non standard.
l'écriture correcte en CSS est

width: 100%;

(largeur qui n'est pas à utiliser ici de toute façon)
Modifié par Alan (30 Aug 2006 - 12:14)

Oui, normal pour les changements, je les ai faits en local. Mais là, j'ai tout mis en ligne.
Donc, j'ai fait toutes les dernières modifs hormis le retrait du div bordure_inf.
J'ai modifié #pied qui n'était pas utilisé dans la page car j'avais mis #bdeorg pour ce div hors, cet ID est également utilisé pour la bande supérieure qui délimite le header du reste de la page. Alors #bdeorg n'a pas changé

#bdeorg{
	height: 30px;
	background-image:url(../images/bandeorange.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-color: #ffffff;
	border-bottom:  solid 2px #7ab03a;
	padding-top: 1px;
	color: #eeeeee;
}

#pied et bordure_inf sont devenus :

#bordure_inf{
	border-bottom:  solid 2px #7ab03a;
	clear: both;
}
#pied {
height: 30px;
	background-image:url(../images/bandeorange.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-color: #ffffff;
	border-bottom:  solid 2px #7ab03a;
	padding-top: 1px;
	color: #eeeeee;
	clear: both;
}

Et pour les colonnes, on a :

.centre {
background-color:#ffffff;
margin-left:190px;
margin-right: 10px;
margin-bottom: 15px;
}

.centre table{
	width: 100%;
}

#gauche {
float: left;
display: inline;
width: 170px;
margin:15px 0 15px 5px;
background-color:#ffffff;
}

Enfin, il y a le commentaire conditionnel dans la page index.php :

<!--[ if IE]
<style type="text/css">
       .centre {zoom:1; _height:1%;}
</style>
 [ endif] -->

Voilà donc où on en est... En tout cas, merci beaucoup.

OK, merci d'avoir mis en ligne.
La syntaxe de ce commentaire conditionnel n'est pas du tout bonne... Voir le FAQ ou le code que j'ai donné plus haut

Bon, on va aller au plus simple, en :
– supprimant complétement le commentaire conditionnel de index.php
– ajoutant simplement .centre {zoom:1;} dans la feuille de style, c'est à dire dans le fichier « template_css.css »

.centre {zoom:1;}

Que se passe-t-il alors ?
Modifié par Alan (30 Aug 2006 - 15:30)

Voilà qui est fait... et tout est impeccable .
Un grand merci à toi Alan, ainsi qu'à tous les autres qui ont eu la patience de m'aider et sans qui j'aurais laissé tomber mon template fluide en div pour m'en retourner vers les <table> .
Modifié par Athanor (31 Aug 2006 - 18:11)

Bonjour,

Je reviens à la charge .
Le développement de mon site suit son cours. Seulement il devient nécessaire d'ajouter une colonne à droite aussi.
Naïvement , j'ai repris les css de #gauche pour les mettre dans #droite en modifiant seulement le float:left en right, mais le div apparaît en dessous des autres divs.
Je viens donc à nouveau solliciter votre aide pour résoudre ce problème de positionnement, sachant que rien n'a changé depuis la dernière intervention.
Outre les styles correctes, dans le fichier php, le div de cette nouvelle colonne doit-il être placé après le div central, ou entre le div de gauche et le div central, autrement dit, gauche - centre - droite ou gauche - droite - centre ?

D'avance, merci.

Bonjour, excusez moi d'insister, mais j'ai vraiment besoin de cette colonne de droite...