CSS 3 validator
alainL
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)
--
AlainL
yamo'
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
alainL
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
SAM
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, direction=135); }
<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
Olivier Masson
> Bonjour,
> CSS2.1 refusait text-shadow, CSS3 semble accepter.
>
> .ombrage La propriété -moz-box-shadow n'existe pas : 3px 3px 12px
> #2f4f4f 3px 3px 12px #2f4f4f
> #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.
alainL
> ...............
> bon ... avant de s'attaquer aux zombrages ...
> commentaires pour la structure du document, de la page :
>
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, direction=135); }
>
> <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
SAM
> 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>
alainL
> ....................
>>> Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
>>> horizontal.
>
> 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
SAM
> 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 !!!
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.
>>>
>
> essayer :
>
> html, body, #contenu { overflow: visible }
> body, #contenu { overflow-x:hidden; overflow-y: scroll }
>
> Mais ... les IE < 7 ... qu'en feront-ils ?
>
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
alainL
>> Le 02/02/2011 18:14, SAM a écrit :
>>> ....................
>>>>> Ce qui serait super c'est qu'on puisse ne plus avoir cet ascenseur
>>>>> horizontal.
>
> 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