Discussion :

[kervano]

Bonsoir,

Je souhaiterai avoir une bannière (qui comprends le logo) qui puisse s'adapter à tout type de résolution...
J'ai cru comprendre en regardant qu'il fallait découper la bannière en 3...

1/ Le logo

2/ La bannière du milieu

3/ La bannière de droite



Quel modif dois je faire au niveau de mon fichier header.php (c'est un site oscommerce) ?
J'ai commencé à découper ma bannière en 3... j'imagine que la bannière du milieu s'élargit et se répète au fur et a mesure que la résolution grandi...

voici le code de mon fichier header.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 . 'logoaboutique.gif', 'logo') . '</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="4">
 <tr class="headerNavigation">
   <td class="headerNavigation" align="left" >
     <?php echo $champ_recherche . ' <input type="hidden" name="search_in_description" value="1" CHECKED>' . tep_image_submit('button_loupe.gif', '', 'style="vertical-align:bottom"'); ?></form></td>
   <td class="headerNavigation">&nbsp;&nbsp;<?php echo $breadcrumb->trail(' &raquo; '); ?></td>
 
 
   <td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a> &nbsp;|&nbsp; <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> &nbsp;|&nbsp; <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> &nbsp;|&nbsp; <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a> &nbsp;&nbsp;</td>
 </tr>
</table>

On m'a dit de faire un tableau 3 T mais je n'y connais rien, en tout cas je sais simplement que tout ce situe dans le code que je viens de vous passer...

[blueice]

Tu ne dois pas donner le code PHP, mais le code HTML interprété.
Lance la page dans ton navigateur, affiche le code source et donne le nous...

[kervano]

Bonjour,

L'affichage de mon code source fait 40 000 caractère;

Ci-joint l'adresse de mon site :

[kaiser59]

Salut,

Personnellement, je pense qu'il te serait plus simple d'utilisé les div plutot que les td

ainsi tu aurais, dans ta css externe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body
{
margin: 0;
}
 
div#logo
{
float:left;
width:20%; /* pour étendre selon l'affichage du navigateur */
height:115px; /* pour fixer la hauteur */
background: blue url(logo.jpg);
}
 
div#header
{
float:left;
width:60%; /* pour étendre selon l'affichage du navigateur */
height:115px; /* pour fixer la hauteur */
background: yellow url(img.jpg);
}
 
div#header_droite
{
float:left;
width:20%; /* pour étendre selon l'affichage du navigateur */
height:115px; /* pour fixer la hauteur */
background: pink url(img.jpg);
}

puis dans ta page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="logo">logo</div>
<div id="header">milieu</div>
<div id="header_droite">droite</div>

C'est plus propre comme cela et au moins sa t'évite d'utliser les tables

++

[kervano]

Désolé d'être nul à ce point là, mais je dois faire quoi et dans quel fichier?
j'utilise un oscommerce... je sais que le logo est contenu dans fichier include\header.php

[blueice]

Mais quel est le problème, ton bandeau est très bien comme ca...
Tu as un fond de couleur qui remplit le reste du bandeau une fois l'image terminée.
Je trouve ca très propre.

[kervano]

Bonsoir,

En fait je suis en train de refaire completement le design de mon site... et j'ai concus une bannière en dégradé... le pb justement du dégradé, c'est que je ne peux pas l'appliquer à droite... si tu remarques bien à droite, j'ai appliqué une couleur uniforme.

[kaiser59]

Salut,

Ok, j'ai vue mais dans ce cas tu n'avais pas à ajouter un td il te suffit tout simplement de mettre dans ta css :
img
{
width:100%;
height:115px;
}

mais pour cela tu ne devra plus qu'avoir qu'un seul td afin de faciliter les choses.

++

[ghost-x]

Mais quel est le problème, ton bandeau est très bien comme ca...
Tu as un fond de couleur qui remplit le reste du bandeau une fois l'image terminée.
Je trouve ca très propre.

A la limite pour vraiment bien faire tu met un degradé en fond et ca passeras encore plus inapercue.

En tout cas le site et propre, c'est du beau

[blueice]

Mais il suffit de faire un contour progressif sur la fin de ton image dans Photoshop et de remplir avec la couleur verte du fond, tu ne peux pas faire de dégradé transparent pour des raisons de compatibilités.
Ensuite tu fais une div :

#bandeau {
background-image: tonvert url(tonimage.jpeg) no-repeat 0 0;
}

tonvert bien sûr représente ta couleur verte.

C'est tout :-D