Foros del Web » Creando para Internet » CSS »

Centrar capa con borde

Estas en el tema de Centrar capa con borde en el foro de CSS en Foros del Web. Hola a todos, en este mismo foro encontré un código en css que permitía centrar una capa (horizontal y verticalmente), independientemente de la resolución del ...
  #1 (permalink)  
Antiguo 31/03/2011, 01:41
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Centrar capa con borde

Hola a todos,

en este mismo foro encontré un código en css que permitía centrar una capa (horizontal y verticalmente), independientemente de la resolución del navegador. Este código funcionaba perfectamente hasta que decidí incluir un borde de 15 píxeles sobre toda la capa, (caprichoso que es uno),

¿Alguien puede decirme como centro la capa con el borde?

Mi código:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba</title>
<style type="text/css">
#contenedor {position:absolute;width:994px;height:738px;top: 50%;left: 50%;margin-top: -369px; margin-left: -497px;border:15px solid #FFF;} .capa_left{width:15%;height:80%;background-color:blue;float:left;} .capa_centro{width:70%;height:80%;background-color:orange;float:left;} .capa_right{width:15%;height:80%;background-color:blue;float:left;} .capa_top{width:100%;height:10%;background-color:green;clear:both;} .capa_pie{width:100%;height:10%;background-color:green;clear:both;}
</style> </head> <body> <div id="contenedor"> <div class="capa_top">Top</div> <div class="capa_left">Left</div> <div class="capa_centro">Centro</div> <div class="capa_right">Right</div> <div class="capa_pie">Pie</div> </div> </body> </html>
Un saludo
  #2 (permalink)  
Antiguo 31/03/2011, 02:25
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Centrar capa con borde

No se a vos pero a mi se me ve bien :S

http://i56.tinypic.com/258uver.png

Que navegador estás utilizando?
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #3 (permalink)  
Antiguo 31/03/2011, 02:54
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Centrar capa con borde

Gracias por responder tan rápido Jask,

acabo de abrir la imagen que adjuntas y es exactamente igual a como se me ve a mí cuando quito el borde de 15 pixeles de la capa contenedor.

¿Lo has quitado?

Es el border: 15px solid #FFF; que hay en la clase #contenedor del CSS la que me está colocando mal el contenido.
Si lo quito se me ve exactamente como a ti en la foto. pero si la dejo se me descuadra y no aparece centrado.

¿Sabes cómo puedo hacerlo para mantener este borde separador?

Estoy haciendo pruebas con Mozilla, Explorer y Chroome.
Con los tres se me descuadra cuando le incluyo el borde de 15px ;(.

Un saludo
  #4 (permalink)  
Antiguo 31/03/2011, 03:18
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Centrar capa con borde

Mmm no caí en la cuenta que estoy usando FF4 xD !! Bueno... la solución que veo según comentás es que si poniendo un borde de 0 todo está bien, y poniendo un borde de 15 se descuaja todo xD tendrías que cambiar los valores ya que al poner 15px en borde aumenta el tamaño de la caja, aunque solo sea el borde, y tendrías que modificar los valores de width y height. Te recomiendo utilizar la herramienta firebug la cual puedes modificar "en caliente" el css y ver como va quedando si estar guardando y subiendo.

Si necesitás más ayuda, no dudés :)

Suerte !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #5 (permalink)  
Antiguo 31/03/2011, 03:29
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Centrar capa con borde

Uff, pues es que llevo ya casi dos horas probando a cambiar el ancho y el alto del contenedor y no consigo ajustarlo bien!

Al principio lo tenía a 1024x768, que es el tamaño estático que quiero y, a partir de ahí, las capas interiores acoplarlas con porcentajes.

Cuando le añadí los 15 píxeles, conté 30 píxeles para el ancho (borde izquierdo y borde derecho), y otros 30 píxeles para el alto, (borde superior y borde inferior).
Por ello le quité al widthdel contenedor 30 píxeles y otros 30 al height, dejándolo en 994x738. Pero sigue descuadrando!!

A mí me da que no termina de alinearlo bien en el centro de la pantalla porque no sabe separar bien el borde del tamaño global del contenedor ;(

La herramienta que me indicas no la conozco pero, en el trabajo no me dejan instalarme nada que ellos no controlen y me temo que sólo puedo trabajar editando y refrescando ;(

Si tuvieras alguna idea, de alguna propiedad que pueda aplicar o quitar al css, Jask... te lo agradecería un montón ;)

Un saludo.
  #6 (permalink)  
Antiguo 31/03/2011, 03:44
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Centrar capa con borde

Lo hice!!

Probé a instalarme el firebug que, como es un pluggin del Mozilla pues me ha dejado sin problemas!!

Y he visto el error donde estaba!!!
Tenía que quitarle los 30pixeles al ancho y al alto pero NO quitárselos al margen top y al left para que mantuviera la alineación centrada!!

muchísimas gracias Jask!!!
Esto del firebug es una maravilla!!

Y yo picando como los picapiedra!!!
  #7 (permalink)  
Antiguo 31/03/2011, 10:14
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Centrar capa con borde

Cita:
Iniciado por Tarzan Ver Mensaje
Lo hice!!

Probé a instalarme el firebug que, como es un pluggin del Mozilla pues me ha dejado sin problemas!!

Y he visto el error donde estaba!!!
Tenía que quitarle los 30pixeles al ancho y al alto pero NO quitárselos al margen top y al left para que mantuviera la alineación centrada!!

muchísimas gracias Jask!!!
Esto del firebug es una maravilla!!

Y yo picando como los picapiedra!!!
PErdoná que no lo haya visto antes, entre clase y el trabajo no tuve tiempo pero bueno ya veo que está solucionado, me alegro !! :)

Firebug es una excelente herramiento que todo programador web tiene que tener, te ayuda un montón en muchos aspectos, yo aun no conozco el alcance al 100% de esta pero ya te digo que me ayuda un montón si necesidad de estar picando código cada dos por tres.

Un saludo :) !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #8 (permalink)  
Antiguo 01/04/2011, 09:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar capa con borde

Un poco tarde pero ahí va mi opinión.

El código para centrar que utiliza en #contenedor es demasiado peligroso. En este caso no debería utilizarse. Pruebe a modificar (reducir) la altura de la ventana del navegador.

Cambie todo el absolute, márgenes negativos y porcentajes por lo siguiente:
Código CSS:
Ver original
  1. #contenedor {
  2.     position: relative;
  3.     border: 15px solid #000000;
  4.     height: 738px;
  5.     margin: 0 auto;
  6.     width: 994px;
  7. }
y añada a su css algún reset (aunque sea el mini reset).

Verá que el centrado horizontal se mantiene, con independencia de que cambie el tamaño de la caja o de los bordes (aunque sean distintos en cada lateral).

Y sí, mi propuesta no centra en la vertical, pero ¿quién lo necesita con una altura de casi 800px?

Etiquetas: capas, bordes
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 21:17.