Ir para conteúdo

POWERED BY:

Arquivado

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

edpittol

[Resolvido] sobre alinhamento

Por , em Desenvolvimento frontend

Recommended Posts

edpittol    0

edpittol
Postado

Estou montando um site em tableless. Para montar a noticia preciso de duas divs, uma com foto e legenda e outra com o texto. Quero que a foto e a legenda apareçam no topo a esquerda, e o texto se encaixe a direita e continua embaixo. Deve funcionar no o align left de imagens.

 

Como faço isso não tenho idéia de começar, alguém pode me ajudar?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

esse eh o problema do tableless, dah mto trabalho organiza td na pg, mtas vezes tm q ser po CSS, + CSS dah diferenças em diferentes browser, te recomendo a usar tabelas com border 0, eh como se elas naum tivessem lah...

 

flws...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pesquise sobre modelo caixa, e float.

Péssimo conselho Rick... tableless é simples e fácil depois que você entende oque está fazendo.

 

Estudar nunca é demais. E se tornar um preguiçoso, e não buscar a maneira certa de ser fazer, para mim é o problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

edpittol    0

edpittol
Postado

pelo que entendi o modelo caixa é o tratamento do tamanho da div com padding, borda... , estou por dentro disso, do float também. Até aqui tudo ok, mas que tamanho que eu tenho que usar nas divs?

 

Vamos supor que minha notícia te que ter 400px de largura, a div da imagem tem 250px e o texto tem que ter 150px do lado da imagem e 400px embaixo, como faço isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Que tal assim?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Imagem Flutuada</title>
<style>
* {
	margin: 0;
	padding: 0;
}
#new_body {
	width: 400px;
	margin: 0 auto;
}
#new_body img {
	float: left;
	width: 250px;
	height: 250px;
}
</style>
</head>
<body>
<div id="new_body">
	<img src="./imagem.jpg" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed blandit, 
nibh et semper egestas, ante dolor luctus magna, et semper magna lorem non dolor. 
In volutpat varius diam. Suspendisse tempus commodo sem. Vivamus consequat diam sit 
amet metus. Suspendisse potenti. Donec elementum tellus tempus neque. Cras odio tortor, 
molestie nec, consequat non, tincidunt sit amet, mi. Mauris leo eros, placerat eu, rhoncus et, 
placerat sed, libero. Aenean adipiscing ante vel lacus. Duis nisi. Mauris non felis quis justo 
venenatis iaculis. Proin pede leo, pretium a, pellentesque sed, ultrices ut, ligula. Donec eget 
lectus sed lectus dignissim laoreet. Donec turpis felis, lacinia eget, tempus non, venenatis vel, 
augue. Nulla lobortis feugiat arcu. Maecenas aliquam tincidunt lectus. Fusce auctor nibh non sapien.
 Vivamus venenatis neque ornare est. 

</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Tabelas são para dados tabulares e não para montar/organizar um site.

http://www.plasmadesign.com.br/stupidtables/everything.html

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

esse eh o problema do tableless, dah mto trabalho organiza td na pg, mtas vezes tm q ser po CSS, + CSS dah diferenças em diferentes browser, te recomendo a usar tabelas com border 0, eh como se elas naum tivessem lah...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

edpittol, a dica do tiu uill deve resolver seu problema http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

esse eh o problema do tableless, dah mto trabalho organiza td na pg

Só dá trabalho pra quem está começando ou que não tem vontade de aprender...

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Só dá trabalho pra quem está começando ou que não tem vontade de aprender...

Concordo totalemente com o #inside#

 

Eu atualmente sou moderador e me considero muito bom em Webstandards, porem um dia fui muito parecido com você(eu sei que é desenterrar problemas do passado), porem percebi com a ajuda dos moderadores e alguns membros o meu engano e procurei aprender o certo.

 

Sua dificuldade é por que você quer que Webstandards funcione igual tabelas, mas não funciona.

Tabelas tambem existem em Webstandards como disse o Giovani, mas são para dados tabulares.

 

siga essa ideia:

DIV = dividir o layout

P = paragrafos, texto

UL, LI, = lista de coisas em sequencia, tipo como menus, "albuns" de fotos, etc.

Dl, DD, DT, = lista detalhadas, possui diversas utilidades, porem seguindo o mesmo principil de UL e LI, mas com mais detalhes.

TABELAS = DADOS TABULARES

SPAN = para ser usado em elementos inlines de preferencia, porem pode ser usado em outros lugares.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

edpittol, a dica do tiu uill deve resolver seu problema http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Pois é cara.. tão simples, tão básico...

Esperando ele voltar para ver se deu certo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

ae pessoal, td mundo ae me danu liçaum d moral xD

 

ahsuahsuas, não eh que eu seja preguiçoso, uso mto msm os WS, + fui educado pra web a base de tabelas, dpois que o Giovani mando uma mp pra mim fui pesquisar + um pouco e discubri q elas ainda tão em uso, + não em tdas as partes de um site xD e que estão fkando obsoletas

 

Sei q eh mto phoda fze um site perfeitm em tableless, todos sabem das diferenças de interpretação das CSS nos diferentes browsers, as vezes, precisando terminar um site urgente a unica maneira é usando as famigeradas tabelas, minha intenção foi soh ajudar e não ferir os principios do Tableless

 

Espero que entendam, e não repitam isso que eu so priguiçoso, num tenhu vontad d aprende, pd queima meu filme ake no forum.

 

Minha unica intenção foi ajudah, tvz da maneira errada, depende do ponto de vista...

 

flws...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Zumbahia    0

Zumbahia
Postado

tiu will, por favor, fiquei com um duvida. você estilizou a div new_body img, mas no html você nao criou essa div. gostaria de entender o pq disso. pq, na minha ignorancia, ainda no assunto,me faria criar uma outra div para tentar alcançar o efeito desejado.

 

poderia me explicar???

 

veleu

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

na verdade, oque eu fiz foi estilizar a img que está dentro da div new_body.

Perceba que a palavra está separada.

 

Eu poderia ter estilizado diretamente pela tag, ficando:

img {}

Mas assim, eu atingiria TODAS as images DO DOCUMENTO. Do jeito que eu fiz, atinjo apenas as IMG que estiverem dentro da div new_body. Ou seja, as que forem filhas.

 

Poderia ter feito algo como:

#new_body > img {}

Ai eu atingiria as que são descendentes diretos da new_body..

Enfim, apenas para economizar um seletor. E não atrapalhar todo o resto do documento.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito