Problème lié aux div imbriquées en position absolute

Hello,

J'ai deux petits soucis que je pense liés. Je fonctionne avec des divs de positionnement d'images imbriquées dans une div centrale "mère". Toutes les div imbriquées sont en position "absolute". Si j'ai bien tout compris ces div sont donc sorti du flux ce qui fait que la div mère se retrouve avec une hauteur/largeur nulle ou quelque chose du genre.

--> Du coup, un bas de page que je mettais au bas de la div "mère" avec hauteur minimum passe sur le haut de la fenêtre si je la réduit.
--> Enfin le père IE7 n'affiche même plus le fond de la div "mère" avec ce css ni le bas de page.

http://suture-clothing.com/ie7_rendu.jpg

J'ai revu mon css à la suite d'un commentaire sur ce même site, basée à l'époque sur des divs "filles" en float:left mais l'affichage sous IE7 était catastrophique... Je l'ai fait validé à tout hasard par le css validator en espérant qu'il me relève une grosse faute mais sans succès. J'ai appliqué des tips que j'ai trouvé sur ce même site (les height auto et 100%) sans succès non plus.

Le site est en ligne le voici pour le html : http://suture-clothing.com/try/
Les css sont dispos ici : http://suture-clothing.com/try/default.css & http://suture-clothing.com/try/index.css

J'hésite à poster le code ici ça fait un peu long et préfère me limiter au lien, dites moi si c'est moins pratique.

Par avance merci de vos retours !

Wolfrei

Bonjour,

Wolfrei a écrit :
--> Du coup, un bas de page que je mettais au bas de la div "mère" avec hauteur minimum passe sur le haut de la fenêtre si je la réduit.

Pour ce problème, tu peux peut-être jeter un oeil ici :
http://www.snoupix.com/coller-le-pied-de-page-en-bas_tutorial_9.html
Si j'ai bien compris ce que tu voulais ^^'

Wolfrei a écrit :
--> Enfin le père IE7 n'affiche même plus le fond de la div "mère" avec ce css ni le bas de page.

Je n'ai pas réussi à voir ce problème (sous IE9 affichage IE7)
Modifié par Gothor (21 Feb 2012 - 22:26)

C'est ce que j'avais fait avant (avec div fille en float) et ça marchait bien. Je viens de tester ton tuto en rajoutant la balise "superglobale" et le comportement que j'avais sur IE7, à savoir le background qui disparait ben ça arrive sur FF maintenant

Wolfrei a écrit :
C'est ce que j'avais fait avant (avec div fille en float) et ça marchait bien. Je viens de tester ton tuto en rajoutant la balise "superglobale" et le comportement que j'avais sur IE7, à savoir le background qui disparait ben ça arrive sur FF maintenant

Et toujours sur IE 7 ?
La version qui fait ça est celle en ligne ?

Toujours sur IE7. Et c'était en local mais je viens de l'uploader, tu devrais pouvoir constater.

Chose intéressante, lorsque supprime une position absolute des div "filles" bon ça me déforme tout en mettant chaque div à la ligne MAIS ça m'affiche au fur et à mesure des retour l'image de fond... De même le bas de page se décalle comme avant et comme sur le site que tu m'as donné.

C'est vraiment les div absolute qui foutent en vraque la taille de la div mère, il ne reste plus qu'a trouver une solution, j'ai déjà essayé les float left mais je n'ai pas reussi à rendre compatible ce système avec IE7, malheureusement.

Merci !

Le positionnement absolute n'est pas une bonne idée selon moi (dans la plupart des cas), ici, tu peux sûrement garder tes éléments dans le flux en usant de display:inline-block =) (Attention, sous IE6/7, inline-block ne fonctionne que sur les éléments de type inline, pour les éléments de type block, il faut utiliser display : inline; zoom : 1;

Merci pour la piste
Je vais la suivre dès demain et te (vous) tiens au courant !

Dans un éclair de génie similaire au Doc Emmett Brown (vous savez dans quelle pièce...) J'ai revu mon squelette et simplifié deux trois petites choses. Du coup en passant tout en float comme Gothor me l'a préconisé (d'ailleurs un grand merci à toi) tout s'affiche correctement, même sur IE7 !!! o/

Le rendu ici : http://suture-clothing.com/try_2/

Seul ombre au tableau et pas des moindres : autant le bas de page est parfait (s'affiche en bas et ne mord pas sur le contenu) pour chrome et firefox, autant pour IE7 il a tout simplement disparu...

J'ai essayé d'appliquer ton 'tips' le problème c'est que dans ma configuration il ne marche pas et me fait même bouger ma div centré quand je change de résolution avec mon tooldev.

J'approche du but, il me suffit un dernier coup de pouce du coup
Modifié par Wolfrei (23 Feb 2012 - 22:22)