Sugestões Na Montagem Dessa Div

#1 Nicholas Pufal

Impossível: só existe até alguém duvidar e provar o contrário.

Usuários
1655 posts

Sexo:Masculino
Localidade:Porto Alegre

Posted 13/07/2007, 10:31

fala povo,

seguinte, eu nunca tinha feito algo parecido com CSS e agora mesmo pesquisando e lendo, me bateu uma dúvida sobre como vou montar isso aqui com CSS:

sugestoes.jpg 9.21KB 13 downloads

Eu montei uma estrutura assim:

<div id="preview">
<div id="codigo">Cód. #8798</div>
<div id="conteudo">

<div id="foto"><img src="imagens/imovel.jpg"></div>
<img src="imagens/imoveis.jpg">
<p>
<strong>Tipo:</strong> Casa em condomínio<br>
<strong>Descrição:</strong> 1 Banheiro, 4 Dormitórios, Sacada, 4 Banheiros.
</p>
</div>
<span>Ver detalhes</span>
</div>

</div>

Pra div "preview" eu pretendia colocar position:relative e pra div "código" um position absolute. Assim perfeito, eu mato aquela questão ali do código saindo para fora da DIV. O meu maior problema está naquela imagem e o texto que vai à direita. Como faço para deixar a imagem na esquerda, o texto na direita (mas alinhado à esquerda, bem alinhado) e aquele botão logo abaixo, lá no final? O botão eu poderia usar position absolute tb, e matava outra questão. Mas, e a imagem e o texto?

Tentei usar float mas o float fod... com a minha DIV (já que float nao é bem considerado um elemento, aí a div nao se expande). Como o conteúdo vai variar de tamanho, preciso de algo que varia também na medida que mais conteúdo existir.

Idéias por favor!!!

Valeu

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#2 kirk @ Flanker

Novato no fórum

Usuários
5 posts

Sexo:Não informado

Posted 23/07/2007, 08:45

da um float:left; na div preview

que aí ela pega o conteudo da imagem

Só não sei como vai ser comportar o seu layout em relação a isso... mais pra resolver o problema isso dá ;] (EU ACHO)

#3 Raphaell

Normal

Usuários
80 posts

Sexo:Masculino
Localidade:Recife/PE
Interesses:Tableless, CSS, XHTML, Flash, ActionScript, Photoshop, Fireworks, Teoria das cores, Webdesign.

Posted 24/07/2007, 10:04

Bom, vou construir o código pra você:

<html>
<head>
</head>

<body>
<!-- Div Geral -->
<div id="geral">

<!-- Imagem Lateral -->
<div id="imagem-lateral">
<img src=""/>
</div>
<!-- Fim da Imagem Lateral -->
<!-- Início Caixa Superior -->
<div id="caixa-superior">
<p>Cod #427</p>
</div>
<!-- Fim da Caixa Superior -->
<!-- Início das Opções -->
<div id="opcoes">
Categoria:</br>
Descrição:</br>
</div>
<!-- Fim das Opções -->
<!-- Início do "Ver Detalhes" -->
<div id="ver-detalhes">
<p>Ver Detalhes</p>
</div>
<!-- Fim do "Ver Detalhes" -->
</div>
<!-- Fim da Div Geral -->
</body>
</html>

Pronto, código criado, agora você 'se vira' com o css que é a parte mais divertida, então fica contigo.

Abraço.

Raphael Taveira Webdesigner
Avaliação (x)HTML, CSS & Visual.
Ocupado com projeto !!!
"Minhas seções": CSS & Semântica(Tableless)
Contato: raphaelstrous@yahoo.com.br

#1 Nicholas Pufal

#2 kirk @ Flanker

#3 Raphaell

1 user(s) are reading this topic

Entrar