ajustement auto zone texte CSS

ajustement auto zone texte CSS - HTML/CSS - Programmation

Marsh Posté le 10-03-2006 à 16:50:52    

Salut à tous  :hello:  
 
j'ai un souchi euh un soucis avec CSS.
 
j'ai une page produit faire en CSS qui affiche différentes zones dont une qui est la description. Le pb c'est qu'elle est parfois longue cette description et parfois courte. Donc je peux pas lui donner une taille constante
 
http://img147.imageshack.us/img147/9689/ok3sr.jpg
Ok ! :D  
 
http://img88.imageshack.us/img88/7067/tropgrand2fv.jpg
pas OK  :pfff:  
 
 
voila mon code :
 

Code :
  1. <div id="haut_produit">
  3.   <div id="haut_produit_ref">
  4.    Référence Fournisseur : <?php echo $product_info['products_model']; ?>
  5.   </div>
  7.   <div id="haut_produit_nom">
  8.    <b><?php echo $product_info['products_name']; ?></b>
  9.   </div>
  11.   <div id="produit_image">
  12.    <script language="javascript"><!--
  13.    document.write('<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), '150', '', 'class=br hspace="5" vspace="5"'); ?>');
  14.    //--></script>
  15.    <noscript>
  16.    <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], '150', '', ' class=br hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
  17.    </noscript>
  18.   </div>
  20.   <div id="produit_description">
  21.    <b>Informations sur le produit :</b><br>
  22.                 <br class=px3>
  23.                 <?php echo stripslashes($product_info['products_description']); ?>
  24.   </div>
  26.   <div id="produit_prix_HT">
  27.    <b>Prix</b> h.t. : <?php echo $products_price; ?>
  28.   </div>
  30.   <div id="produit_prix_TTC">
  31.    PRIX t.t.c. :
  33.                                <?php
  35.    $prix = $product_info['products_price'];
  37.    $tva = $product_info['products_tax_class_id'];
  39.    if($tva==2){
  40.     $products_price_ttc = $prix*1.196;
  41.    }
  42.    else if($tva==1){
  43.     $products_price_ttc = $prix*1.055;
  44.    }else{
  45.     $products_price_ttc = 0;
  46.    }
  48.    echo rounder($products_price_ttc)."€";
  50.    ?>
  51.   </div>
  53.   <div id="produit_dispo">
  54.    <?php
  55.    if($product_info['products_dispo']=='0'){
  56.     echo "<br><br><img src=\"images/bouton_rouge.gif\" align=\"absmiddle\" height=\"10\"><b><font color=\"#FF0000\" size=\"1\"> Non Dispo</font></b></center>";
  57.    }
  58.    else{
  59.     echo "<br><br><img src=\"images/bouton_vert.gif\" align=\"absmiddle\" height=\"10\"><b><font color=\"#00D400\" size=\"1\"> Dispo</font></b></center>";
  60.    }
  61.    ?>
  62.   </div>
  64.   <div id="produit_quantite">
  65.    <?php echo "Quantité " . ": " . tep_draw_input_field('cart_quantity', $pf->adjustQty(1), 'size="2"'); ?><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']); ?>
  66.   </div>
  68.   <div id="produit_achat">
  69.    <?php echo " ". tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_BUY_NOW); ?>
  70.   </div>
  71.  </div>


 
 
et mon fichier CSS :
 

Code :
  1. /* CSS Document */
  3. div#haut_produit{
  4. position:relative;
  5. left:4px;
  6. top:0px;
  7. height:25px;
  8. width:518px;
  9. background-image:url(images/barre_orange.gif);
  10. }
  12. div#haut_produit_ref{
  13. position:absolute;
  14. top:6px;
  15. left:8px;
  16. }
  18. div#haut_produit_nom{
  19. position:absolute;
  20. top:5px;
  21. left:200px;
  22. width: 311px;
  23. font-size:12px;
  24. color:#FFFFFF;
  25. }
  27. div#produit_image{
  28. position:absolute;
  29. top:50px;
  30. left:20px;
  31. }
  33. div#produit_description{
  34. position:absolute;
  35. top:40px;
  36. left:200px;
  37. color:#000000;
  38. }
  40. div#produit_prix_HT{
  41. position:absolute;
  42. top:180px;
  43. left:200px;
  44. color:#FF0000;
  45. font-size:14px;
  46. }
  48. div#produit_prix_TTC{
  49. position:absolute;
  50. top:183px;
  51. left:350px;
  52. }
  54. div#produit_dispo{
  55. position:absolute;
  56. top:202px;
  57. left:410px;
  58. width: 88px;
  59. }
  61. div#produit_achat{
  62. position:absolute;
  63. top:225px;
  64. left:285px;
  65. width:202px;
  66. }
  68. div#produit_quantite{
  69. position:absolute;
  70. top:225px;
  71. left:200px;
  72. width:150px;
  73. }


 
 
merci d'avance pour votr aide  :bounce:

Reply

Marsh Posté le 10-03-2006 à 16:50:52   

Reply

Marsh Posté le 10-03-2006 à 16:55:42    

T'as utilisé des positions absolues, ce qui cause tout ça. Un élément en position absolue va sortir du flux, et du coup y'a pas moyen de pousser ce qu'il y a en dessous... Utilise plutôt des float

Reply

Marsh Posté le 10-03-2006 à 17:01:05    

c'est à dire ? au lieu de position:absolute je mets quoi ?
 
http://img96.imageshack.us/img96/9940/position5jd.png

Reply

Marsh Posté le 11-03-2006 à 00:03:15    

Tu n'utilises pas de position du tout :D Il faut quelque chose qui conserve le flux. Donc laisser les éléments comme ça, et jouer avec des floats

Reply

Marsh Posté le 13-03-2006 à 09:52:01    

J'ai enlevé tout les "position" et mis des float:left
 
les élements se mettent bien les uns après les autres et la taille sajuste donc bien automatiquement :
 
http://img216.imageshack.us/img216/964/avecfloat9ht.jpg
 
 
par contre j'arrive pas à les placer comme je veux (je joue avec les top:??px et left:??px) mais il ne bouge pas
 
 :(  :(

Reply

Marsh Posté le 13-03-2006 à 11:25:08    

bon j'ai réussi à me dépatouillé avec les margin-top et margin-letf mais bon sous ie et ff ça rend pas la même chose
 
galère  :(  
 
je sens que malheureusement pour cette fiche je vais repasser en mode tableau au moins y avait pas de soucis d'affichage  :whistle: (je sais c po bien)

Reply

Sujets relatifs:

Leave a Replay

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