Como faço pra criar um div para colocar uma imagem e escrever na frent

[Andrézone's 0]

To fazendo meu site e na hora de criar o portfolio surgiu esse desafio.

Quero criar uma pagina onde ela tenha "4 colunas" a primeira eu coloco a imagem e na frente o texto e nas outras duas a mesma coisa. vide imagem

Só que eu queria um jeito facil de "amarrá-las", tipo 1 div (divido em duas colunas) até consegui criar com 4 div mas qdo vou colocar a segunda linha não da certo. Alguem pode me ajudar?

Não seria o caso de usar tabelas?

 

imagem:

[William Bruno 1501]

Não... usar tabelas não é o caso ainda.

você pode fazer com divs flutuadas dentro de um container, que só vai caber no máximo 2...

assim não importa qntas você flutue... sempre vai acontecer uma quebra de 2 em 2.

 

Poste o teu código.. tô meio sem tempo de montar tudo do começo.

[Andrézone's 0]

o código css ou o fonte da pagina?

 

--EDIT--

 

veja o site no link, tem tudo la

SITE AQUI

[William Bruno 1501]

Se puder colocar on line, e passar o link, melhor ainda.

Coloca os dois, dentro das TAGS [codebox ] do forum

 

Sobrou coisa xD

[brcontainer 16]

Não tabelas SÃO somente para dados tabulares nesse caso você deve usar elementos PAIS se estiver com dificuladades

e usar float:; com clear:both;

 

<style>
#box{
width:836px;
background:#00f;
}
#box h1{
/*estilize o H1*/
}
#box h2{
/*estilize o H2*/
}
#esq,#dir{
margin:2px;
float:left;
background:#f00;
width:410px;
}
#dir{
float:right;
}
#box div.imagem, #box div.textos{
margin:2px;
background:#fc0;
width:200px;
height:200px;
float:left;
}
#box div.textos{
float:right;
}
#box div.clear{
overflow:auto;
height:1px;
clear:both;
}
</style>

<div id="box">
<h1>Portifolio</h1>
<div id="esq">
<h2>websites</h2>

<div class="imagem">
<img src="imagem" alt="titulo" />
</div>
<div class="textos">
<p>texto texto</p>
<p>texto texto</p>
<p>texto texto</p>
</div>
<div class="imagem">
<img src="imagem" alt="titulo" />
</div>
<div class="textos">
<p>texto texto</p>
<p>texto texto</p>
<p>texto texto</p>
</div>

<div class="clear"></div>
</div>
<div id="dir">

<h2>logomarcas</h2>

<div class="imagem">
<img src="imagem" alt="titulo" />
</div>
<div class="textos">
<p>texto texto</p>
<p>texto texto</p>
<p>texto texto</p>
</div>
<div class="imagem">
<img src="imagem" alt="titulo" />
</div>
<div class="textos">
<p>texto texto</p>
<p>texto texto</p>
<p>texto texto</p>
</div>

<div class="clear"></div>
</div>

<div class="clear"></div>
</div>

[Andrézone's 0]

- Esse css é pra caixa do lado direito -

.content .portdirColumn { padding: 10px 10px 10px 10px; float: left; width: 330px; }
.centerportdirColumn h2, .portdirColumn h2 a { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(85, 85, 85); letter-spacing: 0px; font-weight: normal; text-decoration: none; }
.centerportdirColumn h2 a:hover { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(180, 0, 0); letter-spacing: 0px; font-weight: normal; text-decoration: none; }

- Esse css é pra caixa do lado esquerdo -

.content .portesqColumn { padding: 10px 10px 10px 10px; float: left; width: 330px; }
.centerportesqColumn h2, .portesqColumn h2 a { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(85, 85, 85); letter-spacing: 0px; font-weight: normal; text-decoration: none; }
.centerportesqColumn h2 a:hover { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(180, 0, 0); letter-spacing: 0px; font-weight: normal; text-decoration: none; }


- E aqui são as duas lado a lado -
.content .portlogodir { padding: 15px 0px 5px 0px; float: right; width: 161px; height: 110px; }
.centerportlogodir h2, .portlogodir h2 a { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(85, 85, 85); letter-spacing: 0px; font-weight: normal; text-decoration: none; }
.centerportlogodir h2 a:hover { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(180, 0, 0); letter-spacing: 0px; font-weight: normal; text-decoration: none; }

.content .portlogoesq { padding: 5px 0px 5px 0px; float: left; width: 158px; }
.centerportlogoesq h2, .portlogoesq h2 a { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(85, 85, 85); letter-spacing: 0px; font-weight: normal; text-decoration: none; }
.centerportlogoesq h2 a:hover { margin: 0pt; padding: 0pt; font-size: 18px; color: rgb(180, 0, 0); letter-spacing: 0px; font-weight: normal; text-decoration: none; }

dá pra me ajudar a montar neles? pq ainda não tenho tanto conhecimento em começar do zero

[brcontainer 16]

o que eu fiz é pronto já é só copiar e testar.

E analizar para entender.

[Andrézone's 0]

então, fiz o copiar e colar, valeu, deu certo o layout, mas fui configurar pro tamanho certo e não acho onde diminuir o espaço entre as duas colunas..

pode me ajudar?

outra coisa, não sei pq mas o quarto quadrado aparece quebrado no DW, saco só o print:

 

 

 

-- EDIT --

 

mals ae, diminui as caixinhas, era só aumentar o tamanho, mas pq no DW a ultima continua descendo?

[brcontainer 16]

pode ser por causa da margem, eu pessoalmente não uso o DW, se funciona no FF, Opera, Safari(principalmente), IE6 e IE7 pra mim esta bom.

 

ponha um link para eu ver como ficou.

[Andrézone's 0]

fiz tudo certinho aqui, cadastrei, no ie 6 ta normal, ja no ff ta f***

 

As duas imagens dos sites ficam lado a lado na esquerda e na direita ficam as descrições

e os logos a mesma coisa só q como se fosse na linha debaixo.

 

outra coisa, tem algum comando para a imagem e o escrito ficarem centralizados verticalmente dentro do div?

e mais uma, rs, tem como ja padronizar uma linha de divisão entre os trabalhos? acho q to sentindo falta de uma..

outra, rs, tem algum comando padrão pra espaçar as imagens do menu no topo? no i6 normal, mas no ff não reconhece a propriedade do DW

 

tudo no ar: http://webertini.byethost2.com/portfolio.html

[brcontainer 16]

que virgulas são essas?

padding:10px, 0px, 0px, 0px;

faz assim:

padding:10px 0 0 0;

[Andrézone's 0]

foi mal...

tirei as virgulas mas continuava dando problema no ff..

eu separei as box, o código tava igual pras duas só mudava o float e tb mudei coloquei na disposição do código primeiro a coluna direita e depois a esquerda, não sei se ta certo, mas funcionou no firefox,

 

código como ficou:

 

#dir{
margin:0px;
padding:10px 0 0 0;
float:right;
width:345px;
}
#esq{
margin:0px;
padding:10px 0 0 0;
float:left;
width:345px;
}
#box div.imagem{
margin:2px;
width:167px;
height:150px;
float:left;
}
#box div.textos{
margin:2px;
width:167px;
height:150px;
float:right;
}

 

tudo muito bom, tudo muito bem, até na hora q precisei aumentar as linhas e tb as categorias...

ai zicou de vez

acho q preciso de um div para a palavra portfolio

outro para o box das categorias, websites, logomarcas, arte grafica

e outro dentro das categorias q é de um lado a imagem ao lado a descrição, ou então um só q eu consiga inserir a imagem e escrever alinhado verticalemente nela