Foros del Web » Creando para Internet » CSS »

Agregarle border a un elemento con padding

Estas en el tema de Agregarle border a un elemento con padding en el foro de CSS en Foros del Web. Hola a todos, Me acabo de encontrar con un problemita... y doy un ejemplo aca. Supongamos que creamos un div y dentro de el unos ...
  #1 (permalink)  
Antiguo 05/12/2010, 01:07
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 13 años, 8 meses
Puntos: 5
Agregarle border a un elemento con padding

Hola a todos,

Me acabo de encontrar con un problemita... y doy un ejemplo aca.

Supongamos que creamos un div y dentro de el unos botones, algo asi:

Código:
<div id="box">
    <div class="button">boton1</div>
    <div class="button">boton2</div>
    <div class="button">boton3</div>
</div>
Lo ponemos horizontalmente y demas... le agregames un background a cada boton y un margin entre cada uno. Hasta ahi muy bien... ahora yo quiero que cada boton (especificamente el TEXTO del boton) tenga un espacio entre el borde del mismo, para ello le agrego un padding al class "button" de no se, 10px por ejemplo. Y ahi es cuando surge el problema, si yo al id "box" le quiero agregar un border por ejemplo, para encerrar a todos los botones, el border sale bastante chico, ya que no toma en cuenta el padding de los botones.

De que forma podria solucionar este inconveniente?

Muchas gracias de antemano.

PD: El tema de los botones es simplemente un ejemplo.
PD2: Si no se entendio avisen y muestro algun ejemplo mas ilustrativo.
  #2 (permalink)  
Antiguo 05/12/2010, 02:18
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Agregarle border a un elemento con padding

mas que describir el ejemplo hubiera sido conveniente mostraras un codigo css que hayas probado y presente el problema indicado y mucho mejor si se complementa con un screenshot

jeje en dado caso jugando a las adivinanzas que ando de buenas apostaria a que al id box jamas le aplicaste un overflow:hidden; u overflow:auto;
  #3 (permalink)  
Antiguo 05/12/2010, 02:21
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: Agregarle border a un elemento con padding

borrar....
  #4 (permalink)  
Antiguo 05/12/2010, 18:08
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 13 años, 8 meses
Puntos: 5
Respuesta: Agregarle border a un elemento con padding

Cita:
Iniciado por Ag666 Ver Mensaje
mas que describir el ejemplo hubiera sido conveniente mostraras un codigo css que hayas probado y presente el problema indicado y mucho mejor si se complementa con un screenshot

jeje en dado caso jugando a las adivinanzas que ando de buenas apostaria a que al id box jamas le aplicaste un overflow:hidden; u overflow:auto;
Justo cuando taba sacandole la foto al problema, esta foto:



Se me ocurrio intentar algo y lo solucione xd. Yo le habia agregado 20px de padding a cada cuadradito, como habia dicho. Y al hacer eso el border no aumentaba de altura para que quede bien encuadrado, solamente encerraba a los cuadraditos como si no tuviera padding. Entonces se me ocurrio de agregarle padding:20px; al "box" tambien y ahora se ve como tendria que ser:



No se si es la mejor solucion, pero bueno... funciona, cualquier cosa me avisan, Gracias.
  #5 (permalink)  
Antiguo 05/12/2010, 22:38
 
Fecha de Ingreso: enero-2007
Mensajes: 17
Antigüedad: 17 años, 2 meses
Puntos: 0
Respuesta: Agregarle border a un elemento con padding

y porque no le agregastes una altura?
  #6 (permalink)  
Antiguo 09/12/2010, 17:45
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 13 años, 8 meses
Puntos: 5
Respuesta: Agregarle border a un elemento con padding

Cita:
Iniciado por amigo_uy Ver Mensaje
y porque no le agregastes una altura?
Emm, esto ya lo solucione y aparte era una pagina web simplemente en construccion y queria poner el tiempo que tardare en terminar la pagina web. De todas formas aprovecho para sacarme una duda y preguntarte lo siguiente:

En el caso de aumentarle la altura, como haria para que cada numero se centre verticalmente y horizontalmente? como queda en la imagen que mostre. Se que hay info sobre trucos para centrar vertical y horizontalmente pero en este caso creo que es distinto, de todas formas no puedo testear en este momento, por eso pregunto.

Y, emmm... en el caso de que haya que usar dichos trucos, que por lo que vi no son del todo efectivos, no es mejor como yo hice con padding y listo?

Etiquetas: border, padding
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 01:03.