Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biano

Posicionando listas dentro de divs - como no exemplo

Por , em Desenvolvimento frontend

Recommended Posts

Biano    0

Biano
Postado

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?

 

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

 

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?

 

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>
Resultado apresentado na tela: errado percebam que nao esta centralizando como desejado.
960.jpg

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Public2004    79

Public2004
Postado

Olá amigo, você diz centralizar na tela os elementos (listas) abaixo do item em vermelho?

Bom, se for isso mesmo comece reorganizando seu code pois lembre-se que o próprio <ul> já é um elemento de bloco assim, muitas "divs" são desnecessárias. Uma maneira prática de atingir o resultado é:

 

Criar um elemento container principal (<div>) e definir para este um "display:table;". Nos elementos internos (<ul>) remover os "float:left", e utilizar "display:table-cell;".

 

Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Cara muito obrigado pela dica, vou seguir sua dica.

E retorno com o resultado.

 

att

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito