Problème avec les feuilles de style

Tous les benchmarks, vos résultats, vos tests.
Vos programmes, vos conseils logiciel
Votre matos, vos problèmes
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25088
Inscription : septembre 27, 2002, 9:41 pm

Problème avec les feuilles de style

Message par Aurelienazerty »

J'ai un petit souci avec les feuilles de style comme vous pouvez le voir ici dans mes commentaires, si quelqu'un avait une petite idée sur le problème ça serait cool...

Sinon, y a pas à dire les feuilles de style c'est quand même hyper balèse, notament au niveau de l'imbrication des styles des conteneurs, genre:

Code : Tout sélectionner

/* Onglet */
.onglet {
	display: inline;
	border-bottom: 1px solid black;
}

/** Que ce soit on ou off */
.onglet a {
	/* Bordure */
	border: 1px solid black;
	/* Effet d'arondis */
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	
	/* Texte */
	text-align: center;
	font-weight: normal;
	text-decoration: none;
	/** On "écarte" du bord */			
	padding-left: 10px;
	padding-right: 10px;
	
}

.onglet_off, onglet_on {
	padding-left: 1px;
	padding-right: 1px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.onglet_off a {
	background-color: #FFFFFF;
}
.onglet_on a {
	background-color: #87C2E0;
}
.onglet_off a:hover {
	background-color: #97D2FF;
	text-decoration: underline;
}
le code HTML est du coup hyper simple

Code : Tout sélectionner

<div class="onglet">
		<span class="onglet_on"><a href="">Titi</a></span><span class="onglet_off"><a href="">Toto</a></span><span class="onglet_off"><a href="">Tata</a></span>
	</div>
Avatar de l’utilisateur
Arken
Éleveur de srou
Réactions :
Messages : 5128
Inscription : septembre 27, 2002, 12:55 pm

Message par Arken »

<style>

/**** Base */

body {
/** Mettre un fond bleu sympa */
background-color: #97D2FF;
}

/** Texte */
body, font, b, a, div, p, span, label, li, th, td, INPUT, SELECT, TEXTAREA, caption {
FONT-SIZE: 10px;
font-family: verdana, helvetica, arial, sans-serif;
}

h1 {
font-size: 25px;
padding-left: 10px;
border-left: 10px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

h2 {
font-size: 20px;
padding-left: 9px;
border-left: 9px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

h3 {
font-size: 15px;
padding-left: 7px;
border-left: 7px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

h4 {
font-size: 10px;
padding-left: 5px;
border-left: 5px solid #87C2E0;
color: black;
text-transform: uppercase;
font-weight: bold;
}

INPUT, SELECT, TEXTAREA {
background-color: #87C2E0;
border-style: ridge;
}

a {
color: black;
}


/** Conteneurs */
.contenu {
background-color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

/** Block entête */
.entete {
border: 1px solid black;
max-width: 200px;
border-collapse: collapse;
display: block;
}
/* Son titre */
.entete h1 {
background-color: #87C2E0;
padding-left: 10px;
font-size: 12px;
color: black;
font-weight: bold;
text-transform: none;
margin-top: 0px;

}
.entete h2 {
font-size: 12px;
padding-left: 0px;
margin-left: 9px;

border-left: 0px;
border-bottom: 1px dotted black;
color: black;
font-weight: bold;
text-transform: none;
width: 80%;
}
/* Son contenu */
.entete div {

}

table {
border-collapse: collapse;
}


/** Les tableaux */
.bordure table {
border: 10px solid black;
border-collapse: collapse;
}
.bordure td {
border: 1px solid black;
}

/** Onglet */
.onglet {
display: inline;
border-bottom: 1px solid black;
}

/** Que ce soit on ou off */
.onglet a {
/* Bordure */
border: 1px solid black;
/* Effet d'arondis */
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;

/* Texte */
text-align: center;
font-weight: normal;
text-decoration: none;
/** On "écarte" du bord */
padding-left: 10px;
padding-right: 10px;

}

.onglet_off, onglet_on {
padding-left: 1px;
padding-right: 1px;
padding-top: 2px;
padding-bottom: 2px;
}

.onglet_off a {
background-color: #FFFFFF;
}
.onglet_on a {
background-color: #87C2E0;
}
.onglet_off a:hover {
background-color: #97D2FF;
text-decoration: underline;
}
</style>
tu remarquera avec joie que y a pas mal de trucs qui chient complet sous IE :love:
Dernière modification par Arken le décembre 24, 2005, 12:12 pm, modifié 4 fois.
Avatar de l’utilisateur
Christophe
L’humanité parlementaire
Réactions :
Messages : 8435
Inscription : septembre 27, 2002, 7:25 am

Message par Christophe »

David avait trouver un truc pour différencier des reglage pour IE et pour FF directement dans la feuille de style.

Je sais pas si ça peut aider ici... mais on sait jamais ;-)
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25088
Inscription : septembre 27, 2002, 9:41 pm

non

Message par Aurelienazerty »

Non pas du tout, là pour le moment je bosse sur FF, IE je vérais plus tard...
Avatar de l’utilisateur
Arken
Éleveur de srou
Réactions :
Messages : 5128
Inscription : septembre 27, 2002, 12:55 pm

Message par Arken »

le problème c'est qu'il y a des différences d'interprétation sur pas mal de trucs entre IE et FF, ça vient pas seulement de propriétés par défaut & co, et t'en chie comme un russe pour trouver des parades, pas forcément jolie jolie.
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25088
Inscription : septembre 27, 2002, 9:41 pm

m'en fout de ie

Message par Aurelienazerty »

Nan mais là les gens, je ne parle aps de pb avec IE, je veux juste comprendre là où j'ai fait une erreur...
Avatar de l’utilisateur
Arken
Éleveur de srou
Réactions :
Messages : 5128
Inscription : septembre 27, 2002, 12:55 pm

Message par Arken »

et moi je parle pas de tes problèmes je fais des généralités sur IE par rapport au message de cricri.

Tes problème je les ai réglé dans ce que j'ai posté.
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25088
Inscription : septembre 27, 2002, 9:41 pm

lunette

Message par Aurelienazerty »

olivierazerty a écrit :Tes problème je les ai réglé dans ce que j'ai posté.
Escus,e je n'avais pas vu ton post
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25088
Inscription : septembre 27, 2002, 9:41 pm

c'est tout bon

Message par Aurelienazerty »

C'est bon, c'est corrigé, merci olivier de m'avoir reppellé qu'il existait les proriétés margin, ça m'était sorti de la tête...
Pour ce qui est du tableau, j'avait fait une erreur

Code : Tout sélectionner

.bordure table {...}
veut dire que tout les tableaux qui seront dans un conteneur de classe bordure auront les propriété décrites, mais ça ne s'applique pas au conteneur, la solution est de faire comme ça

Code : Tout sélectionner

.bordure {...}
Sinon, j'ai globalement les même résultats sous IE que sous FF, mis à part que sous IE, il ne connait pas les max-width, mais ça c'était mit pour tester...
Avatar de l’utilisateur
Davidazerty
l'élu
Réactions :
Messages : 2443
Inscription : octobre 12, 2002, 3:30 pm

Message par Davidazerty »

Comme l'a dit cricri, j'ai trouvé une p'tite astuce pour interpreter une ligne de code css pour FF et une autre par IE (c'est très pratique).

Il existe un attibut "! important" que l'on place à la fin d'une ligne

Code : Tout sélectionner

.cadre {
border: 1px solid black  ! important;
}
Elle force l'utilisation de ce style au cas ou il y aurait une redéfinition en dessous

Code : Tout sélectionner

cadre {
border: 1px solid black  ! important;
border: 2px groove green;
}
Ici le style de bordure de la classe cadre serait "1px solid black".

Mais comme IE ne gère pas l'attribut "! important" sous IE le style de bordure de la classe cadre sera "2px groove green".

En utilisant cette p'tite astuce cela permet (comme dans le cas d'aurel) de développer une interface graphique sous FF puis de rajouter les modifs pour IE en dessous en mettant "! important" devant les styles FF.


Autre petite chose :

Code : Tout sélectionner

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; 
Il est possible de factoriser ce code en ca

Code : Tout sélectionner

padding: 10px 20px 30px 40px;
Dans l'odre on definit TOP, RIGHT, BOTTOM, LEFT. Cela marche avec tout les styles qui ont ces 4 attributs (margin border etc..).
Avatar de l’utilisateur
Aurelienazerty
Webmaster / Président
Réactions :
Messages : 25088
Inscription : septembre 27, 2002, 9:41 pm

oki

Message par Aurelienazerty »

Oki, merci pour les conseils david... Mais sinon je préfère ne pas factoriser les margin, pading et autres border, car je ne me souvient jamais de l'ordre du coup là c'est bien claire et je n'ai même pas à réfléchir...