Erreur(Optimisation) CSS ?

Bonjour, je me fais mon petit site ^^' puis...

Je voudrais savoir s’il y a des trucs à améliorer dans mon CSS

www.koze.fr

Exemple :

Aux lieux que un div pousse un autre a 1 quart et que cette autre pousse le div a 3 quarts
Que directement un div le pousse a 4 quarts ou les 2 div a 2 quarts

Sérieusement... je suis parano,mais je pense que c'est comme ça qu’on fait un web propre, et je fais de mon mieux ! ^^'

Merci
Modifié par neo-cortex (26 Jan 2010 - 17:01)

Bonjour,

Déjà, ce serait bien de corriger les erreurs dans le code HTML. Après, on regardera le CSS.

Je ne vois pas comment faire pour réparer les erreur HTML désolé

Et c'est a cause de Xiti surtout
Modifié par neo-cortex (26 Jan 2010 - 15:53)

neo-cortex a écrit :
Au ieux que un div pousse un autre a 1 quart et que cette autre pousse le div a 3 quart
Que directement un div le pousse a 4 quart ou les 2 div a 2 quart

Euh... Rien compris...

Pour les erreurs causée par xiti : le caractère & annonce une entité HTML, il doit donc être suivi d'un code se terminant par le caractère ; sinon c'est une erreur. Pour afficher le caractère & dans la page ou les url il faut utiliser &

Mais ce ne sont pas les seules erreurs. Les messages d'erreurs sont, à mon sens, suffisament explicites pour qu'il n'y ait pas besoin de plus de précisions.
Modifié par Laurie-Anne (26 Jan 2010 - 16:03)

This document was successfully checked as XHTML 1.0 Strict!
Result: Passed
Merci
Et maintenant pour mon CSS ??
Modifié par neo-cortex (26 Jan 2010 - 16:30)

neo-cortex a écrit :
Et maintenant pour mon CSS ??

Virer toutes les images de fond qui sont en fait des titres et qui se trouvent dans le CSS et les mettre dans le code HTML avec un alt qui va bien (si possible, vu que ça l'est, mettre du vrai texte).

Bon, voici quelques commentaires sur le CSS et ici on parle bien d'optimisation car à première vue, la structure HTML est bonne.

Première des choses, les deux menus ne devraient pas avoir du contenu dans l'image et surtout pas en background-image. Tu pourrais alors avoir un background-image avec un gif de 1x25 pixel que tu fais répéter ( repeat-x ). Ainsi, tu pourrais aussi retirer la classe menu1 et menu2 puisque les deux <div> seraient identique. Tu pourrais ainsi ne pas dupliquer tes propriétés CSS pour .menu1 et .menu2 pour remplacer ça pour #menu div { propriétés }

Si tu n'as absolument pas le choix d'avoir le texte dans l'image, ajoute un équivalent textuel que tu caches en CSS et regroupe les propriétés identiques.

.menu1,
.menu2 {
background-color:#333333;

background-repeat:repeat-x;

min-height:173px;
}

.menu1 {
background-image:url("images/motif1.jpg");
}

.menu2 {
background-image:url("images/motif2.jpg");
margin-bottom:10px;
}

Si on continue sur le menu, tu ajoutes une classe sur chacun de tes items du menu ( sur chaque <li> ) et c'est inutile.

Si on revient à l'essence de l'acronyme CSS ( Cascading Style Sheets ). Des styles en cascade qui hérite des propriétés "génériques" tout en ayant la possibilité d'avoir des propriétés spécifiques.

Ton code pourrait donc avoir l'air de ceci, surtout que ta classe .nose1 sert à rien pour le moment.

<ul>
    <li class="sel"><a href="index.html">Accueil</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/forum">Forum</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Donc, tu pourrais avoir un CSS général pour les <li> et spécifique pour <li class="sel">

ul li { width: 200px; list-style-image:url(puce.gif) }
ul li.sel { list-style-image:url(select_icon.gif) }

J'ignore si c'est facile à comprendre mais ce sont des modifications que je ferais. Éventuellement, on peut espérer que tous les sélecteurs CSS3 seront supportés partout et qui permettront de faire des CSS sans ajouter ( ou très peu ) de classe ou de id aux tags HTML. Cependant, rien nous empêche de tendre vers ça avec les sélecteurs actuellement supportés et avec le principe du Cascading Style Sheets

Pas tout compris ^^'

Mais je veux garder ces images
Et si les gent n'ont pas cette police dans leur pc :s
Car je voudrais que ce soit celle la

C'est surtout avec les padding et margin

Et j'aimerais être sur qu’y'a EXACTEMENT le même écart entre le header le menu le corps et le footer (quelques PX's)
Modifié par neo-cortex (26 Jan 2010 - 17:08)

Qu'est-ce que tu n'as pas compris ?

Pour le margin entre ton header, ton corps et ton footer, c'est pas sorcier. Tu as mis un margin-bottom à ton header de 10px et tu as mis un margin-bottom à ton corps de 10px alors c'est exactement la même distance entre les deux.

Pourtant...

Je screen le site puis je l'ouvre avec paint
Je zoom et fait un quadrillage

J'ai 12PX en bas et en haut
Mais je n'en ai que 11 pour le menu-corps



Et si possible faire en sorte que le soir(20H a 7H) ce soit le header 2(www.koze.fr/images/banniere2.png) qui s'affiche ?
Modifié par neo-cortex (26 Jan 2010 - 17:24)

neo-cortex a écrit :
Et si possible faire en sorte que le soir(20H a 7H) ce soit le header 2(www.koze.fr/images/banniere2.png) qui s'affiche ?

Demande hors-sujet (ouais je sais c'est ton site, mais fallait pas définir un sujet précis en amont ). Par ailleurs c'est le genre de demande qui se gère très bien avec un petit STFW.

Et sinon:
- Tout comme Laurie-Anne pour les titres qui sont définis en CSS alors que, en tant que contenus, ils devraient être définis en HTML...
- Déclarer les font-size en px est considéré comme une mauvaise pratique. On recommande les unités relatives (%, em).
- Tu as des styles au :hover que tu ne déclares pas également au :focus.
- Ton problème d'écart légèrement différent est peut-être lié à la fusion des marges entre le #footer et le paragraphe compris dedans.