Ir para conteúdo

POWERED BY:

Arquivado

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

geektr

Disposição de elementos

Recommended Posts

Olá pessoal, estou tendo um problema com um list simples, o que eu quero e não estou conseguindo fazer é que o "LI" ocupe os espaços em branco e não seja influenciado por "LI" anteriores

 

Vejam as imagens:

 

http://imageshack.us/photo/my-images/40/x10p.png/

 

http://imageshack.us/photo/my-images/42/qfld.png/

 

http://imageshack.us/photo/my-images/838/72jy.png/

 

Como vocês podem ver, na medida que vou adicionando conteúdo em alarmes, ele vai deslocando os elementos seguintes...

 

CSS

#lista_produtos li {display:block; width:450px; height:auto; background:url('img/bg_produtos.png'); float:left; clear:right; color:#555; padding:10px;}

#lista_produtos li h1 {font-size:14px;}

#lista_produtos li p {clear:both;}

#lista_produtos li h1 img {float:left;}

 

HTML

			<ul id="lista_produtos">

				<li>
					<h1>Alarmes <img style="margin:0 5px 0 0" src="img/icones/produtos/alarme.png" /></h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
										<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				</li>

				<li>
					<h1>Automatização <img style="margin:0 5px 0 0" src="img/icones/produtos/automatizacao.png" /></h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				</li>

				<li>
					<h1>CFTV <img style="margin:2px 5px 0 0" src="img/icones/produtos/cftv.png" /></h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				</li>

				<li>
					<h1>Cercas Elétricas <img style="margin:0 5px 0 0" src="img/icones/produtos/cercas.png" /></h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				</li>

				<li>
					<h1>Interfonia e Telefonia <img style="margin:1px 5px 0 0" src="img/icones/produtos/telefonia.png" /></h1>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				</li>

			</ul>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se eu entendi bem, trabalhe com pseudo-seletores ou coloque uma class para li's que queira trabalhar sozinho;

Tente explicar novamente caso não seja isso amigo

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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