28220 sujets

CSS et mise en forme, CSS3

Bonjour a tous!

Je développe des themes et j'ai un probleme plutot gênant avec internet explorer 6 sous PC. En effet, il me décale d'une bonne cinquantaine de pixels l'image du Header vers la gauche... alors que sous Safari et FF tout est parfait.

vous pouvez le voir ici.

On m'a dit qu'il existait des "hacks" pour résoudre ce genre de probleme mais le peu que j'ai réussi à trouver sur le web sont tres mal expliqués ou ne correspondent pas à mon probleme...

Que puis-je faire et que me conseillez-vous pour que ce probleme rentre dans l'ordre ?

Merci d'avance Smiley smile
Modérateur
Salut,

Avant toute chose, as-tu regardé ton site en désactivant les feuilles de style ? Smiley ohwell Toutes les images se trouvent dans le contenu alors qu'elles n'ont rien à y faire... Tu devrais les mettre en background.

Sinon, les hacks CSS sont vivement déconseillés... Il est préférable, en dernier recours, de se servir des commentaires conditionnels.

et c'est quoi çà ? Smiley eek
a écrit :
%pathto(images/stuff/logo.png)%

Modifié par koala64 (14 Aug 2006 - 19:43)
ton css est pas super lisible... il y a plein d'images qui ne s'affiche pas à l'écran dedans... pas tres standard tout ca Smiley eek
peut etre remplacer dans tes styles margin-left par left puisque tes blocs sont en position absolu mais peut etre que je me trompe....
Bonsoir,

Pour compléter l'excellent conseil du koala sur le test consistant à désactiver les CSS pour quelles images sont à enlever du HTML (Ce sont toujours les meilleures idées qui sont les plus évidentes et qu'on ne parvient jamais à formuler simplement), une petite suggestion de détail: enlever cet affreuse image "too cool for IE" qui agressera:
- les utilisateurs d'IE qui n"ont pas le choix car c'est le seul navigateur leur permettant d'utiliser en complément un logiciel d'aide car ils s'agit de personnes handicapées et que ces logiciels sont développés presque exclusivement pour IE actuellement
- les utilisateurs légitimes de toutes sortes d'autres moyens de consultation de ton site, qui ne gèrent pas les feuilles de styles comme les navigateurs graphiques.
- les utilisateurs d'IE qui utilisent IE parce qu'ils aiment IE et qui en ont le droit le plus inaliénable Smiley cligne

Sans compter que gérer correctement cette image est d'une affreuse complexité... Smiley ravi
Laurent Denis a écrit :
Bonsoir,

- les utilisateurs d'IE qui n"ont pas le choix car c'est le seul navigateur leur permettant d'utiliser en complément un logiciel d'aide car ils s'agit de personnes handicapées et que ces logiciels sont développés presque exclusivement pour IE actuellement


N'oublie pas a cette catégorie, les personnes "qui n'ont pas le choix" car l'entreprise les obliges à utiliser IE Smiley ravi ... Ce qui à mon avis représente aussi une bonne part en journée (si je ne me trompe, Raphael en avais fait un topics que je ne retrouve plus...).

G.
Oui, mais je n'aime pas trop mettre en avant le fait que des gens sont obligés d'utiliser IE pour des motifs arbitraires, mis à part le cas les personnes handicapées. Ces dernières, en effet, sont dans une situation totalement inattaquable qui éveille immédiatement une immanquable mauvaise conscience chez le webmestre négligent.

Les pauvres diables coincés par un admin de réseau ont rarement droit à autant de considération morale.

C'est donc moins efficace.

<edit>Au fait, IE est un excellent navigateur.</>
Modifié par Laurent Denis (14 Aug 2006 - 21:08)
salut

a écrit :
sont dans une situation totalement inattaquable qui éveille immédiatement une immanquable mauvaise conscience chez le webmestre négligent.


rien que çà!? Smiley bawling
Les images qui ne s'affichent pas a l'écran sont des pngs que l'on sélectionne dans l'inspecteur de theme ( Theme pour Rapidweaver)

Ainsi que les headers (probleme de décalé) qui doivent etre dans des fichiers css extrenes) qui qui peuvent etre interchangeables, la aussi grache à l'inspecteur de theme.

le probleme ne viens que de ce décalage ennuyeux du header et de son titre.

jai ceci dans le css principal:
#header {
padding-top: 63px;
background: transparent;
padding-left: 53px;

}
#headerpicture {
background: #66ccff;
width: 600px;
height: 220px;
margin-left: 72px;

Apparament cela viendrai de la margin-left, mais je ne peux pas y toucher , sinon l'affichage du header sera décalé dans Firefox et Safari, mais plus dans IE...

C'est pour ca que j'avais pensé a un hack mais ca ne marche pas...
Je ne sais pas trop quoi faire... Smiley decu
Modifié par Tweek (15 Aug 2006 - 00:32)
Modérateur
J'ai l'impression d'avoir parler dans le vide... Smiley ohwell Le problème ne vient pas que du décalage ennuyeux entre le header et le titre mais, dans un premier temps, de ta structure.

Soit. Je passe la main, je n'ai pas envie de faire Smiley ola pour te convaincre, pour moi, c'est les vacances... Smiley smile
Modifié par koala64 (15 Aug 2006 - 06:22)
Laurent Denis a écrit :

<edit>Au fait, IE est un excellent navigateur.</>


On n'est pas vendredi ! Donc on attend ! Smiley langue

<edit>Pour sortir un peu du sujet, et pour répondre à Laurent concernant la non ouverture à d'autres navigateurs que IE, je dirais aussi que c'est choisis par facilités, mais pas que cela... Smiley murf ; mais comme je le dis passons, le sujet à déjà été largement débatus Smiley cligne </edit>
Modifié par Groumphy (15 Aug 2006 - 08:37)
Bonjour

Tweek a écrit :
Les images qui ne s'affichent pas a l'écran sont des pngs que l'on sélectionne dans l'inspecteur de theme ( Theme pour Rapidweaver)

Ainsi que les headers (probleme de décalé) qui doivent etre dans des fichiers css extrenes) qui qui peuvent etre interchangeables, la aussi grache à l'inspecteur de theme.


Je crois que tu n'as pas compris ce que koala64 cherchait à te dire Smiley cligne

Le problème à régler avant de s'occuper des détails de mise en page est une répartition erronée des images entre éléments <img> et arrière-plan CSS: les images de spots, de lustres et de masques sont en effet des images de présentation qui doivent au choix:
- être traitées en éléments img mais avec alors des attributs alt="" (elles ne véhiculent aucune information et leurs attributs alt actuels parasitent la compréhension du document dans un navigateur non graphique)
- mieux, être traitées en arrière-plan CSS.

Cela dit, je ne sais pas exactement ce qu'est un "Theme pour Rapidweaver", mais il est en effet probable que tu sois plus ou moins limité par une sorte de CMS ou de gabarits HTML plus ou moins bien conçu ?
Je ne peux pas les mettre en arriere plan css, elles doivent obligatoirement etre superposées.
De plus ma feuille de style est Valide W3C et stricte XHTML

En effet, vu que cest un theme pour rapidweaver (logiciel d'édition de site web), je me trouve assez limité question d'édition css et la page html reliée au theme est assez "spéciale", vu que l'on édite non pas le fichier Html en lui-même, mais dans le logiciel.

Quand aux commentaires conditionnels, j'ai essayé pour IE 6, ca ne marche pas. je l'ai placée dans le code html mais je ne sais pas si je l'ai bien placé, et si j'ai bien ajouté ce qu'il fallait entre les balises.