28220 sujets

CSS et mise en forme, CSS3

Optimiser la maquette d'un forum

Bonjour,
Je viens de terminer la maquette pour le design de mon forum que j'ai moi-même codé.

Je me deboruille en html CSS, mais je ne maitrise pas tout completement. C'est pourquoi je viens faire appel a des personnes compétentes.

La maquete a été faite avec un editeur wysiwyg et j'ai ensuite modifié manuellement les fichiers pour alléger le code en essayant de respecter les standards selon (le peu :d ) que j'ai appris.
J'ai aussi nommés les styles en francais pour que l'on y voie plus clair Smiley smile
Voici le fichier htm: http://serveurcorantin.free.fr/html/nomenu.htm
Voici le fichier css: http://serveurcorantin.free.fr/html/nomenu.css

-- Pouvez-vous voir si je peux encore optimiser mes fichiers Css et html?(peut-être que certains arguments sont inutiles et répétés)
-- Pouvez-vous m'aider à corriger un petit bug sous Firefox? Il y a une petite barre blanche sous le tableau contenant "Posté le" et les icones.
-- Voyez-vous une autre amélioration à faire pour respecter au plus les standards?(les attributs alt seront remplis plus tard Smiley cligne )

Merci beaucoup
Modifié par Corantin (15 Jul 2005 - 18:40)
Bonsoir.
C'est vrai, le html transitional permet encore pas mal de lourdeurs ( Smiley cligne c'est pas pour rien qu'il est écrit loose dans le doctype "http://www.w3.org/TR/html4/loose.dtd" )
Oui, il y a pas mal de choses qu'on peut encore dégraisser :

( exemples au hasard ) au lieu de :

&nbsp;<br> à chaque retour à la ligne il vaut mieux mettre une marge gauche de 1em dans les styles. ( ça prend une ligne pour tout le site )
&nbsp;&nbsp;<br> à chaque 1ère ligne de nouveau paragraphe, il vaut mieux lui définir un text-indent 2em dans les styles.
Au lieu de faire un double <br><br> entre chaque chose que tu veux voir comme un nouveau paragraphe : faire un nouveau paragraphe avec margin-top 10px dans les styles.
On ne fait pas une liste avec <p>blabla<br>&nbsp;&nbsp;<br>blabla<br>&nbsp;&nbsp;blabla</p> mais avec <ul><li>blabla</li><li>blabla</li></ul>
Toutes les choses comme <TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" >peuvent être définies une fois pour toutes dans une unique feuille de style ( qui restera en cache pendant la navigation ) voir ça à chaque truc, sur toutes les pages : c'est "lourd". Etc...
Je crois qu'il est plus difficile ( et fatiguant ) de prendre un code généré par un logiciel "wysiwyg" et de le nettoyer à chaque page que tu feras automatiquement que de tout faire soi même... D'autant que le code produit par ces softs n'est pas " bien compréhensible par l'humain " ( à moins d'être un peu con )...
Tu connais le proverbe ? On ne fait du neuf avec du vieux.
Pour travailler directement avec un vrai éditeur texte, en fait c'est pas bien compliqué ( moi je trouve plus simple parce qu'il n'y a pas à y revenir ). On peut faire des portions de code entières qui servent de "snippets" (des morceaux pré-codés) ça va très vite. Généralement il y à un mode prévue qui permet comme dans le mien, d'ouvrir le document dans ton navigateur par défaut ( ou tous tes navigateurs ) par un simple raccourcis clavier. En fait, c'est presque du "wiysiwyg" en mieux car pour finaliser, j'ouvre automatiquement les 7 navigateurs que je possède. On peut remplacer une portion de code pour toutes les pages du site en 1 seconde. etc.
Dans les css des petites choses comme "padding-left: 5px;padding-right: 5px;padding-bottom: 5px;" peuvent être remplacées par "padding: 0 5px 5px" mais c'est pas bien méchant puisque chargé qu'une fois par navigation.
Il y a aussi une chose bizarre, je sais que ça marche mais ne serait-il pas plus simple de faire autrement ? en donnant des noms de classe bleu, jaune ou rouge ?
table > table > table > table > table > td, table > table > table > table > table > th{ border-color: #0000ff !important;}
table > table > table > table > table > table > td, table > table > table > table > table > table > th { border-color: #00ff00 !important;}

Y'en a plein vers la fin de ta css. Bonjour, dans trois mois si tu dois corriger quelque chose !
Bon courage.
Modifié par Aureance (16 Jul 2005 - 01:31)
Bonjour,
J'ai suivi vos conseils et j'ai amélioré deux trois autres choses.
Je pense pas pouvoir l'optimiser d'avantage Smiley lol

J'ai encore une question, maintenant il est valide XHTML Transitionnal, mais j'ai un avertissement
"XML-Declaration not available! Add an valid XML-Declaration to your Document!"

Aurais-je ommis quelque chose? Smiley smile
Merci
Bonjour,

Bravo pour les améliorations Smiley cligne

Ton XHTML étant servi en tant que text/html, l'ajout de ce prologue XML serait dénué de sens.
Utiliser plutôt le validateur HTML du W3C serait par ailleurs recommandé, pour éviter ce genre de malentendu.
Modifié par Laurent Denis (30 Jul 2005 - 11:22)
Sujet clos
Aller à