Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

BrunoT

Margem grande e hover em botão

Mensagens Recomendadas

BrunoT

Boa Tarde,

Mais uma vez preciso da vossa ajuda para algo que penso que se resolve facilmente. São dois problemas que tenho, não sei se estou a infrigir alguma regra, isto é, se sou obrigado a por os problemas em tópicos separados.

O site é este: http://www.foodmoods.org/launch/

O primeiro problema reside naquele espaço enorme em branco entre o formulário da newsletter e o icon. Eu consigo resolver pondo o icon e o resto das coisas com position: relative e por o top a negativo, mas queria perceber porque é que isto acontece e como resolver de uma forma mais "normal".

O outro problema é que queria por outra imagem quando o rato fica hover nas setas do slide e nos icons de facebook/twitter. Já tentei com a propriedade :hover do css, mas as imagens "novas" fica por baixo das outras e assim não se consegue ver as imagens.

Obrigado

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

não estou a perceber que a que icon te referes, só existe uma caixa de texto e um botão, de icon : nada

que código estás a usar para trocar as imagens ? é que se aparece por baixo, então estás a usar a propriedade :hover nos componentes errados.


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
BrunoT

Se puxares a página para baixo vês ao que me refiro ;)

Quanto ao "hover" vou voltar a por como tinha para ser mais fácil veres.

Obrigado, és sempre tu a salvar-me ;)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

Se puxares a página para baixo vês ao que me refiro ;)

Quanto ao "hover" vou voltar a por como tinha para ser mais fácil veres.

Obrigado, és sempre tu a salvar-me ;)

eu puxei a página para baixo ...

só tem uma imagem do lado esquerdo, texto no meio, e lixo no lado direito. a separa tem uma imagem desnecessariamente grande com 1352px de largura !!!


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

Tipo adicionares isto?

#line {
  height: 100px;
}

isso resolveria se ele não tivesse um elemento escondido que irá aparecer em cima de tudo quando fizeres o registo na newsletter

o layout deveria ser TODO reformulado

este são os casos mais gritantes no css:

- usar o "position: absolute" só em casos mesmo necessários

- nunca usar um tag <img> para fazer de background

- uma linha pode ser feita com css, sem uso a uma imagem


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
BrunoT

isso resolveria se ele não tivesse um elemento escondido que irá aparecer em cima de tudo quando fizeres o registo na newsletter

o layout deveria ser TODO reformulado

este são os casos mais gritantes no css:

- usar o "position: absolute" só em casos mesmo necessários

- nunca usar um tag <img> para fazer de background

- uma linha pode ser feita com css, sem uso a uma imagem

É o que irei fazer. Como faço para por a imagem em background sem usar a tag img ?

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

#id {
 background-image: url("imagens/bg.png");
}

notas

- existem muitos mais parâmetros para o background : https://developer.mozilla.org/en-US/docs/CSS/background

- o caminho é relativo ao ficheiro de css

Editado por HappyHippyHippo

IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.