Foros del Web » Creando para Internet » CSS »

Ayuda con fondo..

Estas en el tema de Ayuda con fondo.. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2010, 19:39
 
Fecha de Ingreso: octubre-2010
Ubicación: Cordoba
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Ayuda con fondo..

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 :)
  #2 (permalink)  
Antiguo 22/10/2010, 10:33
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Ayuda con fondo..

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,
  #3 (permalink)  
Antiguo 22/10/2010, 13:42
 
Fecha de Ingreso: octubre-2010
Ubicación: Cordoba
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con fondo..

Muchisimas gracias :)
  #4 (permalink)  
Antiguo 22/10/2010, 14:06
 
Fecha de Ingreso: octubre-2010
Ubicación: Cordoba
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con fondo..

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

Gracias
  #5 (permalink)  
Antiguo 22/10/2010, 16:31
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Ayuda con fondo..

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,
  #6 (permalink)  
Antiguo 22/10/2010, 17:14
 
Fecha de Ingreso: octubre-2010
Ubicación: Cordoba
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con fondo..

No funciona no se porqué, cambio la resolución de mi monitor y no se centra, se queda pegado en la derecha..
  #7 (permalink)  
Antiguo 22/10/2010, 18:31
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Ayuda con fondo..

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>
  #8 (permalink)  
Antiguo 22/10/2010, 18:45
 
Fecha de Ingreso: octubre-2010
Ubicación: Cordoba
Mensajes: 15
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con fondo..

Gracias :)

Etiquetas: fondo
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 20:31.