[Duda] [HTML+CSS] Crear un borde sin mover el contenido

Iniciado por BloodSharp, 28 Agosto 2020, 03:51 AM

0 Miembros y 2 Visitantes están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

BloodSharp

28 Agosto 2020, 03:51 AM
¿Buenas gente del foro como están? Estoy re-diseñando mi página de github pero tengo un pequeño detalle que seguramente es facil de arreglar:

¿Cómo se puede evitar el movimiento del control del enlace al crear un borde? Ya intenté ponerle un margen negativo, lo cuál funciona pero me hace el borde no visible... Estoy un poco falto de práctica con html+css por eso pregunto.



Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nombre</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu">
        <div class="portada">
            <img src="" alt="Foto" srcset="">
            <h1>Nombre</h1>
        </div>
        <div class="contenedor-enlaces">
            <a href="#">Primero</a>
            <a href="#">Segundo</a>
            <a href="#">Tercero</a>
            <a href="#">Cuarto</a>
        </div>
    </div>
    <div class="contenido">
    </div>
</body>
</html>

Código (css) [Seleccionar]
body
{
    margin: 0px;
}

.menu
{
    background-color: black;
    width: 25%;
    height: 100%;
    position: fixed;
    color: white;
}

.menu .portada h1
{
    text-align: center;
}

.menu .portada img
{
    display: block;
    /*border-radius: 100%;*/
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.menu .contenedor-enlaces a
{
    width: 100%;
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

.menu .contenedor-enlaces a:hover
{
    border-left-width: 12px;
    border-left-color: red;
    border-left-style: solid;
    background: #333;
}

.contenido
{
    margin-left: 25%;
}


B#


MinusFour

#1
28 Agosto 2020, 04:16 AM
No se a que te refieras exactamente, ¿No quieres que el ancho extra al final del enlace?

Código (css) [Seleccionar]

.menu .contenedor-enlaces a
{
    box-sizing: border-box;
}

BloodSharp

#2
28 Agosto 2020, 04:24 AM
Cita de: MinusFour en 28 Agosto 2020, 04:16 AMNo se a que te refieras exactamente, ¿No quieres que el ancho extra al final del enlace?

Y que tampoco se mueva el texto... Hay una imagen arriba en el primer post.

Cita de: MinusFour en 28 Agosto 2020, 04:16 AM
Código (css) [Seleccionar]

.menu .contenedor-enlaces a
{
    box-sizing: border-box;
}

Eso soluciona perfectamente el ancho extra por el borde, faltaría solo el texto.


B#


EdePC

#3
28 Agosto 2020, 05:02 AM
Pues como estás poniéndole un borde, este ocupa su espacio, mejor usa una sombra interna sólida, estas no ocupan espacio.

Código (css,3) [Seleccionar]
.menu .contenedor-enlaces a:hover
{
    box-shadow: inset 12px 0 0px 0px red;
    background: #333;
}

MinusFour

#4
28 Agosto 2020, 15:54 PM
Cita de: BloodSharp en 28 Agosto 2020, 04:24 AM
Y que tampoco se mueva el texto... Hay una imagen arriba en el primer post.

Eso soluciona perfectamente el ancho extra por el borde, faltaría solo el texto.


B#

Entonces simplemente deja el borde fijo transparente y cambia el color en el hover.

Código (css) [Seleccionar]
.menu .contenedor-enlaces a
{
    box-sizing: border-box;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.menu .contenedor-enlaces a:hover
{
    border-left-color: red;
}

BloodSharp

#5
28 Agosto 2020, 16:39 PM
@MinusFour y @EdePC gracias ambos por contestar, la respuesta de @EdePC dió justo con lo que necesitaba... Tema solucionado. ;-) ;D


B#


Imprimir
Ir Arriba Páginas1
Acciones del Usuario