[CSS] Problème de longeur de <DIV>
Problème de longeur de <DIV> [CSS] - HTML/CSS - Programmation
Marsh Posté le 24-05-2005 à 21:38:32
| Pinzo a écrit : Salut. Avant tout voilà mon site, qui n'a encore rien (faites pas atention au texte, c'est portugais): |
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? |
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
Marsh Posté le 24-05-2005 à 21:42:05
| gm_superstar a écrit : Hum, pas vraiment il reste un affreux <img src="images/blank.gif" border="0" /> |
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]](https://forum-images.hardware.fr/images/perso/ddr555.gif "[:ddr555]")
---------------
“I'll thank you very much.”
Marsh Posté le 24-05-2005 à 21:45:13
| 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
Marsh Posté le 24-05-2005 à 21:45:35
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.”
Marsh Posté le 24-05-2005 à 21:47:08
| 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.”
Marsh Posté le 24-05-2005 à 21:48:06
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
Marsh Posté le 24-05-2005 à 21:48:53
| 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. 
Quant aux "apparents" problèmes survenus sur IE/FF, t'as une idée?
---------------
“I'll thank you very much.”
Marsh Posté le 24-05-2005 à 21:51:01
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
Marsh Posté le 24-05-2005 à 21:53:32
| 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. 
---------------
“I'll thank you very much.”
Marsh Posté le 24-05-2005 à 21:59:13
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
Marsh Posté le 24-05-2005 à 22:02:32
| gm_superstar a écrit : J'ai dit aussi que les "height: 100%" ne servaient à rien |
Juste.
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
Marsh Posté le 24-05-2005 à 22:04:29
Ben c'est l'histoire de l'image de fond qu'il faut appliquer à #content ![[:spamafote]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 24-05-2005 à 22:07:23
| gm_superstar a écrit : Ben c'est l'histoire de l'image de fond qu'il faut appliquer à #content |
Ah... Je vais essayer ça.
Marsh Posté le 24-05-2005 à 22:11:23
Bon ça marche. Merci beaucoup pour ton aide.
Message édité par Pinzo le 24-05-2005 à 22:12:39
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)
Marsh Posté le 24-05-2005 à 21:07:42
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.”