Des <div.../> alignées ?

Des <div.../> alignées ? - HTML/CSS - Programmation

Marsh Posté le 01-08-2006 à 16:34:12    

avec cette css :  

Code :
  1. div.paramGroup {
  2. margin: 1em 5px;
  3. padding: 5px;
  4. border-style: solid;
  5. border-width: 1px;
  6. border-color: black;
  7. white-space: nowrap;
  8. }
  10. .paramGroupName {
  11. padding: 0 5px;
  12. margin: 0;
  13. position: relative;
  14. top: -1em;
  15. font-family: sans-serif;
  16. font-weight: bold;
  17. background-color:  rgb(245, 245, 245);
  18. color: black;
  19. text-indent: 5px;
  20. }


 pour cette page :  

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.         <title>
  8.             Insert title here
  9.         </title>
  10.         <link rel="stylesheet" type="text/css" media="screen" href="portail.css" />
  11.         <link rel="stylesheet" type="text/css" media="screen" href="param.css" />
  12.     </head>
  13.     <body class="tabContent">
  15.         <div class='paramGroup'>
  16.             <span class='paramGroupName'>Groupe 1</span><br />
  17.             Params :
  18.             <ul>
  19.                 <li>Prénom
  20.                 </li>
  21.                 <li>Nom
  22.                 </li>
  23.             </ul>
  24.             <div class='paramGroup'>
  26.                 <span class='paramGroupName'>Sous-Groupe 1</span><br />
  27.                 Params :
  28.                 <ul>
  29.                     <li>Taille en mètre
  30.                     </li>
  31.                     <li>Age
  32.                     </li>
  33.                 </ul>
  34.                 <div class='paramGroup'>
  35.                     <span class='paramGroupName'>Groupe 4</span><br />
  37.                     Params :
  38.                     <ul>
  39.                         <li>param1
  40.                         </li>
  41.                         <li>param2
  42.                         </li>
  43.                     </ul>
  44.                 </div>
  45.             </div>
  46.         </div>
  48.         <div class='paramGroup'>
  49.             <span class='paramGroupName'>Groupe 2</span><br />
  50.             Params :
  51.             <ul>
  52.                 <li>Ca va ?
  53.                 </li>
  54.                 <li>J'accepte
  55.                 </li>
  56.             </ul>
  57.         </div>
  59.     </body>
  60. </html>


je place des div. Mais elles sont en colonnes. J'ai essayé d'ajouter un "display: inline;" et la, c'est le drame... pas moyen de les aligner ?
 
merci de votre aide.


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 01-08-2006 à 16:34:12   

Reply

Marsh Posté le 01-08-2006 à 17:01:21    

si tu veux mettre groupe1 a coté de groupe2 il va falloir mettre une taille a tes divs en largeur puis un coup de float et c est bon
ou alors explique mieux :/

Reply

Marsh Posté le 01-08-2006 à 17:05:43    

je te remercie,  
 
float:left;
display:inline;
 
ont suffit, ça marche comme je voulais !
 
merci !


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 01-08-2006 à 17:14:54    

Tu peux aussi mettre groupe1 et groupe2 dans une autre div qui les englobent, donner une taille à ce div et ils s'alignerons automatiquement.


---------------
Si je vous ai aidé, le remerciement le plus simple serait de faire un tour sur mon site web sur les loisirs : http://lvdg.c.la ou sur mon tout nouveau site sur les mangas : www.mangakage.com :)
Reply

Marsh Posté le 01-08-2006 à 21:08:07    

ben avec la première solution, sans donner de taille, les divs s'allignent automatiquement (ie et FF) et se mettent à la bonne taille


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Sujets relatifs:

Leave a Replay

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