LaurentDenis
mercredi 3 novembre 2004 à 05:58
CITATION(doomer2 @ 02 Nov 2004, 20:29)
Mais, si je ne vous embête pas trop un de mes problemes etait de positionner les 2 cadres tout en bas de la page afin d'avoir une zone actualites, une zone forum , etc ... avec des cadres arrondis.
Manquant de temps hier, je m'étais arrêté au menu. Passons aux <dl> et à leurs coins arrondis:
Côté structure HTML,
une mise en garde : les listes de définition <dl> ne sont pas destinées à créer une pseudo-structure de sections dotées de titres, mais des couples termes - éléments de définition.
Utilisées comme des <div><h...><p></div, elles sont le plus souvent abusives du point de vue du sens, n'apportent aucun gain sémantique réel, et se révèlent moins expoitables que de véritables titres (pour établir une table ds matières du document, pour naviguer de titre en titre...)
Mieux vaudrait reprendre ce code avec de simples <div> conteneur (div est fait pour ça: ajouter du style et de la structure) et des titres <h...>
Cela dit, le problème d'espace entre les bords arrondis et le contenu des blocs vient simplement des marges par défaut des paragraphes:
CODE
dd p {
margin: 0;
}
règlera le problème.
D'une manière générale, au moins lorsqu'on débute en CSS, il est plus pratique d'utiliser en tête de feuille de style:
CODE
* {
margin: 0;
padding: 0;
}
plutôt que d'appliquer ces propriétés au body ou à html, body en se fiant à l'héritage par les éléments contenus dans html ou dans body.
Enfin, pour placer les deux blocs l'un à côté de l'autre:
CODE
dl {
width: 45%; /* dimensions et positions modifiables à loisir */
left: 10em;
top: 50em;
}
... n'a aucun effet et ne peut pas en avoir. Les propriétés left et top ne peuvent être utilisée que pour un élément en position absolue, fixe (ou relative, mais c'est une autre histoire). Ici, une position:absolue ou fixe rendraitla mise en page très périlleuse. Un simple float:left convient. Ce qui donne:
CODE
dl {
width: 40%; /* largeur réduite pour éliminer le problème de box-model IE */
float: left;
margin: 0 1em;
}
hr {
clear: both;
visibility: hidden;
}
<dl>
...
</dl>
<dl>
<hr />
Un séparateur <hr /> est ajouté
après les éléments flottants et doté d'une propriété clear:both pour forcer le contenu à reprendre le flux en tenant compte de la hauteur des flottants. (Sinon, un flottant n'est pas pris en compte dans le calcul de la hauteur de son conteneur, et le pied de page viendrait se placer
à côté des flottants, au lieu d'être en dessous.
Enfin, je te conseille surtout la lecture de quelques articles de base sur le positionnement CSS, avant d'exploiter des modèles prêts à l'emploi qu'il est le plus souvent difficile de personnaliser sans erreur:
-
Passer aux feuilles de style-
Initiation au positionnement CSS : 1.flux et position relative-
Initiation au positionnement CSS : 2.position float-
nitiation au positionnement CSS : 3. position absolue et fixe