Css - Alinhamento de botões

Rafael Pinto disse:
Olá :)
Vou tentar fazer isso hoje, mas não é obrigatório ter só uma div ID em cada página? Posso ter várias div ID?
Porque neste caso tenho que ter uma para o logo empresa, outra para produtos, outra para contactos.

Outra questão é:

Se eu for mudar <img src="contatoslogocinza.png"/> para: <div id="contatoimagem"></div> vai-me desaparecer a imagem.


<div class="botoes-items">
<div id="contatoimagem"></div>
<br></br>
<a href="contatos.html">CONTACTOS</a>
</div>


criei uma pasta img e fiz tal e qual como disseste, a imagem desaparece.
Fiz algo de errado?
Abraços
Clicar para expandir...

Tens que ir ao código do Css e editar a localização. Faz assim: mete o código no jfiddle e assim fica mais fácil ajudar, assim posso editar e corrigir.

Cada diz, vai passar a ser uma imagem, cada ID é único, daí ser usado em vez de uma classe.
Cada ID vai corresponder a uma imagem, que vai ser carregado no Css. Confirma o que está na Css e mete no JSfiddle.
 
Antes de fazer isso, da-me a tua opinião por favor.
Eu tenho os logos e os nomes em baixo.
O que é mais logico colocar como botao? A imagem ou texto?

existe forma de quando passar o rato em cima do texto a imagem em cima mudar de cor para laranja?

Estou a complicar muito não? :/
 
Agora tens que configurar a CSS, tens que ver o local. Se criaste a pasta "img" deveria estar a funcionar. Mas acho que ainda não criaste, tens que por as imagens nessa pasta...
 
pmpv disse:
Agora tens que configurar a CSS, tens que ver o local. Se criaste a pasta "img" deveria estar a funcionar. Mas acho que ainda não criaste, tens que por as imagens nessa pasta...
Clicar para expandir...
Eu criei a pasta e coloquei as fotos lá, mesmo assim não dá.

No ambiente trabalho tenho pasta "Website": nessa pasta tenho o documento index e tenho 2 supastas: img (com imagens) e outra pasta "styles" com o documento css.

algo errado?
abraços
 
exemplo.jpg


alto! Ja apareceu alguma coisa!
Quando passo com o rato por cima acontece isto:
exemplo1.jpg
 
Vi isto num blog:

"Just remember that the path is relative to the style sheet. So, in the following snippet, the image is in the same directory as the style sheet:

background-image: url(image.jpg);
But if the image was in a sub-folder named images, then it would be:

background-image: url(images/image.jpg);"

tenho que colocar a pasta IMG na pasta que está a style sheet? Será?
 
Não, como viste as imagens, já estão a funcionar, agora tens que editar o tamanho das tuas imagem que queres usar, para ficar centrado, as imagens têm que ter o tamanho. Se o tamanho das tuas imagens são por exemplo: 256x64, tens que alterar na CSS, o width e o height (altura e largura).

Basta editares (photoshop) e consegues acabar essa parte. As imagens precisam de ficar de tamanho igual, é importante, tal como: 100x100, 150x150, 200x200 e por ai, para que fique centrado corretamente e sem fundo (.png).

Depois vai-te parecer melhor hehe. Estás quase.

Tens é que perceber melhor a semântica e as capacidades de um div.

Podes fazer um pouco tudo. Imagens, linhas, bolas (lol!) e afins.
 
Última edição:
Bom dia!
Tudo começa a encaixar! ;)

O logo dos contatos não estava a aparecer porque a div no HTML tinha um S a mais e no CSS não tinha ;)

Aqui está:

exemplo.jpg


Confesso que ontem desesperei! Estava a achar muito complicado e é uma coisa simples. Mas pronto, agora vai.


Mas agora fica a minha pergunta:
Que botão eu faço? O texto ou os logos?

O que fica melhor? Ou existe alguma forma de quando passar o rato por cima dos logos, o texto aparecer ou apenas alterar a cor?
Como faço esse tipo de conexão com os codigos?

P.S: Obrigado pela ajuda, estou a aprender bastante!

Abraços
 
Visto que a imagem é uma div, consegues colocar o <a href> dentro da mesma que da imagem e tens que adicionar as cores do texto na Css, por exemplo do #contactosimagem:

Color: Black; text-decoration: none

No id do :hover adicionas:

Color: orange;

Experimenta. Acho que deverá funcionar. Convém depois mudares as cores para código hex.

Em relação às imagens é simples, temos que ver e rever os id, classes, nome dos ficheiros e localização.

PS: retira um dos </br>, o texto dos links está muito longe da imagem e edita o tamanho da fonte para 16 ou 18px ou 22px (vê o que fica melhor).
 
Para a imagem é o texto ficarem como o link (ou botão), vais ter que colocar um <a href> antes da div da imagem e fechar o </a> depois do texto "empresa ". Fazes o mesmo para os 3

Boa sorte
 
Sim eu vou mudar as cores para o codigo hex.

Então terá que ser uma coisa assim:
<div class="botoes-items">
<a href="contatos.html"><div id="contatosimagem"></div></a>
<h1>CONTACTOS</h1>
</div>

O texto contactos é melhor ser <li> ou <p>?

Coloquei no css assim:
#contatosimagem {background-image: url(../img/contatoslogocinza.png); width:176px; height:176px;color:black; text-decoration:none;}

#contatosimagem:hover {background-image: url(../img/contatoslogolaranja.png);transition: 0.5s ease; width:176px; height:176px;color:orange;}

Mas o texto não altera de cor para laranja quando eu passo com o rato por cima.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo