montar uma rede estilo piramide
olá estou montando um rank estilo piramide
mas sou programador e preciso eu mesmo montar meu css... eu pesei em fazer um ul e li mas na hora nesas ai fiz uma aberração
vejam o css (sem piadas rsrs)
.rede {
width: 100%;
margin: 0 auto;
height: 700px;
border: #999 1px solid;
float: left;
}
.eu {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
margin: 0 auto;
}
.eu2 {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
float: left;
margin-left: 100px;
}
.eu3 {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
float: right;
margin-right: 80px;
}
.rede1 {
width: 100%;
height: 80px;
border: #0a0 1px solid;
float: left;
}
.rede2 {
width: 600px;
height: 80px;
border: #0a0 1px solid;
float: left;
margin-left: 310px;
}
.rede3 {
width: 800px;
height: 80px;
border: #0a0 1px solid;
float: left;
margin-left: 100px;
}
.eu3 {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
float: left;
margin-left: 80px;
}
.eu4 {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
float: left;
margin-left: 80px;
}
.eu5 {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
float: left;
margin-left: 80px;
}
.eu6 {
background-color: #0a0;
width: 80px;
height: 80px;
border: #999 1px solid;
float: left;
margin-left: 100px;
}
html
<div class="row">
<div class="rede">
<div class="rede1">
<div class="eu">a</div>
</div>
<div class="rede2">
<div class="eu2">a</div>
<div class="eu3">b</div>
</div>
<div class="rede3">
<div class="eu3">a</div>
<div class="eu4">b</div>
<div class="eu5">a</div>
<div class="eu6">b</div>
</div>
</div>
</div>
resultado ( lógico não é o que quero)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img856.imageshack.us/img856/6766/b42t.png&key=fc7671f2c377898269aa27631181e00e929b5ff043525ccf42a25261a71690c8" alt="b42t.png" />
preciso de algo estilo
/applications/core/interface/imageproxy/imageproxy.php?img=http://redeadventista.com.br/jovens/files/2013/03/piraMIDES.png&key=24f0508ac033a46815a5699393479a924685b6e3d07e7b832487b9f39514b05d" alt="piraMIDES.png" />
Discussão (3)
Carregando comentários...