Aide - Recherche - Membres - Calendrier
Version complète : [Résolu] Header du forum : je l'aime ! ^^
Forum osCommerce-fr > Adapter OsCommerce MS2 > Design
milerwan
Bonjour à tous,

Ces temps-ci je travaille sur mon header et après avoir essayer de comprendre comment celui-ci fonctionné je viens de m'apercevoir que celui du forum correspond exactement aux impératifs qu'il me faut solutionner :
- logo (avec fond) en position gauche
- logo de fond "extensible" au centre wub.gif
- icones graphiques avec liens en partie droite

Le noeud du problème réside comme vous l'aurez compris dans le logo de fond "extensible" c'est à dire qui se répète au grès du redimensionnement de la fenêtre et ainsi permet n'importe quel type d'affichage.

Bon je sais qu'on est dans le domaine de l'open source ici mais demander le code du header serait un peu tiré par les cheveux... non?
Aussi pourriez-vous au moins m'indiquer la ruse qu'il faut appliquer pour que tout ceci fonctionne.

Merci et bonnes fêtes de fin d'années.
xaglo
regarde le code source de la page, tu auras ta solution:
CODE
    <div id="logostrip"><a href="http://www.oscommerce-fr.info/forum/index.php?"><!--ipb.logo.start--><!--ipb.logo.end--></a>
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody><tr>
          <td height="96" width="371"><a href="http://www.oscommerce-fr.info/forum/index.php?"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_osc.gif" style="vertical-align: top;" alt="osCommerce France : Accueil Forum" border="0"></a></td>
          <td height="96" width="100%"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_fond.gif" style="vertical-align: top;" border="0"></td>
          <td height="96" width="27"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_milieu.gif" style="vertical-align: top;" border="0"></td>
          <td height="96" width="45"><a href="http://www.oscommerce-fr.info/redirect.php?type=portal"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_accueil.gif" style="vertical-align: top;" alt="Portail osCommerce France" border="0"></a></td>
          <td height="96" width="41"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_forum_survol.gif" style="vertical-align: top;" border="0"></td>
          <td height="96" width="49"><a href="http://www.oscommerce-fr.info/redirect.php?type=bank"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_banques.gif" style="vertical-align: top;" alt="Les modules bancaire" border="0"></a></td>
          <td height="96" width="42"><a href="http://www.oscommerce-fr.info/redirect.php?type=faq"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_faq.gif" style="vertical-align: top;" alt="Réponses aux questions" border="0"></a></td>
          <td height="96" width="45"><a href="http://www.oscommerce-fr.info/redirect.php?type=contact"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_contact.gif" style="vertical-align: top;" alt="Nous contacter" border="0"></a></td>
          <td height="96" width="183"><a href="http://www.icodia.com/"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_icodia.gif" style="vertical-align: top;" border="0"></a></td>
        </tr>
      </tbody></table>
    </div>


C'est la celulle avec une image de fond qui se répète qui donne l'illusion du "logo qui s'agrandit"
CITATION
<td height="96" width="100%"><img src="http://www.oscommerce-fr.info/forum/style_images/2/logo_fond.gif" style="vertical-align: top;" border="0"></td>
milerwan
Merci pour ce code mais je n'arrive pas à l'intégrer correctement au mien, l'effet d'étirement n'est pas pris en compte.
voici ma base de header.php :
CODE
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="header">
    <td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'logo.gif', 'Home page') . '</a>'; ?></td>
    <td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>&nbsp;&nbsp;</td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="headerNavigation">
    <td class="headerNavigation">&nbsp;&nbsp;<?php echo $breadcrumb->trail(' &raquo; '); ?></td>


J'ai essayé ceci mais sans succès :
CODE
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="header">
    <td width="481" valign="left"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'logo.gif', 'Home page') . '</a>'; ?></td>
    <td width="100%"><img src='images/fond_logo.gif'></td>
    <td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>&nbsp;&nbsp;</td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="headerNavigation">
    <td class="headerNavigation">&nbsp;&nbsp;<?php echo $breadcrumb->trail(' &raquo; '); ?></td>


Puis-je adapter le code du forum au mien?
milerwan
J'ai essayé d'adapter mon code à la forme du header du forum et ça donne ceci mais toujours pas d'étirement : cry.gif
CODE
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="481" height="144"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'logo.gif', 'Home page') . '</a>'; ?></td>
          <td width="100%" height="144"><img src='images/fond_logo.gif' style='vertical-align:top' border='0' /></td>
          <td width="27" height="144"><img src='images/fond_logo_renseignements.gif' style='vertical-align:top' border='0' /></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="headerNavigation">
    <td class="headerNavigation">&nbsp;&nbsp;<?php echo $breadcrumb->trail(' &raquo; '); ?></td>


Qu'est-ce qui peut bien clocher...? unsure.gif

NB : Je suis en MS2.2
milerwan
Je me souviens avoir installer une ligne de code donnée dans la FAQ qui visait à préserver les ratios d'images.
Cette modification serait-elle à l'origine du non-étirement de mon image?
xaglo
bon allez, c'est Noël, je vais répondre à tes questions, bien que ce ne soit pas le lieu ici de répondre à des questions de html de base, il y a des sites mieux documentés pour cela…

Comme je te disais, la réponse à ta question initiale est dans le code source de la page générée: la technique pour faire un logo "étirable" avec les vieilles techniques de mise en page en <table> (les puristes css vont hurler laugh.gif), est de créer un cellule avec une image de fond de 1px de large et de la répéter pour remplir la cellule.

Regarde l'image : http://www.oscommerce-fr.info/forum/style_...2/logo_fond.gif ce n'est pas le "logo" qui s'étire!! Lui, il reste sagement rangé à gauche, c'est juste un habillage pour remplir l'espace jusqu'à la prochaine image de fin http://www.oscommerce-fr.info/forum/style_...logo_milieu.gif

bon code
milerwan
Merci, j'ai bien compris la technique qui s'apparente à celle utilisée pour les header et footer des boxes seulement dans mon cas ça ne se "déclanche" pas.

Mes lignes de codes sont elles correctes selon toi?

PS : Père-Noël je t'ai reconnu ! biggrin.gif
xaglo
essaye de mettre
CODE
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="481" height="144"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'logo.gif', 'Home page') . '</a>'; ?></td>
          <td width="100%" height="144" background='images/fond_logo.gif'>&nbsp;</td>
          <td width="27" height="144" background='images/fond_logo_renseignements.gif'>&nbsp;</td>
        <tr>
      </table>
avec un image "fond_logo.gif" correcte (1px de large)

mais je le répète, tu vas faire hurler les afficionados CSS wink.gif
milerwan
Wahooooouuuuuuu !!!!!!!!!!!!!!!!!! blink.gif

Ben ça c'est un sacré cadeau de Noël que tu me fais là xaglo.
Merci infiniement, grâce à ton aide je vais enfin pouvoir avancer. wink.gif

Vraiement génial, je ne connaissais pas l'attribu "background", merci encore !!!! biggrin.gif

PS : Désolé pour ce retard de réponse mais je viens juste de te lire à l'instant car j'étais absorbé par la mise en forme de mon panier...
milerwan
Je mets à disposition mon code du header qui permet d'avoir un affichage optimisé pour des résolutions de 1280x1024 et de 800x600.
Celui-ci reprend les icônes du compte, panier et autre commande d'origine.

Attention toutefois si vos images type logo ou intermédiaires sont plus petites alors il faudra corriger certains pourcentages.
Merci encore à xaglo pour son aide précieuse. wink.gif
CODE
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="481" height="144" align="left" valign="top"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'logo.gif', 'Home page') . '</a>'; ?></td>
          <td width="30%" height="144" align="center" valign="bottom" background='images/fond_logo.gif'></td>
          <td width="328" height="144" align="center" valign="bottom"><img src='images/fond_logo_renseignements.gif'></td>
          <td width="5%" height="144" align="center" valign="bottom" background='images/fond_logo.gif'></td>
          <td align="center" valign="bottom"><img src='images/fond_logo.gif' width="10" height="144"></td>
       <td align="center" valign="bottom" background='images/fond_logo.gif'><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>'; ?></td>
          <td align="center" valign="bottom"><img src='images/fond_logo.gif' width="10" height="144"></td>
      <td width="5%" height="144" align="center" valign="bottom" background='images/fond_logo.gif'><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>'; ?></td>
          <td align="center" valign="bottom"><img src='images/fond_logo.gif' width="10" height="144"></td>
    <td width="30" height="144" align="center" valign="bottom" background='images/fond_logo.gif'><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?></td>
          <td align="right" valign="bottom"><img src='images/fond_logo.gif' width="10" height="144"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="headerNavigation">
    <td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2024 Invision Power Services, Inc.