Menu di navigazione forumattivo


Tutorial Menu di navigazione forumattivo

Messaggio Da the crow il Mer 15 Dic 2010 - 0: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
Veterano dello staff

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


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

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum