2010-02-09 22 views
5

Soy bastante nuevo a CSS y quería saber cómo se puede lograr esto:HTML y CSS fondo

Estoy escribiendo una página que mostrará un formulario en el medio (representado por el cuadrado negro). Quiero que tenga un fondo blanco que se superponga con el fondo del cuerpo (representado por las líneas rojas).

Echa un vistazo a este sitio para ver la imagen de ejemplo. (Lo siento, no lo pude poner en línea)

http://www.freeimagehosting.net/uploads/bf2d71f238.png

Muchas gracias!

+0

Probablemente no es la bienvenida que estabas buscando por SO, sin embargo, Frank tiene un punto. La comunidad reaccionará mucho mejor si no les pides que hagan todo el trabajo por ti. Intenta publicar lo que tienes hasta ahora, por muy malo que creas que sea. –

+1

+1 buena pregunta para principiantes –

+2

@Mike - ¡Dibujar una imagen es mejor que la mayoría! Comenzar con lo que sabes no es una mala idea IMO –

Respuesta

3

puede dar a sus elementos de algunos estilos, de fondo puede ser de color, imágenes, etc.

CSS:

body { /* Red Lines Here */ 
    background: #990000; 
} 
#outer { /* White box Here */ 
    background: #ffffff; /* White */ 
    width: 900px; /* Total width will be 1000px once you include padding */ 
    padding: 50px; /* White border around black box, this is padding on all sides */ 
    margin: 0 auto; /* Centering it */ 
} 
#inner { /*Black Box Here */ 
    background: #000000; /* Black */  
    color: #ffffff; /* White Text so you can see it */ 
} 

HTML:

<html> 
    <head> 
    <title>My Page! Step off!</title> 
    </head> 
    <body> 
    <div id="outer"> 
     <div id="inner"> 
     Content! 
     </div> 
    </div> 
    </body> 
</html> 
+0

+1 - golpéame: P –

+0

Usar dos divs parece un poco exagerado. ¿Qué está mal con "border: 50px solid #FFF;"? – kloffy

+0

@kloffy - Si fuera yo, me gustaría una imagen en ese espacio, comenzando con esa opción más tarde :) –

0

Ve a leer un libro como 'CSS Mastery'. Una vez que conozca algunos conceptos básicos y pueda explicar lo que intentó y tenga una base para hacer una pregunta, solicite ayuda.

+0

No estoy de acuerdo - Aprendí TODO mi CSS de la experimentación y lectura de artículos web. No me importa darles a los usuarios un impulso rápido para ponerlos en funcionamiento. Una vez que vean suficientes ejemplos, descubrirán cómo las generalidades funcionan y experimentan por sí mismas. –

+1

@Frank: ¿por qué molestarse en responder si lo que está escribiendo es inútil? – AlexBrand

+0

No estoy de acuerdo con el voto en negativo. Una recomendación de libro se agrega a la discusión. Ahora puede que no ayude al chico con su pregunta inmediata, pero IMO, incluso si esta no es la mejor respuesta, puede ser útil si el aficionado está interesado en profundizar. Mi único comentario es que si vas a publicar una recomendación de libro, pon un enlace. Yuval: Si no has leído un libro completo sobre CSS, es probable que te falte una gran parte de la idea general de CSS. Traté de aprender de memoria por mí mismo durante los últimos 5 años más o menos, y finalmente tomé un libro y lo leí de principio a fin. –