0

tengo un menú a la derecha de la pagina para facilitar al usuario la re dirección dentro la misma pagina y no tener que utilizar el scroll. He conseguido que me funcione pero yo tengo puesto un css un hover que cuando pase el ratón cambia y si hago lo de linkear me pone un subrayado y en morado y no me deja cambiarlo en el css.Lo que quiero es que cuando le de al navegador a la opción <li><a href="tomate1">-Tomàquet Línea</a></li> me baje el scroll hasta <h2 name="tomate1">Tomàquet de penjar Palamós</h2> (por ejemplo).Como puedo solucionarlo.He buscado por Internet y nadie se queja de ese problema...gracias de antemano.

<nav id=nav1 class="menu-fixed2">
 <ul>
     <ul class="subtitulo">
        <li class="titulillo">Tomàquets</li>
        <li><a href="tomate1">-Tomàquet Línea</a></li>
        <li><a>-Tomàquet de Penjar Palamós</a></li>
        <li><a>-Tomàquet Profitós</a></li>
        <li><a>-Tomàquet Supergros</a></li>
     </ul>
     <ul class="subtitulo"> 
        <li class="titulillo">Cebes</li>
        <li><a>-Ceba de Sabadell</a></li>
        <li><a>-Ceba Valenciana</a></li>
     </ul>
     <ul class="subtitulo">
         <li class="titulillo">Altres</li>
        <li><a>-Mongeta Tendra perona</a></li>
        <li><a>-Caçots</a></li>     
        <li><a>-Carbassa</a></li>
        <li><a>-Coliflor</a></li>
        <li><a>-Broquil</a></li>
        <li><a>-Espigalls</a></li>
    </ul>
</ul>  
 </nav>
     <div class="cuadrados">
     <h2>Tomàquet Línea</h2> 
         <img src="cirera.jpg" class="imagenes">
         <p class="centrado">EL MILLOR TOMAQUET DEL MON SENCER LOKETE</p>
     </div>
      <div class="cuadrados">
     <h2>Tomàquet de penjar Palamós</h2> 
         <img src="cirera.jpg" class="imagenes">
         <p class="centrado">EL MILLOR TOMAQUET DEL MON SENCER LOKETE</p>
     </div>
       <div class="cuadrados">
     <h2 name="tomate1">Tomàquet de penjar Palamós</h2> 
         <img src="cirera.jpg" class="imagenes">
         <p class="centrado">EL MILLOR TOMAQUET DEL MON SENCER LOKETE</p>
     </div>
.menu-fixed1{
    position: fixed;
    z-index: 1000;
    top:60%;
}
#nav1{

    margin-right: 3px;
    margin-top:1%;
    margin-left:85%;
    background: rgba(38, 191, 212, 0.7);
    border:solid;
    border-radius: 8px;
    border-color:cadetblue;
    list-style: none;
}
#nav1 li a{
    width: 100%;
    font-family: 'Amatic SC', cursive;
    font-size:1vw;
}
#nav1 li a:hover{
 font-family: 'Amatic SC', cursive;
 color:darkgreen;
}
#nav1 li{
    list-style: none;
}
    .titulillo{
        width: 100%;
        font-size:1vw;
        font-family: 'Amatic SC', cursive;
        background: rgba(0, 119, 171, 0.8);
        text-align: center;
        border-top: solid;
        border-color:cadetblue;
        border-bottom: solid;
        border-color:cadetblue;
    }
.menu-fixed2{
    position: fixed;
    z-index: 1000;
    top:40%;
}
.lala{
    margin-right: 25%;
}
.cuadrados{
    margin-top:3%;
    margin-right: 20%;
    text-align: center;
    background-color: aqua;
}
 .imagenes{
     margin-left:70%;
      width: 20%;
     height: 20%;
    }
.centrado{
    margin-top:-10%;
    text-align: left;
    position:absolute;
}
7
  • Si alguien puede editarlo, no se como se hace para que me salga bien formado. Se lo agradeceré.
    – winnie
    Commented el 2 abr. 2019 a las 18:07
  • Muy bien que este interesado en dar buen formato a tu pregunta, de pasa leete ¿Cómo darle formato a mis publicaciones utilizando Markdown o HTML?
    – dlr
    Commented el 2 abr. 2019 a las 18:15
  • lo acababa de editar! jajaja, bueno con respecto al hover, puedes crear una clase y a esta darle los formatos, te dejo un link para que revises cómo se hace Dar Formato links con css Commented el 2 abr. 2019 a las 18:25
  • 1
    lo unico que necesitas es aplicar text-decoration: none para remover el subrayado, y tambien color: tu-color para darle el color que necesites
    – IvanS95
    Commented el 2 abr. 2019 a las 19:06
  • 1
    @IvanS95 gracias!! He hecho eso y ya me ha desaparecido el color y la linea subrayada.
    – winnie
    Commented el 2 abr. 2019 a las 19:18

1 respuesta 1

2

Recomendación:
Trabaja con bootstrap, para ordenar lo que es la maquetación de la página.


Fuera de eso, a tus links puedes crearle una clase con el nombre que tu quieras y mediante css le das estilos.

Tomando de ejemplo la primera parte de tu menú, se puede hacer esto:

  • Creo una clase y se la asigno a todos los links, tengan o no el href y en el css, pongo el siguiente código.

  • Declaro el tamaño de la fuente, que no tenga decoración y letras negras.

  • Después declaro la misma etiqueta pero con :hover.

.tomate{
    font-size: 14px;
    text-decoration: none;
    color: black;
}
.tomate:hover{
    background: blue;
    font-size:18px;
    color: orange;
    text-decoration: none;
}
<ul class="subtitulo">
     <li class="titulillo">Tomàquets</li>
     <li><a href="tomate1" class="tomate">-Tomàquet Línea</a></li>
     <li><a href="tomate1"  class="tomate">-Tomàquet de Penjar Palamós</a></li>
     <li><a class="tomate">-Tomàquet Profitós</a></li>
     <li><a class="tomate">-Tomàquet Supergros</a></li>
</ul>

Si te fijas a algunos links le quité el href y de igual forma funcionan si paso el mouse por encima. Es cosa de que cambies las propiedades que quieras que se apliquen cuando pasas sobre el link con el mouse

2
  • Gracias por tu solución, no es la que he acabado utilizando pero no dudo que funcionara!
    – winnie
    Commented el 2 abr. 2019 a las 19:19
  • Es que hay muchas formas de atacar el problema, hay gente que le pone clases a los elementos y en base a ello trabajan como también hay quienes "recorren" las etiquetas que tenga una lista ul li a para llegar al elemento que le quieren poner algún color. Es cosa de gustos y que bueno que hayas encontrado una forma de trabajar que te acomode Commented el 2 abr. 2019 a las 19:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.