Pagina 1 di 1
aiuto a posizionare immagine stylesheet
Inviato: 02/09/2009, 16:51
da deltabiri
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
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?
Re: aiuto a posizionare immagine stylesheet
Inviato: 02/09/2009, 18:26
da dynamo
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 */
Re: aiuto a posizionare immagine stylesheet
Inviato: 02/09/2009, 19:06
da deltabiri
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
Re: aiuto a posizionare immagine stylesheet
Inviato: 02/09/2009, 22:48
da dynamo
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 */
Re: aiuto a posizionare immagine stylesheet
Inviato: 02/09/2009, 22:56
da deltabiri
provato, non cambia
Re: aiuto a posizionare immagine stylesheet
Inviato: 02/09/2009, 23:27
da dynamo
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 */
Re: aiuto a posizionare immagine stylesheet
Inviato: 03/09/2009, 0:08
da deltabiri
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'
Re: aiuto a posizionare immagine stylesheet
Inviato: 03/09/2009, 9:02
da dynamo
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
Re: aiuto a posizionare immagine stylesheet
Inviato: 03/09/2009, 9:34
da deltabiri
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.
Re: aiuto a posizionare immagine stylesheet
Inviato: 03/09/2009, 11:48
da dynamo
mi son dimenticato di farti modificare un'altra cosa nel css
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
Re: aiuto a posizionare immagine stylesheet
Inviato: 12/09/2009, 11:39
da deltabiri
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
Re: aiuto a posizionare immagine stylesheet
Inviato: 15/09/2009, 19:04
da deltabiri
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>