Ir para conteúdo

Arquivado

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

DackAle

Qual a melhor forma?

Por , em Desenvolvimento frontend

Recommended Posts

DackAle    0

DackAle
Postado

Olá pessoalMais uma dúvida :PEstou com uma dúvida que serve para duas coisas que precisarei fazer no futuro...Preciso saber a melhor forma de se alinhar imagens lado a lado, por exemplo (utilizando os exemplos aonde usarei mesmo)1) Preciso alinhar logomarcar lado a lado, são logos de parceiros em um site, então fica lado a lado, quando chegar a 5, começo na liha de baixo...2) Em sites do tipo orkut, vemos no album 4 fotos, dai 4 embaixo e por ae vai, mesma coisa, alinhar imagens lado a lado...Com tabelas, era só criar o numero de linhas e colunas e em tableless, qual a melhor saida para alinhar as imagens semanticamente falando ? :DObrigado pela ajuda pessoalAbraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

1) e 2)Use Listas desordenas (ul) se for so a imagem, eu uso dl se tiver texto embaixo;Mas, semântica é algo subjetivo demais, vai dar pau pra muita discussão o q escrevi.[]'s Hunter_

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Ou ainda pode fazer assim (analise bem esse código q você vai começar a entender algumas coisas...)

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif estilos.css (esse é o nome do arquivo)

#conteudo {	width: 630px;	margin: 0 auto;	border: 2px solid #000;}img {	border: 0;	float: left;	width: 126px;	height: 50px;}
Mas o q isso tah fazendo? Bom, o id conteudo é aplicado à uma div, e tah indicando q receberá o comprimento de 630px, o margin: 0 auto; centraliza a página, e o border está ali soh para mostrar na página HTML o limite dessa div... Jah a formatação da tag img diz q tds as imagens terão borda 0 (zero), q serão alinhadas uma ao lado da outra a partir do lado esquerdo (float: left), q seus tamanhos são de 126px de comprimento (width) e 50px de altura (height).

 

E o código HTML

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif teste.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Teste</title>

<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

   <div id="conteudo">
       <img src="imagem1.gif" alt="imagem1" />
       <img src="imagem2.gif" alt="imagem2" />
       <img src="imagem3.gif" alt="imagem3" />
       <img src="imagem4.gif" alt="imagem4" />
       <img src="imagem5.gif" alt="imagem5" />
       <img src="imagem6.gif" alt="imagem6" />
       <img src="imagem7.gif" alt="imagem7" />
       <img src="imagem8.gif" alt="imagem8" />
       <img src="imagem9.gif" alt="imagem9" />
       <img src="imagem10.gif" alt="imagem10" />
       <img src="imagem11.gif" alt="imagem11" />
       <img src="imagem12.gif" alt="imagem12" />
   </div>

</body>
</html>

 

Depois, salve imagens com 126px de comprimento e 50 de altura e teste... Se quiser, baixe os arquivos deste exemplo aqui.

 

Para saber se o q você quer q aconteça vá funcionar aki, procure diminuir o tamanho da div conteudo (ponha 600px, por exemplo).

 

Qq dúvida, poste a e mano... Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Um exemplo de 3 linhas e 3 colunas, este código foi testado no IE6, IE7, FF e Opera:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><title>bug margin com float</title><meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /><style type="text/css">.principal{	width: 790px;	border: 1px solid;	padding-top: 10px;}.divs{	display: block;	width: 250px;	height: 50px;	margin-left: 10px;	margin-bottom: 10px;	background-color: #000000;	float: left;}.esquerda{	margin-left: 10px !important;	margin-left: 5px;}</style></head><body><div class="principal">	<div class="divs esquerda"></div>	<div class="divs"></div>	<div class="divs"></div>	<br clear="all" />	<div class="divs esquerda"></div>	<div class="divs"></div>	<div class="divs"></div>	<br clear="all" />	<div class="divs esquerda"></div>	<div class="divs"></div>	<div class="divs"></div>	<br clear="all" /></div> </body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoXbY    3

RoXbY
Postado

Poxa Paulo, realmente muuuiiito mais simples.... dependendo da aplicação, é interessante ter uma margin ai entre elas neh!?

#conteudo { width: 630px; margin: 0 auto; border: 2px solid #000;}img { border: 0; float: left; width: 126px; height: 50px;margin:2px 4px;}

abs!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

vamos analisar

 

um conjunto de imagens, lado a lado, do que se trata? de uma lista de imagens, ao menos ao meu ver! É muito mais coerente você utilizar :

 

<ul id="galeria"><li><a href="#"><img src="images/thumbs/image1.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image2.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image3.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image4.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image5.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image6.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image7.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image8.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image9.jpg" /></a></li><li><a href="#"><img src="images/thumbs/image10.jpg" /></a></li></ul>
CSS

#galeria li{ list-style: none; width: 100px; margin: 2%; height: 100px; float: left; border: 1px solid #CCC; background: #CCC}#galeria li a img {	border: none;}

Somente meu ponto de vista! Acho melhor do que essa "penca" de <div>, para mim essa estrutura é tão prejudicial qto <table>! Apenas meus 50 centavos de opinião!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Somente meu ponto de vista! Acho melhor do que essa "penca" de <div>, para mim essa estrutura é tão prejudicial qto <table>! Apenas meus 50 centavos de opinião!

Acrescento meus 50centavos nessa também!

 

Apesar de que a solução do Paulo é mais rápido, prefiro a citada pelo Hunter_ acima.

 

[]s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Somente meu ponto de vista! Acho melhor do que essa "penca" de <div>, para mim essa estrutura é tão prejudicial qto <table>! Apenas meus 50 centavos de opinião!

Acrescento meus 50centavos nessa também!

 

Apesar de que a solução do Paulo é mais rápido, prefiro a citada pelo Hunter_ acima.

 

[]s

 

(Eu tentanbdo "defender" minha tese... rsrsrs)

 

Mas no meu exemplo, soh tenho 1 div... E dentro delas, somente as imagens... É q eu coloquei as imagens uma embaixo da outra, pra facilitar aki na hora de visualizar, mas ambos os códigos (css e html) estão bem enxutos...

 

Tah, td bem... Essa "discussão" (rsrsrs) não vai ter fim, mas defendo a idéia das listas pelo menos na hora de se fazer um Menu... Isso é unanimidade... Mas com meu exemplo, quis mostrar q as imagens ocupam o espaço delas dentro de um local com tamanho especificado... Se o espaço q tiver "sobrando" não suportar mais nenhuma imagem ao lado, ela naturalmente vai para a linha debaixo... Manja? Era isso q eu queria mostrar com esse exemplo...

 

E qto à sua dúvida RoXbY, sim, seria melhor deixar um espaçamento entre elas... Eu tinha colocado no exemplo que disponibilizei pra download, mas resolvi tirar pra naum deixar dúvida de q esse espaço é facilmente controlado... Adicione ao CSS a propriedade margin:

#conteudo {	width: 630px;	margin: 0 auto;	border: 2px solid #000;}img {	border: 0;	float: left;	width: 126px;	height: 50px;	margin: 10px;}
Mas lembrando q dessa forma, todas as imagens vão receber essa formatação, e essa mesma formatação será aplicada aos 4 lados da imagem. Para ter uma formatação para cada imagem, por exemplo, você pode especificar um tamanhop diferente para cada lado ou tb especificar um id para cada imagem, e aí você aplicaria uma margin específica... Mas aí são outros 500... rsrsrs... Esperamos ter te ajudado RoXbY, qq dúvida, poste a e...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Opa, e lá vai o meu pitaquinho.

 

Elas são listas de imagens? Sim, são! Mas no caso temos que pensar qual a função delas. Na verdade, imagens podem ser consideradas também como elementos separados e definir isso é praticamente como discutir o sexo dos anjos (ainda não achei nenhuma recomendação que me convenceu de nenhum dos pontos de vista).

 

Quando faço sites considero uma sequência de imagens apenas como uma série de imagens sequenciais e só isso. Tentem imaginar o HTML sem o CSS e a pessoa vendo aquilo. Ela vai olhar e pensar: "Uma lista de imagens!? Qual a função disso?".

 

Pessoalmente imagens em sequência devem ser tratadas só como imagens. Por exemplo: quando você faz um menu em lista com textos dentro dos UL, mas no final você quer que as imagens sejam aplicadas no lugar do texto, o que você faz?

 

Define as tag HTML e depois CSS para cada uma das linhas da tabela e coloca uma imagem de fundo, correto? Aí você fez algo pela semântica!

 

Se é uma sequência de banners é só isso, uma sequência de banners, sem lista. :)

 

Bom, é a minha opinião, mas no próprio site do W3C/WAI tem um exemplo aplicado, olhem lá embaixo:

 

<p>

<a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Explanation of Level Double-A Conformance"><img src="http://www.w3.org/WAI/wcag1AA" alt="Level Double-A conformance icon,           W3C-WAI Web Content Accessibility Guidelines 1.0" height="32" width="88"></a> 



     <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88"></a><a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid
CSS!"></a>

   </p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado
http://forum.imasters.com.br/public/style_emoticons/default/excl.gif Opa guys! beleza?Não quero criar celeuma, ok? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Mas como eu disse posteriormente semântica é algo subjetivo!Foi dito que:

Elas são listas de imagens? Sim, são! Mas no caso temos que pensar qual a função delas. Na verdade, imagens podem ser consideradas também como elementos separados e definir isso é praticamente como discutir o sexo dos anjos (ainda não achei nenhuma recomendação que me convenceu de nenhum dos pontos de vista).

Se a gente fosse se basear somente para o que já está escrito, ou convencionado, a inovação e o pensamento crítico morreria :DSim podemos considerar as imagens como elementos separados como dito. Mas se as imagens são, digamos assim, correlatas porque não agrupá-las em listas?

Quando faço sites considero uma sequência de imagens apenas como uma série de imagens sequenciais e só isso. Tentem imaginar o HTML sem o CSS e a pessoa vendo aquilo. Ela vai olhar e pensar: "Uma lista de imagens!? Qual a função disso?".

Para você, o que vem a ser uma sequência? para mim, vem a ser uma lista, ordenada ou não de elementos, fatos o que seja.Para o usuário é transparente! ele não quer saber se teu site foi feito sem tabelas, foi feito em asp ou foi feito em C# ele quer conteúdo, ele não vai se importar se você mostra as imagens dentro de um <p>, <div>, <table>, <em> para o usuário isso é irrelevante.

Pessoalmente imagens em sequência devem ser tratadas só como imagens. Por exemplo: quando você faz um menu em lista com textos dentro dos UL, mas no final você quer que as imagens sejam aplicadas no lugar do texto, o que você faz? Define as tag HTML e depois CSS para cada uma das linhas da tabela e coloca uma imagem de fundo, correto? Aí você fez algo pela semântica! Se é uma sequência de banners é só isso, uma sequência de banners, sem lista. :)

Nada pessoal, mas essa parte ficou um tanto quanto confusa.Ah e achei algo legal sobre sequênciahttp://www.ficharionline.com/ExibeConteudo...idconteudo=5813Meus 50 cents de opinião, desculpem o post longo, mas cabe aqui não apenas discussão de técnicas(como fazer) mas tb da teoria(porque fazer)

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