CSS : héritages de dimensions

milo · 8 Janvier 2004

Bonjour à tous,

J'ai testé un bout de code html/css, j'aimerai que vous me disiez ce que vous en pensez :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="essai.css" />
</head>

<body>
<div id="conteneur"><div id="bloc1">blalba</div><div id="bloc2">bloblo</div></div>
</body>
</html>

html {
	height:			100%;
}

body {
	margin: 		0;
	height:			100%;
	border:			1px solid #FF0099;
}

#conteneur {
	background: 	#FFFFFF;
	width:			500px;
	height:			100%;
	border:			1px solid #FF9900;

	margin-left: 	auto;
	margin-right: 	auto;

}

#bloc1 {
	height:			100px;
	width:			100%;
	border:			1px solid #0099FF;
}

#bloc2 {
	height:			100%;
	width:			100%;
	border:			1px solid #99FF00;
}

1/ IE6 et Firebird ne donnent pas le même résultat. Sous Firebird il n'y a qu'un cadre (le vert) qui dépasse, sous IE tous les cadres dépassent.

2/ Pourquoi est-ce qu'en largeur, 100% ne prend que l'espace libre, tandis qu'en hauteur, ça prend la dimension de la fenêtre ???

:mad2:

Ca me fout toute ma prog css par terre ça... impossible de faire du 100% en hauteur...

milo · 8 Janvier 2004

Autre chose : la valeur inherit pour width et height ne semble pas prise en compte par IE6.

Beatnykk · 8 Janvier 2004

oui milo, c'est visible ou hidden qu'il faut utiliser.

pour l'espace libre et total, c'est encore pire sur mac (avec les images notamment). il y a quelques règles à suivre pour définir en relatif (%age).

ici il ne faut pas définir en css mais en layer, c'est pour cela que tu n'a accès qu'à l'espace libre. refait tes zones en les définissant en <div> (et non pas de type <p id=>)

ce avec exactement les mêmes paramètres. tu serais surpris... je crois.

teste ceci, ça montre les limites des calques par css (et surtout en fonction du validateur choisi en 1ere ligne, que j'ai viré sans vergogne et à dessein) :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Document sans titre</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body leftmargin="0" topmargin="0">

<div id="conteneur" style="position:absolute; border: 1px solid #FF9900; left:0%; top:0%; width:100%; height:100%; z-index:1; overflow: hidden; visibility: visible">

<div id="bloc1" style="position:absolute; border: 1px solid #0099FF; left:25%; top:0%; width:50%; height:25%; z-index:2; overflow: hidden; visibility: visible">blalba</div><div id="bloc2" style="position:absolute; border: 1px solid #99FF00; left:25%; top:25%; width:50%; height:75%; z-index:3; overflow: hidden; visibility: visible">bloblo</div>

</div>

</body>

</html>

milo · 8 Janvier 2004

Je n'ai rien compris à ce que tu m'as expliqué... :wacko:

Sur width et height il n'y a pas de visible ou hidden, ça c'est dans overflow non ?

Tu compares les CSS et les layers :blink: les layers sont une utilisation des <div> non ?

De plus, mes zones sont bien définies en div ? je n'ai pas de <p id=..> dans mon code ?

L'exemple que tu a mis ne s'adapte pas à du long contenu ?

:?: :!: :?:

Beatnykk · 8 Janvier 2004

milo, milo, milo... allons-y let's go !

pour overflow : oui je parlais pas de width et height qui ne peuvent être uniquement que des valeurs absolues (en pixels soit "px") ou relatives (en proportion soit "%")

les layers sont un moyen de mise en page que l'on peut reprendre en css (et pas l'inverse, ce qui prête à confusion souvent, tu n'es pas le seul), mais personnellement pour ne pas me mélangeasser les pincettes, je ne fais mes layers qu'en layout (dans le code de la page) et mes feuilles de styles en css pour le texte (dans un fichier externe relié en <head> par le celèbre link rel="stylesheet")

pardon si je t'ai confondu avec quelqu'un d'autre (<div> au lieu de <p>) mais tu n'es pas le seul qui semble être emmerdé avec ces damnés layer

l'exmple que je t'ai donné ne nécessite qu'un ou deux ajustements pour du contenu long. histoire de ne pas flooder ce post, je t'envoie par Message Personnel le code d'une page avec pleins de zoulis paragraphes qui remplissent la 2eme zone (le 3eme calque). c'est le même code que plus haut, si, si, je t'assure, avec juste un overflow: auto; pour laisser le browser gérer des scrolls de calque si le contenu dépasse la taille du contenant.

j'espère que tu t'en sors avec ça !!

+edit+ ne pas oublier de remettre le bon validator en entête. là je suis pas spécialiste (vois plutot monique elle se la ballade sur ce sujet) mais ma méthode là-dessus est de tester différent validators sur la même page sous différent explorateurs et plateformes. +edit+

Modifié 8 Janvier 2004 par beatnykk

Connexion

CSS : héritages de dimensions

Sujets conseillés

milo

milo

Beatnykk

milo

Beatnykk

Veuillez vous connecter pour commenter

Parcourir

Activité