@import url( global.css );
/* CSS de base du theme 'Baldurien' (base sur subSilver)
* Notes :
* a. Ne virez pas les padding: 0px et margin: 0px. Ceux-ci ne sont pas forcement
* inutile : si vous envoyez comme entete application/xhtml+xml, cela vous
* permettra d'avoir un rendu correct.
* b. Internet Explorer c'est de la merde. Je sais, c'est pas une note utile,
* mais comme ce sont mes notes...
* c. Pensez SELECTEUR si vous modifiez cette feuille de style. Pas la peine
* de faire dix milles Classes CSS. De meme, on peut mettre plusieurs classes
* a un element.
* d. Quand vous donnez une couleur de fond vous devez TOUJOURS donner une couleur
* de texte; de meme pour les images de fond; de meme si vous donnez une couleur
* de texte.
* e. Referez-vous a http://www.w3.org/TR/REC-CSS2/propidx.html
* f. Chaque bloc est commente et indexe. Si vous trouvez '=> x.y', cela veut dire
'se referer a la partie 'x', section 'y'. De meme, => "" veut dire "Recherchez
l'expression entre guillemets.
Internet Explorer :
Si vous developpez que pour ce navigateur, c'est que vous etes (franchement) un
abruti fini. Tout le template XHTMLSilver a ete cree dans une optique d'etre
compatible Mozilla/Internet Explorer (desole pour ceux qui ont Opera, Konqueror,
etc : je n'ai pas envie de charger ces navigateurs. Ca ne devrait pas changer
pour Opera car eux suivent un tant soit peu les normes du web, pour Konqueror,
faut Linux je crois, et j'ai pas. Pour les navigateurs bases sur le moteur d'IE,
... ca devrait aller. Pour les navigateurs Netscape inferieurs a la version
6 je crois que vous devrez dire adieu au template... ou au navigateur.
Toujours est-il : Internet Explorer a une drole de facon de suivre les normes
et surtout de calculer la taille des boites. En effet : c'est merdique !
Suivez bien ce qui suit : les tableaux admettent que ce soit en XHTML ou en
HTML, un attribut width. Celui-ci permet de specifier la taille du tableau,
ce qui equivaut a la propriete CSS width. Par souci de clarte, on aurait
pu mettre les width [largeur] dans la feuille de style, ce n'est pas trop
grave : la propriete CSS est plus forte que l'attribut.
Cependant, la largeur - quand exprimee en pourcentage - est caculee en fonction
de la boite englobante. Par exemple, si un tableau est inclus dans un autre
tableau faisant lui 1000 pixels de largeur, la taille 50% voudra dire
"affecter 500 pixels au tableau".
Sauf que : le probleme c'est qu'en general la boite englobante n'a pas une
taille fixe, on se debrouille pour qu'elle soit en fonction de la taille
de la fenetre (par exemple), dans ce cas on utilise des valeurs exprimees
pourcentages.
Sauf que (bis repetitae, ad vitam eternum!) : parfois, on ajoute aussi
une marge [margin] ou un espacement interne [padding] aux boites qui vont
contenir le tableau.
Donc, si on s'amuse a choisir une taille en pourcentage on aura des
catastrophes : la taille reelle d'une boite est calculee en fonction de
1. padding, margin, border (left, right)
2. propriete width
Or, par exemple, on aurait un truc du genre 100% + p + m + b... Ce qui veut
dire que la boite aurait une taille superieure a la boite parente...
Pour eviter cela, on peut utilise width: auto; qui veut dire
"gerer la largeur en fonction de la largeur de la boite englobante,
de l'espacement interne, des marges et des bordures".
Certes, cela fonctionne sous Internet Explorer ET mozilla SAUF QUE : la
magie dans tout ca, c'est qu'Internet Explorer gere mal tout cela : si
cote affichage de la boite en question cela ira, cote memorisation de la
largeur totale de la boite, ca n'ira pas :
Si vous placez un tableau - et apparemment ca merde QU'AVEC les tableaux -
et que vous mettez soit via CSS soit via width, une taille de 100%, alors
on aura un affichage qui debordera de la boite :
Internet Explorer prendra 100% de "quelque chose" (quoi? je ne sais pas,
je dirais bien la fenetre ?). Pour palier a cela, il suffit d'englober
le tableau dans un div avec une taille de 100%.
Dans le template, ca se resume a ca :
Vivement Internet Explorer 7, il parait qu'il va mieux gerer CSS ...
(je me marre en cachette!)
Toujours a noter :
Internet Explorer propose de manipuler la couleur des scrollbars, c'est
bien mais sans plus. Une vraie solution serait un pseudo-element
::scrollbar(element)
ie:
body::scrollbar(toparrow) {
propriete CSS
}
Cela serait plus correcte et cela permet de fouttre sa propre scrollbar sans
passer par Javascript.
*/
/* 1.a. html, body : on fout une hauteur de 100%. Pas vraiment utile, certes. */
html, body {
padding: 0px;
margin: 0px;
height: 100%;
}
/* 1.b. On ne veut pas de bordure sur les images, ca evite les entourloupes
genre 'border="0"' ... */
img {
border-width: 0px !important;
}
/* 1.c. XHTML - et meme HTML - permet de specifier des labels aux elements de
formulaire. Ainsi, en cliquant dessus, on selectionne le champ ou on (de)coche
la case */
label {
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom: 1px solid #666;
color: white; /*#4b4b4b;*/
background-color: transparent;
cursor: pointer;
}
label:hover {
border-bottom: 1px dashed red;
cursor: pointer;
}
/* 1.d. Mozilla affiche une marge aux elements