28173 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

N'etant pas vraiment tres bon en CSS, j'essaye de m'ameliorer. Malheureusement, j'ai commencé à coder un design et je me retrouve avec quelques difficultés. A vrai dire, tout a bien commencé mais là je rencontre plusieurs difficultés.
Ensuite, j'aimerais bien, si vous le voulez bien, que quelqu'un jette un coup d'oeil dans mon css pour voir ce que je pourrais ameliorer ou autre car à vrai dire, je ne suis pas sur de bien m'y prendre.

www.coolsmileys.net/design/

Je ne demande qu'à progresser, alors de l'aide ou conseils seront les bienvenus Smiley smile

Merci d'avance,

c u
Ludovic
Modifié par Elludovico (12 Mar 2007 - 23:50)
Elludovico a écrit :
A vrai dire, tout a bien commencé mais là je rencontre plusieurs difficultés.


Quelles difficultés rencontres-tu ?
Bonjour,

1. Ne pas utiliser de hauteurs fixes en pixels pour des éléments au contenu variable, y compris pour des éléments contenant une quantité à priori connue de texte... le texte, ça peut s'agrandir et donc prendre plus de place que prévu. Au passage, prendre le réflexe de tester le comportement d'une mise en page lors de l'agrandissement de la taille du texte.

2. Ne pas utiliser de hauteurs à 100% à moins de savoir très précisément ce que l'on fait. Si on ne sait pas très précisément ce que l'on fait, mieux vaut s'en passer (car soit ça ne marchera pas, soit ça sera source de problèmes).

3. Travailler la question des « colonnes factices » (cf. article sur Pompage.net).

4. Utiliser trois flottants juxtaposés (et collés au pixel près) pour faire trois colonnes est peu judicieux... d'ailleurs, la troisième colonne passe à la ligne dans IE6.
Peut-être plus intéressant :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

5. Travailler la question de la fusion des marges :
Cf. Blocs imbriqués et fusion des marges

6. Pour finir, un peu d'accessibilité : le texte « coolsmileys.net - Gives you a smile » n'est visible que si les images de fond sont activées. Cela revient à insérer un contenu via le code CSS. Or, dans le principe de la séparation du contenu et de la mise en forme, les CSS sont censés accueillir la mise en forme, pas le contenu. Donc, problème.
Utiliser une image de contenu HTML (balise <img>) avec un texte alternatif (via l'attribut alt) pertinent.