Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
* [tutorial] menu orizzontale con effetto diverso per tasto
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 10:49    Oggetto: * [tutorial] menu orizzontale con effetto diverso per tasto Rispondi citando

edit by reb= la discussione e' partita da qua (e da quel thread il codice su cui si e' lavorato in un primo tempo) ed e' poi proseguita generando un codice che per comodita' riporto direttamente qua sotto

Codice:

<html>
<head>
<title>link uno</title>
<style>
#menu {text-align: center;}
#menu ul{width: 520px; margin: 10px auto 10px auto; list-style: none; padding: 0px;}
#menu li {float: left; margin: auto 2px auto 0px;}
#menu a {display: block; float: left; width: 100px; border: 1px solid black;}
#uno a {color: red;}
#uno a:hover {color: pink;}
#due a {color: orange;}
#due a:hover {color: yellow;}
#tre a {color: gray;}
#tre a:hover {color: silver;}
#quattro a {color: navy;}
#quattro a:hover {color: blue;}
#cinque a {color: black;}
#cinque a:hover {color: green;}
</style>
</head>

<body>
<div id="menu">
<ul>
<li id="uno"><a href="#"><span>link uno</span></a></li>
<li id="due"><a href="#"><span>link due</span></a></li>
<li id="tre"><a href="#"><span>link tre</span></a></li>
<li id="quattro"><a href="#"><span>link quattro</span></a></li>
<li id="cinque"><a href="#"><span>link cinque</span></a></li>
</ul>
</div>
</body>
</html>


a chi interessasse approfondire, la discussione continua nei post successivi

***

X Rebelia: e se il tuo menù lo si volesse avere in orizzontale anzichè il verticale, cosa bisogna aggiungere o modificare?
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 14:01    Oggetto: Rispondi citando

atigra ha scritto:
X Rebelia: e se il tuo menù lo si volesse avere in orizzontale anzichè il verticale, cosa bisogna aggiungere o modificare?


Codice:

<style>
#menu {
   font-family: verdana, arial, sans-serif;
   }
   
   #menu ul {
/*--> togli la larghezza qua <--*/
      list-style: none;
      margin: 0px;
      padding: 0px;
      background: #FF8C1B;
      border: 3px outset #c0c0c0;
      }
      
      #menu li {
/*--> metti display inline qua (vedi sotto) <--*/
         display: inline;
/*--> tolgo anche il bordo da qua (border: 1px solid #FF8C1B;) perche' e' un trucco che mi consente di correggere un baco di ff <-- */
         }
      
      #menu a {
         color: #000;
/*--> togli display block qua <--*/
         height: 24px;
         background: #FF8C1B url(butterup.gif) no-repeat center left;
         padding-left: 32px;
         padding-right: 32px;
         text-decoration: none;
         font-weight: bold;
         }
         
         #menu a:hover {
            color: #FF8C1B;
            background: #000 url(butterdown.gif) no-repeat center right;
            text-align: right;
            }
</style>


ti ho modificato il css

nota: ovviamente l'effetto con la farfalla che va da un lato all'altro e' piu' adatta al menu verticale, ma puoi fare in modo che cambi stando al suo posto, ad esempio e che l'allineamento delle parole non cambi
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 14:18    Oggetto: Rispondi citando

Ah... ecco perchè non mi veniva, io cambiabo solo il block in inline. Sto provando a mettere una cosa simile in isto che sto facendo. Solo che ho proseguito con questa soluzione. Il risultato finale è simile a quello che hai fatto tu in questo tutorial, solo che il menù deve essere in linea e (e qui viene il brutto) quando mi sposto col mouse sul menù mi cambia uno sfondo diverso per ogni voce del menù. Io ho fatto qualche prova e mi pare che l'unica cosa da fare è creare un div a, div a:hover per ogni voce del menu. Spero sia una cosa corretta.... solo che adesso il problema ce l'ho se devo posizionare per esempio 6 div (6 voci del menu) in linea e tutte attaccate tra loro. In pratica vorrei arrivare a fare l'effetto di questo menù con i div. Lì è fatto con un programma automatico, ma non mi pare usi i css.... e poi come dici tu... accettare il meno possibile le cose precotte!

ciao

PS: aspetto un tuo consiglio.... thanks Laughing
Top
Profilo Invia messaggio privato
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 14:33    Oggetto: Rispondi citando

Faccio prima a mostrarti direttamente quello che sto facendo. In linea di massimo sto ottenendo quello che vorrei, ma ho notato che non mi centra l'unica voce del menù che ho messo. Ovviamente vorrei che manao a mano che le aggiungo, me le centri automaticamente.

Questo il css:
Codice:

body {
   background: #ffffff;
   color: #000000;
   text-align: center;
   font-family: arial, "century gothic", verdana, sans-serif;
   font-size: 80%;
   margin: 0px;
   padding: 0px;
      }

   a {
              color: #0292D9;
              text-decoration: none;
             }

         a:visited {
               color: #056788;
        }

         a:hover {
                 color: blue;
             text-decoration: underline;
         }

   img {
       border: 0px;
       }

hr {
   color: red;
   width: 80%;
   height: 1px;
   }

#esterno {
   position: relative; top: 0px;
   height: 100%;
   width: 100%;
   border: none; /*1px solid red;*/
   margin: 0px auto 0px auto;
   }

#testata {
   background-image: url(logo/header.gif);
   background-position: left;
   background-repeat: repeat;
   height: 100px;
   width: 100%;
   margin: 0px 0px 0px 0px;
   border: none;
   }

#logo_sx {
   position: absolute; top: 0px; left: 0px;
   background-image: url(logo/logosx.gif);
   background-position: center;
   background-repeat: no-repeat;
   height: 100px;
   width: 76px;
   border: none;
   }

#logo_centrale {
   background-image: url(logo/logo_centrale.gif);
   background-position: center;
   background-repeat: no-repeat;
   height: 100px;
   width: 317px;
   margin: 0px auto auto auto;
   border: none;
   }

#logo_dx {
   position: absolute; top: 0px; right: 0px;
   background-image: url(logo/logodx.gif);
   background-position: center;
   background-repeat: no-repeat;
   height: 100px;
   width: 76px;
   border: none;
   }

#menu ul {
   background: none; /*red;*/
   height: 35px;
   width: 100%;
   margin: 0px 3px 3px 3px;
   border: 1px solid yellow;
   }

#menu li {
   display: inline;
   }

   #home a {
   position: absolute; /*top: 1px; right: 70px;*/
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid red;
   background-image: url(menu/home.png); /*no-repeat;*/
            }

   #home a:hover {
   position: absolute; /*top: 1px; right: 70px;*/
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   background-image: url(menu/web_cam.png); /*no-repeat;*/
   border: 1px solid black;
            }

#corpo {
   height: auto;
   width: 100%;
   position: relative; /*margin: 10px auto 3px auto;*/
   border: none; /*1px solid green;*/
   }

#footer {
   height: auto;
   width: 100%;
   position: relative; /*margin: 10px auto 3px auto;*/
   border: 1px solid black;
   }

#pulisci {
   clear: both;
    } /*pulisce la storia del float usato prima*/


Questo l'html (metto solo il body):
Codice:

<body>
<div id="esterno">
   <div id="testata">
      <div id="logo_sx"></div>
      <div id="logo_centrale"></div>
      <div id="logo_dx"></div>
   </div>
   <div id="menu">
      <div id="home"><ul><li><a href="home.htm"></a></li></ul></div>
   </div>
   <div id="corpo"></div>
   <div id="pulisci"></div>
   <hr />
   <div id="footer">Copyright © 2005 - 2007 S. Marcomini - London. All rights reserved.</div>
</div>

</body>


Qui il risultato attuale.
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 15:02    Oggetto: Rispondi citando

atigra ha scritto:
Ah... ecco perchè non mi veniva, io cambiabo solo il block in inline. Sto provando a mettere una cosa simile in isto che sto facendo. Solo che ho proseguito con questa soluzione. Il risultato finale è simile a quello che hai fatto tu in questo tutorial, solo che il menù deve essere in linea e (e qui viene il brutto) quando mi sposto col mouse sul menù mi cambia uno sfondo diverso per ogni voce del menù. Io ho fatto qualche prova e mi pare che l'unica cosa da fare è creare un div a, div a:hover per ogni voce del menu. Spero sia una cosa corretta.... solo che adesso il problema ce l'ho se devo posizionare per esempio 6 div (6 voci del menu) in linea e tutte attaccate tra loro. In pratica vorrei arrivare a fare l'effetto di questo menù con i div. Lì è fatto con un programma automatico, ma non mi pare usi i css.... e poi come dici tu... accettare il meno possibile le cose precotte!

ciao

PS: aspetto un tuo consiglio.... thanks Laughing


semplice: ad ogni <a></a> contenuto negli li dai un id diverso e formatti con quello

inserisci uno span all'interno dell'a e gli dai display: none; poi usi le immagini come background di a (la prima) e come background di a:hover (la seconda)

dovrebbe funzionare Smile


L'ultima modifica di rebelia il 09 Nov 2005 15:59, modificato 1 volta
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 15:47    Oggetto: Non capisco Rispondi citando

Non capisco quello che mi hai detto.. più che altro non so se hai letto l'ultimo mio messaggio.
Ho provato adesso a ridurre all'osso il codice, e continua a non centrarmelo nella pagina. Eppure sembra tutto ok.

Il css:
Codice:

body {
   background: #ffffff;
   color: #000000;
   text-align: center;
   font-family: arial, "century gothic", verdana, sans-serif;
   font-size: 80%;
   margin: 0px;
   padding: 0px;
      }

   a {
              color: #0292D9;
              text-decoration: none;
             }

         a:visited {
               color: #056788;
        }

         a:hover {
                 color: blue;
             text-decoration: underline;
         }

   img {
       border: 0px;
       }
#esterno {
   position: relative; top: 0px;
   height: 100%;
   width: 100%;
   border: none;
   margin: 0px auto 0px auto;
   }

#menu ul {
   height: 35px;
   width: auto;
   margin: 0px 3px 0px 3px;
   border: 1px solid yellow;
   }

#menu li {
   display: inline;
   }

   #home a {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid red;
   background-image: url(menu/home.png);
            }

   #home a:hover {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   background-image: url(menu/web_cam.png);
   border: 1px solid black;
            }


L'html:
Codice:

<body>
<div id="esterno">
   <div id="menu">
      <ul>
          <li><div id="home"><a href="home.htm"></a></div></li>
      </ul>
   </div>
</div>

</body>
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 16:05    Oggetto: Re: Non capisco Rispondi citando

scusa, forse mi sono spiegata male (troppo in fretta!)

modifica l'html cosi:
Codice:

<body>
<div id="esterno">
   <div id="menu">
      <ul>
          <li id="home" ><a href="home.htm"><span>Home</span></a></li>
      </ul>
   </div>
</div>

</body>


e scrivi il css cosi':
Codice:

#home a {background: url(primaimmagine.gif) no-repeat top center;}
#home a:hover {background: url(secondaimmagine.gif) no-repeat top center;}
li span {display: none;}


(a differenza di quanto ti ho scritto sopra, ho dato l'id a li anziche' ad a)

prova cosi' e vedi se ottieni l'effetto desiderato (naturalmente inserendo anche gli altri parametri che la sopra non ho messo)
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 16:24    Oggetto: nada Rispondi citando

Nada, non viene centrata... e non riesco a capirne il motivo...
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 16:29    Oggetto: Re: nada Rispondi citando

atigra ha scritto:
Nada, non viene centrata... e non riesco a capirne il motivo...


centrata?

vuoi che la barra dei menu sia centrata rispetto al layout?

al div che contiene il menu dai text-align: center;
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 16:38    Oggetto: rimetto tutto Rispondi citando

Ti rimetto tutto il codice e ti spiego:

CSS:
Codice:

body {
   background: #ffffff;
   color: #000000;
   text-align: center;
   font-family: arial, "century gothic", verdana, sans-serif;
   font-size: 80%;
   margin: 0px;
   padding: 0px;
      }

   a {
              color: #0292D9;
              text-decoration: none;
             }

         a:visited {
               color: #056788;
        }

         a:hover {
                 color: blue;
             text-decoration: underline;
         }

   img {
       border: 0px;
       }
#esterno {
   position: relative; top: 0px;
   height: 100%;
   width: 100%;
   border: none;
   margin: 0px auto 0px auto;
   }

#menu ul {
   height: 35px;
   width: auto;
   margin: 0px 3px 0px 3px;
   border: 1px solid yellow;
   }

#menu li {
   display: inline;
   }

   #home a {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid red;
   background-image: url(menu/home.png); no-repeat top center;
            }

   #home a:hover {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   background-image: url(menu/web_cam.png); no-repeat top center;
   border: 1px solid black;
            }


L'htm:
Codice:

<body>
<div id="esterno">
   <div id="menu">
      <ul>
          <li id="home"><a href="home.htm"></a></li>
      </ul>
   </div>
</div>

</body>

Come vedi ho apportato le modifiche che mi hai detto, tranne che per il discorso dello span, ininfluente e in più per l'effetto che voglio (ho comunque provato a mettere anche quello e non cambia nulla... quindi l'ho tolto).

Con il codice di quei due file, c'è un div che si chiama menu e con il bordo giallo (che toglierò, adesso c'è solo per vederlo), dentro devo metterci le varie voci del menù ma con l'effetto onmouseover sulle immagini. Ho provato a metterne uno come vedi, e non mi centra in orizzontale. O meglio... mi sono accorto che il centro della pagina coincide con l'inizio di quel div che contiene la voce del menù. Qui vedi anche tu il risultato. Ovviamente dovrò aggiungere altre voci in quel menù, ma devo sempre averle centrate.
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 16:49    Oggetto: Re: rimetto tutto Rispondi citando

atigra ha scritto:
Come vedi ho apportato le modifiche che mi hai detto, tranne che per il discorso dello span, ininfluente e in più per l'effetto che voglio (ho comunque provato a mettere anche quello e non cambia nulla... quindi l'ho tolto).

occhio, perche' lo span ed il testo ivi contenuto non hanno un effetto estetico, ma funzionale: se qualcuno naviga le tue pagine disabilitando il css (chi usa il palmare, ad esempio) oppure sostituendolo con uno proprio (persone con problemi alla vista lo fanno) non sa cosa linkare, percio' ti conviene rimetterglielo senz'altro

Citazione:
Con il codice di quei due file, c'è un div che si chiama menu e con il bordo giallo (che toglierò, adesso c'è solo per vederlo), dentro devo metterci le varie voci del menù ma con l'effetto onmouseover sulle immagini. Ho provato a metterne uno come vedi, e non mi centra in orizzontale. O meglio... mi sono accorto che il centro della pagina coincide con l'inizio di quel div che contiene la voce del menù. Qui vedi anche tu il risultato. Ovviamente dovrò aggiungere altre voci in quel menù, ma devo sempre averle centrate.


non devi dare un posizionamento assoluto ad ul, ma devi dare

Codice:

#menu {text-align: center;}


il contenuto del div menu sara' cosi' centrato; al div menu inoltre non devi dare nessuna misura di larghezza, padding, margin o altro, cosi' esso si adattera' usando il 100% dello spazio a propria disposizione
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 18:40    Oggetto: Rispondi citando

Dimmi dove sbaglio, altrimenti non capisco.
1.Creo il div che conterrà tutti gli altri div con l'effetto onmouseover.
Codice:

#menu ul {
   text-align: center;
   }

Rendo poi in linea il div appena creato:
Codice:

#menu li {
   display: inline;
   }

Creo adesso un div di quelli piccoli che dovrò metterlo dentro al div #menu:
Codice:

   #home a {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid red;
   background-image: url(menu/home.png); no-repeat top center;
            }

   #home a:hover {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid black;
   background-image: url(menu/web_cam.png); no-repeat top center;
            }


Immagino che il problema stia nell'ultimo code che ho messo...
Top
Profilo Invia messaggio privato
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 18:49    Oggetto: Rispondi citando

Ovviamente prima di tutto nbel css ho messo questo:
Codice:

body {
   background: #ffffff;
   color: #000000;
   text-align: center;
   font-family: arial, "century gothic", verdana, sans-serif;
   font-size: 80%;
   margin: 0px;
      }

#esterno {
   position: relative; top: 0px;
   height: 100%;
   width: 100%;
   border: none;
   margin: 0px auto 0px auto;
   }
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 19:18    Oggetto: Rispondi citando

atigra ha scritto:
Dimmi dove sbaglio, altrimenti non capisco.
1.Creo il div che conterrà tutti gli altri div con l'effetto onmouseover.
Codice:

#menu ul {
   text-align: center;
   }



text-align: center non va messo in ul, ma nel div che lo contiene e cioe' NON in #menu ul ma in #menu (e basta: cioe' l'id che identifica il div che contiene il menu e NON nell'ul contenuto in quel div)

Citazione:

Rendo poi in linea il div appena creato:
Codice:

#menu li {
   display: inline;
   }

e qua ci siamo

Citazione:

Creo adesso un div di quelli piccoli che dovrò metterlo dentro al div #menu:
Codice:

   #home a {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid red;
   background-image: url(menu/home.png); no-repeat top center;
            }

   #home a:hover {
   position: absolute;
   margin: 1px auto 1px auto;
   width: 104px;
   height: 30px;
   border: 1px solid black;
   background-image: url(menu/web_cam.png); no-repeat top center;
            }


Immagino che il problema stia nell'ultimo code che ho messo...


immagini bene Smile
non hai alcun bisogno di posizionare in maniera assoluta a, non lo devi proprio posizionare! togli completamente il posizionamento e lascia che text-align: center messo NEL DIV #MENU faccia il suo dovere

tra l'altro non capisco cosa intendi con questa parte:

Citazione:
Creo adesso un div di quelli piccoli che dovrò metterlo dentro al div #menu:


"div di quelli piccoli"!? Confused

se intendi all'interno di a devi usare span, non div; span e' un elemento che ha piu' o meno le stesse funzioni di div, ma e' un elemento inline e non un elemento blocco come div e lo si usa in tutti quei casi in cui - ad esempio - si deve formattare una parola (ed e' questo il caso, visto che la parola al suo interno la devi far sparire)

ammesso che abbia capito bene cosa intendi per "div di quelli piccoli", naturalmente Smile
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 19:46    Oggetto: Rispondi citando

Mi sa che non mi hai capito, e mi rendo conto che non mi hai capito dall'inizio.

Dunque.

Partiamo da zero.

Devo fare un menù con 5 voci. Graficamente ognuna di queste 5 voci deve essere così: avere un'immagine per la vista normale e una diversa (con i colori leggermente diversi) quando ci si posiziona sopra col mouse.

Per fare ciò ho bisogno di creare 5 div, che abbiano per esempio le dimensioni di 30x120px.

Per praticità e ordine, posiziono questi 5 div all'interno di uno più grande, tanto per avere la possibilità, se necessario, di abbassare o spostare tutti assieme i 5 div.

Riparto dall'inizio anche col css:
Codice:

body {
   background: #ffffff;
   color: #000000;
   text-align: center;
   font-family: arial, "century gothic", verdana, sans-serif;
   font-size: 80%;
   margin: 0px;
      }


Aggiungo il div che conterrà i 5 div piccoli:
Codice:

#menu {
   text-align: center;
   }


E qui già non riesco a capire perchè non dovrei dichiarare niente di più, visto che magari vorrei usarne il bordo. me lo puoi spiegare?
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 20:12    Oggetto: Rispondi citando

atigra ha scritto:
Devo fare un menù con 5 voci. Graficamente ognuna di queste 5 voci deve essere così: avere un'immagine per la vista normale e una diversa (con i colori leggermente diversi) quando ci si posiziona sopra col mouse.

Per fare ciò ho bisogno di creare 5 div, che abbiano per esempio le dimensioni di 30x120px.

Per praticità e ordine, posiziono questi 5 div all'interno di uno più grande, tanto per avere la possibilità, se necessario, di abbassare o spostare tutti assieme i 5 div.


domanda: per quale motivo vuoi usare dei div, quando i menu vanno fatti con ul-li che sono tra l'altro anch'essi elementi blocco esattamente come i div?

Citazione:
E qui già non riesco a capire perchè non dovrei dichiarare niente di più, visto che magari vorrei usarne il bordo. me lo puoi spiegare?


io ti ho messo gli elementi che servivano a fare quel che volevi (centrare) ma e' ovvio che poi puoi aggiungerci tutta la formattazione che vuoi

ok, np, l'ho rifatto da zero prevedendo il prevedibile, pure la possibilita' della larghezza fissa per li, che - anziche' trasformare in elemento inline - ho lasciato elemento blocco e l'ho fatto andare dove volevo io dando float

Codice:


<html>
<head>
<title>link uno</title>
<style>
#menu {text-align: center;}
#menu ul{width: 520px; margin: 10px auto 10px auto; list-style: none; padding: 0px;}
#menu li {float: left; margin: auto 2px auto 0px;}
#menu a {display: block; float: left; width: 100px; border: 1px solid black;}
#uno a {color: red;}
#uno a:hover {color: pink;}
#due a {color: orange;}
#due a:hover {color: yellow;}
#tre a {color: gray;}
#tre a:hover {color: silver;}
#quattro a {color: navy;}
#quattro a:hover {color: blue;}
#cinque a {color: black;}
#cinque a:hover {color: green;}
</style>
</head>

<body>
<div id="menu">
<ul>
<li id="uno"><a href="#"><span>link uno</span></a></li>
<li id="due"><a href="#"><span>link due</span></a></li>
<li id="tre"><a href="#"><span>link tre</span></a></li>
<li id="quattro"><a href="#"><span>link quattro</span></a></li>
<li id="cinque"><a href="#"><span>link cinque</span></a></li>
</ul>
</div>
</body>
</html>


testato su ff opera e ie

io ho usato i colori, percio' non ho tolto il testo; nel tuo caso aggiungi al css #menu span {display: none;} e anziche' usare color usi background con l'url delle tue immagini

edit: modifica: ho dato display: block anche ad a e la larghezza, togliendola da li; in questo modo, TUTTA la superficie del pulsante e' attiva


L'ultima modifica di rebelia il 09 Nov 2005 22:19, modificato 1 volta
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 09 Nov 2005 20:36    Oggetto: Rispondi citando

Perfetto! Smile

Solo una cosa per specificare di nascondere lo span

Questo è il codice giusto:
Codice:

li span {display: none;}


Adesso devo solo fare qualche aggiustatina al mio caso... ma stavolta direi che ci siamo, scusami se ti ho fato lavorare anche stavolta, e non sono per mettere le mani al codice ma anche per spostare mezzo topic (effettivamente ne andava fatto uno per conto suo).

Gentile come sempre, Thanks! Smile

PS: dovrebbero farti un monumento da qualche parte!
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 09 Nov 2005 20:49    Oggetto: Rispondi citando

atigra ha scritto:
Perfetto! Smile

Solo una cosa per specificare di nascondere lo span

Questo è il codice giusto:
Codice:

li span {display: none;}


non esattamente: con questo codice nascondi ogni span di ogni li che tu abbia nel sito, con quel che ho messo io nascondi ogni span presente nel div #menu

se non vuoi correr rischi di nascondere erroneamente qualcosa d'altro, il codice giusto e'

Codice:
#menu ul li a span {display: none;}


Wink
Top
Profilo Invia messaggio privato HomePage
atigra
Semidio
Semidio


Registrato: 21/09/05 11:14
Messaggi: 249

MessaggioInviato: 10 Nov 2005 13:42    Oggetto: Rispondi citando

Ripeto... hai preferenze per il monumento? Qualche richiesta particolare? Very Happy Very Happy Very Happy
Top
Profilo Invia messaggio privato
rebelia
Dio maturo
Dio maturo


Registrato: 17/07/03 09:22
Messaggi: 7987

MessaggioInviato: 10 Nov 2005 13:52    Oggetto: Rispondi

atigra ha scritto:
Ripeto... hai preferenze per il monumento? Qualche richiesta particolare? Very Happy Very Happy Very Happy


si, che sia lontano dai nidi dei piccioni Wink
Top
Profilo Invia messaggio privato HomePage
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 2 ore
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi