28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise SPIP et le squelette "Alternatives".
=> sous Firefox c'est nickel, tout s'affiche bien.
=> sous IE, les background-color ainsi que les background_image s'affichent quand ils le veulent et surtout de manière non complète (en gros, l'affichage du bckground évolue de rien du tout à la totale quand on fait un scroll par exemple).
Pour voir un exemple : Le site d'Alternatives. Très bien fait, je trouve, dans la présentation, cadre du milieu en haut, le gris clair s'affiche à son bon vouloir.

J'ai lu sur ALSACREATIONS que les background était plus pertienent sur les <p> ou les <a>... serait-ce une solution?
Modifié par cfred (02 Mar 2007 - 14:18)
Bonjour,
a écrit :
Background sous IE6.0.2800.1106

Lol IE6 ça suffira Smiley cligne

je n'ai pas remarqué de problème d'affichage aleatoire de Backgrd sur IE
mais cela peut venir d'un problème de layout.
Essayes de mettre zoom:1 au niveau des déclaration du bloc qui contient
le background et vois si cela resout ton problème.

a écrit :
J'ai lu sur ALSACREATIONS que les background était plus pertienent sur les <p> ou les <a>... serait-ce une solution?

Rien à voir... cette affirmation s'appuit sur des crtière d'accessibilité :
le texte doit toujours être visble quelquesoit la config de l'utilisateur.
Modifié par Hermann (01 Mar 2007 - 12:31)
Bonjour,

zoom: 1 sert ici à doter l'élément d'un état particulier dans IE qui modifie le fonctionnement de son rendu CSS. C'est un effet de bord de cette propriété, dont on tire parti de manière neutre.

En fait, en effet, zoom permet, dans IE Windows, d'appliquer un effet d'agrandissement ou de réduction graphique à un contenu (textuel ou non). Exactement comme la commande de zoom graphique présente dans l'interface d'IE7...
Hermann,

Smiley eek Alors là... c'est parce que je ne peux pas te faire la bise... Smiley bawling (comme quoi le net a ses avantages contre l'exces d'émotion Smiley biggol )

=> le zoom:1 fonctionne super bien...
Smiley biggrin je suis fin pres pour continuer le developpement de ce site qui doit devenir un site pro. Dire que j'allais abandonner ce squelette...
Merci
Attention cFred, zoom:1 est un propriété propriétaire Microsoft donc
invalide. Tu dois la mettre dans une feuille de style en commentaire conditionnel (faire un recherche sur la FAQ)
Zoom:1 devrait te servir essentiellement à repérer un bug de Haslayout.
Je te conseil vivement de lire au moins la première partie de
http://www.test.blog-and-blues.org/haslayout/trad_temp.html
Modifié par Hermann (01 Mar 2007 - 15:18)
je reviens aux nouvelles et te livre mes modifications effectuées.

1erement le fichier perso.css n'a plus de son zoom:1
#bloc-contenu { border: 0; padding: 0; }
ensuite j'ai créer un ie6.css avec
#bloc-contenu { zoom: 1;}
et je te donne la page HTML générée au niveau des styles
<link rel="stylesheet"
href="http://192.168.0.4/spipv01/themes/alternatives-V01/styles/perso.css" 
type="text/css" media="projection, screen, tv" />

<!--[if lt IE 7]><link rel="stylesheet"
href="http://192.168.0.4/spipv01/themes/alternatives-V01/styles/ie6.css"
type="text/css" media="projection, screen, tv" /><![endif]-->

<link rel="stylesheet"
href="http://192.168.0.4/spipv01/themes/alternatives/styles/print.css"
type="text/css" media="print" />


C'est cela que tu attendais comme résolution... ou est-ce encore trop simpliste par rapport à l'explication que tu m'as donné?

En tout cas, MERCI pour ton aide
cfred a écrit :
C'est cela que tu attendais comme résolution... ou est-ce encore trop simpliste par rapport à l'explication que tu m'as donné?

Si le bug ne se produisait qu'avec IE6 (c'est à dire s'il a été corrigé dans IE7, comme c'est le cas de nombreux bugs de HasLayout), alors c'est parfait.
Oui c'est bon Smiley cligne

a écrit :
media="projection, screen, tv"

Je pense pas que le média TV pour le webTV soit implémenté. A vérifier.
Et puis je vois pas trop à quoi ça pourrait te servir.

Florent V. a écrit :
...c'est à dire s'il a été corrigé dans IE7, comme c'est le cas de nombreux bugs de HasLayout


Oui il paraît mais pour info je viens d'en repérer un qui persiste:
celui des background (puces) de <li> qui ne s'affichent qu'en début de liste.
Modifié par Hermann (01 Mar 2007 - 20:03)
Bonsoir,

Hermann a écrit :

Je pense pas que le média TV pour le webTV soit implémenté. A vérifier.
Et puis je vois pas trop à quoi ça pourrait te servir.


Surtout, les types de média autre que screen et print sont totalement inutiles dans les CSS correctives pour IE 5.x-7.0 Windows en commentaires conditionnels Smiley cligne

Sinon, au passage: cette habitude très répandue d'assimiler projection et screen est décidément curieuse...
Modifié par Laurent Denis (01 Mar 2007 - 20:27)
Laurent Denis a écrit :

Sinon, au passage: cette habitude très répandue d'assimiler projection et screen est décidément curieuse...

Pourquoi ça? Cela permet de prendre en compte le mode plein écran D'Opera mais
manifestement aprés un test, Opera 9 n'associe plus projection a ce mode.
Par ailleurs il me semble avoir vu un exemple sur un article de ton site.
Modifié par Hermann (01 Mar 2007 - 21:12)
Hermann a écrit :

manifestement aprés un test, Opera 9 n'associe plus projection a ce mode.


Uh ? Le mode "plein écran" d'Opera applique bien les CSS projection Smiley cligne

(Opera cesse justement de prendre en compte les CSS screen en mode plein écran en présence d'une CSS projection. Ceci afin de permettre son utilisation... en tant qu'outil de projection pour des présentations).

<edit>Ce que je trouve curieux, c'est cette assimilation d'un média paginé et d'un média continu</>

<re-edit>J'oubliais: le type de media "tv" est effectivement implémenté par les navigateurs spécifiques (notament par... Opera Web Tv Smiley cligne )</>
Modifié par Laurent Denis (01 Mar 2007 - 21:27)
Laurent Denis a écrit :

Uh ? Le mode "plein écran" d'Opera applique bien les CSS projection Smiley cligne
(Opera cesse justement de prendre en compte les CSS screen en mode plein écran en présence d'une CSS projection. Ceci afin de permettre son utilisation... en tant qu'outil de projection pour des présentations).

Ah d'accord je comprends mieux... En fait j'avais testé ça avec une seule css auquelle j'avais simplement enlevée le media projection.
Donc en prévision d'une éventuelle projection il faudrait mettre:

<link rel="stylesheet" href="" type="text/css" media="screen" />
<link rel="stylesheet" href="" type="text/css" media="projection" />

Merci Laurent.
Modifié par Hermann (01 Mar 2007 - 21:51)
Oui, tout à fait.

Cela dit, pour tirer pleinement profit d'Opera en mode projection, on pourra également recourir aux media queries pour décliner les CSS projection selon la résolution (media="projection and (min-width: ...px) and (max-width: ...px)")
Modifié par Laurent Denis (01 Mar 2007 - 21:59)
Bonjour à tous et merci pour vos interventions.

Je ne cherche pas à modifier totalement le squelette Alternatives mais plutot à corriger un bug...

Je clos le fil

Merci à tous...