Retour à Forum de site web

CSS position absolue DIVs question

  • manelmpereira
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 23, 2008
  • Messages: 4
  • Status: Offline

Message Juillet 23rd, 2008, 5:28 am

Bonjour,

Ive avoir quelques problèmes avec divs imbriqués, quand absolue positionné.

Ive a essayé quelques solutions présentées, mais ils étaient seulement dirigé vers divs qui flottaient à gauche ou à droite, jamais absolue positionné.

Voici un exemple de ce que je veux dire.

Code: [ Select ]
 
<html>
<head>
<style>
#container
{
  border: 1px solid red;
  width: 600px;
  padding: 15px;
}
#abs_left
{
  position: absolute;
  width: 400px;
  height: 200px;
  border: 1px solid blue;
}
#abs_right
{
  position: absolute;
  margin: 0 0 0 405px;
  width: 190px;
  height: 150px;
  border: 1px solid green;
}
</style>
</head>
<body>
 
<div id="container">
  <div id="abs_left"></div>
  <div id="abs_right"></div>
</div>
 
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <style>
  5. #container
  6. {
  7.   border: 1px solid red;
  8.   width: 600px;
  9.   padding: 15px;
  10. }
  11. #abs_left
  12. {
  13.   position: absolute;
  14.   width: 400px;
  15.   height: 200px;
  16.   border: 1px solid blue;
  17. }
  18. #abs_right
  19. {
  20.   position: absolute;
  21.   margin: 0 0 0 405px;
  22.   width: 190px;
  23.   height: 150px;
  24.   border: 1px solid green;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29.  
  30. <div id="container">
  31.   <div id="abs_left"></div>
  32.   <div id="abs_right"></div>
  33. </div>
  34.  
  35. </body>
  36. </html>
  37.  


Le div "conteneur" ne se développe pas pour contenir les divs "abs_left" et "abs_right".

Y at-il une solution? Ceci est destiné à être dynamiquement généré, donc je ne peux pas dire explicitement la hauteur des conteneurs.

Merci d'avance!
Manuel
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juillet 23rd, 2008, 5:28 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Déc 29, 2003
  • Messages: 5169
  • Loc: SC-USA
  • Status: Offline

Message Juillet 23rd, 2008, 6:45 am

Positionnement absolu prend l'élément de la rendre débit. Cela signifie que le pare pas les frères et sœurs et les éléments ne sera pas réagir. Je pense que vous devriez chercher une autre approche.
- dM
  • manelmpereira
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 23, 2008
  • Messages: 4
  • Status: Offline

Message Juillet 23rd, 2008, 7:06 am

Merci pour la réponse. Ill voir ce que je peux faire pour la changer.

À la vôtre,
Manuel
  • manelmpereira
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 23, 2008
  • Messages: 4
  • Status: Offline

Message Juillet 23rd, 2008, 9:38 am

Salut à nouveau,

J'ai modifié mon css, de ne pas utiliser position: absolute, et j'ai obtenu le même résultat en utilisant float: left sur les différents blocs.

Cela semble bon dans Firefox, mais dans IE (7 au moins), je ne peux pas les blocs à se chevaucher.

Il s'agit du code:

Code: [ Select ]
 
<html>
<head>
<style>
#container
{
  border: 1px solid red;
  width: 605px;
  padding: 15px;
}
#abs_left
{
  float: left;
  width: 400px;
  height: 200px;
  border: 1px solid blue;
  z-index: 2;
}
#abs_middle
{
  float: left;
  width: 50px;
  height: 150px;
  border: 1px solid green;
  z-index: 2;
}
#abs_right
{
  float: left;
  width: 135px;
  height: 250px;
  border: 1px solid yellow;
  z-index: 2;
}
#abs_bottom
{
  margin: 220px 0 0 0;
  width: 595px;
  height: 150px;
  border: 1px solid black;
}
</style>
</head>
<body>
 
<div id="container">
  <div id="abs_left"></div>
  <div id="abs_middle"></div>
  <div id="abs_right"></div>
  <div id="abs_bottom"></div>
</div>
 
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <style>
  5. #container
  6. {
  7.   border: 1px solid red;
  8.   width: 605px;
  9.   padding: 15px;
  10. }
  11. #abs_left
  12. {
  13.   float: left;
  14.   width: 400px;
  15.   height: 200px;
  16.   border: 1px solid blue;
  17.   z-index: 2;
  18. }
  19. #abs_middle
  20. {
  21.   float: left;
  22.   width: 50px;
  23.   height: 150px;
  24.   border: 1px solid green;
  25.   z-index: 2;
  26. }
  27. #abs_right
  28. {
  29.   float: left;
  30.   width: 135px;
  31.   height: 250px;
  32.   border: 1px solid yellow;
  33.   z-index: 2;
  34. }
  35. #abs_bottom
  36. {
  37.   margin: 220px 0 0 0;
  38.   width: 595px;
  39.   height: 150px;
  40.   border: 1px solid black;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45.  
  46. <div id="container">
  47.   <div id="abs_left"></div>
  48.   <div id="abs_middle"></div>
  49.   <div id="abs_right"></div>
  50.   <div id="abs_bottom"></div>
  51. </div>
  52.  
  53. </body>
  54. </html>
  55.  


Des suggestions?

Merci encore.
Manuel
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juillet 23rd, 2008, 12:29 pm

Essayez ceci...
Code: [ Select ]
<html>
<head>
<style>
#container
{
position: relative;
border: 1px solid red;
width: 600px;
padding: 15px;
}
#abs_left
{
position: absolute;
width: 400px;
height: 100%;
border: 1px solid blue;
float: left;
}
#abs_right
{
float: left;
width: 190px;
height: 150px;
border: 1px solid green;
}
</style>
</head>
<body>

<div id="container">
<div id="abs_left"></div>
<div id="abs_right"></div>
<p style="clear: both;" />
</div>

</body>
</html>
  1. <html>
  2. <head>
  3. <style>
  4. #container
  5. {
  6. position: relative;
  7. border: 1px solid red;
  8. width: 600px;
  9. padding: 15px;
  10. }
  11. #abs_left
  12. {
  13. position: absolute;
  14. width: 400px;
  15. height: 100%;
  16. border: 1px solid blue;
  17. float: left;
  18. }
  19. #abs_right
  20. {
  21. float: left;
  22. width: 190px;
  23. height: 150px;
  24. border: 1px solid green;
  25. }
  26. </style>
  27. </head>
  28. <body>
  30. <div id="container">
  31. <div id="abs_left"></div>
  32. <div id="abs_right"></div>
  33. <p style="clear: both;" />
  34. </div>
  36. </body>
  37. </html>
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • manelmpereira
  • Born
  • Born
  • No Avatar
  • Inscription: Juil 23, 2008
  • Messages: 4
  • Status: Offline

Message Juillet 23rd, 2008, 4:50 pm

Merci pour la réponse, mais j'ai constaté que chaque fois qu'un div est la position: absolute; attribut, puis tous ses pare démunis cessent de connaître sa condition, de sorte qu'ils ne pourront jamais étendre à sa taille.

La seule solution pour ce qui Im essayant de faire est de préciser la hauteur du conteneur...Je pense que c'est le seul moyen...

Merci quand même.
Manuel
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Juillet 23rd, 2008, 7:07 pm

Avez-vous essayé de mon chemin?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 7 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 176 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC