Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2462 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1095561
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 21:07:42  profilanswer
 

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! :D
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.”
mood
Publicité
Posté le 24-05-2005 à 21:07:42  profilanswer
 

n°1095599
gm_superst​ar
Appelez-moi Super
Posté le 24-05-2005 à 21:38:32  profilanswer
 

Pinzo a écrit :

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! :D
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.


 
Hum, pas vraiment il reste un affreux <img src="images/blank.gif" border="0" /> :o
 
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
n°1095602
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 21:42:05  profilanswer
 

gm_superstar a écrit :

Hum, pas vraiment il reste un affreux <img src="images/blank.gif" border="0" /> :o
 
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.”
n°1095605
gm_superst​ar
Appelez-moi Super
Posté le 24-05-2005 à 21:45:13  profilanswer
 

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
n°1095606
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 21:45:35  profilanswer
 

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.”
n°1095611
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 21:47:08  profilanswer
 

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.”
n°1095613
gm_superst​ar
Appelez-moi Super
Posté le 24-05-2005 à 21:48:06  profilanswer
 

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
n°1095614
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 21:48:53  profilanswer
 

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.”
n°1095619
gm_superst​ar
Appelez-moi Super
Posté le 24-05-2005 à 21:51:01  profilanswer
 

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
n°1095624
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 21:53:32  profilanswer
 

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.”
mood
Publicité
Posté le 24-05-2005 à 21:53:32  profilanswer
 

n°1095635
gm_superst​ar
Appelez-moi Super
Posté le 24-05-2005 à 21:59:13  profilanswer
 

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
n°1095639
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 22:02:32  profilanswer
 

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
n°1095640
gm_superst​ar
Appelez-moi Super
Posté le 24-05-2005 à 22:04:29  profilanswer
 

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
n°1095642
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 22:07:23  profilanswer
 

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.

n°1095645
Pinzo
Vorsprung durch technik
Posté le 24-05-2005 à 22:11:23  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[Javascript]problème avec forprobleme affichage japplet sous ie dans du html
Probleme affichage Japplet sous ieprobleme 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>


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR