Margens nas LIs

[Cesão 1]

Olá amigos,

 

Gostaria de saber se alguem possui uma lógica boa pra eu fazer o seguinte exemplo:

 

tenho uma div de width:400px

dentro dela tenho uma lista de blocos display:inline e cada LI possui width:195px... dei esse tamanho para que possa haver um espaço de 10px entre cada li...

mas o problema é.. se eu definir margin:0 10px 10px 0 na verdade ele estourará a div de 400px pois as LIs que ficam na direita tbm terão margem.

 

Para entenderem melhor o que estou dizendo, deem uma olhada abaixo:

 

CSS:

#principal {width:400px;}
#listBlocks ul li {width:195px; height:80px; display:inline; background:#000; float:left; margin:0 10px 10px 0;}

HTML:

<div id="principal">
	<div id="listBlocks">
		<ul>
		<li>numero 1</li>
		<li>numero 2</li>
		<li>numero 3</li>
		<li>numero 4</li>
		</ul>
	</div>
</div>

Essas LIs acabam ficando como se fosse em 2 colunas, mas estourando a div PRINCIPAL ja que as LIs "da direita" tbm possuem margem.

Alguém sabe como me ajudar em uma lógica melhor que essa?

[webflex 0]

Olá,

 

Não percebi sua questão..

 

Cumps \o/

[brcontainer 16]

estourar você quer dizer que os LIs vem para baixo??

se for isso o motivo é por causa da falta de espaço

aumente o div em 425 ou 450 pixels

 

ou zere todos os elementos(o <UL> as vezes gera um espaço a mais)

para isso use o seletor global ASTERISCO(*)

<style>
*{
margin:0;
padding:0;
}
</style>

[Cesão 1]

estourar você quer dizer que os LIs vem para baixo??

se for isso o motivo é por causa da falta de espaço

aumente o div em 425 ou 450 pixels

 

ou zere todos os elementos(o <UL> as vezes gera um espaço a mais)

para isso use o seletor global ASTERISCO(*)

<style>
*{
margin:0;
padding:0;
}
</style>

Silverfox, ja zerei... o meu problema é mais uma lógica de como fazer do que as ferramentas em si.. as ferramentas eu manjo, mas quero é idéias de lógica hehe

 

quando eu digo "estoura" quer dizer que no IE o div principal fica maior do que deveria e no FF os LIs ficam um embaixo do outro ao invés de ficar como se fossem 2 colunas... por isso gostaria de saber se alguém tem alguma idéia de como fazer para caber nesse div de 400, ficar em 2 colunas e ainda ter um espaço de 10px entre elas, entendeu? Tudo no meu site está bem simétrico, todas as margens entre os objetos são de 10px, alinhadas perfeitamente.. e gostaria de fazer o mesmo com minhas LIs... ou seja, eh como se apenas as LIs da esquerda possuissem margem (margin:0 10px 0 0;) enquanto as da direita não tivessem margem nenhuma (margin:0;). se alguém puder dar uma idéia, por favor, me ajude! http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

[brcontainer 16]

mas isso ocorre por causa da margem

se seguir o que você esta pensando você será obrigado a fazer uma margem para cada

<LI>

 

jah tentou aumentar o DIV pai de 400px para 425px(isso é uma media)?

;)

[Cesão 1]

mas isso ocorre por causa da margem

se seguir o que você esta pensando você será obrigado a fazer uma margem para cada

<LI>

 

jah tentou aumentar o DIV pai de 400px para 425px(isso é uma media)?

;)

Mas nao posso aumentar o width da div principal pq ela eh a estrutura do site.. já está pronta e definida.. essas LIs sao conteúdo de apenas uma pagina.. e eu gostaria de saber se ha um jeito de distribuir elas de forma que elas fiquem como se fossem 2 colunas, alinhadas com o topo na direita e na esquerda e fiquem com um espaço de 10px entre elas... mas o width da div principal NAO pode ser alterado...

 

Entendeu? existe o topo com 400px... queria que os blocos embaixo (as LIs) ficassem como se fosse 2 colunas, alinhadas com o topo nos dos lados e com espaço de 10px entre cada LI...

Alguém tem alguma idéia?

[brcontainer 16]

só se você diminur os objetos internos da DIV

tipo os <LI> reduza o WIDTH deles

 

como disse o espaço somando de todos witdhs(dos LIs)

mais(+) as margens ultrapasam o valor de 400px deformando a estrutura assim

[Cesão 1]

silverfox,

 

a soma que passei nao ultrapassa 400... cada LI tem 195px.. 2 colunas somam 390px.. mais 10px de espaçamento, 400px certinho...

e outra.. mesmo se eu diminuisse as LIs não ficaria do jeito que eu quero do mesmo jeito, pois teria margem à direita de cada LI e isso nao iria permitir que as LIs da coluna direita fiquem alinhadas com o topo, pois elas ficariam 10px distantes da margem direita do topo...

 

Eh isso que quero saber, se existe alguma logica que me ajude a posicionar as LIs alinhadas com o topo do lado esquerdo e do direito, com 10px de distancia entre as LIs como se fossem 2 colunas.

 

o meu problema é esse, não encontrei uma logica para fazer isso.

[Maujor 144]

A lógica que você procura é a seguinte:

 

1- Elimine margin e padding do elemento UL.

2-) Flutue os elementos LI ímpares para a esquerda e os pares para a direita.

 

CSS:
#principal {width:400px;}

#listBlocks ul {
list-style:none;
margin:0;
padding:0;
}

#listBlocks ul li {
width:195px; 
height:80px; 
background:#ffc; 
float:right; 
}

#listBlocks ul li.impar {
float:left; 
}

 

HTML:
<div id="principal">
<div id="listBlocks">
	<ul>
	<li class="impar">numero 1</li>
	<li>numero 2</li>
	<li  class="impar">numero 3</li>
	<li>numero 4</li>
	</ul>
</div>
</div>

[Cesão 1]

Graaaande mestre!

ficou perfeito! agora sim hehehe

 

o único problema vai ser quando eu baixar esses LIs dinamicamente (trazer conteudo do banco de dados através de ASP)... pois quando eu der um loop, vou ter que criar uma propriedade para falar que um eh impar e outro nao... nao sei como vou fazer isso, massss, isso eh assunto para outro tópico e outro fórum.. hehehe

 

Muito obrigado Maujor! ;)

[brcontainer 16]

a verdade é que obejetos internos devem ter uma soma inferior em pixels

ao objeto PAI ;)

[Cesão 1]

a verdade é que obejetos internos devem ter uma soma inferior em pixels

ao objeto PAI ;)

na verdade nao... sempre coloquei com a soma identica e se eu colocar menor eh que dah falha.. soh teria problema se as divs tivessem bordas, mas como não tem, a soma pode ser idêntica sim que não há problema. A prova disso é o exemplo que o Maujor acabou de passar e que solucionou perfeitamente meu problema... sem contar os diversos sites que desenvolvo sempre usando a soma identida de divs internas e divs externas. ;)

[Maujor 144]

.. pois quando eu der um loop, vou ter que criar uma propriedade para falar que um eh impar e outro nao... nao sei como vou fazer isso, massss, isso eh assunto para outro tópico e outro fórum.. hehehe

Crie um contador (se já não houver um) no loop.

Teste contador/2 se resultar inteiro (não deixar resto) é par se não insira a classe "impar"