Posicionando listas dentro de divs - como no exemplo
Bom dia,
Estou a uma semana desenvolvendo esta tela em css puro, trata-se de um organograma.
Existe um item principal (HOME) este precisa manter-se sempre centralizado, independente da quantidade de filho que tenha abaixo dele.
Mas na pratica nao esta funcionando.
Estou posicionando os filhos com ul li e float-left mas o item principal nao acompanha ou seja nao se mantem centralizado, com as colunas de filhos.
Qual a melhor maneira de fazer com que isso funcione?
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.cmax.com.br/mold.jpg&key=afeebe752bd3dcf037f110be8a83f82bb2cc7f61381a954fedb9177ab5b9c5aa" alt="mold.jpg" />
<style>
#topo_oganograma ul{padding:10px; margin:5px; width:auto;}
#topo_organograma ul li {width: 160px; margin:03px; padding:10px; font-size: 14px; font-weight: bold;}
#topo_organograma ul li {background-color:red; border:1px solid #C00; border-radius:8px;}
/ Teste organagrama final /
#pais ul {list-style: none; margin: 0px; text-align:center; display:inline; float:left;}
#pais ul li {/float: left;/
width: 160px;
margin:3px;
padding:10px;
font-size: 14px;
font-weight:bold;
color:#666;
}#pais ul li {background-color:#FC0; border:1px solid #F93; border-radius:8px;}
</style>
E o HTML:
<html>
<head>
<body>
</head>
<div id="conteudo_organograma" style="margin:0 auto; text-align:center">
<div id="topo_organograma">
<center>
<ul>
<li>HOME</li>
</ul>
</center>
</div>
<div id="pais" style="margin:0 auto; float:left">
<center>
<ul style="clear:both">
<li>UM</li>
<li>DOIS</li>
<li>TRES</li>
<li>QUATRO</li>
<li>CINCO</li>
<li>SEIS</li>
<li>SETE</li>
<li>OITO</li>
<li>NOVE</li>
<li>DEZ</li>
<li>ONZE</li>
<li>DOZE</li>
<li>TREZE</li>
</ul>
</center>
</div>
<div id="pais" style="margin:0 auto; float:left">
<center>
<ul style="clear:both">
<li>UM</li>
<li>DOIS</li>
<li>TRES</li>
<li>QUATRO</li>
<li>CINCO</li>
<li>SEIS</li>
<li>SETE</li>
<!--li>OITO</li-->
</ul>
</center>
</div>
<div id="pais" style="margin:0 auto; float:left">
<center>
<ul style="clear:both">
<li>UM</li>
<li>DOIS</li>
<li>TRES</li>
<li>QUATRO</li>
<li>CINCO</li>
<li>SEIS</li>
<li>SETE</li>
<!--li>OITO</li-->
</ul>
</center>
</div>
</div>
</body>
</html>Discussão (3)
Carregando comentários...