Foros del Web » Creando para Internet » CSS »

Problema con padding responsive

Estas en el tema de Problema con padding responsive en el foro de CSS en Foros del Web. Hola, tengo el siguiente código HTML: Código HTML: <nav id= "main_nav" > <a href= "#" > LINK 1 </a> <a href= "#" > LINK 2 ...
  #1 (permalink)  
Antiguo 07/06/2013, 13:09
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 16 años, 10 meses
Puntos: 0
Problema con padding responsive

Hola, tengo el siguiente código HTML:

Código HTML:
<nav id="main_nav">
    <a href="#">LINK 1</a>
    <a href="#">LINK 2</a>
    <a href="#">LINK 3</a>
    <a href="#">LINK 4</a>
    <a href="#">LINK 5</a>
</nav> 
Y su CSS:

Código CSS:
Ver original
  1. nav#main_nav {
  2.     width:1200px;
  3. }
  4. nav#main_nav a{
  5.     display:inline-block;
  6.     padding:15px 43px;
  7.     background-color:#2c2c2c;
  8. }

Lo que quiero, es esta botonera sea responsive; es decir, cuando la pantalla mida menos de 1200px (ancho total de nav#main_nav), los links se ajusten. Hice la famosa cuenta de Target/Contexto, y me queda así:

Código CSS:
Ver original
  1. @media screen and (max-width:1200px){
  2.     nav#main_nav{
  3.         width:inherit;
  4.     }
  5.     nav#main_nav a{
  6.         padding:15px 3.583333%; /* 43/1200 */
  7.     }
  8. }

No se si estoy haciendo mal la cuenta o qué, pero los elementos a (links) se van ajustando a medida que achico el navegador, pero el ultimo link (el quinto) se me va para abajo, no queda en línea con los otros cuatro. Evidentemente el valor que puse del padding right/left debe estar mal pero no se me ocurre qué otra cuenta puedo hacer para solucionarlo ya que el div padre #main_nav tiene un ancho total variable. ¿Alguien con alguna idea para orientarme? Gracias!! :)
  #2 (permalink)  
Antiguo 07/06/2013, 14:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con padding responsive

Yo como interfaz gráfica no veo lógico que el padding dependa del ancho de la pantalla. Es un poco extraño. Además, como los enlaces no tienen un ancho fijo definido no existe ningún cálculo para que siempre se ajusten al 100% del ancho junto al padding.

Yo haría más bien alguna cosa así:

Código CSS:
Ver original
  1. nav#main_nav a {
  2.   width: 20%;
  3.   padding: 30px;
  4.   box-sizing: border-box;
  5. }
  #3 (permalink)  
Antiguo 07/06/2013, 15:01
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: Problema con padding responsive

pzin gracias por tu comentario.

En realidad el padding en cada link es para que el texto quede centrado y sus márgenes left y right sean iguales. Hay links que tienen más texto que otros. Por eso no le puedo ancho fijo y text-align:center.
  #4 (permalink)  
Antiguo 07/06/2013, 15:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con padding responsive

Claro, por eso digo, que al no tener un ancho fijo, la solución pasa por hacer que el padding sea parte del ancho, de ahí el box-sizing.

Etiquetas: ancho, html, padding, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:51.