Le css et les normes

Le css et les normes - HTML/CSS - Programmation

Marsh Posté le 29-06-2005 à 14:23:16    

Bonjour,  :hello:
Aprés lecture sur differents site des debats sur la mise en page en CSS plutôt qu'a l'aide de tableaux, et le respect des normes du w3c, j'en ai conclu qu'il valait mieux suivre ces regles, afin d'optimiser aux mieux son site web. Mais je constate aussi que la création d'un site a l'aide des <div> plutôt qu'a l'aide d'un tableau est plus complexe...En tout cas au debut. Et apres avoir regarder le code source de differents grands site, et tester leur validation, la plupart utilise les tableaux, et ne sont pas "valides". Pourquoi des sites tels que google, liberation, commentcamarche, par exemple n'utilisent pas pleinement les les css, et pourquoi n'ont ils pas un code valide ?
Merci d'avence pour vos reponses...
 


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 14:23:16   

Reply

Marsh Posté le 29-06-2005 à 14:31:07    

parce qu'ils n'ont pas eu le temps de se mettre aux normes et que ce sont des gros sites complexes pour certaines.
 
quoi que google serait facilement mis aux normes.
 
je ne sais pas trop pourquoi il reste comme ca.
 
ensuite la mise en page en tableau c'est clair que c'est caca, et que lorsque l'on fait un site de nos jours il vaut mieux faire du CSS positionning qui est beaucoup plus souple qu'une mise en page en tableau
 
tiens voila un exemple flagrant :  
 
http://www.csszengarden.com les gars ne changent que la feuille de style.
 
et si tu veux mieux apprendre et comprendre :  
http://css.alsacreations.com

Reply

Marsh Posté le 29-06-2005 à 14:35:18    

pilou88 a écrit :

Bonjour,  :hello:
Aprés lecture sur differents site des debats sur la mise en page en CSS plutôt qu'a l'aide de tableaux, et le respect des normes du w3c, j'en ai conclu qu'il valait mieux suivre ces regles, afin d'optimiser aux mieux son site web. Mais je constate aussi que la création d'un site a l'aide des <div> plutôt qu'a l'aide d'un tableau est plus complexe...En tout cas au debut. Et apres avoir regarder le code source de differents grands site, et tester leur validation, la plupart utilise les tableaux, et ne sont pas "valides". Pourquoi des sites tels que google, liberation, commentcamarche, par exemple n'utilisent pas pleinement les les css, et pourquoi n'ont ils pas un code valide ?
Merci d'avence pour vos reponses...


Parce que la "libération" des CSS dans le grand public est relativement récente, les webmasters les plus avancés travaillent sérieusement dessus depuis ~2000 (voir 1996 pour les plus anciens), en expérimentent les possibilités, les capacités, les limites, ... mais le mainstream commence tout juste à voir le potentiel (depuis ~2003-2004).
De plus, la chose est synchronisée (coincidence heureuse ou cause à effet?) avec une expansion rapide de navigateurs favorisant l'utilisation des CSS (Firefox, Opera, Safari) progressant rapidement à tous les niveaux aux dépends de navigateurs moins compatibles (IE6/PC et IE5/Mac).
 
Pour des "gros" sites relativement ou totalement tableless, on peut trouver
http://www.capgemini.com/
http://www.elysee.fr/
http://www.news.com.au/ (quelques tables bien spécifiques)
http://www.huntington.com/home/home.htm (une table, probablement oubliée là)
http://www.number10.gov.uk/output/Page1.asp
http://www.msn.com/
http://overheid.nl/


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
Reply

Marsh Posté le 29-06-2005 à 14:45:15    

http://www.skyblog.fr/ ;D


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 29-06-2005 à 14:48:54    

pilou88 a écrit :

Bonjour,  :hello:
Aprés lecture sur differents site des debats sur la mise en page en CSS plutôt qu'a l'aide de tableaux, et le respect des normes du w3c, j'en ai conclu qu'il valait mieux suivre ces regles, afin d'optimiser aux mieux son site web. Mais je constate aussi que la création d'un site a l'aide des <div> plutôt qu'a l'aide d'un tableau est plus complexe...En tout cas au debut. Et apres avoir regarder le code source de differents grands site, et tester leur validation, la plupart utilise les tableaux, et ne sont pas "valides". Pourquoi des sites tels que google, liberation, commentcamarche, par exemple n'utilisent pas pleinement les les css, et pourquoi n'ont ils pas un code valide ?
Merci d'avence pour vos reponses...


Loin de toute considération idéologique, tout simplement parce que les sites ont été fait par des gens qui étaient plus productif en concevant leur site en tableau et que le fait de les passer à la norme ne leur apporterait pas grand chose (peut-être un chouillat mieux référencer) et le pas grand chose n'est pas permis sur un site à valeur commerciale comparé au temps que cela représenterais.

Reply

Marsh Posté le 29-06-2005 à 14:59:53    

merci gatsusat pour les liens, je l'es avait deja consulter :)
Vous pensez donc que l'avenir du web est au css, ou bien que les tableaux vont rester presents dans les grands sites webs ? Une autre petite question, faut il vraiment tout coder en feuilles de styles ? par example, bien que le css permete l'integration d'image dans la mise en plage, avec float, n'est il pas plus simple de créer un tableau, et de mettre les images dans les cellules ? par example j'ai créer cette page : http://pierrelou88.free.fr/creations.php sans tableau, mais j'ai di inserer des <br /> pour que les vignettes "tombes en face" et ce n'est pas tres propre, un tableau aurait-il été dans ce cas utile ?
merci d'avence !
 
P.S : zapan666>> assez impressionant chez shyblog ! Malgres toutes les critiques dont ils sont victimes, leur page a une presentation correct en Feuilles de styles !


Message édité par pilou88 le 29-06-2005 à 15:01:40

---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 15:03:19    

pilou88 a écrit :

merci gatsusat pour les liens, je l'es avait deja consulter :)
Vous pensez donc que l'avenir du web est au css,


Bah, ça c'est clair. :D
 

pilou88 a écrit :

ou bien que les tableaux vont rester presents dans les grands sites webs ?


Non, les grands sites webs finiront surement par s'adapter, mais ce sera l'occasion d'un changement de design, ils ne se permettront pas de perdre du temps (donc de l'argent) juste pour le plaisir d'être aux normes.
 

Reply

Marsh Posté le 29-06-2005 à 15:07:00    

A propos de design, j'ai fait un tour sur http://www.elysee.fr/ en css...
Le design est horrible...Quand on pense au nombre de sites perso qui se permetent d'etre plus "beaux"


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 15:10:57    

Code :
  1. <li onmouseover="this.className='actif'" onmouseout="this.className='inactif'" class="inactif"><a href="index.php" accesskey="1">Presentation</a></li>
  2.     <li onmouseover="this.className='actif'" onmouseout="this.className='inactif'" class="inactif"><a href="creations.php" accesskey="2">Mes cr&eacute;ations</a></li>
  3.     <li onmouseover="this.className='actif'" onmouseout="this.className='inactif'" class="inactif"><a href="blog.php" accesskey="3">Mon Weblog</a></li>
  4.     <li onmouseover="this.className='actif'" onmouseout="this.className='inactif'" class="inactif"><a href="contact.php" accesskey="4">Contact</a></li>


ton javascript sert a rien : tu peux utilisé les propriétés  
a:hover pour ça
 
pour tes photos, mets un min-height sur les <p> avec la taille de tes photos comme valeur. (et zou, plus de <br /> normalement)  


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 29-06-2005 à 15:16:33    

j'ai essayer le a:hover... il ne s'aplique que sur le <a> donc pas sur toute la cellule, et ensuite l'image n'est vu qu'en partie, je ne peut pas modifier les valeur height et width pour le <a> (enfin si, mais ca n'a aucun effet...) l'ideal serait un li:hover, mais je ne crois pas que ce soit possible...
Merci tout de même pour la remarque, pour le min-height, je vais essayer ca.


Message édité par pilou88 le 29-06-2005 à 15:19:58

---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 15:16:33   

Reply

Marsh Posté le 29-06-2005 à 15:23:37    

pilou88 a écrit :

j'ai essayer le a:hover... il ne s'aplique que sur le <a> donc pas sur toute la cellule, et ensuite l'image n'est vu qu'en partie, je ne peut pas modifier les valeur height et width pour le <a> l'ideal serait un li:hover, mais je ne crois pas que ce soit possible...
Merci tout de même pour la remarque, pour le min-height, je vais essayer ca.


<a> est un élement en ligne, donc c'est normal que tu ne puisse pas mettre une hauteur.
Tu ne peux mettre une hauteur que sur les élèments en block
 
(et op, un p'tit display: block sur ton liens & on en parle plus ;))
 
http://css.maxdesign.com.au/listamatic/


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 29-06-2005 à 15:44:36    

ta classe menu_lien, elle n'est pas bien placée par rapport a ta css, qui fait référence à tous les éléments a contenant dans un éléments de classe "menu_lien". Or la, menu_lien, c'est deja ton a.
 
Mets ta classe sur le <ul> :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 29-06-2005 à 15:45:49    

oui merci, j'ai supprimer le message, j'avais ecrit une horreur, il falait mettre :
li a:hover... merci plainsofpain :p


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 15:48:14    

Une derniere petite question, utiliser ceci :
margin-top:-137px; c'est autorisé ?


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 15:48:51    

oui, mais pourquoi 137px dans le negatif ? Ya peut-etre un truc qui va pas ^^'


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 29-06-2005 à 15:59:52    

pilou88 a écrit :

A propos de design, j'ai fait un tour sur http://www.elysee.fr/ en css...
Le design est horrible...Quand on pense au nombre de sites perso qui se permetent d'etre plus "beaux"


1) Critère entièrement subjectif :o
2) C'est le site de l'élysée, pas un délire de grapheux comme on en voit partout ;)

Reply

Marsh Posté le 29-06-2005 à 16:01:54    

en fait c'est pour un autre div, il se trouve à la fin, et je eu besoin de le remonter, afin qu'il se trouve plus haut que le div precedent....  :whistle:
au passage, qui sait comment centrer le texte sur mes boutons ? (j'ai essayer vertical-align=middle un peu partout...)


Message édité par pilou88 le 29-06-2005 à 16:08:06

---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 16:03:07    

Bannis tout de suite le mot calque de ton langage, ça n'existe ni en CSS, ni en HTML

Reply

Marsh Posté le 29-06-2005 à 16:04:00    

C'est un truc qui vient des wysiwyg ca encore :o
 
Mais nom de **** utilisez dream si vous voulez mais en mode CODE !!!!


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 29-06-2005 à 16:05:15    

lol FlorentG, je me suis repris avant que tu n'ait eu le temps de me le dire :ange: désolé pour l'erreur
 
>> plainsofpain >> J'utilise dreamweaver en mode code, j'ai fais mon code source moi même(obligé, il est couper en 3 avec le menu et tout, avec des include en php ... y a t'il une autre solution pour remonter un <div> que de donner une valeur négative a l'atribut top ?


Message édité par pilou88 le 29-06-2005 à 16:07:41

---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 16:05:52    

pilou88 a écrit :

A propos de design, j'ai fait un tour sur http://www.elysee.fr/ en css...
Le design est horrible...Quand on pense au nombre de sites perso qui se permetent d'etre plus "beaux"


Pas d'accord, il est clair et efficace, il n'a pas à être beau comme un site de graphiste.
 
Il a une information à fournir, et cette information est officielle (c'est quand même le site de la Présidence [:mlc] ).
 
Il n'est pas beau, mais il fait son boulot sans fioritures et sans perdre le visiteur. C'est sa fonction, c'est son but, et je trouve qu'il la remplit à merveille :wahoo:


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
Reply

Marsh Posté le 29-06-2005 à 16:08:20    

FlorentG a écrit :

Bannis tout de suite le mot calque de ton langage, ça n'existe ni en CSS, ni en HTML


ça existe en infographie et en design. :o  
Bordel, vous êtes chiant à rester sur vos positions. :fou:  

Reply

Marsh Posté le 29-06-2005 à 16:11:30    

masklinn >>  :sarcastic: moué... l'effort sur la presentation peut tout de même être utile dans la communication...


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 16:11:36    

The-Shadow a écrit :

ça existe en infographie et en design. :o


Oui.
 
 
Et alors? [:spamafote]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
Reply

Marsh Posté le 29-06-2005 à 16:13:07    

The-Shadow >> En effet ca existe, mais dans mon cas, j'utilise les <div> en tant qu' outil de positionnement, de mise en page, et non pas pour superposer deux choses, le terme de calque est peut-être pas adapter a mon cas, mais il peut l'être a d'autres...


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 16:16:45    

pilou88 a écrit :

masklinn >>  :sarcastic: moué... l'effort sur la presentation peut tout de même être utile dans la communication...


Mais elle est très bien la présentation du site bordel [:mlc]  
 
Il est clair et sobre, il est extrèmement lisible, bien structuré, tu veux quoi, plein de couleurs et de machins qui bougent? [:mlc]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
Reply

Marsh Posté le 29-06-2005 à 16:19:13    

j'parle de l'image sous le titre, les bandes verticales un peu partout.... Enfin bref ce n'est pas le sujet, et je ne vais pas me mettre a dos la presidence  :ange: qui sait peut être lira-t-elle ce topic ? :sarcastic:  
ok, je sort....


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 29-06-2005 à 16:23:02    

masklinn a écrit :

Oui.
Et alors? [:spamafote]


Et alors ? Quand on développe un site, on fait en partie du webdesign non ?
Un site internet, c'est pas du texte au long, sinon le Minitel était largement suffisant.

Reply

Marsh Posté le 29-06-2005 à 16:23:38    

en fait les gens ils veulent un site avec plein de grosses images, et de trucs qui clignotent !
 
Comme la : http://www.meteo-sille-le-guillaume.com/
 
Edit : un point en trop flute ^^'
 
Edit Bis : j'espère que le webmaster ne touchera pas a ce site, histoire qu'on puisse montrer que c'est pas bien les gif et les couleurs vives ^^'


Message édité par plainsofpain le 29-06-2005 à 16:24:39

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 29-06-2005 à 16:25:02    

pilou88 a écrit :

The-Shadow >> En effet ca existe, mais dans mon cas, j'utilise les <div> en tant qu' outil de positionnement, de mise en page, et non pas pour superposer deux choses, le terme de calque est peut-être pas adapter a mon cas, mais il peut l'être a d'autres...


Peut être pas dans ton cas, mais il ne faut pas bannir le terme.
Faut arrêter de penser comme des machines à développer. Parce que ceux qui disent qu'ils faut bannir le fond calques sont les premiers à critiquer un site super moche en rouge sur fond vert, alors il faut qu'ils savent ce qu'ils veulent.

Reply

Marsh Posté le 29-06-2005 à 16:25:24    

The-Shadow a écrit :

Et alors ? Quand on développe un site, on fait en partie du webdesign non ?


Oui, et alors? [:spamafote]  
 
Le webdesign n'a pas de calques per se, c'est tout [:spamafote]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
Reply

Marsh Posté le 29-06-2005 à 16:27:23    

masklinn a écrit :

Oui, et alors? [:spamafote]  
 
Le webdesign n'a pas de calques per se, c'est tout [:spamafote]


Le design a un langage à lui, c'est pas celui du développeur, ça te plait pas, mais c'est comme ça.  
 

Reply

Marsh Posté le 29-06-2005 à 16:37:44    

The-Shadow a écrit :

ça existe en infographie et en design. :o  
Bordel, vous êtes chiant à rester sur vos positions. :fou:


En infographie et en design, mais pas en HTML/CSS :jap:

pilou88 a écrit :

The-Shadow >> En effet ca existe, mais dans mon cas, j'utilise les <div> en tant qu' outil de positionnement, de mise en page, et non pas pour superposer deux choses, le terme de calque est peut-être pas adapter a mon cas, mais il peut l'être a d'autres...


Ola ola ola, que d'erreurs dans ce post. Déjà y'a rien dans l'HTML de présentationnel, donc déjà utiliser un <div> pour la position est complètement nul. On arrête pas de dire d'utiliser les éléments pour leur sémantique, et non leur présentation :o :o

The-Shadow a écrit :

Le design a un langage à lui, c'est pas celui du développeur, ça te plait pas, mais c'est comme ça.


Olalala, t'as rien compris à l'HTML et au CSS : En HTML et CSS, il n'y a aucun moyen de faire un calque. Rien, niet, nada. Ceux qui utilisent les <div> pour "émuler" un calque, et je dis bien émuler, n'ont rien compris à tout ça :o

Reply

Marsh Posté le 29-06-2005 à 16:45:47    

FlorentG a écrit :

En infographie et en design, mais pas en HTML/CSS :jap:


Ha bon, j'étais persuadé que les CSS étaient là pour construire ou modifier le design d'un site.
 

FlorentG a écrit :

Olalala, t'as rien compris à l'HTML et au CSS : En HTML et CSS, il n'y a aucun moyen de faire un calque. Rien, niet, nada. Ceux qui utilisent les <div> pour "émuler" un calque, et je dis bien émuler, n'ont rien compris à tout ça :o


C'est toi qui visiblement n'a rien compris à ce qu'était un calque en design, c'est pourtant pas compliqué. Vous devriez peut-être ouvrir un peu vos horizons culturelles.
 
 

Reply

Marsh Posté le 29-06-2005 à 16:48:17    

The-Shadow a écrit :

Ha bon, j'étais persuadé que les CSS étaient là pour construire ou modifier le design d'un site.


Pour mettre en forme un document HTML ou XML ;)
 

The-Shadow a écrit :

C'est toi qui visiblement n'a rien compris à ce qu'était un calque en design, c'est pourtant pas compliqué. Vous devriez peut-être ouvrir un peu vos horizons culturelles.


Style je sais pas ce qu'est un calque [:itm] Aller aller

Reply

Marsh Posté le 29-06-2005 à 16:52:52    

FlorentG a écrit :

Pour mettre en forme un document HTML ou XML ;)


Et alors, le design, ça existe même sur le papier cul, tu fais un trou dans un papier cul, tu le superpose à un autre et hop, c'est considéré comme un calque en design, mais les fabricants de papier cul vont te dire que les calques n'existent pas, eux ils appellent ça des épaisseurs.
 

FlorentG a écrit :

Style je sais pas ce qu'est un calque [:itm] Aller aller


Bah pourquoi tu fais comme le contraire si tu sais ce que c'est.

Reply

Marsh Posté le 29-06-2005 à 16:55:22    

The-Shadow a écrit :

Et alors, le design, ça existe même sur le papier cul, tu fais un trou dans un papier cul, tu le superpose à un autre et hop, c'est considéré comme un calque en design, mais les fabricants de papier cul vont te dire que les calques n'existent pas, eux ils appellent ça des épaisseurs.


 :lol:  :lol:  :lol:  
C'est bon, t'as gagné :D
 

The-Shadow a écrit :

Bah pourquoi tu fais comme le contraire si tu sais ce que c'est.


Nan mais le principal problème c'est ça : le mec veut positionner un élément ici ou là, ou alors il veut en superposer. Alors il se dit "diantre ! il me faut des claques pour faire tout ça", là il barde de <div> comme un goret, pour obtenir le résultat. Sauf qu'évidemment ça va pas. Pas besoin de div, suffit de positionner l'élément directement. Mais du coup, est-ce devenu un calque ? Ou est-ce plutôt un "élément positionné" :D Mais un élément positionné, n'est-ce pas un calque ?


Message édité par FlorentG le 29-06-2005 à 16:55:39
Reply

Marsh Posté le 29-06-2005 à 17:12:55    

FlorentG a écrit :

Nan mais le principal problème c'est ça : le mec veut positionner un élément ici ou là, ou alors il veut en superposer. Alors il se dit "diantre ! il me faut des claques pour faire tout ça", là il barde de <div> comme un goret, pour obtenir le résultat. Sauf qu'évidemment ça va pas. Pas besoin de div, suffit de positionner l'élément directement. Mais du coup, est-ce devenu un calque ? Ou est-ce plutôt un "élément positionné" :D Mais un élément positionné, n'est-ce pas un calque ?


Mais là, c'est le moment où vous lui expliquez qu'il faut bien séparer le contenu de la forme. :D
Plutot que de dire aux gens d'oublier le terme calque, il vaut mieux les éduquer sur la bonne façon d'en faire.  
Exemple : J'ai un menu sur mon site fait dans un UL. Il suffit que je fixe une position absolu, un zindex et hop, ça devient un calque, graphiquement parlant. Pas besoin d'avoir 36 divs pour parler de calque.

Reply

Marsh Posté le 29-06-2005 à 17:32:46    

Ca commence a m'embrouiller tout ca .... :pt1cable:


---------------
Pilouweb.info et Pilou Web Blog
Reply

Marsh Posté le 30-06-2005 à 09:05:45    

Pour éviter de t'embrouiller, note cette phrase : Il ne faut jamais rajouter des <div> comme ça histoire de positionner des éléments. Ils faut positionner les éléments directement. Pour aller plus loin, il vaut mieux commencer ta page par sa structure, donc ne faire que le code HTML, sans aucun design cible. Après tu fait le design avec ce que t'as...

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed