Centrar elementos con borde al hacer hover

YeffKr · #1 (**permalink**) 14/02/2016, 11:06

Buenas a todos, esta es mi primera pregunta dentro del foro. Actualmente estoy creando un proyecto para la universidad en el diseño de una web completa, el problema es que soy muy quisquilloso con la parte gráfica.

Mi problema es con el menú, por ahora lo tengo bastante básico con este efecto hover:

Pero, quisiera que tuviera un hover como este:

La cuestión es que sin el efecto logro centrar perfectamente los links, pero al pasar el mouse para activar dicho efecto, estos se mueven puesto que el borde de 3px que agrego que empujan hacia afuera. He buscado ya varias formas de centrarlos, pero ninguna me funciona.

Este es mi código CSS:

@import url('reset.css');

body {
background: #e6e6e6;
}

header {
width: 100%;
}

header nav {
height: 65px;
background: rgba(0,0,0,.70);
overflow: hidden;
}

header nav ul {
list-style: none;
}

header nav ul li {
float: left;
}

header nav ul li a {
margin: 13px;
display: block;
text-decoration: none;
color: #FFF;
padding: 10px;
}

header img {
display: block;
margin:20px;
}

/*Hover header*/
header nav ul li a:hover{
border: 3px solid #F59877;
margin: 11px;
}

Este es el HTML:

Código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ferreteria McGyver</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <header>
        <div id="subheader">
            <div id="logo">
                <img id=logo src="imagenes/logo.png">
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">Inicio</a></li>
                    <li><a href="Productos.html">Productos</a></li>
                    <li><a href="About.html">Quiénes somos</a></li>
                    <li><a href="Contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>
    </body>
</html>

Espero puedan ayudarme y disculpen las molestias.

mbm150 · #2 (**permalink**) 14/02/2016, 12:11

Hola

yo creo que lo más fácil es darle un borde de 3px transparente siempre y ponerle color con el hover.

Código CSS:

Ver originalheader nav ul li a {
margin: 13px;
display: block;
text-decoration: none;
color: #FFF;
padding: 10px;
border: 3px solid transparent;
}
header nav ul li a:hover{
border: 3px solid #F59877;
}

Así de fácil.

Saludos.

YeffKr · #3 (**permalink**) 14/02/2016, 13:07

Pff... vaya solución más simple y yo rompiéndome la cabeza. Haha, muchas gracias.

Por cierto, antes de dar el tema como solucionado ¿cómo se llama la función para que ese borde permanezca en la página actual? Es decir, que si estoy en la página de productos me aparezca siempre bordeado en la navbar "Productos", si estoy en el index pues "Inicio" y así sucesivamente. Supongo que debe ser jquery, pero no conozco el nombre de esa función para buscarla y aplicarla.

pzin · #4 (**permalink**) 15/02/2016, 03:25

La solución correcta es usar box-sizing: border-box para que el borde forma parte del ancho y alto del elemento. Lo otro no deja de ser una chapucilla.

mbm150 · #5 (**permalink**) 15/02/2016, 12:10

Hola

Cita:

La solución correcta es usar box-sizing: border-box para que el borde forma parte del ancho y alto del elemento. Lo otro no deja de ser una chapucilla.

lo de box-sizing no funciona... Lo primero que pensé fue eso, pero lo probe y no funciona, por eso dije lo del borde transparente... Igual es que me falto cambiar algo para que funcionara.

Saludos.

YeffKr · #6 (**permalink**) 15/02/2016, 18:42

Cita:

Iniciado por pzin

La solución correcta es usar box-sizing: border-box para que el borde forma parte del ancho y alto del elemento. Lo otro no deja de ser una chapucilla.

Sí, de hecho fue lo primero que probé, pues fue lo primero que me recomendaron. Sin embargo quedaba igual.