Barra degradado en css

indie_rok · #1 (**permalink**) 16/08/2013, 14:12

Hola amigos

Tengo que hacer esta imagen y pasarla en css:

Este es el codigo que estoy usando:

Código:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>

#contenedor
{
	width:740px;
	height:100px;
	position:relative;	
}

#cuadro1
{
	width:105.71px;
	height:100px;
	background-color:#FBFBFB;	
}

#cuadro2
{
	width:105.71px;
	height:100px;
	background-color:#F7F7F7;	
}
#cuadro3
{
	width:105.71px;
	height:100px;
	background-color:#F0F2F1;	
}
#cuadro4
{
	width:105.71px;
	height:100px;
	background-color:#E3E4E6;	
}
#cuadro5
{
	width:105.71px;
	height:100px;
	background-color:#D1D1D1;	
}
#cuadro6
{
	width:105.71px;
	height:100px;
	background-color:#FFD300;	
}

</style>

</head>

<body>

<span id="contenedor"><!--Inicia contenedor-->

<div id="cuadro1"></div>
<div id="cuadro2"></div>
<div id="cuadro3"></div>
<div id="cuadro4"></div>
<div id="cuadro5"></div>
<div id="cuadro6"></div>

</span><!--Fin contenedor-->

</body>
</html>

Pero por alguna razon, me salen verticales y no horizontales los cuadros..

Ayuda!

Carlangueitor · #2 (**permalink**) 16/08/2013, 17:17

Sí, ese es el comportamiento por defecto. Tienes que indicar que debes estar flotados, con por ejemplo con float:left;

PD: No existen pixeles parciales, usa números enteros.

Saludos

cesa_r · #3 (**permalink**) 17/08/2013, 10:55

Agregales a todos los cuadros float: left; y al contenedor overflow: hidden; quedando asi:

Cita:

#contenedor
{
overflow: hidden;
width:720px;
height:100px;
position:relative;
}

#cuadro1
{
float: left;
width:105.71px;
height:100px;
background-color:#FBFBFB;
}

#cuadro2
{
float: left;
width:105.71px;
height:100px;
background-color:#F7F7F7;
}
#cuadro3
{
float: left;
width:105.71px;
height:100px;
background-color:#F0F2F1;
}
#cuadro4
{
float: left;
width:105.71px;
height:100px;
background-color:#E3E4E6;
}
#cuadro5
{
float: left;
width:105.71px;
height:100px;
background-color:#D1D1D1;
}
#cuadro6
{
float: left;
width:105.71px;
height:100px;
background-color:#FFD300;
}

cesa_r · #4 (**permalink**) 17/08/2013, 11:00

¡Pero una nota que se me escapaba para que el contenedor lea las capas flotando con overflow: hidden; cambia el espan por div!