CSS : héritages de dimensions

CSS : héritages de dimensions à s'arracher les cheveux... Noter :

#1 milo

Groupe : Membre
Messages : 13
Inscrit(e) : 23-décembre 03
Genre:Homme
Localisation:Nantes

Posté 08 janvier 2004 - 16:46

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...

Haut

#2 milo

Groupe : Membre
Messages : 13
Inscrit(e) : 23-décembre 03
Genre:Homme
Localisation:Nantes

Posté 08 janvier 2004 - 16:47

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

Haut

#3 Beatnykk

Groupe : Membres
Messages : 501
Inscrit(e) : 18-septembre 03
Localisation:paris
Société:labyrinthe

Posté 08 janvier 2004 - 17:48

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) :

Citation

<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>

--------------------------------
>Nicolas, Infographiste et Webmaster de Meilleur Écran
--------------------------------

Haut

#4 milo

Groupe : Membre
Messages : 13
Inscrit(e) : 23-décembre 03
Genre:Homme
Localisation:Nantes

Posté 08 janvier 2004 - 21:20

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 ?

:?:

Haut

#5 Beatnykk

Groupe : Membres
Messages : 501
Inscrit(e) : 18-septembre 03
Localisation:paris
Société:labyrinthe

Posté 08 janvier 2004 - 21:36

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+

Ce message a été modifié par beatnykk - 08 janvier 2004 - 21:40.

--------------------------------
>Nicolas, Infographiste et Webmaster de Meilleur Écran
--------------------------------