Nouvelle dans les css..Juste un petit coup de main ;)

Bonjour !

Je développe depuis plusieurs années des sites internet avec du code html basic dit standard. J’ai récemment décidée de refaire un portail existant pour le transformer entierement en css ; c'est-à-dire que je supprime toute les tables pour ainsi gagner en malléabilité ; accessibilité et en praticité. Seulement voila, étant habituée à concevoir mes pages web via un éditeur WYSIWYG, je me retrouve confrontée à une nouvelle facon de voir les choses. Je souhaiterais avoir l’avis d’un œil expert pour confirmer que ce que je suis en train de réaliser est correct, et surtout que la méthode employée est la plus intelligente qui soit.

1) Ma mise en page comporte beaucoup de changement de style au niveau des fonts, par ex ; j’ai des corps qui varient, des couleurs qui changent, etc. Sachant que le site est un portail et que plusieurs developpeurs seront peut-etre amené a rajouter des pages ; quelles solutions dois-je adopter pour que le fichier css soit au maximum maleable ? Dois-je créer des classes :

.corps11 {
Font-size :11pt ;
}
.corps12{
Font-size :12pt ;
}
Pour faire;

Ceci est un <span class="corps12">test</span> Ceci est un test

Ou alors je dois créer chaque exception dans le fichier css, suivant l’endroit ou se trouve le bloc..

Ex:#section_mail mise_en_avant {
Font-size :12pt ;
}

Pour faire :

<div id="section_mail">Ceci est un <span class="mise_en_avant">test</span> Ceci est un test</div>

2) J’ai decidé de faire un layout avec que des DIV avec des float : et des position :relative.. Est-ce la bonne technique ?

<div align="center">
  <div id="main">:
    <div id="main_margin">
      <div id="banner">
        <div id="left_part">
          <div id="logo"><img alt="logo" src="images/fr/banner_logo.gif" /></div>
          <div id="country">Belgique</div>
        </div>
        <div id="right_part">
          <p>test</p>
        </div>

Merci a tous de m'eclairer un peu..je vous en serais extremement reconnaissante !
Modifié par tania_j (11 May 2006 - 18:19)

Bonjour et bienvenue chez les alsanautes

En fait la façon de coder ta page ( float ou relative...) est trés varibale selon le cas. Il n'y a pas de meilleur solution mais souvent plusieurs possibilités...
Si tu débutes en CSS, je te conseillerais d'éviter d'utliser trop de flottant qui sont source d'ennui excepté peut-être pour le placement simple d'images à habiller.
Utilises le moins possible de positionnement qu'ils soit relatif ou absolute mis appart les grands div conteneur si tu 'as pas d'autres choix.
Pour le placement des block, la methode la plus simple reste les marges.
La position relative ne sert principalement qu'au div conteneur pour servir de référence de positionnement.

Concernat les syle de polices, la 2ième solution est plus pertinente car elle evite d'avoir à appliquer une classe à chaque bloque de texte.

Ex :

#rub1 p {...}   #rub1 p strong{font-weight: normal} ect 

Modifié par Hermann (11 May 2006 - 19:44)

Bonsoir et bienvenue à toi parmi les "s" d'alsacréations.
Une feuille de style par défaut est la bienvenue dans ton cas, mais je ne pense pas qu'il soit bon d'exprimer les tailles de fonts en pixels. Les "em" ou "%" suffisent car ils ont relation directe avec les préférences du lecteur. Chaque navigateur à sa taille de font par défaut et chaque font (police) est différente. Certes une font "courier" est plus petite qu'une font "arial". Celà est dû au créateur de la police. Vouloir une hauteur précise est intéressante mais on ne peut l'augmenter ou diminuer selon notre vision. Les dimensions "relatives" comparées aux dimensions "fixes" sont meilleures pour celà.

Je crois donc qu'il est meilleur pour une feuille de style par défaut:
1/ Remettre les navigateurs à zéro pour les marges et paddings et autres choses concernant les listes.
2/ Penser avant que tous les lecteurs ne voient pas aussi clair que désiré et qu'is peuvent avoir réglé leur navigateur sur de hautes dimensions pour la taille des polices. Définir en Px leur nuit beaucoup (je sais, j'en suis).
3/ Ne pas oublier de faire confiance aux "normes par défaut" elles ont été crées pour cela.

Par contre il me semble qu'une feuille de style externe "par défaut" comprenant clairement des /* commentaires adéquats */ sera utile pour tes futurs collaborateurs.

Merci a tous vous etes gentils.. je commence a mieux comprendre. Je n'hesiterais pas à reposter dans le futur

a+