0

Lo que quiero es hacer que mi Menú tenga un espacio a la derecha e izquierda (o sea, que cubra solo el 98% o 99% de ancho del sitio). Primero intenté con margin-left:1% y margin-right:1%; pero no sirvió ya que genera un borde color blanco (por defecto) y necesito que sea del mismo color que el sitio completo #f2f2f2.

Luego intenté con border-left: #f2f2f2 10px solid; y border-right: #f2f2f2 10px solid;. Esto sí funcionó pero no es responsivo y llega el momento en que se empieza a ver mal al cambiar la medida de la pantalla.

¿Existe una manera de hacerlo con "%"?

4
  • El margin no crea ningún borde blanco sino que deja un espacio entre elementos, si el espacio es blanco es porque el fondo que tienes es blanco
    – user7176
    Commented el 20 jun. 2018 a las 6:16
  • Claro ese color yo no lo he invocado, si te das cuenta al momento de empezar a maquetar un sitio web es completamente blanco..es el predeterminado Commented el 20 jun. 2018 a las 13:23
  • No entiendo el problema entonces porque dices en la pregunta que el color de tu sitio es #f2f2f2 y ahora en cambio dices que no has definido ningún color.
    – user7176
    Commented el 20 jun. 2018 a las 13:36
  • Cuando haces un margin NO genera un borde de ningún color en especial, como lo dice su nombre, ` margin` es simplemente un margen entre dos elementos del DOM. Creo que tu pregunta esta mal redactada de lo que realmente quieres hacer.
    – vicasas
    Commented el 20 jun. 2018 a las 13:42

3 respuestas 3

1

Podría ser así

.menu{
    max-width:100%;
    padding:0 2%;
}

esto lo hace transparente y cumple la función de borde el primer valor del padding 0 es para el padding superior e inferior y el segundo para los lados

Miralo en Pantalla grande

*{
border:0;
padding:0;
margin:0;
}
<div style="background-color:#f2f2f2;max-width:100%;height:200px; padding:0 2%;">con padding con padding con padding con padding con padding con padding con padding</div>
<div style="background-color:#f2f2f2;max-width:100%;height:200px;">Sin padding</div>

2
  • Si comprendo pero necesito que ese padding: 0 2% tenga el color #f2f2f2..conoces alguna manera de hacer con esos porcentajes? Commented el 20 jun. 2018 a las 13:18
  • ya lo probaste?
    – Ger
    Commented el 20 jun. 2018 a las 13:26
0

No he entendido muy bien la pregunta, pero por lo que he entendido quieres que un div tenga un borde con color #f2f2f2, y ese color no es el color del div ni de la web. Por lo que has dicho y has probado, te recomiendo que uses la segunda opción que comentas, y para que sea responsive uses mediaquerys. Por ejemplo:

.menu {border-left: #f2f2f2 10px solid; border-right: #f2f2f2 10px solid;}
@media (max-width: 600px) {
.menu {border-left: #f2f2f2 5px solid; border-right: #f2f2f2 5px solid;}
}
@media (max-width: 300px) {
.menu {border-left: #f2f2f2 2px solid; border-right: #f2f2f2 2px solid;}
}
1
  • Sabes? eso fue lo primero que se me paso por la cabeza y no es mala idea..pero hace mucho tiempo un tutor me menciono que cuando un diseñador web reescribe su código varias veces es porque esta haciéndolo de la manera incorrecta...debe de existir una manera de hacerlo mas corto y sencillo..pero tu respuesta es muy valida, Gracias. Commented el 20 jun. 2018 a las 14:57
0

No hace falta reescribir todas las propiedades del borde, solo el grosor, por ejemplo, tomando de partida la respuesta de Aiub Al-lal:

.menu {border-left: #f2f2f2 10px solid; border-right: #f2f2f2 10px solid;}

@media (max-width: 600px) {
.menu {border-width: 0 5px;}
}

@media (max-width: 300px) {
.menu {border-width: 0 2px;}
}
1

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.