Pages Navigation Menu

(il y a un jeu de mots)

Coup de main CSS

Les habitués de photofloue.net connaissent bien la vie en gris, un photobog collectif en gris, noir et blanc, où tout photographe est bienvenu pour partager ses meilleures photos n&b et les confronter aux féroces critiques des visiteurs. Tout va bien, sauf qu’il y a un bug d’affichage avec Internet Explorer (et maintenant iPhone) que je ne sais pas résoudre. J’ai besoin d’un coup de main d’un expert.

J’ai développé ce site sous WordPress, avec un design maison adapté au mécanisme d’un photoblog (une image par page, la plus récente s’affichant par défaut via le plugin yapb). Afin de laisser la priorité aux photos, j’ai supprimé le traditionnel nom du site en haut de page pour le basculer en bas, dans le « footer ». Ce footer est statique, c’est à dire qu’il reste en base de page quand le reste du site défile. Tout va bien dans Firefox et Safari, mais rien ne va plus dans IE. De plus, le site n’est pas centré dans IE, mais calé à droite. A priori, ça se passe dans la feuille de style CSS — j’ai utilisé des lignes de codes sensées marcher dans IE.

Et sur iPhone, ce footer se balade au milieu de la page quand on la fait défiler.

Si un lecteur de bonne volonté voulait bien se pencher sur le problème et me donner la solution, je lui en serais éternellement reconnaissant — et je lui offrirai un tirage A3 d’une photo à choisir sur mon site philippedurand.com.

24 Comments

  1. C’est pas gagné pour IE en tout cas :
    http://tagsoup.com/cookbook/css/fixed/

    Bon courage 😉

  2. Dommage, je suis trop C.. pour pouvoir vous dépanner, sinon j’aurais justement choisi cette photo  » Ferry » pour le tirage A3…

  3. Bonjour,

    Pour le centrage du site, essayez body { text-align: left; min-width: 940px; }

  4. Salut,
    Un début de solution :
    Déjà regroupe les tag concernant BODY
    j’en ai vue plusieurs dans le style.css
    (ça recentre mieux sur IE 6)
    je continue de chercher pour la partie basse le « header »

    BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
    BACKGROUND-IMAGE: url(images/gris1.jpg); BACKGROUND-REPEAT: repeat
    TEXT-ALIGN: center; min-width: 940px
    FONT-SIZE: 90%; COLOR: #f5f5f5; FONT-FAMILY: « Lucida Grande », Lucida, Verdana, sans-serif
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 40px; PADDING-TOP: 20px
    OVERFLOW: hidden
    }

  5. Pour corriger l’alignement à droite dans IE je te propose de remplacer LEFT:50%; dans #wrapper et « #footer .insidefooter » par :
    LEFT: 50% !important;
    LEFT: 10%;
    Pour le footer c’est une autre histoire…

  6. Pour le footer, il faut :
    ——————————————
    1 – Ajouter le code suivant dans le HEAD :

    /**/

    ——————————————
    2 – Ajouter une encadrant tout sauf le footer (pour ça le plus simple est de déplacer le footer à la fin)

    ——————————————
    3 – Encadrer le footer par une

    N’hésite pas à me contacter sur mon mail si besoin. Je t’enverrais mes fichiers.

    Cette solution vient de http://www.gunlaug.no/contents/wd_additions_17.html

    Ces corrections ne sont pas parfaites. Je pense qu’il faudrait nettoyer le code pour enlever les « left: -497px » car c’est un peu illogique.

  7. Bon en fait tout est viré des commentaires, c’était bien la peine…

  8. La solution la plus simple reste encore d’avoir un footer qui est « position:fixed », ce qui ne fonctionnera pas avec IE6.
    Et de simplifier le positionnement pour obtenir un rendu identique avec IE6 et le reste.

  9. Merci à tous de vos commentaires, j’explore les différentes pistes ce week-end…

    Trancept : le système de commentaire mange les lignes de code en effet, je cherche comment arranger ça.

    NB. ajouté un plugin, il suffit de mettre le code entre des balises (code) et (/code) — remplacer ( et ) par < et >

  10. Pour le centrage il faudrait réduire la règle de la manière suivante :

    #wrapper {
    margin:0 auto;
    padding:15px;
    width:920px;
    position:relative;
    text-align:left;
    }

  11. Zut, j’ai laissé mes modifications au boulot.
    Je vais voir si j’ai le temps de m’y remettre car ce n’était pas parfait non plus.
    En tout cas, voici un site qui à la mise en page que tu souhaites et qui fonctionne dans tout les navigateurs :
    http://www.cssplay.co.uk/layouts/basics2.html
    Reste à le mixer avec LaVieEnGris.

  12. Bonjour,
    Je viens d’y passer mon samedi matin mais j’en suis venu à bout !
    En tout cas ça fonctionne sous Firefox 2 et IE7.
    Je suis reparti de l’exemple CSSPlay pour y ajouter le contenu et la css de photofloue, j’espère que ça ne te demandera pas trop de travail d’intégration.
    Voici donc le HTML :
    http://trancept.free.fr/upload/CSSPlay.html
    Et la CSS :
    http://trancept.free.fr/upload/benoit.css
    Et le tout avec les images pour voir ce que ça donne :
    http://trancept.free.fr/upload/complet.zip

    Bon courage à toi,
    Benoît

  13. Merci à tous ! Je suis les pistes et teste…

    Trancept : quand je charge ton css dans le thème, l’ascenseur de défilement disparait du navigateur (sur IE, Safari, Firefox) – par contre il est bien sur ton exemple…
    Idem si je change les lignes Body en suivant le conseil d’Hervé.

    Le problème ci-dessus vient de overflow qui doit être conservée ainsi :
    * html body{ overflow:hidden;}
    et non regroupée avec les autres ligne body.
    Eric, ton code centre bien la page dans IE — mais pas le footer ! Mais en remaniant les lignes footer, on y arrive et ça marche. Déjà ça de réglé.

  14. Benoit, désolé, mais ça ne fonctionne pas. J’ai rétabli les ascenseurs, mais le footer reste planté au milieu dans Firefox. J’ai bien essayé de reprendre les lignes pas à pas, mais rien ne fait.

    Je vais retourner aux sources indiquées pour essayer de comprendre.

  15. J’ai trouvé un exmple qui fonctionne avec IE 6 et Firefox 2.0
    :-))
    Il reste à ajuster, modifier selon ton thème…

    HTML {
    OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%
    }
    BODY {
    OVERFLOW: auto; WIDTH: 100%; HEIGHT: 100%
    }
    BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 0.8em;
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    }

    #contenu {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
    MARGIN: 0px; OVERFLOW: auto; WIDTH: 100%; PADDING-TOP: 0px;
    HEIGHT: 90%; BACKGROUND-COLOR: #eeeeee
    }

    #footer {
    WIDTH: 100%;
    HEIGHT: 10%;
    BACKGROUND-COLOR: #cccccc;
    position:absolute;
    bottom:0;
    text-align:center;
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px;
    MARGIN: 0px;
    }

  16. euJ’viens d’y faire un ch’tit tour, cha m’a l’air plutôt pôs mal, et chentré chur IE.

  17. Philippe, il faut en effet modifier le gabarit de la page car la façon de faire est bien différente :
    – J’ai ajouté une div « contenu » qui encadre tout ce qu’il y a entre header et footer.
    – Il y a des div « pad » a ajouter (une dans header, une au début de « contenu », une autre à la fin de « contenu ») pour limiter la zone centrale dans sa place.
    – La div « page » est supprimée.
    – Les div « clear » et « marge » en dehors du « wrapper » ont été
    – Tout ce qui est dans la div « wrapper » a été laissé tel quel.

  18. Je viens de tester ma solution dans IE6 :
    – la div du haut disparait, ce qui n’est pas gênant à mon avis vu qu’il n’y a rien dedans.
    – Le footer subit un retour à la ligne comme actuellement cela se rêgle facilement comme ceci en modifiant le « letter-spacing » de « footerlegende » :
    letter-spacing: 4px!important;
    letter-spacing: 3px;
    (!important n’est pas compris par IE, qui va donc réduire à 3 l’espace et donc conserver la mise en page. IE7 (et Firefox) va conserver 4 ce qui est bien car il n’a pas ce problème)

    J’ai vu aussi que j’avais oublié de remettre « color » à « #FFF » dans « footer ». C’est pour ça qu’on ne voyait pas « un site ».

  19. @philippe je veux bien vous aidé avec de la bonne volonté mais quand je lis ce que vous avez déjà par les autres bonnes volontés je me dis que je ne comprends pas tout ce vocabulaire compliqué.Mince je ne peux donc pas choisir une photo.

  20. Wow! ‘la vie en gris’ maintenant aussi sous IE!
    Encore quelques bugs ( footer..) mais la solution est proche.

  21. Tout n’est pas encore réglé, et je n’ai pas encore eu le temps d’appliquer les derniers conseils de Gilles, Hervé & Trancept / Benoit… mais on est sur le bon chemin !

  22. Hello.
    J’ai pas laché l’affaire comme on dit. 😉
    D’autant que le « bug » IE n’est toujours pas régler sur lavieengris
    alors j’ai trouvé ça :
    http://css-astuces.batraciens.net/zone-fixe-1.htm

    C’est une autre manière de faire, qui fonctionne bien sur IE 6 et FireFox.
    En plus c’est assez bien expliqué (enfin je trouve)

    Salutations

  23. Hervé, c’est cette solution que j’ai utilisé aussi. Çà semble être le meilleur compromis.

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*