Centrar capa con borde

Tarzan · #1 (**permalink**) 31/03/2011, 00:41

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

Jask · #2 (**permalink**) 31/03/2011, 01:25

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

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

Que navegador estás utilizando?

Tarzan · #3 (**permalink**) 31/03/2011, 01:54

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

Jask · #4 (**permalink**) 31/03/2011, 02:18

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 !!

Tarzan · #5 (**permalink**) 31/03/2011, 02:29

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.

Tarzan · #6 (**permalink**) 31/03/2011, 02:44

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!!!

Jask · #7 (**permalink**) 31/03/2011, 09:14

Cita:

Iniciado por Tarzan

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 :) !!

kseso? · #8 (**permalink**) 01/04/2011, 08:00

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#contenedor {
    position: relative;
    border: 15px solid #000000;
    height: 738px;
    margin: 0 auto;
    width: 994px;
}

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?