Aller au contenu

Prise de tête sur une balise Div

Gecko64

Par Gecko64
dans (X)HTML et CSS

 Partager

Sujets conseillés

Gecko64

Gecko64

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
ALeX!S

ALeX!S

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Gecko64

Gecko64

Posté
  • Auteur
Posté

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:

Lien vers le commentaire
Partager sur d’autres sites
Gecko64

Gecko64

Posté
  • Auteur
Posté (modifié)

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:

pagext2.png

Modifié par Gecko64
Lien vers le commentaire
Partager sur d’autres sites
ALeX!S

ALeX!S

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
baulet

baulet

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Gecko64

Gecko64

Posté
  • Auteur
Posté

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

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