• E
    User •

    Link css

    Salve ragazzi, vorrei porvi una domanda;

    Il mio scopo è quello di realizzare dei link in cui il background-color occupi l'intera area sottostante al link- ovviamente per realizzare i link sfrutto gli <ul> e <li>; ad esempio in questo modo (ho fatto velocemente per farvi un esempio di ciò che vorrei ottenere - perdonatemi eventuali errori):

    
<style type="text/css">
#link{width:100%;} a{font-family:verdana, arial, serif; text-decoration:none;} ul{list-style-type:none;}
 
 
/*******************************************************
Tramite il tag sottostante vorrei ottenere la larghezza del link del 20% ma solo internet explorer mi rende realmente larghi i link del 20% rispetto alla larghezza del div mentre gli altri broswer nn mi rendono largo il link del 20%
*******************************************************/ li{display:inline;border:1px solid red; width:20%;} li a:link, li a:visited{}
 
/*******************************************************
Tramite il tag sottostante vorrei invece ottenere un colore di sfondo giallo, il problema è che invece il colore di sfondo nello stato hover esiste solo allo spazio che occupa la scritta del link e non va ad occupare tutto lo spazio come vorrei...
 *******************************************************/ li a:hover{background-color:yellow;} li a:active{}
</style>
</head>
<body>
<div id="link">
<ul>
 <li><a href="">Link1</a></li>
 <li><a href="">Link2</a></li>
 <li><a href="">Link3</a></li>
 <li><a href="">Link4</a></li>
</ul>
</div>

    Non so se nei commenti mi sono spiegato bene; in pratica vado incontro a due "errori"; in quanto se voglio ogni link largo il 20% rispetto al suo contenuto, ottengo questo risultato solo con I.E. - però forse questo problmea lo potrei evitare con una serie di     

    Ma il secondo problema è che vorrei il colore di sfondo che occupi tutta la parte sottostante del link e non solo la scritta... come posso fare?

    Grazie anticipatamente, spero che possiate aiutarmi

    0
  • K
    User Newbie •

    Prova a dare al li float: left; e al link display: block;

    #link li{float: left;border:1px solid red; width:20%;} li a {display: block}

    Se in IE6 non si vede correttamente prova a mettere il float anche al link

    0
  • E
    User •

    Niente.. ma grazie comunque della risposta - guarda non ho avuto molto tempo però pensandoci potrei riempire completamente lo sfondo mettendo il link all'interno del li con

    li a{display:block;}

    in questo modo il link è visto come blocco e quindi dovrebbe riempire completamente il list; e tramite quest'ultimo devo impostare la larghezza.

    0
  • marcocarrieri
    ModSenior •

    Fammi capire meglio vorresti che il link o meglio il "li" attivo abbia un background diverso dagli altri?

    Mi raccomando attenzione a non usare lo stime sms nei messaggi che scrivi. 🙂

    0
  • E
    User •

    Allora lo dico per completezza: si parla di link e di come inserire un'immagine (e/o colore) di sfondo nei link; ovviamente il tutto sfruttando gli elementi <ul><li>...</li>...</ul>; il problema che ho riscontrato inizialmente è stato che lo sfondo invece di coprire l'intera area del link mi copriva solamente l'area che occupava il testo del link stesso...(perdona il gioco di parole); altro problema era la distanza tra un link e l'altro; ho però risolto tutto usando questo codice

    #link li a{text-decoration:none;font-size:1.3em;font-family:Georgia, Helvetica, serif; display:block;}
    li a:link, a:visited{color:white;}
    li a:hover{color:green;}
    ul{list-style-type:none;margin-top:3em;text-align:right;}
    li{display:inline;}

    Quindi sostanzialmente l'errore stava nel fatto che il link lo ponevo come blocco, solo in tal modo infatti ho potuto far occupare al link l'intera area del <li>...

    ulteriore considerazione:
    Però ho dato una veloce ripassata a javascript e ho visto che è molto meglio sfruttare javascript e il DOM per cambiare l'immagine nello stato hover ...(tramite onmouseover) anziché sfruttare css.
    Ciao spero di essere stato utile

    0
  • M
    User Attivo •

    la domanda credo di averla capita...
    questo menù, o questi link, dove gli hai messi? in un'altro div?
    puoi darmi il link della pagina contenente questi link?
    se vuoi fare un menu' c'é un modo più comodo con php per integrarlo in ogni pagina con "include" e poterlo modificare in ogni pagina da una sola...
    per il fatto dello sfondo, se questi link sono in un'altro div, puoi dare il background a quel div...
    con css non si può allargare lo sfondo di un testo!

    0
  • marcocarrieri
    ModSenior •

    A mio parere personale preferisco sempre più usare i css se possibile e non scomodare javascript.

    0
Effettua l'accesso per rispondere