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.
- Comment éditer le CSS ?
- Un reportage en Afghanistan fait avec un iPhone et Hipstamatic en Une du New York Times
- La vie en gris : un photoblog collectif en gris, noir et blanc
- Le référencement de votre galerie photo ou photoblog et de vos photographies
- iPhonographie : un photoblog collectif pour les photos Ă l’iPhone (et autres)
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