Elément de taille fixe et de taille dynamique

Question

Seilin

8 Nov 2005 à 15:48

Bonjour. : )

J'aimerais vous présenter un problème auquel je suis confronté depuis que j'ai décidé de m'adapter aux standardisations du Web et que je n'ai pu résoudre malgré d'innombrables recherches aux quatre coins du Web.

J'en déduis que j'essaie de faire quelque chose que personne d'autre n'essaie de faire... Ou bien que je suis complétement à côté de la plaque... ^^

Concrètement, je voudrais obtenir ceci :
http://ulis.evecorp.free.fr/temp.jpg
(Les margin, border et padding des éléments ci-dessus sont dans le css ci-dessous.)

Pour ce faire, j'utilise ces deux fichiers :
temp.html

<!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" />
        <link rel="stylesheet"
            type="text/css"
            href="temp.css" />
        <title></title>
    </head>
    
    <body>

        <div class="tl">Cadre a taille fixe.</div>

        <div class="tr">La largeur de ce cadre est fonction de la largeur
            de la page.<br />
            La hauteur de ce cadre est fixe.</div>
            
        <div class="l">Ce cadre a une largeur fixe et une hauteur fonction
            de son contenu.</div>

        <div class="c">La largeur de ce cadre est fonction de la largeur
            de la page.<br />
            La hauteur de ce cadre est fonction de son contenu.</div>

        <div class="r">Ce cadre a une largeur fixe et une hauteur fonction
            de son contenu.</div>

    </body>
    
</html>

temp.css

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 2px;
	padding: 2px;
	color: #222222;
	background-color: #FFFFFF;
  text-align: justify;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

div.tl {
  margin: 2px;
  border: solid 1px #16A96C;
  padding: 2px;
  height: 120px;
  width: 120px;
  position: absolute;
  top: 2px;
  left: 2px;
}

div.tr {
  margin: 2px;
  border: solid 1px #16A96C;
  padding: 2px;
  height: 120px;
  position: absolute;
  top: 2px;
  left: 132px;
  right: 2px;
}

div.l {
  margin: 2px;
  border: solid 1px #16A96C;
  padding: 2px;
  width: 120px;
  position: absolute;
  top: 132px;
  left: 2px;
}

div.c {
  margin: 2px;
  border: solid 1px #16A96C;
  padding: 2px;
  position: absolute;
  top: 132px;
  left: 132px;
  right: 132px;
}

div.r {
  margin: 2px;
  border: solid 1px #16A96C;
  padding: 2px;
  width: 120px;
  position: absolute;
  top: 132px;
  right: 2px;
}

Sous la dernière version de Firefox, tout est nickel, sous tout le reste, ça affiche n'importe quoi... ^^

Donc ma question est la suivante : qu'est-ce que je fais de travers ? ^^

J'ai expérimenté des dizaines de façons différentes d'afficher ça, dans le CSS, sans jamais en trouver une qui marche réellement...

Merci d'avance pour l'aide que vous m'apporterez. ; )
Modifié par Seilin (08 Nov 2005 - 15:51)

Sujet clos