Titums a écrit :
Comme tu le vois j'y arrive grâce au padding-top que j'ajoute au bloc "chemin-de-fer", mais ça ne me semble pas très correct... si ?
Tu veux aligner horizontalement le texte de deux blocs dont les hauteurs dépendent de leurs contenus respectifs. Or, ces contenus, ce sont deux lignes de texte, mais de hauteur très différente, vu que le corps utilisé (
font-size) est très différent. Le positionnement de ton texte se faisant à partir du haut, tu as (en unités fictives):
- une première ligne de texte commençant à 0 à partir du haut, et descendant jusqu'à 12;
- une deuxième ligne de texte commençant à 0 à partir du haut, et descendant jusqu'à 20.
Deux solutions, à vue de nez:
- donner un
line-height de 20 aux deux éléments;
- donner un
padding-top de 8 (20-12) au premier élément.
C'est très mathématique tout ça, il n'y a pas de grand mystère ou de solution miracle.
À priori, la solution du padding est encore celle qui fonctionne le mieux. Avec les hauteurs de ligne, il faudra en réalité jouer sur des hauteurs de ligne différentes pour obtenir un équilibre visuel (voir l'exemple que je donne dans mon précédent message).
Titums a écrit :
En fait je pensait qu'il était possible d'obliger le bloc "chemin-de-fer" de coller au bas du bloc conteneur autrement (plus proprement...).
En le positionnant en absolu, c'est jouable, mais un peu disproportionné. Avec un tableau à deux colonnes (ou, en CSS uniquement, avec
display: table-cell), cela se fera facilement grâce à
vertical-align: bottom.
Un exemple avec
display: table-cell (non compatible IE):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<title>test</title>
<style type="text/css">
#title {
display: table;
width:800px;
margin: 0 auto;
border-bottom: 4px solid #a11b1a;
}
#chemin-de-fer {
display: table-cell;
width: 50%;
font-size:0.8em;
line-height: 1.5em;
vertical-align: bottom;
}
#title h1 {
display: table-cell;
font-size:1.5em;
color:#a11b1a;
font-family:"comic sans ms", "times new roman", "trebuchet ms", verdana, sans-serif;
width:50%;
text-align:right;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="main">
<div id="title">
<div id="chemin-de-fer">
vous êtes ici: > Accueil
</div>
<h1>Accueil</h1>
</div>
</div>
</body>
</html>
Titums a écrit :
Une autre question: avec d'autres codes pour le design d'un site j'ai un rendu parfait sur firefox, mais un rendu tout crade (chevauchements etc.) avec IE6. Faut-il essayer de corriger cela étape par étape, ou puis-je terminer mon code en le testant uniquement sur Firefox, et essayer de rattraper le coup sur IE plus tard ?
On peut faire ça étape par étape, mais tout dépend de ce qu'on appelle une «étape». Vérifier le rendu dans IE à chaque changement même mineur dans la feuille de style et corriger les éventuelles erreurs, cela fera perdre trop de temps. Mieux vaut le faire à chaque grande étape: lorsque le positionnement des principaux blocs est en place, puis le détail de la mise en forme, etc.
Modifié par Florent V. (15 Oct 2007 - 10:36)
. En fait, à gauche, je voulais mettre un "chemin de fer" (ou "fil d'ariane"), et à droite, le titre de la page.
)
