elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Duda] [HTML+CSS] Crear un borde sin mover el contenido		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Duda] [HTML+CSS] Crear un borde sin mover el contenido  (Leído 3,570 veces)
BloodSharp


Desconectado Desconectado

Mensajes: 811


¡ Hiperfoco !


Ver Perfil WWW
[Duda] [HTML+CSS] Crear un borde sin mover el contenido
« en: 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
  1. <!DOCTYPE html>
  2. <html lang="es">
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Nombre</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  10.     <div class="menu">
  11.         <div class="portada">
  12.             <img src="" alt="Foto" srcset="">
  13.             <h1>Nombre</h1>
  14.         </div>
  15.         <div class="contenedor-enlaces">
  16.             <a href="#">Primero</a>
  17.             <a href="#">Segundo</a>
  18.             <a href="#">Tercero</a>
  19.             <a href="#">Cuarto</a>
  20.         </div>
  21.     </div>
  22.     <div class="contenido">
  23.     </div>
  24. </body>
  25. </html>

Código
  1. body
  2. {
  3.     margin: 0px;
  4. }
  5.  
  6. .menu
  7. {
  8.     background-color: black;
  9.     width: 25%;
  10.     height: 100%;
  11.     position: fixed;
  12.     color: white;
  13. }
  14.  
  15. .menu .portada h1
  16. {
  17.     text-align: center;
  18. }
  19.  
  20. .menu .portada img
  21. {
  22.     display: block;
  23.     /*border-radius: 100%;*/
  24.     margin-left: auto;
  25.     margin-right: auto;
  26.     width: 50%;
  27. }
  28.  
  29. .menu .contenedor-enlaces a
  30. {
  31.     width: 100%;
  32.     display: block;
  33.     text-decoration: none;
  34.     color: white;
  35.     text-align: center;
  36.     padding-top: 6px;
  37.     padding-bottom: 6px;
  38. }
  39.  
  40. .menu .contenedor-enlaces a:hover
  41. {
  42.     border-left-width: 12px;
  43.     border-left-color: red;
  44.     border-left-style: solid;
  45.     background: #333;
  46. }
  47.  
  48. .contenido
  49. {
  50.     margin-left: 25%;
  51. }


B#
En línea


MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: [Duda] [HTML+CSS] Crear un borde sin mover el contenido
« Respuesta #1 en: 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
  1. .menu .contenedor-enlaces a
  2. {
  3.     box-sizing: border-box;
  4. }
En línea
BloodSharp


Desconectado Desconectado

Mensajes: 811


¡ Hiperfoco !


Ver Perfil WWW
Re: [Duda] [HTML+CSS] Crear un borde sin mover el contenido
« Respuesta #2 en: 28 Agosto 2020, 04:24 am »
Cita de: MinusFour en 28 Agosto 2020, 04:16 am
No 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
  1. .menu .contenedor-enlaces a
  2. {
  3.     box-sizing: border-box;
  4. }

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


B#
En línea


EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.156



Ver Perfil
Re: [Duda] [HTML+CSS] Crear un borde sin mover el contenido
« Respuesta #3 en: 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
  1. .menu .contenedor-enlaces a:hover
  2. {
  3.     box-shadow: inset 12px 0 0px 0px red;
  4.     background: #333;
  5. }
En línea
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: [Duda] [HTML+CSS] Crear un borde sin mover el contenido
« Respuesta #4 en: 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
  1. .menu .contenedor-enlaces a
  2. {
  3.     box-sizing: border-box;
  4.     border-left: 12px solid transparent;
  5.     border-right: 12px solid transparent;
  6. }
  7.  
  8. .menu .contenedor-enlaces a:hover
  9. {
  10.     border-left-color: red;
  11. }
En línea
BloodSharp


Desconectado Desconectado

Mensajes: 811


¡ Hiperfoco !


Ver Perfil WWW
Re: [Duda] [HTML+CSS] Crear un borde sin mover el contenido
« Respuesta #5 en: 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#
En línea


Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
mover contenido de listbox a otro
Programación Visual Basic 		Carlosnuel 2 4,877 Último mensaje 10 Diciembre 2006, 20:54 pm
por Carlosnuel
Mover Form echo con API sin Borde
Programación General 		Riki_89D 3 3,869 Último mensaje 7 Mayo 2011, 16:36 pm
por Иōҳ
COMO MOVER UNA CARPETA Y SU CONTENIDO DE UN VOLUMEN(D:) A OTRO(E:)
.NET (C#, VB.NET, ASP) 		«Vicø™» 2 2,801 Último mensaje 13 Enero 2014, 16:40 pm
por «Vicø™»
[CONSULTA] - Crear imagen desde contenido HTML
Programación General 		Kataplaf 0 2,030 Último mensaje 29 Diciembre 2015, 20:38 pm
por Kataplaf
Duda para centrar contenido de una celda HTML
Desarrollo Web 		James_JPM 1 2,487 Último mensaje 14 Noviembre 2016, 04:16 am
por hackmastter
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines