Ayuda con fondo..

Fecheee1232 · #1 (**permalink**) 21/10/2010, 18:39

Hola, bueno, queria saber como puedo hacer lo siguente:

Queria saber si se podia hacer.. una imagen en el centro, y al borde un color grisento.. gracias :)

dargorg · #2 (**permalink**) 22/10/2010, 09:33

Claro que se puede hacer, un ejemplo sería:

Archivo index.html

Código:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
	<div id="contenedor">
		contenido aqui
	</div>
</body>
</html>

Archivo estilos.css

Código:

body
{
	background: #000;
	font: normal 12px Arial, Helvetica, sans-serif;
	position: relative;
}

#contenedor
{
	background: #fff;   /* color blanco de fondo */
	border: 2px solid #ccc;   /* borde gris */
	height: 400px;
	left: 50%;
	margin: -200px 0 0 -480px;
	position: absolute;
	top: 50%;
	width: 960px;
}

Con esto ya puedes empezar,

Un saludo,

Fecheee1232 · #3 (**permalink**) 22/10/2010, 12:42

Muchisimas gracias :)

Fecheee1232 · #4 (**permalink**) 22/10/2010, 13:06

Uh, tengo un problema, dependiendo las resoluciones, queda en diferentes lugares.. como lo centro?

Gracias

dargorg · #5 (**permalink**) 22/10/2010, 15:31

El código que te he puesto ya lo centra automático. Fíjate que cuando ponemos left: 50% y top: 50% lo que estamos haciendo es darle un margen izquierdo y superior del 50% y cuando ponemos margin: -200px 0 0 -480px lo que hacemos es darle un margen negativo superior de 200px e izquierdo de -480px que es justo la mitad de lo que mide la caja.

De esta manera siempre quedará el contenedor situado en el centro de la pantalla, sea cual sea la resolución del usuario.

Un saludo,

Fecheee1232 · #6 (**permalink**) 22/10/2010, 16:14

No funciona no se porqué, cambio la resolución de mi monitor y no se centra, se queda pegado en la derecha..

dargorg · #7 (**permalink**) 22/10/2010, 17:31

Perdona, se me escapó una cosilla. Elimina el position: relative del body en el CSS y ya te funcionará.

Un saludo,

Código:

<html>
	<head>
		<title>Centrando un div por CSS</title>
		
		<style type="text/css">
			body
			{
				background: #000;
				font: normal 12px Arial, Helvetica, sans-serif;
			}
			
			#contenedor
			{
				background: #fff;   /* color blanco de fondo */
				border: 2px solid #ccc;   /* borde gris */
				height: 400px;
				left: 50%;
				margin: -200px 0 0 -480px;
				position: absolute;
				top: 50%;
				width: 960px;
			}
		</style>
	</head>
	<body>	
		<div id="contenedor">contenido de la web</div>
	</body>
</html>

Fecheee1232 · #8 (**permalink**) 22/10/2010, 17:45

Gracias :)