[CSS] Problème de longeur de <DIV>

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Problème de longeur de <DIV>

Pinzo

Vorsprung durch technik

Salut. Avant tout voilà mon site, qui n'a encore rien (faites pas atention au texte, c'est portugais):

http://concoursgraphisme.free.fr/2005/AJ-NEW

Bon, je suis CSS compliant donc pas de tableaux, rien!
On fait tout à coup de CSS! Seulement j'ai un petit problème là ...

J'ai un <DIV> "container" qui contient TOUT le reste. Ensuite il y a 2 <DIV>, un "header" pour le logo (avec background-image), et un "menu" pour le menu horizontal. Jusque là tout baigne.

Après, j'ai un <DIV> "content" qui regroupe la zone principale du site, dont le CSS est:

#content {
position: absolute;
width: 768px;
background-color: white;
border-left: 1px solid #B2BECC;
border-right: 1px solid #B2BECC;
height: 100%;
}

Ce <DIV> en contient 2...

...#principal, qui contient le texte, à gauche, dont le CSS est:

#principal {
position: absolute;
text-align: justify;
padding: 10px 20px 10px 20px;
width: 66%;
height: 100%;
}

...et #sidebar, qui contient le menu de droite, dont le CSS est:

#sidebar {
position: absolute;
right: 0;
width: 200px;
padding: 0 10px 0 10px;
background-image: url(images/sidebar_bg.jpg);
background-repeat: repeat-y;
border-left: 1px solid #B2BECC;
height: 100%;
}

Seulement mon problème c'est que le "content" contient les définitions de background et j'aimerais que "principal" et "sidebar" soient en harmonie, donc: que la sidebar s'allonge si la zone de texte est plus longue. Je pense que les définitions que j'ai mises sont à peu près correctes (dites-moi si je me trompe) sauf que sous Firefox, au début du 3ème paragraphe "lorem ipsum", le background blanc s'arrête. Comme si le <DIV> "principal" se limitait à chevaucher le "content" au lieu de l'allonger. Sous IE j'ai carrément pas de fond blanc. C'est transparent.

Ça peut paraître un peu flou, mais j'espère m'être fait comprendre.

Où est le problème? J'ai gaffé au niveau des définitions? De quel <DIV>? Est-ce un problème au niveau de la disposition des <DIV> dans le code source?

Merci d'avance, A+!

Message édité par Pinzo le 24-05-2005 à 21:10:33

---------------
“I'll thank you very much.”

Publicité

gm_superstar

Appelez-moi Super

Pinzo a écrit :

Hum, pas vraiment il reste un affreux <img src="images/blank.gif" border="0" />

Pourquoi ne pas mettre tout simplement le logo dans un vrai élément IMG dans son DIV à lui ?

Pinzo a écrit :

Où est le problème? J'ai gaffé au niveau des définitions? De quel <DIV>? Est-ce un problème au niveau de la disposition des <DIV> dans le code source?

Merci d'avance, A+!

Le problème est dans le height 100% qui ne fonctionne pas avec les blocs. En fait tu n'as pas besoin d'avoir tous tes bloc en position absolue.

Donc ce qu'il faut faire c'est ne pas mettre #principal en position absolue de façon à ce que sa hauteur force celle de #content à s'étendre. Par contre il faudra sûrement réunir les images de fond pour n'en faire qu'une seule et l'appliquer à #content

Message édité par gm_superstar le 24-05-2005 à 21:39:19

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Pinzo

Vorsprung durch technik

gm_superstar a écrit :

Hum, pas vraiment il reste un affreux <img src="images/blank.gif" border="0" />

Pourquoi ne pas mettre tout simplement le logo dans un vrai élément IMG dans son DIV à lui ?

Le problème est dans le height 100% qui ne fonctionne pas avec les blocs. En fait tu n'as pas besoin d'avoir tous tes bloc en position absolue.

Donc ce qu'il faut faire c'est ne pas mettre #principal en position absolue de façon à ce que sa hauteur force celle de #content à s'étendre. Par contre il faudra sûrement réunir les images de fond pour n'en faire qu'une seule et l'appliquer à #content

Je ne suis pas sûr de comprendre. C'est le cas je crois. Il n'y a pas d'images de fond, sauf pour la sidebar.

Je vais essayer, merci. Pour le logo, oui c'est une solution. Pour le border="0" de l'image, arf. [:ddr555]

---------------
“I'll thank you very much.”

gm_superstar

Appelez-moi Super

Pinzo a écrit :

Je ne suis pas sûr de comprendre. C'est le cas je crois. Il n'y a pas d'images de fond, sauf pour la sidebar.

Donc dans ce cas il faudra appliquer l'image de fond de la sidebar à #content car #sidebar ne va pas s'étirer du fait de son positionnement absolu.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Pinzo

Vorsprung durch technik

Bon, je suis rapide, je viens d'essayer. Sous IE le "fond" revient. J'ai maintenant deux problèmes différents:

Sous IE --> le bloc "content" s'allonge parfaitement, sauf que le "sidebar" garde sa taille. Il n'accompagne pas.

Sous FF --> le bloc "sidebar" semble s'adapter à la longueur du "content", sauf que le texte continue à déborder en hauteur... il sort de la zone.

---------------
“I'll thank you very much.”

Pinzo

Vorsprung durch technik

gm_superstar a écrit :

Donc dans ce cas il faudra appliquer l'image de fond de la sidebar à #content car #sidebar ne va pas s'étirer du fait de son positionnement absolu.

Donc au lieu d'avoir une image de fond pour la #sidebar avec 200px de largeur, il vaudrait mieux que j'en aie une de 770px qui reunisse le tout (-> zone de droite et zone de gauche en blanc)?

---------------
“I'll thank you very much.”

gm_superstar

Appelez-moi Super

Oui mais tu n'es pas obligé d'avoir une image de 770px tu peux utiliser background-position pour plaquer l'image de fond à droite.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Pinzo

Vorsprung durch technik

gm_superstar a écrit :

Oui mais tu n'es pas obligé d'avoir une image de 770px tu peux utiliser background-position pour plaquer l'image de fond à droite.

Ah oui, ok. :jap:

Quant aux "apparents" problèmes survenus sur IE/FF, t'as une idée?

---------------
“I'll thank you very much.”

gm_superstar

Appelez-moi Super

Mais tu as fait les corrections que j'ai indiquées ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Pinzo

Vorsprung durch technik

gm_superstar a écrit :

Mais tu as fait les corrections que j'ai indiquées ?

Oui, mais j'avais pas mis en ligne. C'est fait.

Pour l'histoire du fond positionné je ferais plus tard. :wahoo:

---------------
“I'll thank you very much.”

Publicité

gm_superstar

Appelez-moi Super

J'ai dit aussi que les "height: 100%" ne servaient à rien

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Pinzo

Vorsprung durch technik

gm_superstar a écrit :

J'ai dit aussi que les "height: 100%" ne servaient à rien

Juste. :jap:
Bon, plus qu'un problème maintenant, et comun a IE et FF: le menu ne s'allonge pas, il garde sa taille.
Avec la valeur "height: 100%" sur le bloc #sidebar, le problème disparait sous FF mais pas sous IE.

Message édité par Pinzo le 24-05-2005 à 22:04:23

gm_superstar

Appelez-moi Super

Ben c'est l'histoire de l'image de fond qu'il faut appliquer à #content [:spamafote]

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Pinzo

Vorsprung durch technik

gm_superstar a écrit :

Ben c'est l'histoire de l'image de fond qu'il faut appliquer à #content [:spamafote]

Ah... Je vais essayer ça.

Pinzo

Vorsprung durch technik

Bon ça marche. Merci beaucoup pour ton aide. :jap: :jap:

Message édité par Pinzo le 24-05-2005 à 22:12:39

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] Problème de longeur de <DIV>

Sujets relatifs
[Javascript]problème avec for	probleme affichage japplet sous ie dans du html
Probleme affichage Japplet sous ie	probleme de validation avec include
bug en vc++...probleme de delete [ ]??	Problème connexion Access->MySQL
Probleme Iframe et Textarea [Résolu]	probleme completement inexplicable avec les sockets sous windows c++
probleme .htaccess	[CSS] Firefox: ca marche, IE: ca marche pas(pb de postionnement)
Plus de sujets relatifs à : [CSS] Problème de longeur de <DIV>

Page générée en 0.071 secondes