Forcer le calque conteneur à s'agrandir... ? codes et url added !

Forcer le calque conteneur à s'agrandir... ? codes et url added ! - HTML/CSS - Programmation

Marsh Posté le 12-12-2002 à 19:01:31    

Ca doit être tout con mais j'ai un probleme...
 
J'ai crée un div "conteneur" avec un autre div dedans pour mon texte... Tous les deux ont des couleurs de fond...
 
Mon problème c'est que quand le deuxieme div devient trop grand il sort du calque conteneur (sous IE uniquement) au lieu de le forcer à le suivre en s'agrandissant (et evidemment comme ils ont une couleur de fond différente ça se voit)...
 
Vous connaissez ce problème ?


Message édité par thekeke le 13-12-2002 à 13:08:01

---------------
BattleTag : thekeke#2108 ajoutez moi ;)
Reply

Marsh Posté le 12-12-2002 à 19:01:31   

Reply

Marsh Posté le 12-12-2002 à 19:22:59    

tu as spécifié une hauteur pour le div conteneur ?


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

Marsh Posté le 12-12-2002 à 20:30:42    

gm_superstar a écrit :

tu as spécifié une hauteur pour le div conteneur ?


 
oui mais si je n'en spécifie pas c'est pareil (le div conteneur est moins haut du coup et en plus) le deuxieme div passe pas dessus...


---------------
BattleTag : thekeke#2108 ajoutez moi ;)
Reply

Marsh Posté le 12-12-2002 à 20:40:45    

Reply

Marsh Posté le 12-12-2002 à 20:42:11    


 
comme c est au boulot, je recupere ca demain et je le colle...


---------------
BattleTag : thekeke#2108 ajoutez moi ;)
Reply

Marsh Posté le 13-12-2002 à 13:07:33    

Comme promis voilà ce qui merde... Si
 
http://www.pagepardefaut.com/test/weblog.htm
 
pour infos les codes des divs css
 
stylesweblog1.css :
 

Code :
  1. div#weblog {
  2. position: absolute;
  3. top: 30;
  4. left: 0;
  5. width: 400px;
  6. height: 125px;
  7. }
  8. div#somweblog {
  9. position: absolute;
  10. top: 30;
  11. left: 430;
  12. width: 170px;
  13. height: 125px;
  14. }
  15. div#photosweblog {
  16. position: absolute;
  17. top: 170;
  18. left: 430;
  19. width: 170px;
  20. height: 225px;
  21. }


 
stylescommun1.css
 

Code :
  1. body
  2. {
  3. padding-bottom: 0px;
  4. padding-top: 3px;
  5. position: relative;
  6. width: 760px;
  7. height: 460px;
  8. text-align: center;
  9. background-color: #666699;
  10. scrollbar-3dlight-color: #000000;
  11. scrollbar-arrow-color: #ffffff;
  12. scrollbar-darkshadow-color: #666666;
  13. scrollbar-face-color: #990101;
  14. scrollbar-highlight-color: #FFFFCC;
  15. scrollbar-shadow-color: #666666;
  16. scrollbar-track-color: #B3B3CC;
  17. }
  18. div#conteneur {
  19. width: 621px;
  20. height: 532px;
  21. position: relative;
  22. }


 
 
J'ai essayé de ne pas fixer de taille en hauteur au div conteneur mais ça fait la meme chose...


---------------
BattleTag : thekeke#2108 ajoutez moi ;)
Reply

Marsh Posté le 13-12-2002 à 15:58:50    

Oui effectivement IE fait comme si le bloc conteneur n'appartenait pas au tableau (sans doute à cause du position: relative)
 
Ce que tu peux faire mettre tes boites de droite dans un DIV flottant :
 
<div id="boitesLaterales">
  <div id="somweblog">...</div>
  <div id="photosweblog">...</div>
</div>
<div id="weblog">
 ...
</div>
 
avec comme propriétés :
 

div#boitesLaterales {
  float: right;
  margin-height: 30px;
  margin-right: 10px;
  width: 170px;
}
 
div#somweblog {
 height: 125px;
}
 
div#photosweblog {
 height: 225px;
}
 
div#weblog {
 margin-height: 30px;
 width: 400px;
}
 
div#conteneur {
  width: 621px;
}


 
Mais en fait ce div conteneur ne sert à rien vu qu'on est dans un tableau. D'ailleurs tout ces tableaux alourdissent inutilement ton code. Tu es parti pour utiliser les DIV, c'est bien mais dans ce cas il faut aller jusqu'au bout et ne pas mixer tableaux et DIVs !


Message édité par gm_superstar le 13-12-2002 à 15:59:14

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

Marsh Posté le 13-12-2002 à 16:45:30    

gm_superstar a écrit :

Oui effectivement IE fait comme si le bloc conteneur n'appartenait pas au tableau (sans doute à cause du position: relative)
 
Ce que tu peux faire mettre tes boites de droite dans un DIV flottant :
 
<div id="boitesLaterales">
  <div id="somweblog">...</div>
  <div id="photosweblog">...</div>
</div>
<div id="weblog">
 ...
</div>
 
avec comme propriétés :
 

div#boitesLaterales {
  float: right;
  margin-height: 30px;
  margin-right: 10px;
  width: 170px;
}
 
div#somweblog {
 height: 125px;
}
 
div#photosweblog {
 height: 225px;
}
 
div#weblog {
 margin-height: 30px;
 width: 400px;
}
 
div#conteneur {
  width: 621px;
}


 
Mais en fait ce div conteneur ne sert à rien vu qu'on est dans un tableau. D'ailleurs tout ces tableaux alourdissent inutilement ton code. Tu es parti pour utiliser les DIV, c'est bien mais dans ce cas il faut aller jusqu'au bout et ne pas mixer tableaux et DIVs !


 
 [:manzana verde]  ;)

Reply

Marsh Posté le 13-12-2002 à 18:05:29    

gm_superstar a écrit :

Oui effectivement IE fait comme si le bloc conteneur n'appartenait pas au tableau (sans doute à cause du position: relative)
 
Ce que tu peux faire mettre tes boites de droite dans un DIV flottant :
 
code...
 
Mais en fait ce div conteneur ne sert à rien vu qu'on est dans un tableau. D'ailleurs tout ces tableaux alourdissent inutilement ton code. Tu es parti pour utiliser les DIV, c'est bien mais dans ce cas il faut aller jusqu'au bout et ne pas mixer tableaux et DIVs !


 
oui mais disons que je bosse avec quelqu'un qui passera le site en php et qui lui n'aime pas trop les divs...
 
En tout cas merci bcp je vais essayer ta solution de ce pas !


---------------
BattleTag : thekeke#2108 ajoutez moi ;)
Reply

Marsh Posté le 13-12-2002 à 18:11:03    

je suis désolé d'etre un boulet mais je comprend pas tout  :( . J'ai lu les specifacions officielles et la faq CSS de Gm-superstar... j'ai capté certains trucs et d'autres non. On y apprend la possibilité d'user de position relative, fixed, absolute ou flotant, mais jamais comment les combiner... et ca pour un débutant sans experience c'est chaud a capter.  
Pour eviter que vous m'expliquiez tout (vous avez pas que ca a faire), je met 2 questions de base et faciles (?), meme si des milliers d'autres brulent mes lèvres  
 
Pour commencer, en gros tu as un conteneur au positionnement relatif, et d'autres divs qui sont absolus. Les absolus se placent dans le relatif.  
 
1) Ce comportement  se définit dans la facon d'imbriquer les divs dans ton code html ?  
- Genre  
<div id=conteneur-relatif>  
<div id=contenu-absolu> ici le bloc en position absolue </div>  
</div> //fermeture du relatif
Oui ou non ?  
 
2) Ton conteneur est relatif, mais relatif a quoi... ou se positionne t'il dans ta page...  :??:  
Dans ton exemple il est en haut a gauche non  :??:  
 
Car je lis ceci dans les spec : "Un élément génère une boîte en position relative quand la valeur de sa propriété 'position' est 'relative'. Le décalage de celle-ci est spécifié par les propriétés 'top', 'bottom', 'left' et 'right'."
 
Ceci signifie que ton conteneur ne peut pas être plus précisément placé que en haut, en bas, a droite ou a gauche de ta page ? Ca parait un peu leger pour faire un site web, il doit exister un truc pour que ce positionement soit utile non ?  


---------------
Apprenti néo-shreddeur fusionniste de chambre | ♫ Blind test pour zikos
Reply

Marsh Posté le 13-12-2002 à 18:11:03   

Reply

Marsh Posté le 13-12-2002 à 18:30:57    

panchopa a écrit :

Pour commencer, en gros tu as un conteneur au positionnement relatif, et d'autres divs qui sont absolus. Les absolus se placent dans le relatif.


Pas forcément, le positionnement absolu n'a de sens que si l'élément englobant est lui-même positionné (c'est à dire qu'il possède la propriété position: absolute, relative ou fixed). S'il n'est pas positionné, c'est qu'il est dans le "flux normal" (c'est la mode de positionnement par défaut, les blocs les uns en dessous des autres)  

panchopa a écrit :

1) Ce comportement  se définit dans la facon d'imbriquer les divs dans ton code html ?  
- Genre  
<div id=conteneur-relatif>  
<div id=contenu-absolu> ici le bloc en position absolue </div>  
</div> //fermeture du relatif
Oui ou non ?  
 
2) Ton conteneur est relatif, mais relatif a quoi... ou se positionne t'il dans ta page...  :??:  
Dans ton exemple il est en haut a gauche non  :??:


relatif à la position qu'il aurait eu dans le flux normal, c'est à dire à la postion qu'il aurait eu s'il n'avait pas été déplacé.
 
Si je me contente d'écrire :

div#conteneur-relatif {
  position: relative;
}


Le DIV ne va pas bouger par rapport à sa position d'origine (car on a pas précisé de top, bottom, left ou right), en revanche il sera positionné et les coordonnées que je vais utiliser pour placer le DIV contenu-absolu se prendront par rapport au DIV conteneur.
C'est utile de faire comme ça lorsqu'on ne peut pas placer le DIV conteneur de manière absolue.
J'espère avoir aussi répondu à ta première question ;)

panchopa a écrit :

Car je lis ceci dans les spec : "Un élément génère une boîte en position relative quand la valeur de sa propriété 'position' est 'relative'. Le décalage de celle-ci est spécifié par les propriétés 'top', 'bottom', 'left' et 'right'."
 
Ceci signifie que ton conteneur ne peut pas être plus précisément placé que en haut, en bas, a droite ou a gauche de ta page ? Ca parait un peu leger pour faire un site web, il doit exister un truc pour que ce positionement soit utile non ?


Qu'est ce que tu veux de plus précis ? Le positionnement relatif et absolu n'ont pas *du tout* la même finalité. Je résume :
 
relatif : pour déplacer un élément par rapport à sa position dans le flux normal.
absolu : pour placer un élémént où on veut par rapport à son parent positionné.


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

Marsh Posté le 13-12-2002 à 18:47:44    

Citation :

Qu'est ce que tu veux de plus précis ?


 
Heu arf....  
*comment ne pas passer pour un con*
 
Bon je crois que je viens de capter un truc :  " Le décalage de celle-ci est spécifié par les propriétés 'top', 'bottom', 'left' et 'right'."  
 
Ca ne veux pas dire que le placement est pas uniquement en haut, en bas, ou a droite, mais que top peut avoir un truc genre {top: 20px;}   :??:  
 
Si oui ca s'ecrit comment, comme ca :  
div#conteneur-relatif {  
 position: relative;  
top: 20px;
bottom: 20px;
}  
?


Message édité par panchopa le 13-12-2002 à 18:48:47
Reply

Marsh Posté le 13-12-2002 à 18:57:11    

panchopa a écrit :

Citation :

Qu'est ce que tu veux de plus précis ?


 
Heu arf....  
*comment ne pas passer pour un con*
 
Bon je crois que je viens de capter un truc :  " Le décalage de celle-ci est spécifié par les propriétés 'top', 'bottom', 'left' et 'right'."  
 
Ca ne veux pas dire que le placement est pas uniquement en haut, en bas, ou a droite, mais que top peut avoir un truc genre {top: 20px;}   :??:


Désolé je ne comprends pas ta phrase.
Je répête : le positionnement relatif sert à déplacer des éléments, pas à les placer comme tu as écrit.
 
Relis le passage sur le positionnement relatif dans la FAQ. Il y a un exemple qui, je pense, te permettra de comprendre.

panchopa a écrit :

Si oui ca s'ecrit comment, comme ca :  
div#conteneur-relatif {  
 position: relative;  
top: 20px;
bottom: 20px;
}  
?


Ce que tu as écris n'a pas de sens. Dans la mesure où le positionnement relatif représente un déplacement
top: 20px; -> décale ton élément de 20 pixels vers le bas
bottom: 20px; -> décale ton élément de 20 pixels vers le haut
Au final, ton élément n'a pas bougé.


Message édité par gm_superstar le 13-12-2002 à 18:58:31

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

Marsh Posté le 16-12-2002 à 15:00:22    

Je vais essayer de faire tout en div là (juste pour moi, pour m'entrainer) mais le centrage pour tous les navigateurs sans exception c'est vraiment lourdingue...  :whistle:  
 
enfin bon je suis parti ;)


---------------
BattleTag : thekeke#2108 ajoutez moi ;)
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed