28201 sujets

CSS et mise en forme, CSS3

Pb Layer CSS sous IE

Salut tout le monde

Bon voila, j ai une table assez simple du style:


<table>
  <tr>
     <td valign="top" class="main">
<a href="http://www.eboutik.net/natural-mother-pearl-earring-p-909.html">
<img src="images/eBoutik/E2043_thumbnail.jpg" width="72" height="100" border="0" alt=" Natural Mother of Pearl Earring " title=" Natural Mother of Pearl Earring "></a>
</td>
</tr>
</table>


Je voudrais simplement mette une petite icon en overlay en haut a gauche de l'image qui est dans mon TD.
Pour se faire j ai fait ca:


<table>
  <tr>
     <td valign="top" class="main">
<div id=layer1 style="position:relative; top:0; left:0; width:1px; height:1px; z-index:10;">
<img src="templates/eBoutik/images/buttons/english/icon_newarrival.gif" width="28" height="18" border="0" alt=" New " title=" New ">
</div>
<a href="http://www.eboutik.net/natural-mother-pearl-earring-p-909.html">
<img src="images/eBoutik/E2043_thumbnail.jpg" width="72" height="100" border="0" alt=" Natural Mother of Pearl Earring " title=" Natural Mother of Pearl Earring "></a>
</td>
</tr>
</table>


Ce code marche tres bien sous Firefox, malheureusement sous IE au lieu de faire un overlay avec l icon il l a met au dessus, comme ci IE n arrivait pas a mixer div et table Smiley decu

Un petit coup de pouce dans la bonne direction ne serait pas de refus Smiley smile

La page en question est visible sur *hhtp://www.eboutik.net/products_new.php

Merci !
Personne pour me dire ce qui ne va pas ? je me suis appercu apres coup que j aurais mieux fait de mettre ca dans la section CSS, alors si un modo pouvait deplacer mon post.
Bonjour,

Je déplace dans le salon CSS.

@Phocea

Il te faut un peut de patience, pour te répondre correctement il faut aller voir ton code et éventuellement le tester.

Le soucis c'est que le code produit par oscommerce (qui est apparemment le générateur) est une bouillie indigeste avec un petit record puisqu'on compte pas loin de 50 tables par pages et 120 erreurs de code HTML dont certaines en rapport avec la structure influent éventuellement sur des propriétés de positionnement.

Par ailleurs, je n'ai même pas été capable de trouver l'extrait de code dont tu parles.

Jean-pierre
Merci de l'avoir deplace.

En fait le code exact pour ceux qui on OscOmmerce est dans product_new.php et je suis entirement d'acord avec toi que c'est vraiment le foutoir dans ce code.
Une version CSS est cense sortir bientot, j'attend ca avec impatience.

Voila le code exact dans la page php, je cherche uniquement a rajoute l'icone "new" sur les articles recemment ajoutes:


          <tr>
           <td width="<?php echo SMALL_IMAGE_WIDTH + 10; ?>" valign="top" class="main">
    <?php 
     // added for New Product Icon contribution
     // convert times to unix timestamp for comparison
     //  2592000 = 30 days in the unix timestamp format
       if ( ($today_time - strtotime( $products_new['products_date_added'] ) ) < 2592000)      {
	echo '<div id="icon" style="position:relative; top:0; left:0; width:1px; height:1px; z-index:10;">';
	echo tep_image_button('icon_newarrival.gif', TEXT_ICON_NEW_PRODUCT); 
	echo '</div>';
       } 
     // end addition New Product Icon contribution
    ?>

<?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products_new['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; ?>
</td>


Je teste ca dans un fichier separes mais meme resultat Smiley decu :

<HTML>
  <HEAD>
    <TITLE>Overlay Picture</TITLE>
  </HEAD>
  <BODY>
 
<table>
  <tr>
       <td valign="top">
        Juste du texte pour verifier la position dans la table
  </td>
  </tr>
  <tr>
    <td valign="top">
    <DIV id="iconnew" style="position:relative; top:0; left:0; width:1px; height:1px; z-index:10;">
         <img src="http://www.eboutik.net/templates/eBoutik/images/buttons/english/icon_newarrival.gif" width="28" height="18" border="0" alt=" New " title=" New ">   
    </DIV>
      <IMG src="http://www.eboutik.net/images/eBoutik/E2043_thumbnail.jpg" alt="Natural Mother of Pearl Earring" >
</td>
</tr>
</table>
  </BODY>
</HTML>
Bonjour,
Ceci semble fonctionner :


<html>
  <head>
    <title>Overlay Picture</title>
  </head>
  <body>
<table>
  <tr>
       <td valign="top">
        Juste du texte pour verifier la position dans la table
  </td>
  </tr>
  <tr>
    <td valign="top">
      <img style="display:block;position:relative;top:18px;margin-top:-18px;left:0; z-index:1;" src="http://www.eboutik.net/templates/eBoutik/images/buttons/english/icon_newarrival.gif" width="28" height="18" border="0" alt=" New " title=" New ">   
      <img src="http://www.eboutik.net/images/eBoutik/E2043_thumbnail.jpg" alt="Natural Mother of Pearl Earring" >
</td>
</tr>
</table>
  </body>
</html>


A vérifier au find fond de la jungle oscommerce Smiley cligne

Jean-pierre
Modifié par jpv (14 Nov 2005 - 14:53)
Et bien merci ca a l'air de marcher en local, plus qu a voir sous OSC.

Par contre pour l'explication, pourquoi utiliser display:block; ?
c'est quand meme bizarre que pour que IE comprenne le truc il faille lui donner un offset top positif et de le virer avec margin-top negatif quand meme !! Bug ou un autres trucs que je comprends pas ?

De plus ce code fonctionne en se mettant en position relative par rapport au debut du TD, mais peut on faire en prenant comme base l'image elle meme ?

Car par exemple si on veut par la suite centrer l'image principale dans la TD, l'icone se centre elle aussi si tu vois ce que je veux dire ?
Modifié par Phocea (14 Nov 2005 - 15:56)
Bonjour,

display:block pour pouvoir affecter des propriétés de positionnement à img qui est une boite en ligne, ce qui évite d'avoir recours à un div fonctionnellement inutile et pertubant.

Le margin-top negatif n'est pas un contournement de bug, il corrige le positionnement relatif qui place l'image new par rapport à son contener, en locurrence td.

C'est une pure commodité qui évite de devoir positionner les deux images.

Jean-pierre
Desoel en fait j avais pas vu que tu avais vire le div Smiley smile je comprend donc mieux le block maintenant.

Je remets ici l'exemple que je n arrive pas a contourner dans l'autre sens, ie en mettant l'image principale en premier et en cherchant a positionner l'image icone par rapport a la position de celle ci.
Car si j affiche le tout dans un TD qui centre les images, les 2 sont centres independemment, je ne peux donc plus utiliser une position relative au conteneur TD ??

je pense qu'il faut mettre les 2 images dans un contener a part pour faire ca, mais si je met un div autour il prend la taille du TD (et je ne connais pas a l avance la largeur de la photo...)
Sujet clos
Aller à