Foros del Web » Creando para Internet » CSS »

Centrar DIV... lo doy por imposible.

Estas en el tema de Centrar DIV... lo doy por imposible. en el foro de CSS en Foros del Web. Hola, éste es mi primer post en el foro y como no, para pedir ayuda. Mi nombre es Alex, en mi tiempo libre me dedico ...
  #1 (permalink)  
Antiguo 01/12/2009, 07:24
mrN
 
Fecha de Ingreso: diciembre-2009
Mensajes: 4
Antigüedad: 8 años
Puntos: 0
Centrar DIV... lo doy por imposible.

Hola, éste es mi primer post en el foro y como no, para pedir ayuda. Mi nombre es Alex, en mi tiempo libre me dedico al diseño gráfico como hobby, ahora estoy intentando adentrarme en el mundo del CSS para poder hacer mi propio theme para Wordpress.

Estoy intentando centrar un div pero no lo consigo de ninguna manera, aquí está el "resultado": theadboy . com/party/test/ (no puedo poner enlaces, así que deberéis copiar y pegar sin los espacios, sorry).

El div que quiero centrar es el de "contenido", que esté en el mismo lugar que el background de arriba, el de los edificios. Aquí dejo el código, agradecería mucho que me echaran un cable... ya que he leído en mil foros y todo lo que pruebo no me funciona, seguro que tengo algún fallo tonto.

He eliminado toda propiedad que pudiera centrar el div para "facilitar" la ayuda.

Gracias por adelantado, un saludo.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" w3 . org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>THE ADBOY!</title>

<style type="text/css">

/* RESET CSS */

*{ margin: 0; padding: 0; border: 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1 { font-size: 26px; }

h2 { font-size: 20px; }

h3 { font-size: 16px; }

h4 { font-size: 14px; }

h5 { font-size: 12px; }

h6 { font-size: 10px; }

li { list-style: none; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }



/* FIN RESET CSS */

/* THE ADBOY CSS */

body {
	
	background: #1a1a1a url("images/bg.jpg") no-repeat top;
	
}
	
div#logo {
	
	background-image: url("images/logo.png");
	background-repeat: no-repeat;
	width: 232px;
	height: 39px;
	position:absolute;
	left:44%;
	top:60px;
	
}

div#menu-bar {
	
	background-image: url("images/menu_bg.png");
	background-repeat: repeat-x;
	width: 100%;
	height: 29px;
	position: absolute;
	top: 0px;
	left: auto;
	z-index:1;
	filter: alpha(opacity=80); -moz-opacity:.80; opacity:.80;
	
}

div#destacado {
	
	background-color: #000;
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 400px;
	filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;
	
}
	

div#contenido {
	
	background-color: #333333;
	width: 1200px;
	height: 100%;
	position: absolute;
	top: 415px;
	filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;

}
	
/* FIN THE ADBOY CSS */

</style>



</head>

<body>
<div id="logo"></div>
<div id="menu-bar"></div>
<div id="destacado"></div>
<div id="contenido"></div>
</body>
</html>
  #2 (permalink)  
Antiguo 01/12/2009, 07:47
 
Fecha de Ingreso: julio-2003
Ubicación: Cochabamba Bolivia
Mensajes: 300
Antigüedad: 14 años, 4 meses
Puntos: 14
De acuerdo Respuesta: Centrar DIV... lo doy por imposible.

Hola, despues de ver tu codigo no encuentro el lugar en dontre das las instrucciones para centrar, lo que necesitas es poner algo como esto para centrar cualquier div:

Código css:
Ver original
  1. #contenido { margin: 0 auto; }

ahora para ie6 tendrias que hacerlo asi:

Código css:
Ver original
  1. body { text-align: center; }

Ya que internet exlporer 6 no interpreta correctamente el margin automatico.

Saludos.
__________________
:policia: Uno para todos y todos para uno.
  #3 (permalink)  
Antiguo 01/12/2009, 08:00
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Centrar DIV... lo doy por imposible.

El diseño va mas allá de decir con las reglas que se debe centrar un div. En primer lugar, no hay ningún div contenedor, que contenga a los elementos del blog. Segundo, los div estan situados con posicion absolute, esat propiedad primara sobre cualquier intento de centrado.

Mi consejo, crea un dic contenedor en el que despues pongas la cabacera, el contenido (entradas) y el pie. Si la imagen te da mucho dolores de cabeza, la puedes poner en el body.

Saludos¡¡
  #4 (permalink)  
Antiguo 01/12/2009, 08:22
mrN
 
Fecha de Ingreso: diciembre-2009
Mensajes: 4
Antigüedad: 8 años
Puntos: 0
Respuesta: Centrar DIV... lo doy por imposible.

Gracias por responderme, después de vuestros consejos, he creado un div contenedor y dentro he colocado todos los demás.

En cuanto a "position: absolute", si lo elimino, desaparece por completo el div, no aparece nada y no entiendo el motivo. Aquí dejo el código con las rectificaciones y de este modo no aparece el div "contenido" por ningún sitio:

Código:
/* THE ADBOY CSS */

body {
	
	background: #1a1a1a url("images/bg.jpg") no-repeat top;
	text-align: center;
	
}

div#contenedor { 

	
}
	
div#logo {
	
	background-image: url("images/logo.png");
	background-repeat: no-repeat;
	width: 232px;
	height: 39px;
	position:absolute;
	left:44%;
	top:60px;
	
}

div#menu-bar {
	
	background-image: url("images/menu_bg.png");
	background-repeat: repeat-x;
	width: 100%;
	height: 29px;
	position: absolute;
	top: 0px;
	left: auto;
	z-index:1;
	filter: alpha(opacity=80); -moz-opacity:.80; opacity:.80;
	
}

div#destacado {
	
	background-color: #000;
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 400px;
	filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;
	
}
	

div#contenido {
	
	background-color: #333333;
	width: 1200px;
	height: 100%;
	left: inherit;
	top: 415px;
	margin: 0 auto;
	filter: alpha(opacity=70); -moz-opacity:.70; opacity:.70;

}
	
/* FIN THE ADBOY CSS */

</style>



</head>

<body>
<div id="contenedor">
<div id="logo"></div>
<div id="menu-bar"></div>
<div id="destacado"></div>
<div id="contenido"></div>
</div>
</body>
</html>
  #5 (permalink)  
Antiguo 01/12/2009, 09:00
Avatar de xxrandyxx  
Fecha de Ingreso: abril-2008
Ubicación: En mi casa
Mensajes: 143
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: Centrar DIV... lo doy por imposible.

No aparece por que le das height: 100%; dale un height:500px; vas a ver como aparece, yo no uso porcentajes en el height por que me da mucho problema
__________________
Todos somos muchos, muchos somos pocos, pocos somos los que sabemos y no sabemos lo que no conocemos...

PericoteSucio
  #6 (permalink)  
Antiguo 01/12/2009, 09:09
mrN
 
Fecha de Ingreso: diciembre-2009
Mensajes: 4
Antigüedad: 8 años
Puntos: 0
Respuesta: Centrar DIV... lo doy por imposible.

Cita:
Iniciado por xxrandyxx Ver Mensaje
No aparece por que le das height: 100%; dale un height:500px; vas a ver como aparece, yo no uso porcentajes en el height por que me da mucho problema
Perfecto, ahora si que aparece y centrado! Ahora sólo tengo un problema, aparece donde quiere, jaja, me gustaría empujarlo desde arriba hacia abajo unos 500px, para que esté justo debajo de la imagen de los edificios, ¿cómo podría hacerlo?

Gracias!!!
  #7 (permalink)  
Antiguo 01/12/2009, 09:19
mrN
 
Fecha de Ingreso: diciembre-2009
Mensajes: 4
Antigüedad: 8 años
Puntos: 0
Respuesta: Centrar DIV... lo doy por imposible.

Cita:
Iniciado por mrN Ver Mensaje
Perfecto, ahora si que aparece y centrado! Ahora sólo tengo un problema, aparece donde quiere, jaja, me gustaría empujarlo desde arriba hacia abajo unos 500px, para que esté justo debajo de la imagen de los edificios, ¿cómo podría hacerlo?

Gracias!!!
Me respondo yo mismo, tenía que añadir "position: relative" y después sencillamente "top 500px", sin lo de position no funcionaba.

Gracias a todos, sigo trabajando!!!
  #8 (permalink)  
Antiguo 01/12/2009, 09:26
 
Fecha de Ingreso: noviembre-2008
Mensajes: 6
Antigüedad: 9 años
Puntos: 0
Respuesta: Centrar DIV... lo doy por imposible.

Es tan facil como hacer esto....

En tu css..

html {
margin:0;
padding:0;
}

body {
padding:5px 0 5px 0;
margin:0 auto 0 auto;
}

Cualquier cosa que metas en el body quedara centrada !
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 13:14.