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
Répondre
Avatar du membre
Aurelienazerty
Webmaster / Président
Messages : 18819
Enregistré le : septembre 27th, 2002, 9:41 pm

Problème avec les feuilles de style

Message par Aurelienazerty » décembre 24th, 2005, 2:36 am

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>
Aurelienazerty

Image

Avatar du membre
Arken
l'élu
Messages : 4060
Enregistré le : septembre 27th, 2002, 12:55 pm

Message par Arken » décembre 24th, 2005, 10:26 am

<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:
Modifié en dernier par Arken le décembre 24th, 2005, 12:12 pm, modifié 4 fois.

Avatar du membre
Christophe
L’humanité parlementaire
Messages : 6855
Enregistré le : septembre 27th, 2002, 7:25 am

Message par Christophe » décembre 24th, 2005, 11:36 am

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 du membre
Aurelienazerty
Webmaster / Président
Messages : 18819
Enregistré le : septembre 27th, 2002, 9:41 pm

non

Message par Aurelienazerty » décembre 24th, 2005, 11:39 am

Non pas du tout, là pour le moment je bosse sur FF, IE je vérais plus tard...
Aurelienazerty

Image

Avatar du membre
Arken
l'élu
Messages : 4060
Enregistré le : septembre 27th, 2002, 12:55 pm

Message par Arken » décembre 24th, 2005, 12:07 pm

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 du membre
Aurelienazerty
Webmaster / Président
Messages : 18819
Enregistré le : septembre 27th, 2002, 9:41 pm

m'en fout de ie

Message par Aurelienazerty » décembre 24th, 2005, 12:27 pm

Nan mais là les gens, je ne parle aps de pb avec IE, je veux juste comprendre là où j'ai fait une erreur...
Aurelienazerty

Image

Avatar du membre
Arken
l'élu
Messages : 4060
Enregistré le : septembre 27th, 2002, 12:55 pm

Message par Arken » décembre 24th, 2005, 12:35 pm

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 du membre
Aurelienazerty
Webmaster / Président
Messages : 18819
Enregistré le : septembre 27th, 2002, 9:41 pm

lunette

Message par Aurelienazerty » décembre 24th, 2005, 12:40 pm

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
Aurelienazerty

Image

Avatar du membre
Aurelienazerty
Webmaster / Président
Messages : 18819
Enregistré le : septembre 27th, 2002, 9:41 pm

c'est tout bon

Message par Aurelienazerty » décembre 24th, 2005, 1:26 pm

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...
Aurelienazerty

Image

Avatar du membre
Davidazerty
l'élu
Messages : 2365
Enregistré le : octobre 12th, 2002, 3:30 pm

Message par Davidazerty » décembre 24th, 2005, 3:49 pm

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 du membre
Aurelienazerty
Webmaster / Président
Messages : 18819
Enregistré le : septembre 27th, 2002, 9:41 pm

oki

Message par Aurelienazerty » décembre 24th, 2005, 5:08 pm

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...
Aurelienazerty

Image

Répondre