28216 sujets

CSS et mise en forme, CSS3

Bonjour,

Je voulais faire changement aujourd'hui en utilisant le css reset.css de M. Meyer sauf que je n'arrive pas à comprendre pourquoi le reset passe par dessus les valeurs que je donne dans ma 2e feuille de style.

Pourtant je déclare le reset.css en premier et en principe le dernier css déclaré devrait prendre le dessus.


<style type="text/css">
@import url(reset.css);
@import url(style.css);
</style>


reset.css

#container div, #container span, #container applet, #container object, #container iframe, #container h1, #container h2, #container h3, #container h4, #container h5, #container h6, #container p, #container blockquote, #container pre, #container a, #container abbr, #container acronym, #container address, #container big, #container cite, #container code, #container del, #container dfn, #container em, #container font, #container img, #container ins, #container kbd, #container q, #container s, #container samp, #container small, #container strike, #container strong, #container sub, #container sup, #container tt, #container var,
#container b, #container u, #container i, #container center,
#container dl, #container dt, #container dd, #container ol, #container ul, #container li, #container fieldset, #container form, #container label, #container legend, #container table, #container caption, #container tbody, #container tfoot, #container thead, #container tr, #container th, #container td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}


Mon css de mise en page style.css

#container #header #menu {clear:both; margin-top:30px;}


Dans mon exemple le margin-top:30px n'apparait pas pareil entre IE et Firefox. Dans firefox il remet mon div à margin:0 qui vient du reset.css.

Quelqu'un à déjà eu ce genre de problème?
Modifié par britanicus75 (02 Dec 2008 - 15:47)
britanicus75 a écrit :
Dans mon exemple le margin-top:30px n'apparait pas pareil entre IE et Firefox. Dans firefox il remet mon div à margin:0 qui vient du reset.css.

C'est ce que te dis Firebug?

Ton reset.css me semble étrange. Il n'y a évidemment pas de sélecteurs aussi précis (#container div...) dans le reset.css d'Eric Meyer.

Un peu de lecture complémentaire à tout hasard, parce que si c'est vraiment un problème d'application des règles CSS (et pas une conséquence normale du clear, comme on peut aussi le supposer, mais là on manque d'éléments...), ça a probablement un lien avec ça:
http://openweb.eu.org/articles/cascade_css/
Si j'utilise un reset aussi précis c'est que j'utilise un CMS et je ne veux pas défaire la mise en page du cms en mettant les balises par défaut.
Et, par curiosité, pourquoi utiliser un reset.css tout court? Concrètement, quel était le besoin?
Pour remettre les valeurs par défaut du type h1, p et autre sans espacement.

D'habitude je met le * {margin:0; padding:0;}.
britanicus75 a écrit :
Pour remettre les valeurs par défaut du type h1, p et autre sans espacement.

Comme ça ça ne ressemble à rien tant qu'on n'a rien stylé... et quand on a tout stylé, ben on se dit que finalement le reset n'a servi à rien vu qu'on a précisé des styles pour tous les éléments, on aurait pu se contenter de préciser les styles souhaités et garder les styles par défauts du navigateur comme «fallback». Smiley lol
(Enfin bon, vieux débat.)

Par contre le cocktail styles du CMS + reset préfixé avec un sélecteur d'identifiant + cascade CSS, ça risque d'être un peu casse gueule. En préfixant les sélecteurs de ton reset, tu donnes à chaque sélecteur une priorité haute, qui peut t'embêter pour la suite. Notamment si par la suite tu styles des éléments par rapport à une classe et pas à un identifiant.
Modifié par Florent V. (01 Dec 2008 - 19:31)
Non, j'utilise en général une feuille de styles qui unifie les quelques différences marquées entre les navigateurs, et qui ressemble à ça:


/* Page */
html {
	font-size: 100%;
}
body {
	margin: 0;
	padding: 1em;
	/*
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-family: Georgia, "DejaVu Serif", Norasi, serif;
	*/
	font-size: .85em;
	line-height: 1.1;
	color: black;
	background: white;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0;
	font-weight: bold;
	font-style: normal;
}
h1 {font-size: 1.75em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.25em;}
h4 {font-size: 1em;}
h5 {font-size: 1em; font-weight: normal; font-style: italic;}

/* Lists */
ul, ol {
	margin: .75em 0 .75em 32px;
	padding: 0;
}
li {
	margin: 0;
	padding: 0;
}
dl {
	margin: .75em 0;
	padding: 0;
}
dt {
	margin: .75em 0 0 0;
	padding: 0;
	font-weight: bold;
}
dd {
	margin: .25em 0 .25em 32px;
	padding: 0;
}

/* Paragraphs */
p {
	margin: .75em 0;
}
li p, blockquote p {
	margin: .5em 0;
}
address {
	font-style: normal;
}

/* Quotations */
blockquote {
	margin: .75em 0 .75em 20px;
	padding: 0 0 0 10px;
	border-left: solid 2px #ccc;
}
q {font-style: italic;}
cite {font-style: italic;}
/* blockquote, q {quotes: none;} */

/* Links */
a {
	color: mediumblue;
	text-decoration: underline;
}
a:visited {color: indigo;}
a:hover, a:focus, a:active {color: crimson;}
a img {border: none;}

/* Misc inline elements */
em {font-style: italic;}
strong {font-weight: bold;}
del {text-decoration: line-through;}

/* Forms */
form, fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
input, button, select {
	vertical-align: middle;
}


(Inclus dans http://community.activestate.com/node/3024 )
C'est bien beau les resets mais lorsque l'on utilise un CMS et que tu ne peux pas appliqué ton reset tu fais quoi alors?
Florent V. a écrit :
Non, j'utilise en général une feuille de styles qui unifie les quelques différences marquées entre les navigateurs, et qui ressemble à ça:


C'est un peu la même chose, sauf que c'est personnalisé au lieu de mettre 0 partout, et que -je suppose- tu la modifies en fonction de ton projet ?

Pour ma part, j'ai commencé à utiliser le reset de Meyer, et peu à peu, j'en arrive à avoir ma propre feuille "de base"... Elle n'est pas encore au point, et j'utilise toujours un reset pour ce que je considère comme des "problèmes de positionnement" comme les marges et paddings sur certains blocs, ou pour ne pas m'embêter avec certains styles par défaut que je n'aime pas.

Je ne vais pas par exemple jusqu'à supprimer les puces sur les listes pour les remettre ensuite.

C'est en fait par flemme, mais ça m'a permis de mieux comprendre certains comportements.

Mais au final, je cherche à obtenir une feuille personnalisée comme la tienne, avec les styles harmonisés que je mets "tout le temps", plutôt que de "bêtement" tout annuler.
mistike a écrit :
C'est un peu la même chose, sauf que c'est personnalisé au lieu de mettre 0 partout, et que -je suppose- tu la modifies en fonction de ton projet ?

Je la modifie légèrement (titres, liens...), mais à 90-95% ça ne bouge pas.

Disons que c'est proche d'un reset dans le sens où il s'agit d'harmoniser les styles. L'approche est tout de même sensiblement différente, entre un reset qui met tout à zéro (il faut voir la page de test du Reset de YUI, par exemple) et le fait de ne modifier que ce qui peut poser problème ou est jugé peu satisfaisant par défaut. Dans le deuxième cas, tout ce qui n'est pas pris en compte utilisera les styles par défaut du navigateur, ce qui est à mon sens plus un avantage qu'un problème. Tout dépend d'où on se situe par rapport à la doctrine du lâcher prise. Smiley smile

britanicus75 a écrit :
C'est bien beau les resets mais lorsque l'on utilise un CMS et que tu ne peux pas appliqué ton reset tu fais quoi alors?

Il y a deux possibilités principales quand tu travailles avec un CMS:
1. Tu utilises un thème existant qu'il s'agit de personnaliser.
2. Tu gères tous les styles.

Le choix entre les deux options ne dépend pas du CMS, mais des objectifs pour le projet et de la compétence de l'intégrateur (ou de la personne qui se retrouve à bidouiller des styles, pour prendre large). Si le CMS met trop de bâtons dans les roues du codeur CSS, il serait préférable de changer de CMS (adieu, Joomla, je ne t'aimais pas de toute façon...).

Si tu utilises un thème existant, tu ne vas bien entendu pas réinjecter un reset CSS ou une feuille de styles de base telle que celle que j'ai présentée plus haut. Pas plus que tu ne vas complètement supprimer un reset ou une telle feuille de styles de base si l'un ou l'autre est employé dans les styles du thème. On va se contenter de faire les modifications nécessaires, de rajouter les styles pour un module en s'arrangeant tant bien que mal de la cascade CSS, etc.

Si tu fais tout toi-même... rien de spécial à dire sur ce cas de figure. Smiley cligne

Quelle était la question de départ, déjà?
Modifié par Florent V. (02 Dec 2008 - 11:33)
britanicus75 a écrit :
Bonjour,

Je voulais faire changement aujourd'hui en utilisant le css reset.css de M. Meyer sauf que je n'arrive pas à comprendre pourquoi le reset passe par dessus les valeurs que je donne dans ma 2e feuille de style.


Je ne reconnais pas trop le CSS de Meyer dans ce que tu mets... pourquoi l'avoir modifié de cette manière ? Tu ne resette plus que les enfants de #container, ça n'a pas vraiment de sens, si ?
Modifié par mistike (02 Dec 2008 - 06:39)
J'ai pas de problème avec le reset * {margin:0; padding:0;} lorsque je suis seulement sur le site web. C'est lorsque j'entre en mode édition dans un CMS qui a été crée par la cie ou je travaille et c'est la que la mise en page devient défectueuse, puisque les css du cms entre en conflit.

Mais je crois que je vais laisser tomber les resets.

Merci pour vos commentaires et suggestion.