Critiques de css bienvenues

[Nathalot]

Bonsoir,

Je viens de construire un squelette de page. J'aimerais savoir si la feuille de style creee pour arriver a ce resultat est logique, coherente ...

Seul le codage de l'organisation de la page m'importe pour l'instant.

(couleurs et textes ne sont la que pour une aide visuelle de ce que j'ai code)

La page est ICI

La css est LA

Merci

Menagez moi tout de meme, ne me decouragez pas trop vite

Laurence

[Guest CraJK]

Avec firefox, ça me donne l'impression d'etre décallé à droite.

J'ai pas encore vu la CSS, je vais sortir mon rottweiler et je reviens.

[ElMoustiko]

Tout d'abord la structure generale du site parait correcte, en tout cas on la retrouve assez souvent.

Pour ce qui est du code xhtml utilisé (je suppose que tu veux aussi le point de vue des gens dessus ? ), pour la partie centrale, là où tu met tes cadres beiges, tu utilises des listes non ordonnées, peut etre que ce n'est pas le plus indiqué ici, tu pourrais par exemple faire un cadre (div) englobant le titre de la rubrique/cadre (hN) et ensuite le contenu de la rubrique (p). Cette methode serait sémantiquement plus adaptée je pense.

Pour ce qui est des css, je remarque que tu utilises les position absolute pour structurer ta page, c'est une des solution, personnelement je ne l'utilise pas a cause du footer(pied de page), que j'ai bien souvent du mal a positionner avec cette methode, en effet ici tu positiones ton footer de facon absolue, mais si ta page augmente en hauteur, ton footer restera au mem endroit et chevauchera le contenu de ta page. A moins que tu ne definisses une hauteur au conteneur de ta partie centrale en lui donnant un overflow auto pour permetre de scroller sur cette hauteur que tu definis.

Sinon j'ai aussi remarqué que tu utilisé les pt (point) comme unité, il me semble que ca n'est pas l'unité la plus adaptée pour definir des dimensions d'elements dans une page, le px (pixel) est je pense preferable.

Encore une petit remarque de l'ordre de l'optimisation, tu pourrais regrouper les propriétés css que tu utilises par exemple pour les bordures les definir comme ceci :

border: 1px solid #000; pour une bordure d'un pixel noire et de type solid plutot que de definir propriété par propriétés. Idem pour les marges, padding, font... Mais ce point est de l'ordre de l'optimisation (voir ce lien pour en apprendre plus http://www.yoyodesign.org/doc/w3c/css1/#grouping )

Et bien voila, dans l'ensemble ca semble plutot correct surtout si tu debutes ou est en voie de progression (c'est ce que j'ai cru comprendre)

_AT_bientot (j'espere ne pas t'avoir decouragé ! )

[Nathalot]

Merci de cette reactivite ;-)

J'ai mis en absolu car cette page ne doit pas etre amenee a bouger en taille... et aussi que j'ai pas trop pige le relatif encore.

Mais je vais tt de meme essayer de modifier cela pour la logique des choses.

Pour le reste, je vais modifier tout ca aussi ... affaire a suivre !

Et pas encore decouragee ;-) merci bien

[Monique]

Bonjour Nathalot,

Tu devrais aussi prendre l'habitude de structurer ton contenu avec les éléments hx :

<h1>TITRE Nom du site</h1>

Pour le contenu du bloc central, j'aurais utilisé

<h2>Coups de coeur</h2>
<p>Le texte mis ici...</p>
<h2>Evènements</h2>
<p>Le texte mis ici...</p>

Encourageant pour un début

[Nathalot]

oui Monique ca je sais bien mais ce n'etait pas le but encore.... c la prochaine etape.

Je tente de faire petit a petit pour ne pas tout melanger ;-)

Merci

[Denis]

je sais bien mais ce n'etait pas le but encore.... c la prochaine etape. Je tente de faire petit a petit pour ne pas tout melanger ;-)

En fait, ça me semble être la pire chose que tu puisses faire... parce que le fait de changer tes éléments HTML pour des éléments à valeur sémantique ajoutée aura tôt fait d'alléger ton code et donc tu devras recommencer une partie de ton travail pour adapter ta CSS à ta nouvelle structure HTML améliorée. Même si ça peut sembler plus dur au début, je t'invite à faire ton HTML et ta CSS en parallèle.

Ceci dit, je confirme que sous Firefox, le tout est décallé vers la droite. Peut-être te manque t-il un clear: both pour échapper à un élément flottant précédant le div conteneur ?

[Nathalot]

Je vais prendre en compte toutes vos remarques et je reviendrai avec quelque chose de mieux construit.

[Wanbli]

sur IE en 1024 x 768 j'ai un scroll horizontal ...

Dommage ...

š

Pour le reste je débute aussi donc je laisse les critiques éclairées aux connaisseurs ...

[ElMoustiko]

Denis j'ai un doute sur ton idée, il n'y a pas l'air d'y avoir d'elements flottant sur la page. Et je suis sous firefox, et je n'ai pas le decalage dont vous parlez tous ... suis-je aveugle ?

Sinon si en 1024*768 avec IE il y a une barre de defilement horizontal, c'est que ta maquette est trop large, je n'avais pas fait gaffe a ce point, je suis en 1280*1024 ! Pour regler ce leger soucis, tu as 2 solutions, diminuer la taille de la page et la mettre a 770px de large (c la taille classique pour ne pas avoir de barre de defilement horizontale jusqu'a 800*600 (qui reste une resolution assez majoritaire sur le net), le probleme c'est que pour le type de site que tu fait, ca risque de faire leger en largeur ! Donc 2eme solution, tu peux faire des largeurs en poucentage pour que le site s'adapte tout seul a la resolution de l'ecran. Un petit desavantage pour cette methode aussi, c'est pas si evident que ca a realiser, vu que c'est plus aleatoire. Point de vue design, il faut prevoir les differentes resolutions possible et etre sur que quelque soit la resolution, le design sera inchangé.

C'est un point que tu peux regler un peu plus tard (si tu veux faire etape par etape) parcequ'en general tu n'as que quelques valeurs dans tes CSS a regler et le code xhtml reste inchangé.

Voila bon courage !

@++