CSS3 - Aumentar espaciado entre enlaces

[OmarGon]

Necesito aumentar el espaciado entre los enlaces. Sin embargo, no sé que falla en mi css que no lo consigo. Pueden ver mi código en:


http://jsfiddle.net/OmarGon/1p3s9tv2/

[AngelKrak]

amigo el CSS no lleva <script></script> jajaja xD y necesitas darle espacio a las Listas (<li>) no al enlace <a> jejeje xD

Ahi te dejo la demo ;)
http://jsfiddle.net/1p3s9tv2/1/

[OmarGon]

Me equivoqué en jsfiddle, pero en mi css file no están las <script> tags.


Sin embargo, en jsfiddle si funciona li.link {}

Pero en mi código no.

Les dejo el código completo:

http://jsfiddle.net/OmarGon/1p3s9tv2/3/

¿Qué podría estar pasando?

[OmarGon]

solución

li.links a {
display:block;
margin:20px 0;
}

[xfxstudios]

lo estan haciendo mal:

Código CSS:

<style>
.enlaces ul li ul li{
    background-color:#00437B;
    padding:10px;
    width:200px;
    margin-top:10px;
}
.enlaces ul li ul li a{
    color:#FFFFFF;
    text-decoration:none;
}
</style>
 

Código &quot:

<section class="enlaces"> <!-- Sección para los enlaces -->
                        <ul>
                            <li>Mi Hoja de Vida:
                                <ul>
                                    <li><a href="cve.html">Mi Hoja de Vida - Español</a></li>
                                    <li><a href="cvi.html">Mi Hoja de Vida - Inglés</a></li>
                                </ul>
                            </li>
                        </ul>
                    </section>
 

juega con eso que te coloque y veras que funciona, ya lo probe en tu codigo http://jsfiddle.net/1p3s9tv2/4/

[xfxstudios]

ahora si quieres que todo en li sea tu enlace prueba asi:

Código HTML:

<style>
.enlaces ul li ul li{
    background-color:#00437B;
    padding:10px;
    width:200px;
    margin-top:10px;
}
.enlaces ul li ul li:hover{
    background-color:#FF6E00;
    padding:10px;
    width:200px;
    margin-top:10px;
}
.enlaces ul li ul a{
    color:#FFFFFF;
    text-decoration:none;
}
</style>
<section class="enlaces"> <!-- Sección para los enlaces -->
                        <ul>
                            <li>Mi Hoja de Vida:
                                <ul>
                                    <a href="cve.html"><li>Mi Hoja de Vida - Español</li></a>
                                    <a href="cvi.html"><li>Mi Hoja de Vida - Inglés</li></a>
                                </ul>
                            </li>
                        </ul>
                    </section>
 

[fede5426]

Iniciado por xfxstudios

ahora si quieres que todo en li sea tu enlace prueba asi:

Está mal estructurado el HTML.. "ul > li > a" es lo correcto.

Para que el enlace cubra todo el item de lista se usa display:block; y el padding aplicado al enlace y no al item de lista.

Código HTML:

<section class="enlaces"> <!-- Sección para los enlaces -->
   <ul>
      <li>Mi Hoja de Vida:
         <ul>
            <li><a href="cve.html">Mi Hoja de Vida - Español</a></li>
            <li><a href="cvi.html">Mi Hoja de Vida - Inglés</a></li>
         </ul>
      </li>
   </ul>
</section>
 

Código CSS:

.enlaces ul li ul li{
    background-color:#00437B;
    width:200px;
    margin-top:10px;
}
.enlaces ul li ul li:hover{
    background-color:#FF6E00;
}
.enlaces ul li ul a{
    color:#FFFFFF;
    text-decoration:none;
        display: block;
        padding:10px
}
 

Y no es necesario usar el mismo código en el :hover, solo lo que se quiera modificar cuando el cursor se posicione encima.

Saludos