Ir para conteúdo

Arquivado

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

logan_pa

organizar DIVs no html

Recommended Posts

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

Claro! :)

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cabe ao Micox vereficar a viabilidade.

Ok. vou perguntar pra uns elementos aqui.

Compartilhar este post


Link para o post
Compartilhar em outros 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".

Compartilhar este post


Link para o post
Compartilhar em outros 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"

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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 :)

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros 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ã.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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