[Resolu] Remplir un div a cote d'un float (en utilisant un clear:both

Bonjour,

Excusez moi pour les accents, mais je suis sur un qwerty...
Un probleme que je traine depuis un moment sans succes: je n'arrive pas a remplir un div avec la couleur de background dans IE... J'ai bien mis un div avec un clear:both a la fin pour forcer le remplissage: sans succes!

En detail, j'ai un conteneur all avec un fond blanc, et des conteneurs menu et page avec des fonds beiges par dessus... Mais IE ne fait pas descendre la page jusqu'en bas du menu (malgre le div avec un clear:both a la fin), donc le bas de la page sous le texte est blanc (le background de all...)
Enfin, c'est mon idee sur la question, peut etre que je me trompe!

Si vous voulez m'aider, regardez http://lelongdumekong.free.fr/fr/journal sous IE et comparez avec Firefox (C'est bien sur ce que je veux obtenir...)

Merci pour votre aide...

Thomas
Modifié par toju (30 Dec 2005 - 12:20)

Bonjour,

Est-ce que tu peux nous donner un peu plus d'infos ?
C'est un peu difficile de s'y retrouver dans ton code... Quel est le div concerné ? Quel est la CSS concernée ?

A première vue je dirais que le div s'adadapte au contenu qui est moins long que la page...

En passant, deux remarques sur ton code :

- La page commence par une balise <h3> (à la place d'une balise <h1> qu'on retrouve plus bas...)
- L'utilisation d'un tableau peut être évité (pourquoi ne pas utiliser une liste ?)

a écrit :
Est-ce que tu peux nous donner un peu plus d'infos ?
C'est un peu difficile de s'y retrouver dans ton code... Quel est le div concerné ? Quel est la CSS concernée ?

A première vue je dirais que le div s'adapte au contenu qui est moins long que la page...

alors, les proprietes css sont definies dans le fichier /css/mekong.css

et la page est concu avec un div all (centre horizontalement), a l'interieur duquel se trouve un div floatleft (contenant le menu et les partenaires), et un div page a cote...
Pour que le background du div page aille jusqu'en bas du div floatleft, j'ai mis a l'interieur a la fin un div avec un clear:both qui contient juste un nbsp... (cela evite que le div s'adapte au contenu)

Ca marche sous Firefox, mais pas sous IE...
Sous IE, le background de la page, et parfois du menu, ne sont pas colores en dessous de la fin du contenu du div page
C'est ca que je voudrais changer!

a écrit :
En passant, deux remarques sur ton code :

- La page commence par une balise <h3> (à la place d'une balise <h1> qu'on retrouve plus bas...)

Oui, car le titre principal de la page est plus bas dans le code (c'est un titre dans le menu)... En fait, je met d'abord le menu avec la fonction include() de php puis le titre h1 vient ensuite...
Dans l'absolu, je suis d'accord, ce serait plus simple d'avoir un bandeau avec le h1 en debut de code, puis le reste de la page avec le menu a gauche...

a écrit :
- L'utilisation d'un tableau peut être évité (pourquoi ne pas utiliser une liste ?)

Oui, mais j'ai utilise un tableau pour pourvoir aligner les dates dans une colonne a droite... Et comme ca, je peux mettre des liens sur 2 lignes facilement!

Merci d'avoir pris le temps de regarder le code!

Thomas

toju a écrit :

Dans l'absolu, je suis d'accord, ce serait plus simple d'avoir un bandeau avec le h1 en debut de code, puis le reste de la page avec le menu a gauche...

Cela tombe bien: c'est ce qu'il faut faire pour gérer cet arrière-plan à l'aide d'un classique conteneur englobant les colonnes gauches et droites et doté d'un overflow pour les navigateurs modernes et d'un "width" ou d'un "height" quelconque pour IE, ou bien doté pour les deux d'un élément en clear:both à la fin.

Au passage, je retranscris une libre lecture de l'avertissement donné aux utilisateurs d'IE sur ce site :

a écrit :

Attention! Ceci n'est pas le titre de la page, en dépit des apparences. Celui-ci a disparu quelque-part au profit de ce papotage inattendu.

J'ai brillament déterminé que vous naviguez probablement sur ce site avec Internet Explorer. Je décrète donc que vous êtes un pignouf. Même si vous n'avez pas le choix.

Ce navigateur n'est en effet pas respecteux d'obscurs détails techniques dont vous n'avez que faire (C'est le Mékong qui vous intéressait ? Tant pis pour vous, je n'ai pas fini).

Histoire de vous faire perdre encore un peu plus de temps, j'ai en effet le regret de vous annoncer que je n'ai pas su adapter ma page à ce navigateur, et surtout que cela m'ennuie. Comme il n'y a pas de raison que je sois tout seul à être enquiquiné, j'ai éprouvé le besoin de vous en parler. Fascinant, n'est-ce pas ?

Pour un rendu optimal, je vous conseille d'utiliser Firefox, conscient de contribuer ainsi puissamment à l'image d'ouverture d'esprit et de tolérance des navigateurs alternatifs.

Au fait, le site n'est pas conforme à XHTML1.1. Eventuellement à XHTML1.0.
Modifié par Laurent Denis (17 Dec 2005 - 13:17)

Re-bonjour,

En depit de l'accueil chaleureux qui m'a ete reserve sur ce forum je m'acharne!

J'ai donc essaye de comprendre vos conseils... (car je ne suis pas webmaster)

a écrit :
Cela tombe bien: c'est ce qu'il faut faire pour gérer cet arrière-plan à l'aide d'un classique conteneur englobant les colonnes gauches et droites et doté d'un overflow pour les navigateurs modernes et d'un "width" ou d'un "height" quelconque pour IE, ou bien doté pour les deux d'un élément en clear:both à la fin.

Si j'ai bien lu, le probleme de remplissage des boites est lie au positionnement incorrect du titre h1

J'ai donc fait un essai avec un code statique:
Le titre h1 est en haut du code
vient ensuite un div "global" qui contient
un div "floatleft"
un div "page" (a l'interieur duquel se trouve le div en clear:both)

Comme dans le code precedent, j'ai garde un element en clear:both a la fin, ce qui d'apres vous devrait faire l'affaire aussi bien pour les navigateurs anciens que recents...

Pourtant, j'obtiens toujours le meme probleme de remplissage du background avec IE...
J'ai essaye de changer la position du div en clear:both (a la fin du div global, a l'exterieur du div page). Sans succes.
Voyez vous ou se trouve le probleme?


Quant a votre parodie, elle m'a bien fait rire (un peu jaune, je l'avoue...). Je ne me suis jamais vu en defenseur de quoi que ce soit et je ne traite personne de "pignouf"... J'essaye juste d'apprendre a faire un site avec un code lisible, dont l'apparence soit convenable sous la plupart des navigateurs. Et le but premier de ce post etait de pouvoir enlever ce message d'avertissement dans un futur proche!

Merci pour votre aide,

Thomas

PS: Le site etait valide lors de la mise en ligne; j'ai fais des modifications depuis: je vais verifier les erreurs...

En regardant ton code je dirais à première vue que le fond de couleur rose s'adapte au contenu de ta page. Le menu étant en float:left; il est en dehors du flux. Le seul élement restant dans le flux est ton tableau avec les liens.
Peut-être qu'en donnant une taille fixe en hauteur à cette partie tu résoudrais ton problème. Autrement c'est la structure que tu aurais à revoir.

Salut,

Je viens d'aller faire un tour, gentiment sur ton site afin de t'aider car j'utilise IE. Mais dès la première ligne je me suis fais engueuler car justement j'utilise IE. Je suis parti.

Je pense qu'un cours de rattrapage sur l'accessibilté s'impose. Quand à la courtoisie ?
Modifié par papyjo (20 Dec 2005 - 12:06)

papyjo a écrit :
Je viens d'aller faire un tour, gentiment sur ton site afin de t'aider car j'utilise IE. Mais dès la première ligne je me suis fais engueuler car justement j'utilise IE. Je suis parti.

Je pense qu'un cours de rattrapage sur l'accessibilté s'impose. Quand à la courtoisie ?

Comme je le disais dans mon precedent message sur ce post:

a écrit :
Le but premier de ce post etait de pouvoir enlever ce message d'avertissement dans un futur proche!

Le message pour les utilisateurs d'IE n'est ni aggressif, ni moralisateur... C'est une mise en garde en attendant de reussir a ameliorer l'accessibilite du site!

Merci a Eric LB pour son aide: je regarde ce que ca donne des que j'ai une connexion internet digne de ce nom...

Thomas
Modifié par toju (22 Dec 2005 - 06:19)

Bonjour,

Oui, pour son auteur, sans doute. Mais c'est la manière dont il peut être perçu qui compte, comme tous les messages de ce type.

Un exemple classique : quand les premières mises en pages full CSS ont été utilisées, on ajoutait souvent un message expliquant que le site serait plus joli dans un navigateur moderne que dans IE4 et NS4, à l'exemple de ce que faisait alors Zeldman sur AList Part. On s'est très vite rendu compte que ça avait le don d'exaspérer les utilisateurs de ces navigateurs, mais aussi tout ceux qui voyaient le message dans un navigateur texte, qui l'entendaient dans un lecteur d'écran, etc...
Modifié par Laurent Denis (22 Dec 2005 - 06:42)

Ca y est! Le probleme est resolu, en utilisant les proprietes des bordures plutot que celles des backgrounds...

Merci pour les conseils (j'ai remonte les h1 en tete de code)... A coup sur, vos reactions epidermiques m'auront donne le courage de trouver une solution qui marche sous IE plus qu'elles ne m'auront aider a la trouver

Et le site est maintenant compatible...

Merci pour tout!

Thomas
Modifié par toju (30 Dec 2005 - 12:25)

C'est un univers sans pitié.

bravo

Il y a encore un petit détail qui ne va pas avec IE windows dans ton titre : l'effet sur la première lettre n'apparaît pas.
Pour corriger, il faut remplacer dans ton css

h1:first-letter, .second-letter {

par

.second-letter, h1:first-letter {

Je peux pas t'expliquer pourquoi, je sais bien que c'est bizarre, mais c'est comme ça