Aller au contenu

CSS : héritages de dimensions

milo

Par milo
dans (X)HTML et CSS

 Partager

Sujets conseillés

milo

milo

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Beatnykk

Beatnykk

Posté
Posté

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=&quot;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>

Lien vers le commentaire
Partager sur d’autres sites
milo

milo

Posté
  • Auteur
Posté

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 ?

:?: :!: :?:

Lien vers le commentaire
Partager sur d’autres sites
Beatnykk

Beatnykk

Posté
Posté (modifié)

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 !! :P

+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é par beatnykk
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...