Estrutura Div

[tifabiosouza 0]

Boa noite, sou novo no forum, mas pesquisei a fundo antes de fazer este tópico, achei até um que me ajudava http://forum.imasters.com.br/topic/504966-como-botar-uma-div-do-lado-da-outra porém as coisas sairam fora do meu controle.

 

Preciso de um código para deixar as divis como a figura à Baixo:

Obrigado desde Jà

 

[Guilherme Souza Santos 6]

neste caso não seria melhor ultilizar <table>

[tifabiosouza 0]

Guilherme obrigado por responder, porém já fiz com a tabela, mas não fica como eu quero. Na imagem a baixo tem o skype, e como ele é superior ao tamanho do texto que os demais ficam desproporcional, e queria deixar o texto (onde está tim) do tamanho padrão dos demais a baixo.. a baixo da imagem deixei o código, tem como mesclar a primeira coluna?

 

<table width="800" border="0" cellspacing="0" align="center">
  <tr>
  	<td align="center" style="font-size:20px">
    	<p style="color:#0F0" align="center">Contatos</p>
    </td>
  </tr>
  <tr align="left">
    <td height="46"><a href="callto:ebytesolutions"><img src="img/skype.jpg" width="100" /></a></td>
    <td width="50" style="font-size:18px">Tim</td>
	<td width="122">(xx)xxxx-xxxx</td>
	<td width="320"><img src="img/whats.png" width="73" height="22" /></td>
  </tr>
  <tr>
  	<td></td>
	<td>Oi</td>
	<td>(xx)xxxx-xxxx</td>
  </tr>
  <tr>
  	<td></td>
	<td>Claro</td>
	<td>(xx)xxxx-xxxx</td>
  </tr>
  <tr>
  	<td></td>
  	<td>Vivo</td>
	<td>(xx)xxxx-xxxx</td>
  </tr>
</table>

[wilnet 92]

Olá tifabiosouza, blza!

 

Vc pode tb, usar CSS para padronizar sua imagens, assim não irá desformatar sua tabela como citado.

 

Veja:

<style>
.size_img {
    width: auto;
    height: 25px;
}
</style>

<img class="size_img" src="img/skype.jpg"/>

Desta forma suas imagens ficará sempre com o height: 25px e o width será proporcional.

 

 

Pode ser que ajude,

 

vlw

[Guilherme Souza Santos 6]

da uma olhadinha aqui

http://denecir.blogspot.com.br/2010/09/mesclar-celulas-tabela-html.html

[tifabiosouza 0]

Obrigado Guilherme, já me ajudou um pouco, mas ainda vou me aprofundar um pouco mais nas DIVs.

Wilnet Obrigado também, vou utilizar isto em breve.

 

Obrigado Galera :)

[Douglas Matos 0]

Boa noite, sou novo no forum, mas pesquisei a fundo antes de fazer este tópico, achei até um que me ajudava http://forum.imasters.com.br/topic/504966-como-botar-uma-div-do-lado-da-outra porém as coisas sairam fora do meu controle.

 

Preciso de um código para deixar as divis como a figura à Baixo:

Obrigado desde Jà

 

 

 

opa tifabiosouza não sei se já conseguiu resolver seu problema com relação as divs mas abaixo passo para ti como seria o esquema das div primeiro o código css e depois o html.

 

 

Código CSS

.div800{
width: 800px;
height: 300px;
background-color: #F00;
}
.div300{
width: 300px;
height: 300px;
background-color: #0000FF;
float: left;
}
.cont50{
width: 50px;
float: left;
height: auto;
}
.div50{
width: 50px;
height: 30px;
margin-top:10px;
background-color: 0FF;
}
.cont130{
width: 130px;
float: left;
height: auto;
}
.div130{
width: 130px;
height: 30px;
background: #000;
margin-top:10px;
} 
.cont320{
width:320px;
float: left;
height: auto;
}
.div320{
width: 320px;
height: 30px;
margin-top:10px;
background:#ff8000;
}

Código html

<div class="div800">
			<div class="div300"></div>
			<div class="cont50">
				<div class="div50"></div>
				<div class="div50"></div>
				<div class="div50"></div>
				<div class="div50"></div>
			</div>
			<div class="cont130">
				<div class="div130"></div>
				<div class="div130"></div>
				<div class="div130"></div>
				<div class="div130"></div>
			</div>
			<div class="cont320">
				<div class="div320"></div>
				<div class="div320"></div>
				<div class="div320"></div>
				<div class="div320"></div>
				
			</div>
		</div>

Note que quando você colocar esses códigos pra rodar as cores ficaram todas grudadas caso você queira dar um espaço entre elas você precisará obrigatoriamente aumentar o tamanho da div800 ou então diminuir o tamanho das divs internas todas. e depois dar um margin-left ou right como preferir para dar o espaço desejado.

 

espero que tenha ajudado !!

 

qualquer coisa só falar

 

Abraço,