28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'intègre en ce moment une maquette et j'ai quelques petits soucis de placements... En plaçant la div footerBlock en relative, j'ai un problème d'affichage sous IE !

http://www.miscischia.com/altimax/templAccueil.htm

Ce problème ne persiste pas sous Firefox, et après avoir tenter quelques hacks, rien n'y fait !

Voilà, je voulais savoir si une ame charitable aurait une petite idée ??

Merci

PS : j'ai mis une bordure rouge sur la div en question.

PS2 : milles excuses !! Je me suis trompé de sections Smiley confused
Modifié par jpwalker (20 Oct 2006 - 12:14)
Plutôt que de chercher le détail qui déclenche ce problème (et vu ta feuille de style ça va pas être évident, il y a l'air d'avoir plusieurs choses en interaction), je ferais plutôt une mise en page SANS position relative.

Utiliser le positionnement relatif pour décaler un bloc de toute sa hauteur, c'est plutôt casse-gueule comme construction.

Flottants, à la rigueur positionnement absolu... il doit y avoir des méthodes plus compatibles et plus simples à gérer.

Sinon, j'ai du mal à comprendre :
- pourquoi le conteneur principal est doublé (#container0 et #container) ;
- pourquoi l'image de fond principale est sur div#mainBlock, et pas sur #container.
Salut et merci,

J'ai déjà essayer avec un positionnement flotant. Seul problème, le bug de 3 pixels de IE que je n'arrive pas à hacke, et du coup j'ai un vieux décalage sur les images.

Pour les deux container, j'ai pas le choix, c'est une structure de CMS qui l'impose, mais ici ça ne change pas fondamentalement grand chose.

Pour le placement absolute ça risque d'être compliquer, vu que mon container est deja placé en absolute et qu'il s'auto-centre sur la page... Mais je vais faire un test.

Pour ce qui est de l'image de fond dans main block; ça ne change pas grand chose par rapport au placement que je veux faire, même si je la met dans le container avec un placement bottom:left, il me faut quand même ce mainBlock (merci le CMS).

Voilà, et comme je ne veux vraiment pas faire une mise en page en tableau...

Je vais tenter une mise en page absolute, sans centrer mon site... On verra bien...

Merci encore !

PS : je vais refaire ma mise en page en float, si quelqu'un peu m'aider pour ce décalage...

PS2 : mise à jour des liens

http://www.miscischia.com/altimax/relative/templAccueil.htm

http://www.miscischia.com/altimax/float/templAccueil.htm
Modifié par jpwalker (20 Oct 2006 - 14:16)
Je continue à penser que ta structure HTML est inutilement compliquée, et que les choix faits pour l'implémentation du design (découpage en 4 images du fond) sont peu pertinents.

Pour l'image de fond, à la rigueur, on aurait pu faire ça avec deux images : une image de fond global en PNG, sans la partie « photo », et une image pour la photo en haut à droite. Après, on place ses éléments de contenu, sans trop se soucier des décalages de 1px, ou même des décalages de 3px...
mpop a écrit :
Je continue à penser que ta structure HTML est inutilement compliquée, et que les choix faits pour l'implémentation du design (découpage en 4 images du fond) sont peu pertinents.

Pour l'image de fond, à la rigueur, on aurait pu faire ça avec deux images : une image de fond global en PNG, sans la partie « photo », et une image pour la photo en haut à droite. Après, on place ses éléments de contenu, sans trop se soucier des décalages de 1px, ou même des décalages de 3px...

Re,

Ta remarque est pertinante, je vais essayer de découper en deux images pour voir. Sachant qu'il y a des contenu multimédia à intégrer par dessus (flash), il faut donc que tout soit bien caler. Enfin, je vais tenter et vous tiens au courant.

Cela dit, j'aimerais juste par curiosité, savoir si ce décalage de 3px peut être supprimé (j'ai essayer tous les hacks possible et rien n'y fait)

Merci
jpwalker a écrit :
Cela dit, j'aimerais juste par curiosité, savoir si ce décalage de 3px peut être supprimé (j'ai essayer tous les hacks possible et rien n'y fait)

J'avoue ne pas avoir exploré cette question, donc les sources que tu as pu trouver en ligne te renseigneront mieux.
Je sais juste qu'il existe deux manifestations de ce bug, qui dépendent ce que l'on appelle le HasLayout : dans un cas, le bloc entier est repoussé, et dans l'autre seul le texte à l'intérieur du bloc est repoussé.
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Sinon, vu ton design, tu auras peut-être intéresser à utiliser pas mal de positionnement absolu, en positionnant les blocs par rapport au conteneur général :
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html