- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Come si levano i rettangoli puntinati dai link
-
Come si levano i rettangoli puntinati dai link
Avete presente quei rettangoli che delimitano il link tutti puntinati?
Come si levano?
-
Ciao Lucaeffe,
non ho capito bene a cosa ti riferisci.
Magari parli dei link inseriti all'interno di una lista e se fosse così questi famosi puntini si riferirebbero ad una proprietà originaria di quest'ultimi (facile da omettere).Altrimenti, se puoi, indicaci un esempio concreto.
-
Prova a fare una ricerca in google con le parole chiave: link dashed border. Ci sono diverse soluzioni.
-
Si, esattamente!
Mi riferisco ai link all'interno di una lista.
Scusa se non mi sono spiegato bene sin dall'inizio!
-
Allora devi dare alla lista in questione (o al tag ul se proprio non la vuoi mai vedere) il seguente attributo:
ul{ list-style:none; }
Va bene anche se lo dai unicamente ai list-item e cioè al tag "li"
-
Non riesco a farlo funzionare!
Ho provato 2000 combinazioni sia in CSS che in HTML,
ti posto la parte di codice in cui voglio che agisca<div id="header"> <ul id="menu"> <li class="vocecorrente"><a href="home-page.html"><strong>Home</strong></a></li> <li><a href="il-nostro-team.html"><strong>Il nostro Team</strong></a></li> <li><a href="partners.html"><strong>Partners</strong></a></li> <li><a href="servizi.html"><strong>Servizi</strong></a></li> </ul></div>
-
La clausola che ti ho fatto inserire rimuove i punti della lista per ogni "list-item".
Forse ti riferisci alla sottolineatura dei link.
Se fosse questo devi gestire un attributo ulteriore o per tutte le tipologie di link o per qualcuna in particolare( link da visitare, visitati e all'evento del mouse hover)Prendendo l'esempio di tutti i link, indiscriminatamente dalla tipologia, ti basterà aggiungere allora questo parametro:
#menu a{ text-decoration:none; } ```Se anche così non fosse quello che ti serve, allora probabilmente vi è una sovrascrittura nel tuo css che *annulla* gli attributi che ti ho detto di inserire. Se hai una risorsa attiva da poter controllare in modo diretto sarebbe più semplice :)
-
Era giusta la prima, la soluzione per la seconda già la conoscevo.
CSS
@charset "utf-8"; /* CSS Document */ body{ background:#000; background-image:url(image/clouds.png); background-repeat:no-repeat; margin:0 auto; padding:10px 0 0 0; height:100%; width:1263px; } #spazio{ height:120px; width:950px; margin:0 auto; padding:0;} #container{ background-color:#000; background-repeat:repeat-y; background-position:center; width:950px; height:5030px; margin:0 auto; padding:40px 0 20px 0; } #header{ background-image:url(image/hea2.png); background-repeat:no-repeat; background-position:top; margin:0; padding:0; height:250px; width:950px; } #barra_luminosa{ background-image:url(image/Barr_luminosa_centro.png); height:30px; width:950px; margin:215px 0 0 0; padding:0; position:absolute; } #header2{ background-image:url(image/welcome.png); background-repeat:no-repeat; padding:0; width:950px; height:330px; margin:300px 0 0 0; } #menu{ list-style:none; overflow:hidden; width:950px; height:35px; float:left; padding:1px; margin:0; background-color:#0e0e0e; } li{ display:inline; } a{ display:block; float:left; padding-rigth:90px; margin-left:60px; padding-left:65px; font-family:Arial, Helvetica, sans-serif; font-size:16px; text-transform:uppercase; text-decoration:none; color:#FFF; line-height:25px; } a:hover{ color:#FC0; } .welcome{ list-style:none; display:block; width:950px; height:25px; margin:0 0 -20px 0; padding:0; } .welcome li{ display:inline; width:300px; } .welcome a{ display:block; float:left; padding-rigth:60px; height:25px; margin-left:30px; margin-top:20px; padding-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color: #FC0; line-height:25px; } .welcome a:hover{ color:#FFF; } h1{ font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#FFF; margin:15px 0 0 0; padding:0 0 35px 0; top:-90px; } h2{ font-family:Arial, Helvetica, sans-serif; font-size:36px; margin:-40px 0 0 800px } h2 li{ display:inline; } h2 a{ text-decoration:none; color:#FFF} #illustraction{ margin:250px 0 0 30px; padding:0; } #advertising{ margin:150px 0 0 30px; padding:0; } #template{ margin:0 0 0 -10px; padding:0; width:850px; height:280; } .wait{ list-style:none; display:block; width:70px; height:25px; margin:0; padding:0; } .wait li{ display:inline; width:300px; } .wait a{ display:block; float:left; height:25px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color: #FFF; line-height:25px; } .wait a:hover{ color:#FC0; } #web_space{ padding:0; margin:0 0 150px 0; } #slider ul{ margin:0; padding:0; list-style:none; } { background-image:url(image/contorno_thumb.png); width:900px; height:430px; overflow:hidden; } li{ width:900px; height:400px; overflow:hidden; } span#prevBtn{ margin:0 0 0 50px; font-size:24px; font-family:Arial, Helvetica, sans-serif;} span#nextBtn{ margin:0 0 0 780px; font-size:24px; font-family:Arial, Helvetica, sans-serif;} #slider2{ background-image:url(image/contorno_thumb.png); width:900px; height:430px; overflow:hidden; } ul{ margin:0; padding:0; list-style:none; } li{ width:900px; height:400px; overflow:hidden; } span#prevBtn2{ margin:0 0 0 50px; font-size:24px; font-family:Arial, Helvetica, sans-serif;} span#nextBtn2{ margin:0 0 0 780px; font-size:24px; font-family:Arial, Helvetica, sans-serif;} #slider3 ul{ margin:0; padding:0; list-style:none; } { background-image:url(image/contorno_thumb.png); width:900px; height:430px; overflow:hidden; } li{ width:900px; height:400px; overflow:hidden; } span#prevBtn3{ margin:0 0 0 50px; font-size:24px; font-family:Arial, Helvetica, sans-serif;} span#nextBtn3{ margin:0 0 0 780px; font-size:24px; font-family:Arial, Helvetica, sans-serif;} #contact_me{ background:url(image/contactme.png); height:150px; width:700px; margin:100px 0 0 0; padding:0; } #modulo{ margin:0 0 -400 75px; } form#contact{ width:900px; height:380px; margin: 0; padding: 47px 15px 10px 15px; background-image:url(image/form.png); background-repeat:no-repeat; } label{ width: 200px; height: 30px; font: 12px/30px Arial,sans-serif; margin-right: 5px; text-align: right; color: #666 } input,textarea,button{ border: 0px solid; font: 12px Arial,sans-serif; } div.input-cont{ width: 200px; height: 30px; margin:0; padding:0; } input{ display: block; width: 200px; height:25px; background:#FFF; margin:20px 0 0 270px; } #message{ margin:50px 0 0 170px;} div.textarea-cont{ width: 200px; height: 100px; padding:0; } textarea{ width: 280px; height: 85px; margin: 33px 0 0 180px; } button#go{ width: 200px; height:20px; line-height: 25px; display: inline; margin:14px 0 0 550px; padding:0; background: #ffcc00; font:Arial, Helvetica, sans-serif; font-weight:bolder; font-size:16px; text-transform:uppercase; color:#000; cursor:pointer; } #footer{ background-image:url(image/footer1.png); height:200px; width:950px; margin:0 auto; padding:20px 0 0 0; }
-
Ah ok ora dovrei aver capito.
Quella proprietà era originaria di Firefox e successivamente anche di Internet Explorer.
Può essere rimossa aggiungendo nel css al tag "a" (quindi tutti i link) il seguente attributo:
a{ ... outline:none; ... }
Facci sapere