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 (www.philippedurand.com) .
Commentaires
D'accord, pas d'accord ? Une suggestion, une idée ?
N'hésitez pas à laisser un commentaire et participer à la discussion.
24 réactions à propos de Coup de main CSS.
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
}
pour le footer c’est pas simple…
http://w3schools.com/css/pr_class_position.asp
position:fixed [Works in IE7 (strict mode)]
http://forum.alsacreations.com/faq/faq-67-Position-fixed-sur-Internet-Explorer-6.html
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.
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.
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
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;
}
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.
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”.
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
11 septembre 2008
15:38
C’est pas gagnĂ© pour IE en tout cas :
http://tagsoup.com/cookbook/css/fixed/
Bon courage