Forum dei Forum: Aiuto per Forumattivo
Benvenuto sul forum di supporto di Forumattivo .



Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Menu di navigazione forumattivo


Tutorial Menu di navigazione forumattivo

Messaggio Da the crow il Mer 15 Dic 2010, 00:32

Menu di navigazione forumattivo


Prima parte

Pannello > Visualizzazione > Immagini e colori > colori > foglio di stile Css(Se non e'

presente ..".Vedere il CSS di base del tuo forum" incollatelo sulla pagina bianca e convalidate)

in fondo alla pagina Incollate questo codice

Codice:
.tr-.crea{-moz-box-shadow:1px 1px 10px #C6C;-webkit-box-shadow:1px 1px 10px #C6C;border-color:#C6C;box-shadow:1px 1px 10px #C6C;color:#C6C}.tr-.collabora{-moz-box-shadow:1px 1px 10px #AF5F5F;-webkit-box-shadow:1px 1px 10px #AF5F5F;border-color:#AF5F5F;box-shadow:1px 1px 10px #AF5F5F;color:#AF5F5F}.img_list_hp{-moz-border-radius:6px;-webkit-border-radius:6px;border:1px solid #0372BE;border-radius:6px;color:#FFF!important;float:left;font-size:11px;margin:auto 10px auto auto;padding:0;text-align:center;width:auto}.img_list_hp:hover{background-color:#DCEAF5}.img_list_hp img{padding:8px 15px}.img_list_hp span{background-color:#0372BE;display:block;padding:0 10px}.img_list_hp a{color:#FFF!important;text-decoration:none}#img_list_alt{background-image:url(IMMAGINE );background-position:20px 0;background-repeat:no-repeat;padding-left:55px;padding-top:13px}.news-pa{width:85%}.news-pa td.nws{background:url(IMMAGINE) no-repeat 5px 50% #dceaf9;color:0372be;padding:5px 5px 5px 25px;text-align:left}td.nws span.date{font-size:9px;font-weight:700}

Seconda parte

Pannello > Visualizzazione > Prima pagina > Generalita' > Messaggio sull' indice...Contenuto del messaggio

incollate questo codice


Codice:
<div class="mes-txt">COMMENTO <b>COMMENTO <u>COMMENTO</u></b>,COMMENTO

<script>
jQuery(function() {
jQuery('.img_list_hp img').mouseover(function() {
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
}).mouseout(function() {
jQuery('#img_list_alt').html('SUGGERIMENTO!');
});
});
</script><div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE "><span>TESTO</span></a></div>
<div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE "><span>TESTO</span></a></div>
<div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE "><span>TESTO</span></a></div>
<div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE"><a href='URL PAGINA'>TESTO</a>

</div><div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE "><span>TESTO</span></a></div>

<div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE"><span>TESTO</span></a></div><div class="img_list_hp"><a href="URL PAGINA"><img height="59" src="IMMAGINE" alt="DESCRIZIONE "><span>TESTO</span></a></div><div style="clear: both" id="img_list_alt">SUGGERIMENTO</div>
<center><table class="news-pa">
<tbody><tr>
<td rowspan="4" style="background-color: transparent !important; width: 130px; padding: 0;"><img src="IMMAGINE"></td>

<td style="-moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; webkit-border-radius: 5px 5px 0 0;" class="nws"><span class="date">[DATA]</span> <a href="URL PAGINA "> TESTO</a></td>
</tr>
<tr>
<td class="nws"><span class="date">[DATA]</span><font colorr=red><a href="URL PAGINA"> TESTO</a></font> </td>
</tr>
<tr>
<td class="nws"><span class="date">[DATA]</span><a href="URL PAGINA"> TESTO</a></td>
</tr>
<tr>
<td class="nws" style="-moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; webkit-border-radius: 0 0 5px 5px;"><span class="date">[DATA] </span><a href="URL PAGINA">TESTO</a></td>
</tr>
</tbody></table>
</center></div>





Solo la tabella superiore

indice del forum
Codice:

<table id="tb-services">
<tbody>
<tr>
<td>
<a class="servic" href="URL PAGINA" onMouseOver='document.getElementById("service1").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service1").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic" href="URL PAGINA" onMouseOver='document.getElementById("service2").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service2").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic" href="URL PAGINA" onMouseOver='document.getElementById("service3").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service3").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic" href="URL PAGINA" onMouseOver='document.getElementById("service4").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service4").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic" href="URL PAGINA" onMouseOver='document.getElementById("service5").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service5").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic"URL PAGINA" onMouseOver='document.getElementById("service6").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service6").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic" href="URL PAGINA" onMouseOver='document.getElementById("service7").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service7").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" alt="" src="IMMAGINE" class="serv-opacity" /></a>
</td>
<td>
<a class="servic"URL PAGINA" onMouseOver='document.getElementById("service8").style.display="block";document.getElementById("introservic").style.display="none";'
onMouseOut='document.getElementById("service8").style.display = "none";document.getElementById("introservic").style.display="block";'><img height="65" width="65" class="serv-opacity" src="IMMAGINE" alt=""></a>
</td>
</tr>
<tr>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
<td>
<span class="sp-servic">testo</span>
</td>
</tr>
</tbody>
</table>
<div style="font-size: 11px; position: relative; bottom: 12px; background: url('http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png') no-repeat 45px top; padding-left: 90px; height: 30px; padding-top: 12px; text-align: left;"><div style="display: block; background: none repeat scroll 0% 0% rgb(253, 244, 227); padding: 5px; -moz-border-radius: 5px 5px 5px 5px; border: 1px solid rgb(111, 79, 64); width: 792px; text-align: center; height: 15px; color:#6F4F40;">
<div id="introservic" style="font-weight:bold;">testo</div>
<div id="service1" style="display: none;">testo</div><div id="service2" style="display: none;">testo</div><div id="service3" style="display: none;">testo </div><div id="service4" style="display: none;">testo</div><div id="service5" style="display: none;">testo </div><div id="service6" style="display: none;">testo </div><div id="service7" style="display: none;">testo</div><div id="service8" style="display: none;">testo
</div>
</div>
</div>

< div style =" display: block; background: none repeat scroll 0% 0% rgb(253, 244, 227); padding: 5px; -moz-border-radius: 5px 5px 5px 5px; border: 1px solid rgb(111, 79, 64); width: 792px; text-align: center; height: 15px; color:#6F4F40; " >

->Modifica il colore di sfondo della descrizione

->Modificail colore del bordo della descrizione

->Modifica il colore della scritta


A questo punto visto che il codice e uscito a pezzi e rey non ha piu' creato il tutor ho inserito io il codice completo...naturalmente ho cancellato le immagini e gli url , per non creare un clone di questo forum

Per domande o chiarimenti Gestire l'aspetto del forum
scritto dagli amministratori di forum di aiuto forumattivo

Tutoriale da :
Copyrigth © FORUMATTIVO.COM


avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum