Je me lance dans le developpement en css alors que je ne pratiquait que les "table" avant... et c'est pas gagné encore.
 
Voilà la première version de la maquette html:
http://speedyop.free.fr/blinkygames/homepage.html
avec son fichier css correspondant:
http://speedyop.free.fr/blinkygames/standard.css
 
le css est optimisé Firefox 1.0 (osX) sur lequel il a le meilleur rendu
sous Safari (osX) y'a un tout petit bug
sous Opera 6 et 7 (osX) ça passe pas (faute à la colonne droite...)
sous Internet Explorer 5 (osX) ça passe pas sur plein de point.
 
Donc première chose je voudrais savoir comment ça passe sous Windows XP (Opera, Firefox, IE) car je n'aurait pas accès a cette plate-forme de test tout de suite merci.
 
Je me lance dans l'optimisation du css parce que je reconnais ça que j'ai vraiment fait ça comme un porc, si vous voyez des grosses erreurs faites dans le css ou le html merci de me le faire savoir, je débute vraiment en css et je n'ai pas encore les bons réflexes de codage.

Salut, moi je trouve ca plutôt bien, par contre avec internet explorer il y a un bug puisque ta balise div ayant pour id main se retrouve tout en bas. avec firefox c nikel par contre. aide toi de cet outil pour faire du xhtml valide : http://validator.w3.org/check?uri= [...] epage.html
et de celui-çi pour valider tes css : http://jigsaw.w3.org/css-validator [...] andard.css
amuse toi bien  

merci, je viens en effet de voir que j'ai déjà plein d'erreurs dans mon xhtml donc je continue a developper online pour utiliser ces validateurs (je conseil le plugins web developer de firefox d'ailleurs), ces validateurs ne marchant bien entendu pas sur des pages offlines.

à la 1ère lecture de ton code, je pense que tu es passé d'un extreme à l'autre...
 
tu abandonne les tableaux au profit des div, félictations, mais si tu dois mettre autant de div que tu avait de ligne de tableau avant... pkoi changer ???
 
et aussi, un ID est un identifiant, donc de ce fait il doit être unique. il te faut définir des class "titre", "prix"...etc... et non des ID, et tu vas déjà avoir moulte warning en moins à ta validation
 
Ta quete contre les tableaux est noble, mais longue et semée d'embuche, j'ai commencé mon chemin dans ce sens ya qques temps, et je sius encore loin de l'avoir achevé, mais pour riren au monde je ferais machine arière )
 

oui j'ai un peu reproduit le shema de bloc avec des div imbriqués pour faciliter les choses...
c'est si mal que ça?
 
la questions est : "Doit-on adapter son fichier html lorsque l'on fait le fichier css?"
 
parceque ma premiere version du .html à été le plus simple possible, puis en faisant le css, je me suis rendu compte qu'il fallait ajouter certain div, réagencer l'ordre de ceux-ci etc...

A lire : les maladies classiques du début de l'apprentissage des CSS
http://alsacreations.com/blog/inde [...] es-des-css

 
excellent, je me reconnais bien là, j'ai toutes les maladies citées
la j'allege, j'enleve des div et du coup j'enleve du code au css, doublement gagnant.
 
En fait faut connaitre bien comprendre que des blocs comme ul ou form sont deja des block en eux memess donc inutile de les encapsuler dans des div déjà

 
yep, vraiment un excellent lien...

 
Sisi tu peux valider des pages offline (Validate Local Html/CSS) mais il faut quand même être connecté au net.
 
Sinon, pour du pur offline il y a ça : HTML VALIDATOR (based on Tidy)

c'est bon j'ai valider mon xhtml et mon css
http://speedyop.free.fr/blinkygames/homepage_test.html
http://speedyop.free.fr/blinkygames/standard_test.css
 
j'ai amélioré la compatibilité opera grace a ces validations strictes... mais reste des petits pb encore... klk1 pourrais me dire sous IE XP ce que ca donne? (j'ai tjrs que mon mac sous la main) merci
 
IE XP, firefox, safari opera et ça rulez... ie mac je l'abandonne pour l'instant j'ai d'autre chat a fouetter comme pondre le code, mais pour generer du xhtml ca va etre un jeu d'enfant YUMMI

Avec IE6 XP c'est la catastrophe   tous est décalé  

ce que sa donne sous IE ?  
 
ben comme sur mon site, pas terrible encore des bugs et
 
 toujours des bugs, fait trop chier ce IE, je crois que je  
 
vais recoder avec des tables au moins là, pas de problème.

baj je me dis quue c'etais pas forcement plus facile les premiers sites en table, donc c'est en perseverant qu'on arrive a quelques chose, c'est pas la faute du css/xhtml quoi, je serais tenté de dire IE puisque pour moi Firefox est le plus "W3 complient", mais bon rien ne sert de nier qu'il represente 93% des navigateur et qu'il sois un boulet ou pas, il faut en tenir compte... chuis bien embeté la pour continuer si ca merde sous IE... va falloir que je me trouve un pc moi

j'ai enfin vu le résultat de ma page sous IE6 xp (merci virtual pc) ben c'est pas joli joli en effet...
 
Quelqu'un s'y connait bien en bug ie?
genre je comprends pas pkoa il ne respecte pas bien les width fixé en css... pour le logo "blinkygames" c'est 150px et la il déborde
alors que pour le titre c'est aussi 150 px et la il le respecte...
 

bon voila trouvé !
en fait le span class="alternate" est la pour ne pas afficher le texte, je remplace les h& et hé par des images en css...
Mais voila apparement ie n'aime pas qu'on fixe la taille d'element comportant du texte, comme les h1,h2, etc et ce même si le texte ne doit pas s'afficher, il leur attribut d'emblée la taille qu'elle devrait avoir avec le texte visible, donc il m'as suffit de mettre en complement de visibility:hidden , un font-size:1px
 
voila j'avance dans ma résolution de pb ie... m'en reste plus que... trop plein

c'est bon enfin j'ai un css compatible safari/firefox/opera/ie YAISSE!!
 
je tiens a remercier Microsoft sans qui tout ces efforts... bah n'aurait pas été nécessaires...
 
http://speedyop.free.fr/blinkygames/homepage_test.html  
http://speedyop.free.fr/blinkygames/standard_test.css  

Par contre, fait attention au surplus de <div> inutiles. N'oublie pas que la balise <div> est à pour grouper des éléments, et donner une structure au document.
 
Par exemple, dans tes liens :

Ton code correspondant ressemble à ça :  

Je vois pas l'interêt d'avoir mis des <div> autout de tes liens

Utilise la balise <br /> judicieusement quand il le faut Le mieux est de désactiver le CSS, et de regarder ce qu'il se passe (mais pareil, il ne faut pas abuser du <br /> ).
 
Pareil pour les 'A ne pas manquer'. Là où ton code ressemble à ça :

J'aurais plutot mis ça :

Attention à la balise <i> qui est déconseillée.

 
A mon avis, c'est encore plus inepte que <i> ! Soit c'est réellement une convention typographique (mots en latin, etc.) et alors je ne vois pas pourquoi on se priverait d'un <i> revendicatif.
 
Mais dans le cas précis un <span class="plateforme"> me paraîtrait plus approprié...
 
Par ailleurs je suppose que l'image n'est que décorative, donc je mettrais l'image en background en mettant un id à l'item <li>.

Oups, j'ai fait ça trop vite je corrige

je vous remercie de vos conseil, aujourd'hui je me lance dans une cure d'amaigrissemnt du xhtml et du css donc ca tombe tres bien.
 
le xhtml je voulais en effet encore enlever quelques balises et le css me servir plus de l'heritance (heritage?)
 
sinon en php j'ai l'habitude de compresser mes page en gzip, vous pensez que j'y gagnerait bcp?
 
et lesseuls images apparaissant dans le xhtml sont des images tirées de base de données et donc contectuelle et changeante selon le produit, c'est de l'information donc je le garde dans le xhtml, juste?

Ayant eu le problème, j'ai préféré un "overflow: hidden" plutôt qu'un changement de la taille de la police

 
Les images purement décoratives sont à mettre soit dans le CSS, soit dans le XHTML avec un alt="" si vraiment c'est pas faisable dans le CSS.  
 
Par contre les images véhiculant de l'information sont obligatoirement mises dans l'XHTML, avec alt et title spécifiés.