krapoutu vas rire #ff0

krapouJ'ai inventé la balise fantôme !

Bah t'as mis du [code] dans du [spoiler], j'y peux rien moins
Pourquoi tu as voulu faire ça ? :)

[Edit : sympa, les slides !]

Un normalize plus qu'un reset css, je dirai. Mais là on va plus loin que le niveau de base ! :)

Tout a été dit, ce sont les regles de base et les différents layout (bloc, inline, flottant) qui posaient problème. Pour mieux comprendre, utilises tes outils de dev de tout navigateur. C'est vraiment là que tu comprendras tout dysfonctionnement sur du CSS. Sous FF : ctrl+alt+k, ou outils>développement, ou encore clic droit sur un élément et inspecter/examiner.
Tu as plusieurs onglets, on va se limiter à l'inspecteur pour le moment. Tu peux sélectionner un élément dans le source, ou directement dans la page (dans ce cas en utilisant l’icône de flèche en haut à gauche de la sous-fenêtre webdev). Normalement, tu as cette sous-fenêtre en deux parties (si tu n'as pas la place sur le côté, mets-la en bas de page), avec d'un côté un source, et à droite des onglets, normalement avec "Regles" en premier. Dans règles, tu vois justement tout ce qui s'applique à la partie ciblée. Pour les dimensions, "modèle de boite" peut aussi être utile.

Si tu n'utilises pas firefox mais autre chose, globalement les noms changent un peu, mais c'est la même chose.

J'utilise boostrap, si je ne me trompe pas, il vient avec un normalize/reset, non ?

Merci pour tous vos conseils, ça m'aide vraiment, je progresse !

Après, faut juste s'habituer à 2 choses:
- la manière de penser à l'organisation des blocs, qui est fort différente de ce à quoi je suis habitué
- la syntaxe pas toujours très logique, et le code qui devient vite bordélique !

Sérieusement, est-ce qu'il y a des tips pour garder un code CSS clean ? (j'aurais bien aimé par exemple pouvoir utiliser des variables, genre déclarer des couleurs et les réutiliser dans les styles par ex, plutôt que les retaper partout... ou encore la quantité astronomique de sélecteurs différents, c'est pas toujours évident de savoir lequel choisir dans quel cas...)

Tiens une autre question au passage: lorsqu'un controle a plusieurs class (ex: <div class="class1 class2">)
et que class1 définit une propriété qui est également définie dans class2, qui a le dernier mot ? Est-ce que c'est le dernier élément déclarer dans le class="..." ?

Non, c'est une question de priorité.

Plus un sélecteur est précis, plus il a de priorité, par exemple :

#mon-id a plus de priorité que .ma-classe
.class-1 > .class-2 a plus de priorité que .class-1 .class-2

Dans ton exemple, c'est la propriété qui apparaîtra en dernier qui écrasera l'autre.

Ensuite pour ce qui est des variables, c'est possible, mais pas en CSS pur, tu vas avoir des technos qui te permettent de compiler ton css en prenant en compte des variables nais de toute façon, ce qu'il faut faire avant, c'est de maîtriser les css avant.

MerleSérieusement, est-ce qu'il y a des tips pour garder un code CSS clean ? (j'aurais bien aimé par exemple pouvoir utiliser des variables, genre déclarer des couleurs et les réutiliser dans les styles par ex, plutôt que les retaper partout... ou encore la quantité astronomique de sélecteurs différents, c'est pas toujours évident de savoir lequel choisir dans quel cas...)

Regarde du coté de SASS ou LESS, mais comme le dit Krapou, il vaut mieux avoir de solides connaissances en CSS avant de se plonger dans des préprocesseurs.

Bootstrap est assez sympathique. Je n'ai pas trop de souci avec la syntaxe, je crois que c'est une question d'habitude, parce que je la trouve relativement intuitive.

GuybrushBootstrap est assez sympathique. Je n'ai pas trop de souci avec la syntaxe, je crois que c'est une question d'habitude, parce que je la trouve relativement intuitive.

Oui, si tu acceptes de rester dans leur style et leurs couleurs. Après, j'ai vu qu'il était possible de "recompiler" boostrap avec tes propres couleurs/polices/etc... je devrais peut-être y jeter un oeil...


Krapou, tout à fait d'accord avec toi, je disais juste que ça aurait du être pensé comme ça dès le début Ou bien la possibilité pour un style d'hériter d'un autre (à la manière du BasedOn en xaml)

MerleOui, si tu acceptes de rester dans leur style et leurs couleurs. Après, j'ai vu qu'il était possible de "recompiler" boostrap avec tes propres couleurs/polices/etc... je devrais peut-être y jeter un oeil...

Oui. Il y a plusieurs approches, d'ailleurs :
- L'approche moche, du Lexpage : tu fais des chercher/remplacer dans le code pour modifier les couleurs ;
- L'approche feignasse : tu prends un thème tout fait
- L'approche "Tchou-va-le-faire-mais-ça-prend-du-temps" : tu utilises SASS ou LESS pour compiler ton propre Bootstrap avec tes propres variables dedans.

Honnêtement, de ce que j'ai pu voir, je ne sais pas quelle est la meilleure solution du point de vue du ratio "résultat/temps".

Ce que j'ai fait pour le moment, c'est utiliser Bootstrap comme un utilitaire. Je ne base pas tout dessus (par ex, pas les polices ou les couleurs), mais j'utilise certaines de ses classes (btn par ex, ou encore celle pour avoir des ul sans bullet).

- L'approche moche, du Lexpage : tu fais des chercher/remplacer dans le code pour modifier les couleurs ;

Pas vraiment moche, mais chiante si tu veux mettre boostrap à jour je dirais

- L'approche "Tchou-va-le-faire-mais-ça-prend-du-temps" : tu utilises SASS ou LESS pour compiler ton propre Bootstrap avec tes propres variables dedans.

Ben y'a ça : [url]http://getbootstrap.com/customize/ [/url] Si c'est juste pour changer les couleurs, ça doit pas être si compliqué je pense. Mais bon, dans les 2 cas tu perds la mise à jour ou l'utilisation des CDN.

Sinon tu as une solution simple, c'est l'override.

Tu crées une feuille de styles que tu appelles après celles de bootstrap et tu surcharges. Il suffit d'éviter les priorités trop importantes pour que ça reste maintenable, mais c'est le plus simple à faire (et en cas de mise à jour de bootstrap tu ne perds pas toutes tes modifications).

Sinon, pour ce qui est des variables, enfin plutôt pour apporter une solution à ton problème, il suffit de regrouper tes styles de couleur par propriété, par exemple si tu as une couleur qui revient de façon récurrente :

h1, h2, h3, h4, h5, h6, a, em {
font-family: sans-serif;
color: teal;
}

Tu n'as ainsi qu'une seule valeur à changer, à un seul endroit si tu veux changer la typo ou sa couleur.

Pas bête, en fait je ne savais pas qu'on pouvait définir 2x le même sélecteur dans CSS (mais ça fait du sens maintenant que tu en parles...).

Merci

Guybrush - L'approche "Tchou-va-le-faire-mais-ça-prend-du-temps" : tu utilises SASS ou LESS pour compiler ton propre Bootstrap avec tes propres variables dedans.

Ça prend pas forcément plus de temps, c'est juste que :
1) je pars d'une base un brin goret
2) j'y ai pas touché depuis un bail et faut _vraiment_ que je trouve le temps de m'y remettre. J'avais réussi à faire fonctionner uniquement sur l'ordi du bureau, et j'ai plus le temps de me consacrer à du perso depuis un bon mois et demi.

Faut _vraiment_ que je m'y remette, surtout que de mémoire c'était quasi fini.