Jump to content

Archived

This topic is now archived and is closed to further replies.

logan_pa

organizar DIVs no html

Recommended Posts

Depois de tornar um artigo, será possivel continuar os tópicos de discussão?

Claro! :)

Share this post


Link to post
Share on other sites

Não sei como manda, mas você como moderador micox e co-autor do artigo junto com o crins deveriam ver isso, quanto a continuar a discussão, com certeza deveria ser continuada

Share this post


Link to post
Share on other sites

Cabe ao Micox vereficar a viabilidade.

Ok. vou perguntar pra uns elementos aqui.

Share this post


Link to post
Share on other sites

PROBLEMA NA GALERIA DE FOTOS

 

- Em "galeria de fotos", acrescentei uma div "mais galeria de fotos >>" que está berrantemente desalinhado no IE.

 

Dúvidas:

-Como faço para colocar um efeito :over na borda dos links das imgens?

-Gostaria de tirar um pouco do espaço entre outro "notícias/galeria de fotos" das "Mini Notícias".

Share this post


Link to post
Share on other sites

-Como faço para colocar um efeito :over na borda dos links das imgens?

É só colocar o pseudo elemento hover no link das imagens.Eu não abri o cod fonte não, mas deve ficar algo como:[css].link_imagens:hover { border:1px solid blue; }[/css]

-Gostaria de tirar um pouco do espaço entre outro "notícias/galeria de fotos" das "Mini Notícias".

É só tirar o margin-bottom do mininoticias ou o margin top do "outras" ou do "galerias"

Share this post


Link to post
Share on other sites

PÁGINA

 

O código css para o hover nas imagens ficou assim:

.mininoticia .imgtopo{width:219px; height:122px; margin-left:8px; border:1px solid black; margin-bottom:-10px}.imgtopo:hover { border:3px solid #93C9E3; }

No IE funcionou legal, no mozilla existe algo estranho atrás das imagens, parece até um retangulo.

Que estranho.

 

 

Em "galeria de fotos", acrescentei uma div "maisfotos" que está berrantemente desalinhado no IE. O que pode ser?

Share this post


Link to post
Share on other sites

Na verdade, você aplicou a classe imgtopo ao elemento <a> e ao elemento <img> por isso tem esse retangulo lá. Corrija.

Share this post


Link to post
Share on other sites

Exato. você entendeu certo. Só que seu código começou a sujar de classe demais...

Outra coisa: o hover deve ser aplicado ao elemento img que estiver dentro do elemento a, e não ao elemento <a> (por isso que tá acontecento seu erro).

 

Como corrigir:

.mininoticia .imgtopo{width:219px; height:122px; margin-left:7px; border:1px solid black; margin-bottom:-10px}a:hover .imgtopo { border:3px solid #93C9E3; }
Perceba que eu não precisei mais daquela classe que tava no link e manei o hover se aplicar somente ao imgtopo.

 

Testa no IE aí que eu só testei no FF.

Share this post


Link to post
Share on other sites

Funcionou no mozilla mais ficou um tanto estranho. Quando você passa o mouse sobre a imagem, os titulos e o textos das noticias associadas também se mexem. No IE não funcionou.

 

Micox, se puder dar uma força em "galeria de fotos", eu agradeço.

 

OBS. Separei o codigo css para uma folha externa.

 

CÓDIGO CSS

PÁGINA XHTML

Share this post


Link to post
Share on other sites

Quando você passa o mouse sobre a imagem, os titulos e o textos das noticias associadas também se mexem

É o lógico a se acontecer, pois no hover você tá usando uma borda de 3 px e qd tá normal a borda é só de 1px.Não sei se você percebeu também mas o código para ".mininoticia .imgtopo" está duplicado.

No IE não funcionou.

Pra corrigir o funcionamento no IE infelizmente acabei tendo de usar a classe link_images. Daí como no IE o hover só funciona exclusivamente para elementos link (<a>), eu tive que aplicar a borda e a margin no próprio link (<a>).
.mininoticia .imgtopo{width:219px; height:122px; border:none;}.mininoticia .link_imagens { text-decoration:none; border:1px solid black; margin-left:7px; margin-bottom:-10px;}.mininoticia .link_imagens:hover {  border:1px solid red;}

Micox, se puder dar uma força em "galeria de fotos", eu agradeço.

Brodi. heheh. Não leve a mal não, mas leia minha assinatura: Não dê o peixe, ensine a pescar (se bem que nesse post eu já te dei muito código pronto. heheh)Dúvidas sobre minha explicação acima, podem postar...Té mais... Minha net tá lenta...

Share this post


Link to post
Share on other sites

Sugestão, compilar (posso até fazer isso) esse tópico e lançar um artigo no imasters, muita gente veria várias coisas básicas intermediarias e avançadas de CSS, ainda teria um exemplo prático... sugestão http://forum.imasters.com.br/public/style_emoticons/default/devil.gif[ ]'s

Sugestão, compilar (posso até fazer isso) esse tópico e lançar um artigo no imasters, muita gente veria várias coisas básicas intermediarias e avançadas de CSS, ainda teria um exemplo prático... sugestão

Por mim, sugestão acatada. É só colocar meus nomes nos créditos tb. heheh :)A propósito, comé que manda um artigo pro imasters?
E ai pessoal,Desculpa eu me meter, mas tava lendo esse post e vi o esquema de fazer um artigo para o iMaters.É uma ótima idéia, ajudaria bastante gente mesmo, montar um layout inteiro, explicar tudo, iria ficar muito show. E pra não perder a viagem, estou me oferecendo pra ajudar, caso estejam a fim de fazer e queiram mais uma pessoa pra ajudar, podem contar comigo!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif Abraços!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Share this post


Link to post
Share on other sites

Então gio, o hunter comentou algo nesse sentido, inclusive o Micox disse que estaria vendo a possibilidade.

Obrigado por se oferecer.

 

Segue o link abaixo como ficou o hover nas bordas das imagens no navegador mozilla, segundo micox.

 

Veja aqui

Share this post


Link to post
Share on other sites

Então gio, o hunter comentou algo nesse sentido, inclusive o Micox disse que estaria vendo a possibilidade.Obrigado por se oferecer.

E ai crins,É isso, espero poder ajudar em alguma coisa!!!E só um cometário a fazer, estive olhando esse post (todo ele) hj de manhã, e quero dizer q tá ficando show o q você tá fazendo crins, é isso ai!!! Parabéns!!! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif Abraços! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Share this post


Link to post
Share on other sites

Realmente o código do crins tá ficando muito bom (pelo menos até onde vai meu pequeno conhecimento de standards e acessibilidade).Quanto a fazer o artigo, eu já passei pro hunter o email do cara do site do imasters que publica o artigo.É só prepararem e mandarem pro cara. Se tiver bom, ele coloca.Conversa com o hunter aí pelo msn pra vcs prepararem o artigo aí gio.Só não esqueçam de colocar eu e o crins nos créditos também. hehehe :)

Share this post


Link to post
Share on other sites

Vou começar renomear os nomes das páginas para que todos acompanhem passo-a-passo.Micox, chegou a ler esse tópico?

Segue o link abaixo como ficou o hover nas bordas das imagens no navegador mozilla, segundo micox.Veja aqui

Share this post


Link to post
Share on other sites

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

Ué micox!? kd o email do cara, chegou não manda pra mim pq não chegou não....a não ser q tenha mandado pra outro Hunter_ http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

Share this post


Link to post
Share on other sites

ops. esqueci.Malditos IE e FF.Vou acabar tendo que usar hacks.EDITADO:Crins: Acho que resolvi aqui. Coloca um "display:table" no ".mininoticia .link_imagens".Testa aí e vê se deu no FF e no IE.Hunter_: Mandei via MP cara. Talvez não chegou. Vou mandar dinovo pra você e pro gio.EDITADO DINOVO: Mandei sim hunter, você até me respondeu e pediu pra eu olhar um layout aí... Vou mandar pro gio agora.FAlows...

Share this post


Link to post
Share on other sites

Perfeito Micox, funcionou com o

display:table.

PÁGINATem uma div que continua desalinhada no navegador IE, acho que vamos ter que utilizar hack mesmo.Se trata desse código:
<div class="maisfotos"> 	<p>mais galeria de fotos	>></p>	</div>
CSS
.galeria .maisfotos {clear:both;width:290px; background-color:#568EAC; margin:auto;}  .galeria .maisfotos p{font: normal normal normal 11px Trebuchet MS, Sans-Serif; color:#fff; text-align:right; margin:10px;}
Encerro aqui meus post. Até amanhã.

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.