Shining Star. |
|
| | Menù in alto al Forum
Se volete inserire nel vostro spazio web un menù simile (o uguale) al mio dovete inserire il codice che qui sotto esporrò:
Passo 1: CSS
Su Forumfree/Forumcommunity/Blogfree andare in Amministrazione Modifica Colori e Stili e incollare all'inizio del riquadro il seguente codice:
CODICE /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#pointermenu {border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0}
#pointermenu ul {margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px verdana;
background-color: black;
background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/}
* html #pointermenu ul {/*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/}
#pointermenu ul li {display: inline}
#pointermenu ul li a {float: left;
color: white;
font-weight: bold;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(media/pointer.gif) bottom center no-repeat}
#pointermenu ul li a:visited {color: white}
#pointermenu ul li a:hover, #pointermenu ul li a#selected {/*hover and selected link*/
color: white;
background-color: darkred}
#pointermenu ul li a#rightcorner {padding-right: 0;
padding-left: 2px;
background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/}
Se usate un sito inserite nella parte compresa tra i tag HEAD della vostra pagina questo codice:
CODICE <style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#pointermenu {border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0}
#pointermenu ul {margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px verdana;
background-color: black;
background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/}
* html #pointermenu ul {/*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/}
#pointermenu ul li {display: inline}
#pointermenu ul li a {float: left;
color: white;
font-weight: bold;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(media/pointer.gif) bottom center no-repeat}
#pointermenu ul li a:visited {color: white}
#pointermenu ul li a:hover, #pointermenu ul li a#selected {/*hover and selected link*/
color: white;
background-color: darkred}
#pointermenu ul li a#rightcorner {padding-right: 0;
padding-left: 2px;
background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/}
</style>
Come personalizzare il codice:
potete cambiare: i colori (white, red ecc..), le dimensioni delle scritte (font size: #) il tipo di font.
Passo 2: HTML
Su Forumfree/Blogfree/Forumcommunity inserite il seguente Codice in Amministrazione - Gestione Codici HTML - In Cima al Sito
CODICE <div id="pointermenu"> <ul> <li><a href="LINK" id="selected">TESTO</a></li> <li><a href="LINK">TESTO</a></li> </ul> </div> <br style="clear: left"> <div id="container"> <div id="contentleft"> <div id="contentright"> <br>
Per aggiungere un link aggiungete questa parte (una volta in più per ogni link):
CODICE <li><a href="LINK">TESTO</a></li>
La parte del codice id="selected" serve per indicare quale link deve essere già evidenziato di base, potete spostare il tag a piacimento tra i vari link. Quindi potete scegliere, per esempio, di mantenere evidenziato solo il primo link, o solo l'ultimo, o entrambi, o, ancora, il terzo, quarto ecc...a voi la scelta.
Per domande, chiarimenti e ulteriori spiegazioni chiedete qui.
- Tags:
- html,
- webmaster
|
|
| | |
