ajustement auto zone texte CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : ajustement auto zone texte CSS

seb306bzh

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

Ok !

pas OK :pfff:

voila mon code :

Code :

<div id="haut_produit">
<div id="haut_produit_ref">
Référence Fournisseur : <?php echo $product_info['products_model']; ?>
</div>
<div id="haut_produit_nom">
<b><?php echo $product_info['products_name']; ?></b>
</div>
<div id="produit_image">
<script language="javascript"><!--
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"'); ?>');
//--></script>
<noscript>
<?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>'; ?>
</noscript>
</div>
<div id="produit_description">
<b>Informations sur le produit :</b><br>
<br class=px3>
<?php echo stripslashes($product_info['products_description']); ?>
</div>
<div id="produit_prix_HT">
<b>Prix</b> h.t. : <?php echo $products_price; ?>
</div>
<div id="produit_prix_TTC">
PRIX t.t.c. :
<?php
$prix = $product_info['products_price'];
$tva = $product_info['products_tax_class_id'];
if($tva==2){
$products_price_ttc = $prix*1.196;
}
else if($tva==1){
$products_price_ttc = $prix*1.055;
}else{
$products_price_ttc = 0;
}
echo rounder($products_price_ttc)."";
?>
</div>
<div id="produit_dispo">
<?php
if($product_info['products_dispo']=='0'){
echo "<br><br><img src=\"images/bouton_rouge.gif\" align=\"absmiddle\" height=\"10\"><b><font color=\"#FF0000\" size=\"1\"> Non Dispo</font></b></center>";
}
else{
echo "<br><br><img src=\"images/bouton_vert.gif\" align=\"absmiddle\" height=\"10\"><b><font color=\"#00D400\" size=\"1\"> Dispo</font></b></center>";
}
?>
</div>
<div id="produit_quantite">
<?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']); ?>
</div>
<div id="produit_achat">
<?php echo " ". tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_BUY_NOW); ?>
</div>
</div>

et mon fichier CSS :

Code :

/* CSS Document */
div#haut_produit{
position:relative;
left:4px;
top:0px;
height:25px;
width:518px;
background-image:url(images/barre_orange.gif);
}
div#haut_produit_ref{
position:absolute;
top:6px;
left:8px;
}
div#haut_produit_nom{
position:absolute;
top:5px;
left:200px;
width: 311px;
font-size:12px;
color:#FFFFFF;
}
div#produit_image{
position:absolute;
top:50px;
left:20px;
}
div#produit_description{
position:absolute;
top:40px;
left:200px;
color:#000000;
}
div#produit_prix_HT{
position:absolute;
top:180px;
left:200px;
color:#FF0000;
font-size:14px;
}
div#produit_prix_TTC{
position:absolute;
top:183px;
left:350px;
}
div#produit_dispo{
position:absolute;
top:202px;
left:410px;
width: 88px;
}
div#produit_achat{
position:absolute;
top:225px;
left:285px;
width:202px;
}
div#produit_quantite{
position:absolute;
top:225px;
left:200px;
width:150px;
}

merci d'avance pour votr aide :bounce:

Publicité

FlorentG

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

seb306bzh

c'est à dire ? au lieu de position:absolute je mets quoi ?

FlorentG

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

seb306bzh

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 :

par contre j'arrive pas à les placer comme je veux (je joue avec les top:??px et left:??px) mais il ne bouge pas

seb306bzh

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)

FORUM HardWare.fr

Programmation

HTML/CSS

ajustement auto zone texte CSS

Sujets relatifs
[VBA-W]Insérer du texte après une recherche	100% de hauteur (CSS)
[HTML/CSS/Jevascript] Validation d'un site agréée Hache&Fer	Liste déroulante et champ texte activable/désactivable
[général] choix d'un langage pour un traitement de texte simple	Texte lors du survol du pointeur
Ecrire le résultat d'un script python dans un fichier texte	texte sortant dans la console ou dans l'EDI ?
[C++ débutant] Du texte en couleur dans la console ?	couleur de texte dans <option></otpion> de <select>
Plus de sujets relatifs à : ajustement auto zone texte CSS

Page générée en 0.063 secondes