Alignement a la ligne des div

Alignement a la ligne des div - HTML/CSS - Programmation

Marsh Posté le 18-04-2006 à 16:13:25    

bonjour,

 

j'ai un soucis d'alignement de mes div : il s'agit d'images + texte heneres dynamiquement(php).
je veux afficher 3 div par ligne.

 


 

Code :
  1. #Business
  2. { width: 560px; margin: 10px auto; padding: 5px;   }
  3. #Business img
  4. { border: 0; }
  5. #Business .Image
  6. {
  7. width: 160px;
  8. background-color:#fff;
  9. float: left;
  10. padding-right: 8px;
  11. padding-left: 8px;
  12. display: block;
  13. }
  14. hr{ clear: both; visibility:hidden;}


 

 

le soucis est que le div num4 ne revient pas forcement à la ligne(en fonction de la taille des precedents) : il s'affiche en dessous du 3 si le 2 st plus long.

 

avez vous une idee ? (j'ai essaye avec un hr avec clear: borh, mais ca donne rien)

 

merci

Reply

Marsh Posté le 18-04-2006 à 16:13:25   

Reply

Marsh Posté le 18-04-2006 à 16:27:12    

On peu avoir les CSS des 4 div :D
 
et le code HTML généré...enfin une partie ;)

Reply

Marsh Posté le 18-04-2006 à 16:44:22    

ah ... erreur de manip, je pensais l'avoir mis :
 
  <table id="Business">
  <tr>
   <td>  <h1>Gas station life</h1>
   
   <div class="Image">
    texte1
   </div>
   <div class="Image">
    text2 test2 test2 test2
   </div>
 
   <div class="Image">
    image + text3
   </div>
   <div class="Image">
    image + text4
   </div>
   <div class="Image">
    image + text5
   </div>
 
   <div class="Image">
    image + texte6
   </div>
   <div class="Image">
     image + texte7
   </div>
   <div class="Image">
     image + texte8
   </div>
   <h1>Services</h1>
 
   
   <div class="Image">
     image + texte1
   </div>
   <hr />
</td></tr></table>

Reply

Marsh Posté le 18-04-2006 à 16:48:47    

1_ Merci de mettre entre balise [code]
 
2_ ben dis donc les 4 div ont fait des enfants...
 
3_ Mais pourquoi ce mixe de table/div qui n'a pas lui d'être.

Reply

Marsh Posté le 18-04-2006 à 16:54:12    

je n'ai pas dit que j'avais que 4 div, mais je veux afficher 3 par ligne.
 
si je met un div global à la place du tableau, ça change rien à mon probleme.

Code :
  1. <table id="Business">
  2.   <tr>
  3.    <td>  <h1>Gas station life</h1>
  4.    
  5.    <div class="Image">
  6.     texte1
  7.    </div>
  8.    <div class="Image">
  9.     text2 test2 test2 test2
  10.    </div>
  11.    <div class="Image">
  12.     image + text3
  13.    </div>
  14.    <div class="Image">
  15.     image + text4
  16.    </div>
  17.    <div class="Image">
  18.     image + text5
  19.    </div>
  20.    <div class="Image">
  21.     image + texte6
  22.    </div>
  23.    <div class="Image">
  24.      image + texte7
  25.    </div>
  26.    <div class="Image">
  27.      image + texte8
  28.    </div>
  29.    <h1>Services</h1>
  30.    
  31.    <div class="Image">
  32.      image + texte1
  33.    </div>
  34.    <hr />
  35. </td></tr></table>

Reply

Marsh Posté le 18-04-2006 à 17:11:42    

table n'a quand même rien à foutre là ;)
 
Sinon met un clear:both tout les 3 div et probléme réglé...

Reply

Marsh Posté le 18-04-2006 à 17:19:36    

merci pour ta réponse, j'ai effectue testé comme ça et ça marche.  
mais mon probleme est que tout est génére de façon dynamique, un coup il y a 4 images, un autre 2 ou 9 ... Y a t il une façon de le faire automatique ?  
(c'est vrai pour le tableau, ...)
merci

Reply

Marsh Posté le 18-04-2006 à 17:25:50    

Ben toi tu veux tout les 3 div...
 
Donc ouais ça doit pas etre dur à implémenter, un petit modulo ou autres...

Reply

Marsh Posté le 18-04-2006 à 18:24:22    

xtof, toujours la pour sauver la gente féminine :D


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 18-04-2006 à 18:29:02    

Shinuza a écrit :

xtof, toujours la pour sauver la gente féminine :D


 
Merde j'avais même pas vue....la honte sur moi... :pfff:  
 
Sinon j'aurais direct donné les réponses à ces futurs soucis.... :p  :sol:

Reply

Sujets relatifs:

Leave a Replay

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