Page 1 sur 1
Problème avec les feuilles de style
Publié : décembre 24, 2005, 2:36 am
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>
Publié : décembre 24, 2005, 10:26 am
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
Publié : décembre 24, 2005, 11:36 am
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
non
Publié : décembre 24, 2005, 11:39 am
par Aurelienazerty
Non pas du tout, là pour le moment je bosse sur FF, IE je vérais plus tard...
Publié : décembre 24, 2005, 12:07 pm
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.
m'en fout de ie
Publié : décembre 24, 2005, 12:27 pm
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...
Publié : décembre 24, 2005, 12:35 pm
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é.
lunette
Publié : décembre 24, 2005, 12:40 pm
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
c'est tout bon
Publié : décembre 24, 2005, 1:26 pm
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
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
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...
Publié : décembre 24, 2005, 3:49 pm
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
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
Dans l'odre on definit TOP, RIGHT, BOTTOM, LEFT. Cela marche avec tout les styles qui ont ces 4 attributs (margin border etc..).
oki
Publié : décembre 24, 2005, 5:08 pm
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...