osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> probleme position (taille?) de l'image
jacqueskyo
posté 9 Jul 2014, 04:29
Message #1


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 36
Inscrit : 17-January 09
Membre no 24253



Bonjour,

je ne trouve pas la raison du probleme qui m'amène
dans la page de presentation du produit ( catalog/product_info.php )
l'image bien que reduite (mais sur qu'elle base?) ecrase le texte a gauche
comment corriger ce probleme
voici l'adresse de la page http://france-inet.com/catalog/product_inf...;products_id=37

Ce message a été modifié par jacqueskyo - 9 Jul 2014, 04:29.
Go to the top of the page
 
chti_poupon
posté 9 Jul 2014, 10:54
Message #2


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



Bonjour
Comparé à une page produit du osC 2.3.4, le code html de ta page présente quelques différences.
On remarque notamment un </div> manquant après le second </ul> et avant <div style="clear:both">
ce qui pourrait être source de problème
Belle journée !
Chti poupon
Go to the top of the page
 
jacqueskyo
posté 10 Jul 2014, 01:50
Message #3


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 36
Inscrit : 17-January 09
Membre no 24253



Merci pour ces infos
ma première réaction a été de recharger le fichier d'origine de la 2.3.4 mais résultat plus d'image et un texte très bas dans la page....
et encore plus étrange quand je compare les pages (avec BBedit) il me dit que les fichiers sont identique??

titre
.
.
. (vide)
.
.
...
test sur toute la longueur du block

Ce message a été modifié par jacqueskyo - 10 Jul 2014, 02:05.
Go to the top of the page
 
chti_poupon
posté 10 Jul 2014, 09:18
Message #4


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



Je parlais simplement du code source de la page affichée, pas du php, pour la partie de page autour de la photo:
ta page :
Code
<div class="contentContainer">
  <div class="contentText">
    <div id="piGal" style="float: right;">
      <div style="text-align: center; width: 300px; display: none;" id="loading"><img src="ext/jquery/bxGallery/spinner.gif">
            </div>

        <div class="outer">
          <ul style="display: block; height: 200px; width: 204px;">
          <li style="position: absolute;">
                    <a href="http://france-inet.com/catalog/images/Produit-0296-2.jpg" target="_blank" rel="fancybox">
                    <img style="width: 204.082px; height: 200px;" src="images/Produit-0296-2.jpg" alt="" height="588" width="600"></a>
                </li>
        </ul>
              <ul style="width: 300px;" class="thumbs">
                  <li class="on" style="float: left; cursor: pointer; height: 0px;">
                      <img style="width: 0px; height: 0px;" src="http://france-inet.com/catalog/images/Produit-0296-2.jpg">
                  </li>
              </ul>

          <div style="clear:both">
      </div>
  </div>
</div>

<script type="text/javascript">

La page 2.3.4 démo :
Code
<div class="contentContainer">
  <div class="contentText">
    <div data-width="250" style="visibility: visible; width: 250px;" id="piGal">
      <div style="clear: left; display: block; overflow: hidden; height: 195px;" class="photoset-row cols-1">
                <a style="float: left; display: block; line-height: 0; box-sizing: border-box; width: 100%;" rel="pigallery" href="images/hewlett_packard/lj1100xi.gif" class="photoset-cell highres-link cboxElement"><img style="width: 100%; height: auto; margin-top: 0px;" src="images/hewlett_packard/lj1100xi.gif" alt="Hewlett Packard LaserJet 1100Xi" title="Hewlett Packard LaserJet 1100Xi" height="80" width="100">
                </a>
            </div>
        </div>
<script type="text/javascript">

J'ai réorganisé l'indentation et l'on voit clairement que l'imbrication des <div></div> est incorrecte, sans doute suite à l'ajout d'une contrib inexact(e).
Chti poupon
Go to the top of the page
 
jacqueskyo
posté 12 Jul 2014, 09:07
Message #5


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 36
Inscrit : 17-January 09
Membre no 24253



justement ce qui est etrange c est que je n'ai rien installe de particulier
a part le fait d etre en japonais j utilise normalement les fichiers d'origines sad.gif
confused.gif
Go to the top of the page
 
chti_poupon
posté 12 Jul 2014, 14:20
Message #6


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



Ce code ne correspond ni à une 2.3.1 vierge, ni à une 2.3.4 vierge: quelle est ta version, si elle n'est pas retouchée ??
L'image est anormalement positionnée en absolu par un
Code
<li style="position: absolute;">
.
Le remplacer par un simple <li> devrait aider.
Go to the top of the page
 
jacqueskyo
posté 13 Jul 2014, 05:50
Message #7


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 36
Inscrit : 17-January 09
Membre no 24253



je viens d'installer la version : osCommerce Online Merchant v2.3.3.4
et sauf les fichiers de langue je n ai pas installe de nouveaux fichiers

Mais bizarement quand je recharge le fichier (qui semble identique) l'image ne s'affiche plus

sad.gif

Go to the top of the page
 
chti_poupon
posté 13 Jul 2014, 10:12
Message #8


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



Alors, reprends la 2.3.1 et remplace la portion de code de product_info.php (à partir de la ligne 62, si rien n'est changé) par:
Code
<div class="contentContainer">
  <div class="contentText">

<?php
    if (tep_not_null($product_info['products_image'])) {
      $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

      if (tep_db_num_rows($pi_query) > 0) {
?>

    <div id="piGal" style="float: right;">
      <ul>

<?php
        $pi_counter = 0;
        while ($pi = tep_db_fetch_array($pi_query)) {
          $pi_counter++;

          $pi_entry = '        <li><a href="';

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_entry .= '#piGalimg_' . $pi_counter;
          } else {
            $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
          }

          $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
          }

          $pi_entry .= '</li>';

          echo $pi_entry;
        }
?>

      </ul>
    </div>

<script type="text/javascript">

Go to the top of the page
 
jacqueskyo
posté 14 Jul 2014, 02:09
Message #9


Ceinture blanche+ OSC
Icône de groupe

Groupe : Membres
Messages : 36
Inscrit : 17-January 09
Membre no 24253



Pas de changement,

voici le code complet de la page (au cas ou) mais je me demande si cela ne peux pas etre un probleme de CSS
-------------------------------------------------------------------------------------------------------------------

Code
<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

  Copyright © 2010 osCommerce

  Released under the GNU General Public License
*/

  require('includes/application_top.php');

  if (!isset($HTTP_GET_VARS['products_id'])) {
    tep_redirect(tep_href_link(FILENAME_DEFAULT));
  }

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

  $product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
  $product_check = tep_db_fetch_array($product_check_query);

  require(DIR_WS_INCLUDES . 'template_top.php');

  if ($product_check['total'] < 1) {
?>

<div class="contentContainer">
  <div class="contentText">
    <?php echo TEXT_PRODUCT_NOT_FOUND; ?>
  </div>

  <div style="float: right;">
    <?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?>
  </div>
</div>

<?php
  } else {
    $product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
    $product_info = tep_db_fetch_array($product_info_query);

    tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");

    if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
      $products_price = '<del>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
    } else {
      $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
    }

    if (tep_not_null($product_info['products_model'])) {
      $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';
    } else {
      $products_name = $product_info['products_name'];
    }
?>

<?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?>

<div>
  <h1 style="float: right;"><?php echo $products_price; ?></h1>
  <h1><?php echo $products_name; ?></h1>
</div>

<div class="contentContainer">
  <div class="contentText">

<?php
    if (tep_not_null($product_info['products_image'])) {
      $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

      if (tep_db_num_rows($pi_query) > 0) {
?>

    <div id="piGal" style="float: right;">
      <ul>

<?php
        $pi_counter = 0;
        while ($pi = tep_db_fetch_array($pi_query)) {
          $pi_counter++;

          $pi_entry = '        <li><a href="';

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_entry .= '#piGalimg_' . $pi_counter;
          } else {
            $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
          }

          $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
          }

          $pi_entry .= '</li>';

          echo $pi_entry;
        }
?>

      </ul>
    </div>

<script type="text/javascript">
$('#piGal ul').bxGallery({
  maxwidth: 300,
  maxheight: 200,
  thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
  thumbcontainer: 300,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

<?php
      } else {
?>

    <div id="piGal" style="float: right;">
      <?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image'], '', 'NONSSL', false) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
    </div>

<?php
      }
?>

<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
  cyclic: true
});
</script>

<?php
    }
?>

<?php echo stripslashes($product_info['products_description']); ?>

<?php
    $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
    $products_attributes = tep_db_fetch_array($products_attributes_query);
    if ($products_attributes['total'] > 0) {
?>

    <p><?php echo TEXT_PRODUCT_OPTIONS; ?></p>

    <p>
<?php
      $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
      while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
        $products_options_array = array();
        $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
        while ($products_options = tep_db_fetch_array($products_options_query)) {
          $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
          if ($products_options['options_values_price'] != '0') {
            $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
          }
        }

        if (is_string($HTTP_GET_VARS['products_id']) && isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
          $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
        } else {
          $selected_attribute = false;
        }
?>
      <strong><?php echo $products_options_name['products_options_name'] . ':'; ?></strong><br /><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?><br />
<?php
      }
?>
    </p>

<?php
    }
?>

    <div style="clear: both;"></div>

<?php
    if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>

    <p style="text-align: center;"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></p>

<?php
    }
?>

  </div>

<?php
    $reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and reviews_status = 1");
    $reviews = tep_db_fetch_array($reviews_query);
?>

  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary'); ?></span>

    <?php echo tep_draw_button(IMAGE_BUTTON_REVIEWS . (($reviews['count'] > 0) ? ' (' . $reviews['count'] . ')' : ''), 'comment', tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params())); ?>
  </div>

<?php
    if ((USE_CACHE == 'true') && empty($SID)) {
      echo tep_cache_also_purchased(3600);
    } else {
      include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
    }
?>

</div>

</form>

<?php
  }

  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>
Go to the top of the page
 
chti_poupon
posté 14 Jul 2014, 18:45
Message #10


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



Tu as clairement un code de 2.3.3 à différences (minimes) près:
Code
while ($pi = tep_db_fetch_array($pi_query)) {
$pi_counter++;

$pi_entry = ' <li><a href="';

if (tep_not_null($pi['htmlcontent'])) {
$pi_entry .= '#piGalimg_' . $pi_counter;
} else {
$pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
}
au lieu de
Code
while ($pi = tep_db_fetch_array($pi_query)) {
$pi_counter++;

$pi_entry = '        <li><a href="';

if (tep_not_null($pi['htmlcontent'])) {
$pi_entry .= '#piGalimg_' . $pi_counter;
} else {
$pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image'], '', 'NONSSL', false);
}


Ce qui ne change rien si tu n'utilises pas https !

Qu'as tu donc changé dans le css pour modifier la position de l'image ?

Chti poupon
PS: merci de mettre les portions de code en exergue en utilisant le bouton code.
Peux-tu éditer ton message pour enlever les parties "mortes" de ton code. Merci
Go to the top of the page
 
chti_poupon
posté 15 Jul 2014, 14:26
Message #11


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



Excuses, ton css est facile à obtenir dans stylesheet.css en ligne:
A part la hauteur de l'entête, rien n'est changé.
C'est donc la taille de l'image qui est en cause.
Quel est ton réglage dans admin - configuration - image ?
Go to the top of the page
 
kikebou
posté 15 Jul 2014, 17:56
Message #12


Ceinture jaune OSC
Icône de groupe

Groupe : Membres
Messages : 49
Inscrit : 17-September 07
Membre no 19080



J'ai le même problème. La taille de l'image semble verrouillée et écrase complètement le texte.

Dans l'admin, j'ai mis hauteur image d'en-tête à 175 + redimensionner image. J'ai déjà essayé en modifiant les valeurs (par exemple, retirer la hauteur d'image et mettre largeur 50) mais cela n'a rien changé à l'affichage.

Je n'ai changé qu'une seule chose dans le fichier "product info", j'ai effacé la ligne "echo= product-price"

Il y a l'option de redimensionner chaque image avec gimp mais cela va me prendre un temps fou (plus de 300 images). Je suis en train de refaire toute ma boutique car j'étais encore à une vieille version de 2007 et mon hébergeur passe en php5 uniquement (j'ai téléchargé 2.3.1).

Au cas où je dois passer par gimp, quelle est la taille idéale?

merci d'avance
Go to the top of the page
 
Bonbec
posté 15 Jul 2014, 22:35
Message #13


Ceinture marron OSC
Icône de groupe

Groupe : Modérateurs
Messages : 1543
Inscrit : 30-May 06
Lieu : Vichy (03)
Membre no 10583



Bonsoir,
Citation (jacqueskyo @ 9 Jul 2014, 04:29) *
je ne trouve pas la raison du probleme qui m'amène
dans la page de presentation du produit ( catalog/product_info.php )
l'image bien que reduite (mais sur qu'elle base?) ecrase le texte a gauche
comment corriger ce probleme

Je me trompe peut-être mais j'ai remarqué que dans le code de ta page, tu as 2 fois une balise <h1>, une pour le nom de l'article et l'autre pour le prix.
Ce qui fait 2 lignes, l'une en dessous de l'autre.
A l'aide de webdeveloper de FireFox, on voit bien que le bord de ta div de l'image se place juste en bas à gauche du <h1> du prix.
C'est, à mon avis, ce qui décale ton image vers la gauche en comprimant le texte.

Pour voir si c'est bien cela, essaye de regrouper provisoirement tes 2 balises <h1> dans une seule pour voir si cela résout le problème de l'image.

Citation (kikebou @ 15 Jul 2014, 17:56) *
... Je suis en train de refaire toute ma boutique car j'étais encore à une vieille version de 2007 et mon hébergeur passe en php5 uniquement (j'ai téléchargé 2.3.1). ...
Ma boutique MS2 tourne en PHP 5.4 ... Après avoir testé la version 2.3.3.4 et vu le travail qu'il me fallait faire dessus pour avoir les mêmes fonctionnalités que sur ma MS2 bidouillée, j'ai finalement préféré passer une semaine à la rendre ma MS2 apte au PHP 5.4.
J'en ai sué mais le résultat en vaut la peine (pour moi du moins).


--------------------
Config 1 en live : Osc 2.2 très fortement modifié ... UTF-8 et Php 5.4.
Contribs installées : down_for_maintenance_v 2.3 | Estimated Shipping v1.5 | imprint_1_3_5 | low_stock_report_v2.04 | visible_countries_1.2b | Products Tabs | shoppingCart_cleanup_v1.01.0 | + trop de bidouilles persos pas très OsCommerce (erreurs de jeunesse)
Config 2 en local avec UwAmp : Osc Phoenix
Go to the top of the page
 
chti_poupon
posté 16 Jul 2014, 11:42
Message #14


Ceinture noire OSC
Icône de groupe

Groupe : TechDev
Messages : 2757
Inscrit : 9-September 08
Lieu : Douai
Membre no 22915



@Bonbec
Merci de ton intervention, mais hélas, la double ligne <h1> est d'origine dans la 2.3.3 et le 2.3.4...
Avec le même outil, j'ai constaté que le clic sur CSS - Utiliser le mode "border-box" met l'image en place.
Malheureusement, c'est en dehors de mon domaine d compétence: si tu peux traduire...
Chti poupon
Go to the top of the page
 
kikebou
posté 16 Jul 2014, 13:35
Message #15


Ceinture jaune OSC
Icône de groupe

Groupe : Membres
Messages : 49
Inscrit : 17-September 07
Membre no 19080



J'ai trouvé:

toutes mes images de produits étaient dans le colonne "products-image" de la table "products" au lieu d'être dans la table "products-image"
Go to the top of the page
 

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 28th March 2024 - 19:09
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)