[css] largeur d'une <div> = largeur du tableau contenu dedans..

largeur d'une <div> = largeur du tableau contenu dedans.. [css] - HTML/CSS - Programmation

Marsh Posté le 25-05-2004 à 17:59:17    

youp,  
 
 
j'ai :
 


<div id="grand">
   <div id="1">
   </div>
 
   <div id="A">
       <table>
       </table>
   </div>
</div>


 
 
je voudrais que tous les <div> aient la meme largeur que le tableau.
 
mais je ne sais pas comment dire à GRAND d'avoir la meme taille que le tableau :(
 
 
les <div> prennent toujours le plus de place possible :( il est possible de leur dire de prendre le moins de place possible ?
 
 
 
 
merci


---------------
oui oui
Reply

Marsh Posté le 25-05-2004 à 17:59:17   

Reply

Marsh Posté le 26-05-2004 à 00:10:34    

Ben donne une largeur aux DIV :D
 
Sinon, si tu la connais pas, passe en position absolue, le DIV s'ajustera alors à la taille de son contenu.


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

Marsh Posté le 26-05-2004 à 00:17:34    

Code :
  1. <div id="1">
  2. </div>


 
Attention, ça, ce n'est pas valide. Un id ne peut commencer par un chiffre.

Reply

Marsh Posté le 26-05-2004 à 02:21:38    

Si tu ve que ton div ait la taille de ton tableau tu définis une taille à ton tableau le div s'adaptera, si tu ve que ton tableau ait la taille de ton div tu définis une taille au div et tu indique 100% pour la taille du tableau qui s'adaptera alors à ton div.


---------------
Antisocial, tu perds ton sang froid Tu masques ton visage en lisant ton journal Repense a toutes ces années de service Antisocial, bientôt les années de sévices Enfin le temps perdu qu'on ne rattrape plus 4Ñ 7¡ $Ø Ç!ÂL
Reply

Marsh Posté le 26-05-2004 à 09:01:34    

<style>
div.grande
    {
    width : 100%;
    }
</style>
 
<div class="grande">Coucou je fais 100%</div>

Reply

Marsh Posté le 26-05-2004 à 12:01:29    

youp,
 
 
bon, je crois que je n'ai pas été assez précis :p
 
alors voilà la page: http://belgibique.be/brol.html
 
 
je voudrais que Vert et Mauve prennent la taille de Rouge ; et que Vert soit centré dans Bleu.
 
j'ai mis Vert en position: absolute, mais il ne prend pas la taille de rouge :(
 
 
ah oui, je ne connais pas la taille de rouge (qui est un tableau)
 

<html>
<head>
<style>
#geante {
   width: 800px;
   border: 2px solid blue;
   padding: 10px;
}
 
#grande {
   position: aboslute;
   padding: 5px;
   margin: 0 auto 0 auto;
   border: 1px solid green;
}
 
#mini {
   border: 1px solid purple;
   text-align: center;
   margin-top: 5px;
}
 
table {
   border: 1px solid red;
}
</style>
</head>
<body>
<div id="geante">
  <div id="grande">
     <table>
        <tr>
           <td>brol</td>
           <td>brol</td>
 
           <td>brol</td>
           <td>brol</td>
        </tr>
     </table>
     <div id="mini">
        pout
     </div>
  </div>
 
</div>
</body>
</html>


 
 
 
bobe> merci, je ne savais pas :)


Message édité par art_dupond le 26-05-2004 à 12:02:10

---------------
oui oui
Reply

Marsh Posté le 26-05-2004 à 12:14:56    

Dans #grande
Fais un  
float:left au lieu de position:absolute et ch'est bon je crois
 
Ah non vert n'est plus centré


Message édité par deliriumtremens le 26-05-2004 à 12:17:40
Reply

Marsh Posté le 26-05-2004 à 12:50:07    

oups j'avais mis aboslute...
 
 
bon maintenant ca ne ressemble plus à rien :p
 
 
 
edit: c'est normal vu que je n'avais pas précisé que j'avais une div extérieur.
 
mais ca ne prend quand meme pas la taille du contenu...


Message édité par art_dupond le 26-05-2004 à 12:51:02

---------------
oui oui
Reply

Marsh Posté le 26-05-2004 à 13:24:28    

J'ai trouvé une solution pour IE6, mais les résultats sont totalement différents (entre eux et avec IE) sous Moz et Opera

Code :
  1. #geante {
  2. float:left;
  3. width: 800px;
  4. text-align: center;
  5. border:1px solid blue;
  6. padding: 5px;
  7. padding-left:50%;
  8. padding-right:50%;
  9.  
  10. }
  12. #grande
  13. {
  14.     padding: 5px;
  15.    float:left;
  16.    border: 1px solid green;
  17.  
  18. }
  20. #mini {
  21.    
  22.    border: 1px solid purple;
  23.    text-align: center;
  24.    margin-top: 5px;
  25.  
  26.  
  27. }
  29. table {
  30.    border: 1px solid red;
  31. }


 
A mon avis, ça va être difficile de trouver une solution sans donner une taille (même en pourcentages) à ton tableau, que tu pourras donner à la div #grande.
 
Mais bon je peux me gourrer.

Reply

Marsh Posté le 26-05-2004 à 13:34:45    

Je m'amuse encore
 
Le plus propre pour les 3 navigateurs cités serait

Code :
  1. <style>
  2. #geante {
  4. width: 800px;
  5. text-align: center;
  6. border:1px solid blue;
  7. padding: 5px;
  8. text-align:center;
  9. }
  11. #grande
  12. {
  13. padding: 5px;
  14. width:50%;
  15. border: 1px solid green;
  16. margin-left:auto;
  17. margin-right:auto; 
  18.  
  19. }
  21. #mini {
  22.    
  23. border: 1px solid purple;
  24. text-align: center;
  25. margin-top: 5px;
  26. }
  28. table {
  29. border: 1px solid red;
  30. width:100%;
  31. }
  32. </style>


 
Mais si le tableau est plus grand que les 50% de la div #grande, il sort du cadre vert (Opera et Moz) ou #mini ne prend pas la bonne taille (IE)... Tu peux agrandir la taille de cette div (en %), mais j'ai pas trouvé mieux


Message édité par deliriumtremens le 26-05-2004 à 14:00:50
Reply

Marsh Posté le 26-05-2004 à 13:34:45   

Reply

Marsh Posté le 26-05-2004 à 14:26:10    

yop donc il faudra que je fixe une taille si j'ai bien compris...
 
 
merci en tout cas :)
 
 


---------------
oui oui
Reply

Sujets relatifs:

Leave a Replay

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