Jump to content


LucasAlves

Member Since 09/05/2011
Offline Last Active 13/12/2015, 20:31
-----

#1013719 Listagem Lado A Lado

Posted by LucasAlves on 24/09/2011, 15:37

Tem que fazer usando CSS!

faça algo + ou - assim:

<div id="produtos">
<div class="cproduto">
<a href="http//....">Produto 1 <img src="file/produto1.png">
</a>
</div>
<div class="cproduto">
<a href="http//....">Produto 2 <img src="file/produto2.png">
</a>
</div>
<div class="cproduto">
<a href="http//....">Produto 3 <img src="file/produto3.png">
</a>
</div>
<div class="cproduto">
<a href="http//....">Produto 4 <img src="file/produto4.png">
</a>
</div>
<div class="cproduto">
<a href="http//....">Produto 5 <img src="file/produto5.png">
</a>
</div>
<div class="cproduto">
<a href="http//....">Produto 6 <img src="file/produto6.png">
</a>
</div>
</div>

css
#produtos {
 display: block;
 width: 310px;
}
.cproduto {
 display: block;
 Float : Left;
 width: 100px;
 height: 100px;
}

Abraços!!!


#1012296 Css: Criar Estrutura Do Site Usando Div

Posted by LucasAlves on 31/07/2011, 20:30

Boa noite!

Estou há três dias tentando criar a estrutura para meu site,

Eu quero que ele fique assim:
Posted Image

A parte mais difícil é fazer com que Box_Left e o Box_Right sempre tenham a mesma altura que o Box_Content, ai é que tá o problema: o Box_Content não tem uma altura fixa, dependendo do conteúdo ele aumento ou diminui, e eu também preciso definir uma altura mínima!

Esse forum é meu último recurso, estou contando com a ajuda de vocês, já pesquisei no google, e não achei uma solução que resolve-se meu problema.

Eu até fiz assim:


.cBoxPage {
	border: 4px solid olive;
	width: 1024px;	
}

.cBoxTop {
	border: 6px solid black;
	position: relative;
	top: 0px;
	height: 80px;
	clear: both;
}

.cBoxContent {
	border: 1px solid red;
	display: inline-block;
	height: 100%;
	width: 60%;
}

.cBoxLeft {
	border: 2px solid blue;
	float: left;
	height: 100%;	
	width: 200px;
}
.cBoxRigth {
	border: 2px solid aqua;
	float: right;
	height: 100%;
	width: 200px;
}
.cBoxBottom {
	border: 2px solid orange;
	height: 80px;
	clear: both;
	
}

<DIV class="cBoxPage">

<DIV class="cBoxTop">cBoxTop</DIV>
<DIV class="cBoxLeft">cBoxLeft</DIV>
<DIV class="cBoxRigth">cBoxRigth</DIV>
<DIV class="cBoxContent">cBoxContent</DIV>

<DIV class="cBoxBottom">cBoxBottom</DIV>

</DIV>
No código acima, os box não se redimensionam conforme o conteúdo!

Alguém pode me ajudar a resolver este problema?
Não sei como fazer para os cBoxLeft, cBoxRigth e cBoxContent se redimensionem igualmente conforme o conteúdo for inserido!


Obrigado desde já!


IPB Skin By Virteq