[SOLUCIONADO] Problema color de fondo del contenedor

blacklamb · #1 (**permalink**) 13/05/2013, 16:00

Buenas, soy algo nuevo en esto del diseño web, estoy intentando hacer mi primera pagina web, el caso es que no se porque, no se ve el color del div contenedor, os pongo mi codigo

mi html:

Código:

<!doctype html>
<html lang="es">
<head>
	<link rel="stylesheet" href="css/estilo1.css">
	<meta charset="UTF-8">
	
	<title>Alberto</title>
</head>
<body>
	<div id="contenedor">
		<nav>
				<ul>
					<li> <a href="#">Principal</a></li>
					<li> <a href="#">Quien Soy</a></li>
					<li> <a href="#">Galeria</a></li>
					<li> <a href="#">Contacto</a></li>
				</ul>
			</nav>
		<article id="principal">
			<h1>Alberto</h1>
			<p>I'm a 3D artist from Valencia (Spain), specialized in modeling, texturing and lighting. I have a degree in industrial design engineering with one year of specialization in CG animation production. I also have been certified by Autodesk as a 3ds Max 2011 and 2013 professional. <br>

			After finishing my studies, I worked during a year in Nereida Animation Films studios making sets and props for the film Tombatossals: The Legend.<br> 

			You can see on this site my showreel and projects that I have participated. [ES]</p>
		</article>
		<article id="video">
				<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=17053492" type="application/x-shockwave-flash">
				<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
				<param name="allowFullScreen" value="true"></param>
				<param value="always"></param>
				</object>
		</article>
	</div>
</body>
</html>

el css:

Código:

	body
	{
		background:#CFCFCF;
		text-align: center;
		min-width: 850px;
	}

	ul
	{
		width: 45%;
		margin: 0 auto;
		padding: 0;
	}
	ul li
	{
		list-style: none;
		text-align: center;
	}
	ul > li
	{
		position: relative;
		float: left;
		width: 140px;
		background: black;	
	}
	ul li a
	{	
		display: block;
		color: white;
		padding: 1em 0;
		text-decoration: none;
	}
	ul li a:hover
	{
		background:#C0C0C0;
		color: black;
		font-weight: 800;
	}


#contenedor
{
	text-align: left;
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	background:#F2F2F2;
}
#principal
{	
	margin:20px 20px 20px 100px;
	height:15%;
    float:left;
    width:35%;
    padding: 0;
}
#video
{
	margin: 20px 200px 20px 20px;
	float:right;
}

pzin · #2 (**permalink**) 13/05/2013, 17:36

Bienvenido al foro.

Lo más seguro es que #contenedor no esté tomando la altura que debe, ya que contiene elementos flotados. Para forzar que toma esa altura, añádele un overflow:

Código CSS:

Ver original#contenedor {
  overflow: hidden;
  /* demás CSS */
}

También puedes usar otro método, que se supone más moderno, que es el micro clearfix. Aunque para este caso específico te basta usar overflow.

blacklamb · #3 (**permalink**) 13/05/2013, 18:23

Muchisimas gracias, lo solucione ;), se nota mucho lo de seguir tutoriales y hacer cosas por tu cuenta, pero es realmente como aprendes

pzin · #4 (**permalink**) 13/05/2013, 18:26

Los palos, aunque duelan, enseñan.

blacklamb · #5 (**permalink**) 13/05/2013, 18:37

me habia rallado un poco, porque le habia puesto un height y nada, seguia sin verse, pero con el overflow se me ha solucionado el problema