Prise de tête sur une balise Div

**Gecko64** · 16 Janvier 2008

Voilà, j'essaie de faire joujou avec des div mais j'ai un souci dans mon code

En fait j'essaie dans un DIV avec une bordure de couleur noir de faire tenir d'autre DIV mais j'ai un souci c'est que en bas, mes DIV sortent de mon DIV avec le rebord noir... :wacko:

Le mieux est de le voir en code :cool: :

CODE

<html><head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="./css/style.css" />
<title>Accueil</title>
</head>
<body>
<div id="page">
	<!--Titre de la page-->
	<div id="titre">
		Titre de la page<br />
	</div>
	
	<!--Cardre de gauche-->
	<div id="menugauche">
		Menu<br />
		de<br />
		gauche<br />
	</div>
	
	<!--Cadre de droite-->
	<div id="menudroite">
		Menu<br /> 
		de<br /> 
		droite<br />
	</div>
	
	<!--Cadre du centre-->
	<div id="centre">
		Menu<br /> 
		du<br /> 
		centre<br />
	</div>
	
	<!--Cadre en bas-->
	<div id="down">
		Le bas de la page<br />
	</div>
</div>
</body>
</html>

et pour le css:

CODE

div#page{
	margin-left: 10px; 
	margin-right: 10px;
	height: 100%;
	border: 1px solid black;
}
div#menugauche
{
	border: 1px solid red;
	float: left;
	width: 130px;
	height: 100%;
	text-align: center;
}
div#menudroite
{
	border: 1px solid green;
	float: right;
	width: 130px;
	height: 100%;
	text-align: center;
}
div#centre
{
	border: 1px solid blue;
	height: 100%;
	margin-left: 135px;
	margin-right: 135px;
	text-align: center;
}
div#titre
{
	border: 1px solid orange;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 3px;
	height: 30px;
}
div#down
{
	border: 1px solid orange;
	text-align: center;
	margin-top: 3px;
}

En fait le DIV central ainsi que celui de gauche et droite et celui du bas sortent de mon DIV qui les encapsulent... :unsure:

Je ne sais pas quoi modifier pour que tous mes DIV cad celui du centre, de gauche, de droite, du haut et du bas tiennent dans mon DIV qui a la bordure de couleur noir...

Merci d'avance

ALeX!S · 16 Janvier 2008

Oh le joli code, tu l'as eu ou ...

Je crois que tu aurais du le mettre dans les balises adéquate déjà.

Sinon c'est pas grave que les autres sortent du noir, ce n'est qu'un soucis de "présentation", normal ... il n'a pas de height.

Sachant pas la hauteur finale que tu vas avoir, tu peux utiliser min-height, mais c'est du CSS2, il faut donc un navigateur récent.

**Gecko64** · 16 Janvier 2008

Ha ok mais je me demandais pcq en fait, chez moi au lieu de prendre la page entière il prend un surplus ce qui fait que j'ai une barre de défilement qui apparait à droite...

Et ce je ne comprend pas pq ca me fait ca... :wacko:

Marie-Aude · 17 Janvier 2008

A cause de tes margins qui ne servent a rien quand tu as des float

En revanche, après ton dernier div "a l'intérieur" tu devrais faire un clearfloat

steph29 · 17 Janvier 2008

oui a la fin de ton div, apres le

 <div id="down">
Le bas de la page<br />
</div>

un petit :

<div style="clear:both"> </div>

**Gecko64** · 17 Janvier 2008

Ha ok bha je vais essayer ca

Merci !

PS: Au passage quelqu'un a une bonne reférence d'un bouquin sur les CSS pcq il y a des trucs qui m'échappent la?

En fait pour revenir a ca, ce qui m'échappe c'est que a l'école, on nous dit que une DIV c'est un bloc qui contient un certain contenu

Et moi ce que je ne comprend pas c'est comment je parviens en bas de ma page à avoir des DIV qui sortent du DIV qui les encapsulent??? :unsure:

Si ca contient quelque chose, ca ne devrait pourtant pas le laisser sortir vu qu'il passe la taille maximale que son contenu peut occuper, non? :wacko:

En dessin, j'ai mis en rouge ce qui à mon sens devrait être dans le DIV au bord noir... :nonono:

Modifié 17 Janvier 2008 par Gecko64

ALeX!S · 18 Janvier 2008

En quoi ça gène, si ton div noir ne sert qu'a centrer la totalité de la page, et que donc c'est juste un conteneur je vois pas ou est le soucis.

Au final il auras plus de border et on en verras rien.

Maintenant je t'ai expliqué tantôt, si tu donnes une taille max et que le contenu est plus grand ça dépasse. Si tu fixes pas de taille, ça s'adapte...

baulet · 19 Janvier 2008

vérifie que le navigateur n'est pas en mode quirk, au besoin ajoute une DTD dans ta page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(sans le prologue xml)

pour firefox, tu as l'extension Webdevelopper qui te l'indique.

pour ce (maudit) ie6, tu peux mettre ceci :

<body onload="alert(document.compatMode);">

si tu as "BackCompat" c'est que l'explorateur ne comprend pas le code, et passe en mode compatibilité arrière, au contraire si tu as "CSS1Compat", c'est que tout est interpreté correctement dans ta page.

une fois cela vérifié, peut etre ajouter "position=relative" dans tes div?

je t'avouerai que je n'ai pas encore reussi a trouver le remede miracle compatible ie6 et firefox, pour rendre une page comme la tienne sans bricoler le contenu (quelques br/) pour un affichage correct de l'ensemble...

bon courage et tiens nous au courant

baulet · 19 Janvier 2008

A cause de tes margins qui ne servent a rien quand tu as des float

heu??? tu peux expliquer? merci.

**Gecko64** · 19 Janvier 2008

Ok bha écoute je vais regarder tout ca car je ne suis pas un grand habitué des CSS et bon, la je compte bien m'y mettre

Encore merci pour les conseils.

J'en prend bonne note !

Connexion

Prise de tête sur une balise Div

Sujets conseillés

Gecko64

ALeX!S

Gecko64

Marie-Aude

steph29

Gecko64

ALeX!S

baulet

baulet

Gecko64

Veuillez vous connecter pour commenter

Parcourir

Activité