CSS 3 validator

Salut,

alainL a tapoté, le 02/02/2011 11:14:

(Mes ombrages , sur http://basaburua.fr , marchent avec Ffx et Chrome,
mais pas avec IE)

Par contre, sur un netBook, il y a un soucis avec l'image en haut du
menu elle passe au dessus du texte principal :

<http://pasdenom.info/temp/eepc-plein_ecran.png>
<http://pasdenom.info/temp/eeepc.png>


C'est sur Seamonkey 2.1beta2pre équivalent à Firefox4.beta11pre.

--
Stéphane
http://pasdenom.info

Le 02/02/2011 11:27, yamo' a écrit :

Salut,

alainL a tapoté, le 02/02/2011 11:14:

(Mes ombrages , sur http://basaburua.fr , marchent avec Ffx et Chrome,
mais pas avec IE)

Par contre, sur un netBook, il y a un soucis avec l'image en haut du
menu elle passe au dessus du texte principal :

<http://pasdenom.info/temp/eepc-plein_ecran.png>
<http://pasdenom.info/temp/eeepc.png>


C'est sur Seamonkey 2.1beta2pre équivalent à Firefox4.beta11pre.

Ou c'est le texte principal qui passe en dessous... mais ce n'est pas
mieux. Overflow géré de manières différentes ? Sur mon IE et sur
Chrome, pas de barre de défilement horizontal dans le contenu, affichage
correct. Avec Ffx, barre de défilement et zone de quelques pixels de
flottement...
Je ne vois pas ce qui cloche:

html, body {
height: 100%;
width: 100%;
overflow: auto;
background: navy;
}

#contenu {
margin-left: 230px;
overflow: auto;
text-shadow:1px 1px 1px black;color: #FFFFFF;
font-size:100%;font-family:Arial,Tahoma, Verdana, sans-serif;
height: 100%;
}

#menu {
position: absolute;
left:0;
width: 230px;
height: 100%;
color: #d3d3d3;
}



--
AlainL

Le 02/02/11 11:14, alainL a écrit :

Bonjour,
CSS2.1 refusait text-shadow, CSS3 semble accepter.
Mais j'ai encore deux erreurs et là, ça coince:

.ombrage La propriété -moz-box-shadow n'existe pas : 3px 3px 12px
#2f4f4f 3px 3px 12px #2f4f4f
.ombrage La propriété -webkit-box-shadow n'existe pas : 2px 2px 12px
#2f4f4f 2px 2px 12px #2f4f4f

Validator me propose box-shadow qui n'a aucun effet. Existerait-il autre
chose ??? Merci.
(Mes ombrages , sur http://basaburua.fr , marchent avec Ffx et Chrome,
mais pas avec IE)

bon ... avant de s'attaquer aux zombrages ...
(qui n'ont jamais vraiment bien fonctionné depuis le siècle dernier)

commentaires pour la structure du document, de la page :

Le div "menu" devrait être à la fin du html

Le h3 qui suit ce menu devrait être un h1
il pourrait être en-dehors du "contenu"
(puisque c'est le titre/nom du site)

d'ailleurs, curieusement ce h3 a le sous-menu (h2) qui se décolle
suivant la page appelée

... ce ne sont pas les même css partout ?
ni les mêmes lignes html ?

à propos ... pourquoi tous ces insécables dans ce sous-menu h2 ?

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.


AAAaaarrRRRrrrgggGGGggg !
qu'est-ce que c'est que cette image de 670ko (2214px × 1719px)
<http://basaburua.fr/images/carte_rivieres_PA.jpg>
affichée qu'à : 800px × 621px
... y en a beaucoup des comme ça ?


Pour IE il y a des zombrages qui sont bien plus interressants que ceux
prévus par les css.1 ou le w3c et fonctionnent depuis IE.4

.zombre { filter:shadow(color=#C0C0C0, direction5); }

<http://ressources.mediabox.fr/documentation/css/ie-shadow>
<http://fr.selfhtml.org/css/proprietes/filtres_ms.htm>

Ha! Bien sûr, ça va pas plaire au Validator ! ! !

--
Stéphane Moriaux avec/with iMac-intel

Le 02/02/2011 11:14, alainL a écrit :

Bonjour,
CSS2.1 refusait text-shadow, CSS3 semble accepter.
Mais j'ai encore deux erreurs et là, ça coince:

.ombrage La propriété -moz-box-shadow n'existe pas : 3px 3px 12px
#2f4f4f 3px 3px 12px #2f4f4f
.ombrage La propriété -webkit-box-shadow n'existe pas : 2px 2px 12px
#2f4f4f 2px 2px 12px #2f4f4f

Validator me propose box-shadow qui n'a aucun effet. Existerait-il autre
chose ??? Merci.
(Mes ombrages , sur http://basaburua.fr , marchent avec Ffx et Chrome,
mais pas avec IE)

text-shadow est définit dans CSS3, donc c'est normal pour le refus en 2.1.
Par contre ton validateur n'est pas conforme (si tu me dis que c'est
celui du W3C, je suis triste) car CSS2.1 et 3 acceptent les propriétés
propriétaires, comme -ms-, -moz-, -webkit- :
http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

Quant à IE, il ne supporte pas text-shadow (ni grand chose d'autre issu
de CSS3) dans ses versions < 9.
Tu peux utiliser les très contraignants filtres Microsoft. Voir "shadow
filter IE" dans Google. Tu as notamment shadow, mais blur est souvent
beaucoup plus proche de ce que tu recherches. Par contre, mieux vaut
éviter de jouer trop avec : c'est lent et ça supporte peu de manipulations.

Le 02/02/2011 14:26, SAM a écrit :

...............
bon ... avant de s'attaquer aux zombrages ...

...

commentaires pour la structure du document, de la page :

Le div "menu" devrait être à la fin du html

dans le body , d'abord <div id="contenu"> , et après <div id="menu"> ?
j'ai essayé : le menu s'affiche en-dessous (la largeur de #contenu n'est
pas précisée)

Le h3 qui suit ce menu devrait être un h1

? tu veux dire H1 est traditionnellement plus grand que H2 ?

il pourrait être en-dehors du "contenu"
(puisque c'est le titre/nom du site)

Je préfère garder libre toute la hauteur du menu afin d'éviter un
ascenseur si la liste des liens s'allonge !

d'ailleurs, curieusement ce h3 a le sous-menu (h2) qui se décolle
suivant la page appelée > ... ce ne sont pas les même css partout ?
ni les mêmes lignes html ?

la même feuille de style, mais schmilblic entre les <br> et les sauts de
ligne. J'ai arrangé

à propos ... pourquoi tous ces insécables dans ce sous-menu h2 ?

merci ! j'ai découvert un truc ! mais spanstyle="word-spacing:100px" n'a
pas marché partout ! Comment séparer "Nos rivières" et "Parcours
enfants" Il me met 100px partout !

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.

OUI !

AAAaaarrRRRrrrgggGGGggg !
qu'est-ce que c'est que cette image de 670ko (2214px × 1719px)
affichée qu'à : 800px × 621px
... y en a beaucoup des comme ça ?

Y en n'a plus ! C'était une erreur de transferts.

Pour IE il y a des zombrages qui sont bien plus interessants que ceux
prévus par les css.1 ou le w3c et fonctionnent depuis IE.4

.zombre { filter:shadow(color=#C0C0C0, direction5); }

<http://ressources.mediabox.fr/documentation/css/ie-shadow>
<http://fr.selfhtml.org/css/proprietes/filtres_ms.htm>

Bon là, je note pour après la disparition de ce f... ascenseur.
Merci pour les remarques et les conseils.
--
AlainL

Le 02/02/11 16:56, alainL a écrit :

Le 02/02/2011 14:26, SAM a écrit :

...............
commentaires pour la structure du document :

Le div "menu" devrait être à la fin du html

dans le body , d'abord <div id="contenu"> , et après <div id="menu"> ?

vi,
C'est pour les mal-voyants (sans css donc), qu'il n'aient pas à remonter
en haut de page pour revenir au menu, une fois la page lue.

j'ai essayé : le menu s'affiche en-dessous (la largeur de #contenu n'est
pas précisée)

#contenu n'a à avoir qu'une marge gauche pour laisser la place au menu
(sa largeur s'adaptant toute seule à la place restante à droite)

et pour le menu toujours en haut, hop !

#menu { top: 0 }

Le h3 qui suit ce menu devrait être un h1

? tu veux dire H1 est traditionnellement plus grand que H2 ?

Vi,
mais là (la taille) n'est pas le plus important,
le "titre" doit être en H1
et au début du code html
ne serait-ce que pour Google et autres robots
sinon ... sémantiquement ?
et puis ...
à quoi ça sert que Hacheté-Aimelle se décarcasse si c'est pour pas en
profiter ?

il pourrait être en-dehors du "contenu"
(puisque c'est le titre/nom du site)

Je préfère garder libre toute la hauteur du menu afin d'éviter un
ascenseur si la liste des liens s'allonge !

Je ne vois pas trop ce que ça à voir à l'affaire (du H1) ... ?
ce H1 peut bien être margé comme le contenu, non ?

d'ailleurs, curieusement ce h3 a le sous-menu (h2) qui se décolle
suivant la page appelée > ... ce ne sont pas les même css partout ?
ni les mêmes lignes html ?

la même feuille de style, mais schmilblic entre les <br> et les sauts de
ligne. J'ai arrangé

Ha! pask'enplus des insécables y a des BR ?

à propos ... pourquoi tous ces insécables dans ce sous-menu h2 ?

merci ! j'ai découvert un truc ! mais spanstyle="word-spacing:100px" n'a
pas marché partout ! Comment séparer "Nos rivières" et "Parcours
enfants" Il me met 100px partout !

<body>
<h1>ASSOCIATION AGRÉÉE DE PÊCHE ET DE PROTECTION DU MILIEU AQUATIQUE DE
BASABÜRÜA (Haute-Soule)<br>
<img src="images/fraye.jpg" alt="">
</h1>
<h2 id="menu_page">
(L'association)<br>
<span>Présentation</span>
<a href="#stat">Statuts</a>
<a href="#bur">Bureau</a>
</h2>
<div id="contenu"> ... </div>
<ul id="menu">
<li><img src="logo.jpg" alt="logo" title=""></li>
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li>la merdouille JS iXit ou google
que si ça foire, c'est pas grave,
la page en est à sa fin ici</li>
</ul>
</body>


CSS :
====
h1,
#menu_page { text-shadow: #555 3px 3px; text-align: center;
color: white; margin-left: 230px; line-height: 1.5em }
h1 { color: skyblue }
#menu_page span,
#menu_page a { margin: auto 50px; color: skyblue }
#menu_page a { color: gold }
#menu_page a:hover { color: red }

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.

OUI !

je corrige comme ça :
html, body, #contenu { overflow: visible }
body { overflow-x:hidden; overflow-y: scroll }
mais ...
peut-être suffit-il de supprimer les {overflow:auto;} de ces machins ?

Bon là, je note pour après la disparition de ce f... ascenseur.

Voir si des fois ... :
<http://www.css-faciles.com/liste-proprietes/overflow-x.php>



--
Stéphane Moriaux avec/with iMac-intel

Le 02/02/2011 18:14, SAM a écrit :

....................

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.

je corrige comme ça :
html, body, #contenu { overflow: visible }
body { overflow-x:hidden; overflow-y: scroll }

L'ascenseur disparaît mais j'ai l'impression que ça annule la propriété
absolute de #menu qui se met à défiler en même temps que #contenu ? (au
moins chez IE paske en bidouillant, j'ai obtenu qu'il reste en place
avec Ffx )

peut-être suffit-il de supprimer les {overflow:auto;} de ces machins ?

apparemment non

..............


pour #menu{top:0}; OK ... mais le menu "scrolle" aussi en même temps que
le #contenu.


--
AlainL

Le 03/02/11 14:55, alainL a écrit :

Le 02/02/2011 18:14, SAM a écrit :

....................

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.

je corrige comme ça :
html, body, #contenu { overflow: visible }
body { overflow-x:hidden; overflow-y: scroll }

L'ascenseur disparaît mais j'ai l'impression que ça annule la propriété
absolute de #menu qui se met à défiler en même temps que #contenu ? (au
moins chez IE paske en bidouillant, j'ai obtenu qu'il reste en place
avec Ffx )

Normalement, pour que ça reste en place c'est :
position: fixed;
sauf qu'il y a des IE attardés qui ne savent ce que c'est :-(

peut-être suffit-il de supprimer les {overflow:auto;} de ces machins ?

apparemment non

essayer :

html, body, #contenu { overflow: visible }
body, #contenu { overflow-x:hidden; overflow-y: scroll }

Mais ... double ascenseur à droite
Mais ... les IE < 7 ... qu'en feront-ils ?

pour #menu{top:0}; OK ... mais le menu "scrolle" aussi en même temps que
le #contenu.

c'est toujours le même problème :
- si le menu est plus long on doit scroller le menu
- si le contenu est plus long on doit scroller le contenu
et on ne connait pas d'avance la longueur de l'un ou l'autre ... !

... scroller le menu c'est moche !!!



--
Stéphane Moriaux avec/with iMac-intel

Le 03/02/2011 23:23, SAM a écrit :

Le 03/02/11 14:55, alainL a écrit :

Le 02/02/2011 18:14, SAM a écrit :

....................

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.

.............

essayer :

html, body, #contenu { overflow: visible }
body, #contenu { overflow-x:hidden; overflow-y: scroll }

Mais ... double ascenseur à droite
Mais ... les IE < 7 ... qu'en feront-ils ?

Merci, ça fonctionne. Avec 2 ascenseurs, en attendant, mais c'est mieux
qu'avec un bout de ligne perdu hors de la fenêtre !
Testé en local avec Ffx, Chrome et IE...7.
Bonne journée.

--
AlainL

Le 03/02/2011 23:23, SAM a écrit :

Le 03/02/11 14:55, alainL a écrit :

Le 02/02/2011 18:14, SAM a écrit :

....................

Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
horizontal.

.> essayer :

html, body, #contenu { overflow: visible }
body, #contenu { overflow-x:hidden; overflow-y: scroll }

.
Aïe ! Ca ne va pas sur mon vieux portable en 1024/768 (et IE7) Le bout
de la ligne est encore tronqué et on dirait que le contenu est limité à
la hauteur du menu. ou même le body puisque l'image de fond de celui-ci
ne se répète plus.
Essayé aussi mais sur le même portable avec un ancien Opéra : pas mieux.
Je retourne à la css d'origine... (dont je ne sais pas ce qu'elle
donnait sur la vieille machine )
--
AlainL