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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°268400
thekeke
La vie est belle !
Posté le 12-12-2002 à 19:01:31  profilanswer
 

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 ;)
mood
Publicité
Posté le 12-12-2002 à 19:01:31  profilanswer
 

n°268422
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 19:22:59  profilanswer
 

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
n°268451
thekeke
La vie est belle !
Posté le 12-12-2002 à 20:30:42  profilanswer
 

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 ;)
n°268456
gm_superst​ar
Appelez-moi Super
Posté le 12-12-2002 à 20:40:45  profilanswer
 
n°268458
thekeke
La vie est belle !
Posté le 12-12-2002 à 20:42:11  profilanswer
 


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


---------------
BattleTag : thekeke#2108 ajoutez moi ;)
n°269000
thekeke
La vie est belle !
Posté le 13-12-2002 à 13:07:33  profilanswer
 

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 ;)
n°269127
gm_superst​ar
Appelez-moi Super
Posté le 13-12-2002 à 15:58:50  profilanswer
 

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
n°269199
Hermes le ​Messager
Breton Quiétiste
Posté le 13-12-2002 à 16:45:30  profilanswer
 

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

n°269260
thekeke
La vie est belle !
Posté le 13-12-2002 à 18:05:29  profilanswer
 

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 ;)
n°269264
panchopa
le lama de Lima
Posté le 13-12-2002 à 18:11:03  profilanswer
 

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
mood
Publicité
Posté le 13-12-2002 à 18:11:03  profilanswer
 

n°269272
gm_superst​ar
Appelez-moi Super
Posté le 13-12-2002 à 18:30:57  profilanswer
 

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
n°269289
panchopa
le lama de Lima
Posté le 13-12-2002 à 18:47:44  profilanswer
 

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
n°269301
gm_superst​ar
Appelez-moi Super
Posté le 13-12-2002 à 18:57:11  profilanswer
 

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
n°270468
thekeke
La vie est belle !
Posté le 16-12-2002 à 15:00:22  profilanswer
 

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

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

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

 

Sujets relatifs
[JS H] forcer la premiere lettre en majuscule et le reste en minusculecenter un calque sur une page...
agrandir un tableau de pointeurforcer le codepage à utiliser
[GTK]Accéder à un objet dans un conteneur...Placer un calque precisement a cote d'une image, quelque soit la resol
calculer la position d'un calque...Forcer le navigateur à ne pas lire le cache
PHPBB : 'Failed sending mail' /Free\ (soluce inside:codes et modifs)[DHTML] Cacher un calque en cliquant sur une image [résolu]
Plus de sujets relatifs à : Forcer le calque conteneur à s'agrandir... ? codes et url added !


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