aiuto a posizionare immagine stylesheet

deltabiri · Messaggio da **deltabiri** » 02/09/2009, 16:51

stavo cercando di fare un piccolo menu nell'header inserendo dei bottoni aggiuntivi (premetto di aver preso spunto da un'altro sito) non riesco a inserire 2 immagini decorative all'inizio e alla fine dei bottoni.
nell'header ho messo cosi:

Codice: Seleziona tutto

<!-- INIZIO BOTTONI DESTRA -->
   <div id="proinizio"><img src="http://www.tentazionishop.it/images/grafica/inizio.gif"  height="31" /></div>
   <div id="nav"><ul>
   <li><a href="http://www.tentazionishop.it/shipping.php"><span>Traking SDA</span></a></li>
   <li><a href="http://www.tentazionishop.it/conditions.php"><span>Condizioni</span></a>  </li>
   <li><a href="http://www.tentazionishop.it/pagamenti.php"><span>Pagamenti</span></a></li>
   <li><a href="http://www.tentazionishop.it/faq.php"><span>Domande utili</span></a></li>
   </ul> 
   </div><div id="profine"><img src="http://www.tentazionishop.it/images/grafica/fine.gif"  height="31" /></div>
<!-- FINE BOTTONI DESTRA -->

le immagini sarebbero Immagine

e

mentre nello stylesheet.css cosi:

Codice: Seleziona tutto

/*INIZIO BOTTONI NAVIGAZIONE A DESTRA */
#proinizio{padding-left: 99px; height:28px; float:left; } 
#profine{padding-right:-50px; height:28px; float:right; } 
#nav{padding-right:80px; height:28px; float:right; } 
#nav ul{ float:right; height:25px; margin:0; padding:0;} /*height:25px*/
#nav li{ height:25px; float:left; margin-right:1px; list-style:none;}
#nav a{ background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 0 -50px; float:left;}
#nav a span{ cursor:pointer; background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 100% -75px; float:left; height:25px; line-height:25px; padding-left:20px; padding-right:20px; color:#ffffff; font-weight:bold}
#nav a:hover{ background-position:0 0; text-decoration:none;}
#nav a:hover span{ background-position:100% -25px; color:#000000;} /*COLORE SCRITTE A PASSAGGIO DI MAUSE */
#navhover a,#navhover a:hover,#menu a:active{ background-position:0 0; }
#navhover a span,#navhover a:hover span,#nav a:active span{ background-position:100% -25px; color:#fff;} /* COLORE SCRITTE SENZA PASSARE CON MAUSE */

/*FINE BOTTONI NAVIGAZIONE A DESTRA */

come le posiziono?

dynamo · Messaggio da **dynamo** » 02/09/2009, 18:26

prova a vedere se una cosa del genere può andarti bene

Codice: Seleziona tutto

#proinizio{ height:28px; float:left; }
#profine{ height:28px;  } 
#nav{ height:28px; float:left; width:500px; }
#nav ul{  height:25px; margin:0; padding:0;} /*height:25px*/
#nav li{ height:25px; float:left; margin-right:1px; list-style:none;}
#nav a{ background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 0 -50px; }
#nav a span{ cursor:pointer; background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 100% -75px;  height:25px; line-height:25px; padding-left:20px; padding-right:20px; color:#ff0000; font-weight:bold}
#nav a:hover{ background-position:0 0; text-decoration:none;}
#nav a:hover span{ background-position:100% -25px; color:#000000;} /*COLORE SCRITTE A PASSAGGIO DI MAUSE */
#navhover a,#navhover a:hover,#menu a:active{ background-position:0 0; }
#navhover a span,#navhover a:hover span,#nav a:active span{ background-position:100% -25px; color:#fff;} /* COLORE SCRITTE SENZA PASSARE CON MAUSE */ 
    /*FINE BOTTONI NAVIGAZIONE A DESTRA */

deltabiri · Messaggio da **deltabiri** » 02/09/2009, 19:06

Molto meglio, solo che l'immagine finale è staccata un paio di centimetri dai bottoni e il tutto e' allineato a sx invece di dx.
p.s. se mi dici il comando da modificare lo faccio io cosi imparo qualcosa

dynamo · Messaggio da **dynamo** » 02/09/2009, 22:48

prova questo nuovo css

Codice: Seleziona tutto

    #proinizio{ height:28px; float:left;  }
    #profine{ height:28px; position:relative; left:-2px; }
    #nav{ height:28px; float:left; width:485px;  }
    #nav ul{  height:25px; margin:0; padding:0;} /*height:25px*/
    #nav li{ height:25px; float:left; margin-right:1px; list-style:none;}
    #nav a{ background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 0 -50px; }
    #nav a span{ cursor:pointer; background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 100% -75px;  height:25px; line-height:25px; padding-left:20px; padding-right:20px; color:#fff; font-weight:bold}
    #nav a:hover{ background-position:0 0; text-decoration:none;}
    #nav a:hover span{ background-position:100% -25px; color:#000000;} /*COLORE SCRITTE A PASSAGGIO DI MAUSE */
    #navhover a,#navhover a:hover,#menu a:active{ background-position:0 0; }
    #navhover a span,#navhover a:hover span,#nav a:active span{ background-position:100% -25px; color:#fff;} /* COLORE SCRITTE SENZA PASSARE CON MAUSE */
        /*FINE BOTTONI NAVIGAZIONE A DESTRA */

deltabiri · Messaggio da **deltabiri** » 02/09/2009, 22:56

provato, non cambia

dynamo · Messaggio da **dynamo** » 02/09/2009, 23:27

prova con questo

Codice: Seleziona tutto

#proinizio{ height:28px; float:left; }
#profine{ height:28px; position:relative; left:-2px; } 
#nav{ height:28px; float:left; width:430px;  }
#nav ul{  height:25px; margin:0; padding:0;} 
#nav li{ height:25px; float:left; margin-right:1px; list-style:none;}
#nav a{ background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 0 -50px; }
#nav a span{ cursor:pointer; background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 100% -75px;  height:25px; line-height:25px; padding-left:20px; padding-right:20px; color:#ffffff; font-weight:bold} /* COLORE SCRITTE SENZA PASSARE CON MAUSE */ 
#nav a:hover{ background-position:0 0; text-decoration:none;}
#nav a:hover span{ background-position:100% -25px; color:#000000;} /*COLORE SCRITTE A PASSAGGIO DI MAUSE */
#navhover a,#navhover a:hover,#menu a:active{ background-position:0 0; }
#navhover a span,#navhover a:hover span,#nav a:active span{ background-position:100% -25px; color:#ffffff;}/* COLORE SCRITTE SENZA PASSARE CON MAUSE */

deltabiri · Messaggio da **deltabiri** » 03/09/2009, 0:08

andato ok l'immagine finale, solo che e' ancora allineato sulla sinistra e non sulla destra.
tanto che ci siamo ne approfitto per chiederti anche questo, cosi finisco tutto il pezzo....al momento sotto questi bottoni appena messi e' presente un colore di sfondo che vorrei cambiare con un'immagine, solo che mi crea problemi con le class della contribution cerca

Codice: Seleziona tutto

<table align="center" border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr>
    <td align="center" class="headerNavigation">
<table border="0" width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td class="cerca" valign="middle" colspan="0">
  <?php echo tep_draw_form('advanced_search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get"') ?>
<table border="0" width="35%" cellspacing="0" cellpadding="1" align="left">
<tr>
<td class="cerca" valign="top" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><?php echo BOX_HEADING_SEARCH ?></td>
<td class="cerca" valign="middle" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><?php echo tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-50) . 'px"')  ?></td>

<td class="cerca" valign="top" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><center><?php echo tep_image_submit('button_search.gif', BOX_HEADING_ADVSEARCH); ?></center></td>
</tr>
</table>

stylesheet

Codice: Seleziona tutto

.cerca {

  background: #5E0C11;  /*background-image: url(images/grafica/header_cerca.gif);*/

  font-family: Tahoma, Verdana, Arial;

  font-size: 12px;
  
  color:#FFFFFF;

}

mentre l'immagine e'

dynamo · Messaggio da **dynamo** » 03/09/2009, 9:02

allora io ho risolto in questo modo...

nuovo codice dei div

Codice: Seleziona tutto

<td align="right">
<!-- INIZIO BOTTONI DESTRA -->
   <div id="proinizio"><img src="http://www.tentazionishop.it/images/grafica/fine.gif"  height="31" /></div>
   <div id="nav"><ul>
   <li><a href="http://www.tentazionishop.it/shipping.php"><span>Traking SDA</span></a></li>
   <li><a href="http://www.tentazionishop.it/conditions.php"><span>Condizioni</span></a>  </li>
   <li><a href="http://www.tentazionishop.it/pagamenti.php"><span>Pagamenti</span></a></li>

   <li><a href="http://www.tentazionishop.it/faq.php"><span>Domande utili</span></a></li>
   </ul> 
   </div>
   <div id="profine"><img src="http://www.tentazionishop.it/images/grafica/inizio.gif"  height="31" /></div>
<!-- FINE BOTTONI DESTRA -->
</td>

con nuovo css

Codice: Seleziona tutto

    #proinizio{ height:28px; float:right; position:relative; right:-1px; }
    #profine{ height:28px; position:relative; right:-3px; }
    #nav{ height:28px; float:right; width:430px; position:relative; right:-1px; }
    #nav ul{  height:25px; margin:0; padding:0;}
    #nav li{ height:25px; float:right; margin-left:1px; list-style:none;}
    #nav a{ background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 0 -50px; }
    #nav a span{ cursor:pointer; background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 100% -75px;  height:25px; line-height:25px; padding-left:20px; padding-right:20px; color:#ffffff; font-weight:bold} /* COLORE SCRITTE SENZA PASSARE CON MAUSE */
    #nav a:hover{ background-position:0 0; text-decoration:none;}
    #nav a:hover span{ background-position:100% -25px; color:#000000;} /*COLORE SCRITTE A PASSAGGIO DI MAUSE */
    #navhover a,#navhover a:hover,#menu a:active{ background-position:0 0; }
    #navhover a span,#navhover a:hover span,#nav a:active span{ background-position:100% -25px; color:#ffffff;}/* COLORE SCRITTE SENZA PASSARE CON MAUSE */

nuovo codice della tabella cerca

Codice: Seleziona tutto

    <table align="center" border="0" width="100%" cellspacing="0" cellpadding="1" class="sfondo_cerca_menu_orizzontale">
      <tr>
        <td align="center" class="headerNavigation">
    <table border="0" width="100%" cellspacing="0" cellpadding="0" >
    <tr>
    <td class="cerca" valign="middle" colspan="0">
      <?php echo tep_draw_form('advanced_search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get"') ?>
    <table border="0" width="35%" cellspacing="0" cellpadding="1" align="left">
    <tr>
    <td class="cerca" valign="top" colspan="3"> </td>
    <td class="cerca" valign="middle" colspan="3"><?php echo BOX_HEADING_SEARCH ?></td>
    <td class="cerca" valign="middle" colspan="3"> </td>
    <td class="cerca" valign="middle" colspan="3"><?php echo tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-50) . 'px"')  ?></td>

    <td class="cerca" valign="top" colspan="3"> </td>
    <td class="cerca" valign="middle" colspan="3"><center><?php echo tep_image_submit('button_search.gif', BOX_HEADING_ADVSEARCH); ?></center></td>
    </tr>
    </table>
    </td>

con una nuova classe per il css

Codice: Seleziona tutto

	.sfondo_cerca_menu_orizzontale { background:url(http://www.tentazionishop.it/images/grafica/header_cerca.gif) no-repeat;}

PS: spulciando un po' il codice per fare gli aggiustamenti ho visto che hai dei tag html errati controlla le chiusure

deltabiri · Messaggio da **deltabiri** » 03/09/2009, 9:34

si e' incasinato tutto,faccio l'elenco:
le immagini inizio e fine sono invertite,
la scritta ricerca veloce e' scritta su 2 righe,
l'immagine di sfondo nuova non arriva alla fine,
si vede un pezzo di sfondo piu scuro per meta' della fascia,
sono spariti i bottoni blu che cambiano colore,
macromedia mi segnala 2 errori di <tr> e <td> in giallo, ma se li tolgo sparisce tutto il sito con errore....

visto che mi hai trovato dei tag chiusi male mi diresti dove sono? dovrebbero essere gli stessi che mi segnala il validator ma non riesco a capire in che file stanno.

dynamo · Messaggio da **dynamo** » 03/09/2009, 11:48

mi son dimenticato di farti modificare un'altra cosa nel css

Codice: Seleziona tutto

.cerca {

/*  background: #5E0C11;  */

e non hai sostituito il codice per i tag div

infatti se noti

Codice: Seleziona tutto

   <div id="proinizio"><img src="http://www.tentazionishop.it/images/grafica/fine.gif"  height="31" /></div>

nel tuo sorgente invece c'è

Codice: Seleziona tutto

   <div id="proinizio"><img src="http://www.tentazionishop.it/images/grafica/inizio.gif"  height="31" /></div>

cmq ti mando in pvt i miei contatti così ci sbrighiamo prima

deltabiri · Messaggio da **deltabiri** » 12/09/2009, 11:39

modificando con l'auito di dynamo siamo riusciti a posizionare come volevo i bottoni, facendo cosi:

Codice: Seleziona tutto

<?php 
//
// START  advanced search header  script insertion
//
//
?>
<?php

?>
<table align="center" border="0" width="100%" cellspacing="0" cellpadding="1" class="sfondo_cerca_menu_orizzontale">
  <tr>
    <td align="center" class="headerNavigation">
<table border="0" width="100%" cellspacing="0" cellpadding="0" >
<tr>
  <?php echo tep_draw_form('advanced_search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get"') ?>
<td class="cerca" valign="middle" colspan="0">
<table border="0" width="45%" cellspacing="0" cellpadding="1" align="left">
<tr>
<td class="cerca" valign="top" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><?php echo BOX_HEADING_SEARCH ?></td>
<td class="cerca" valign="middle" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><?php echo tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-50) . 'px"')  ?></td>

<td class="cerca" valign="top" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><center><?php echo tep_image_submit('button_search.gif', BOX_HEADING_ADVSEARCH); ?></center></td>
</tr>
</table>
</td>
<td align="right">
<!-- INIZIO BOTTONI DESTRA -->
   <div id="proinizio"><img src="http://www.tentazionishop.it/images/grafica/fine.gif"  height="31" alt=""></div>
   <div id="nav"><ul>
   <li><a href="http://www.tentazionishop.it/shipping.php"><span>Traking SDA</span></a></li>
   <li><a href="http://www.tentazionishop.it/conditions.php"><span>Condizioni</span></a>  </li>
   <li><a href="http://www.tentazionishop.it/pagamenti.php"><span>Pagamenti</span></a></li>
   <li><a href="http://www.tentazionishop.it/faq.php"><span>Domande utili</span></a></li>
   </ul> 
   </div><div id="profine"><img src="http://www.tentazionishop.it/images/grafica/inizio.gif"  height="31" alt="" ></div>
   
</td>
<!-- FINE BOTTONI DESTRA -->

</form>
</tr>
</table>

</td>
</tr>
</table>
<?php 
//
// END advanced search header script insertion
//
//
?>

mentre lo stylesheet cosi:

Codice: Seleziona tutto

.cerca {

  /* background: #5E0C11;  */

  font-family: Tahoma, Verdana, Arial;

  font-size: 12px;
  
  color:#FFFFFF;

}
.sfondo_cerca_menu_orizzontale { background:url(http://www.tentazionishop.it/images/grafica/header_cerca.gif) no-repeat; width: 100%;}

.negozio {
border-color: #993300;

}/*style informazioni negozio centro pagina */



/*INIZIO BOTTONI NAVIGAZIONE A DESTRA */
#proinizio{ height:28px; float:right; position:relative; right:-1px; }
#profine{ height:28px; position:relative; right:-3px; }
#nav{ height:28px; float:right; width:430px; position:relative; right:-1px; }
#nav ul{  height:25px; margin:0; padding:0;} 
#nav li{ height:25px; float:left; margin-right:1px; list-style:none;}
#nav a{ background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 0 -50px; }
#nav a span{ cursor:pointer; background:url(http://www.tentazionishop.it/images/grafica/bicolor.gif) no-repeat 100% -75px;  height:25px; line-height:25px; padding-left:20px; padding-right:20px; color:#ffffff; font-weight:bold} /* COLORE SCRITTE SENZA PASSARE CON MAUSE */ 
#nav a:hover{ background-position:0 0; text-decoration:none;}
#nav a:hover span{ background-position:100% -25px; color:#000000;} /*COLORE SCRITTE A PASSAGGIO DI MAUSE */
#navhover a,#navhover a:hover,#menu a:active{ background-position:0 0; }
#navhover a span,#navhover a:hover span,#nav a:active span{ background-position:100% -25px; color:#ffffff;}/* COLORE SCRITTE SENZA PASSARE CON MAUSE */ 
    /*FINE BOTTONI NAVIGAZIONE A DESTRA */

ora con explorer e' tutto ok ma con firefox e chrome non funzionano i link dei bottoni e si vedono schiacciati, altro piccolo problema e' l'immagine di sfondo che arriva a 3\4 del dovuto....
sapete dirmi come sistemare? sono 10 giorni che ho l'header incompiuto

deltabiri · Messaggio da **deltabiri** » 15/09/2009, 19:04

sono tornato indietro cancellando tutto, ho trovato una contribution simile a quello che mi serviva, sono riuscito anche ad adattarla facendogli qualche modifica perche' mi saltavano fuori una ventina di errori nel validator, solo che mi sono rimasti ancora un paio di errori e sono per la maggiore tutti concentrati fra l'opzione cerca e il menu appena messo, ho provato anche a modificare come chiede il validator ma si incasina tutto

Codice: Seleziona tutto

<table align="center" border="0" width="100%" cellspacing="0" cellpadding="1" class="sfondo_cerca_menu_orizzontale">
  <tr>
    <td align="center" class="headerNavigation">
<table border="0" width="100%" cellspacing="0" cellpadding="0" >
<tr>
  <?php echo tep_draw_form('advanced_search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get"') ?>
<td class="cerca" valign="middle" colspan="0">
<table border="0" width="45%" cellspacing="0" cellpadding="1" align="left">
<tr>
<td class="cerca" valign="top" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><?php echo BOX_HEADING_SEARCH ?></td>
<td class="cerca" valign="middle" colspan="3"> </td>
<td class="cerca" valign="middle" colspan="3"><?php echo tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: ' . (BOX_WIDTH-50) . 'px"')  ?></td>
<td class="cerca" valign="top" colspan="3"> </td>
<td width="27%" colspan="3" valign="middle" class="cerca"><center><?php echo tep_image_submit('button_search.gif', BOX_HEADING_ADVSEARCH); ?></center></td>
</tr>
</table>
</td>
<td align="right">
<!-- INIZIO BOTTONI DESTRA -->
   <table border="0" width=500 cellspacing="0" cellpadding="0" align=center >
 <td align="center" valign="bottom"><div id="tabsJ">
  <ul>
    <li><?php echo '<a href="' . tep_href_link(FILENAME_SHIPPING, '') . '">' ?><span>Traking SDA</span></a></li>
    <li><?php echo '<a href="' . tep_href_link(FILENAME_CONDITIONS, '') . '">' ?><span>Condizioni</span></a>  </li>
    <li><?php echo '<a href="' . tep_href_link(FILENAME_PAGAMENTI, '') . '">' ?><span>Pagamenti</span></a></li>
    <li><?php echo '<a href="' . tep_href_link(FILENAME_FAQ, '') . '">' ?><span>Domande utili</span></a></li>
    <li><?php echo '<a href="' . tep_href_link(FILENAME_MESSENGER, '') . '">' ?><span>Messenger</span></a></li>
  </ul>
  </td>
</table>
<!-- FINE BOTTONI DESTRA -->

</form>
</tr>
</table>

</td>
</tr>
</table>

http://validator.w3.org/check?uri=http% ... ne&group=0

osCommerceITalia

aiuto a posizionare immagine stylesheet

aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet

Re: aiuto a posizionare immagine stylesheet