Forum osCommerce-fr > [Resolut] Caler les liens dans mon header

jolilo

1 Jun 2008, 15:22

Bonjour,

alors je poursuis mes recherches.
je souhaite caler mes liens dans le header pour que mes images transparente soitent calées sur les textes de mon header (copte, accueil, panier...).Or je seche dans le smodifs.
je viens de regarder avec namowebeditor comment ça marche mais je n'arrive pas à decaler mes liens vers les bas et vers la droite.
J'ai recherché sur le net les codes php mais ce que je souhaite faire est tellement simple que je ne trouve que des script.
je veux connaitres les codes pour bouger tout ça.
il me semblait que align="" permettait de bouger à droite ou à gauche mais là???
il me manque le code pour bouger vers le bas (j'ai essayé avec cellpadding et cellspacing mais c'est pas ça non plus)

je laisse mon bout de code où j'essaie de modifier tout cela.

si vous avez des sites ou des codes.

merci d'avance

Code

<table class="fond" width="100%" border="0" cellspacing="0"  cellpadding="0"><tr><td align="center" valign="top">
<table border="0" align="center" width="950" cellspacing="0" cellpadding="0" height="100%">
    <tr class="header" height="20">
        <td align="left"  valign="bottom" height="20">
            <table border="0" cellpadding="0" cellspacing="10" >
                <tr>
                    <td width="30"><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>'; ?></td>
                </tr>
                            <tr>
                    <td width="30"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>'; ?></td>
                </tr>
                            <tr>
                    <td width="20" border="0"><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?></td>
                </tr>
                            <tr>
                                <td width="20"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'.tep_image(DIR_WS_IMAGES . 'accueil.gif', 'http://www.jolilola.com') . '</a>'; ?></td>
                            </tr>
                            <tr>
                                <td width="20"><?php echo '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">'.tep_image(DIR_WS_IMAGES . 'contact.gif', '') . '</a>'; ?></td>

                            <td width="500"></td>
  </tr>
</table>

<table border="0" width="950" cellspacing="0" cellpadding="0" class="headerNavigation">
  <tr height="20">
    <td  class="headerNavigation" height="30"> <?php echo $breadcrumb->trail(' » '); ?></td>
  </tr>
</table>

Travis

1 Jun 2008, 18:27

Salut,

J'ai un peu de mal à comprendre ce que tu veux faire exactement mais la construction de tes tables
est étonnante. (un peu trop de tables imbriquées inutilement)
Montre nous un exemple de ce que tu veux faire avec un lien ou une capture.

Pour les marges internes utilise padding ou pour les marges externes margin

Cdt,

jolilo

1 Jun 2008, 19:50

Alors voilà une capture:

ce sont les distances a et b que je veux modifier.
J'ai cree des images transparente pour chaque lien. Quand on passe dessus on peut cliquer sur le lien.
Or le cadre de ces images est trop haut et trop à gauche de mon header.
je cherche à ce que ces images se calent exactement au dessus de mes icones mon panier, mon compte...

j'espere que c'est plus claire comme cela

merci

PS: pour le code, je l'ai repiqué sur mon premier site dont je n'ai rien touché au niveau graphique, donc je débute de ce côté là.

Travis

1 Jun 2008, 20:44

Le plus simple serait de créer une balise <td> qui contient ton background
Par exemple pour une largeur de 1000px

Code

Crée ensuite plutot 5 boutons que des images transparentes supperposées par des liens
ca sera moins laborieux.

Insere un bloc div conteneur entre tes balises <td> et</td> de la largeur et hauteur des 5 boutons
et soigne le positionnement avec css.
Place tes 5 boutons dans cette balise div et tout sera ok.

jolilo

2 Jun 2008, 20:07

Merci travis

alors j'ai fait un div:

Code

<table class="fond" width="100%" border="0" cellspacing="0"  cellpadding="0"><tr><td align="center" valign="top">
<table border="0" align="center" width="950" cellspacing="0" cellpadding="0" height="100%">
    <tr class="header" height="20">
        <td align="left"  valign="bottom" height="20">
            <table border="0" cellpadding="0" cellspacing="10" >
                <div class="conteneur">
<tr>
                    <td><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'panier.gif', HEADER_TITLE_CART_CONTENTS) . '</a>'; ?></td>
</tr>
<tr>
                    <td><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'compte.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>'; ?></td>
</tr>
<tr>
                    <td ><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'commander.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?></td>
</tr>
<tr>
                    <td><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'.tep_image(DIR_WS_IMAGES . 'accueil.gif', 'http://www.jolilola.com') . '</a>'; ?></td>
</tr>
<tr>
                    <td><?php echo '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">'.tep_image(DIR_WS_IMAGES . 'contact.gif', '') . '</a>'; ?></td>
</tr>
                    </div>

</table>

<table border="0" width="950" cellspacing="0" cellpadding="0" class="headerNavigation">
  <tr height="20">
    <td  class="headerNavigation" height="30"> <?php echo $breadcrumb->trail(' » '); ?></td>
  </tr>
</table>

et mon css:

Code

#conteneur {
     position: absolue;
     width: 10px;
     height:5px;
     }

j'arrive à caler en hauteur mais pas de gauche à droite.

jolilo

2 Jun 2008, 20:44

bon on oublie ce que j'ai fait au dessus...je le laisse pour ceux qui veulent voir ce qu'il ne faut pas faire...

et mon resultat qui marche:

Code

<div class="conteneur" width= 200px" height="150px">

                    <div class="bloc"><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'panier.gif', HEADER_TITLE_CART_CONTENTS) . '</a>'; ?></div>


                    <div class="bloc1"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'compte.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>'; ?></div>


                    <div class="bloc1"><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'commander.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?></div>


                    <div class="bloc1"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">'.tep_image(DIR_WS_IMAGES . 'accueil.gif', 'http://www.jolilola.com') . '</a>'; ?></div>


                    <div class="bloc1"><?php echo '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">'.tep_image(DIR_WS_IMAGES . 'contact.gif', '') . '</a>'; ?></div>

                    </div>

et mon css

Code

#conteneur {
     position: relative;
     width:50px;
     height:0px;
     }

.bloc {
    margin-top: 10px;
    margin-left: 50px
     }

.bloc1 {
    margin-top: 5px;
    margin-left: 50px
     }

voilà

encore merci

pour le css et les div un peu de tuto et c'est parti..

merci encore