Css - Alinhamento de botões

Rafael Pinto

Rafael Pinto

Membro
Ola Pessoal.
Eu sou muito novo nisto de html e css, pelo que venho colocar dúvidas mesmo de iniciante.
Espero que não se aborreçam porque quero realmente aprender. Tenho visto vários tutoriais, tenho tentado, mas chega a uma altura que preciso de perguntar.

Uso um outro fórum, americano, mas demoram muito a responder.

Espero que me ajudem mais rapidamente.

Bem, eu quero alinhar estes botoes horizontalmente.

O meu html é este:

<div class="botoes-items">
<div class="botoes">
<img src="empresalogocinza.png"><br>
<a href="empresa.html">EMPRESA</a>
</div>
<div class="botoes-items">
<img src="produtoslogocinza.png"><br>
<a href="produtos.html">PRODUTOS</a>
</div>
<div class="botoes-items">
<img src="contatoslogocinza.png"><br>
<a href="contatos.html">CONTATOS</a>
</div>
</div>

O meu css é este:
.botoes-items {
text-align:center;
}

.botoes {
display:inline;
text-align: center;
}


Com isto o resultado é este:
23w7lzp.jpg


O inline não resultou. Podem ajudar-me por favor?
Desde já muito obrigado!

Abraços
 
O que é que queres dizer com "o inline não resultou"? Já que estás a pôr um screenshot, podes acrescentar outro com o aspeto que pretendes (usando o photoshop, por exemplo)? São os três botões na mesma linha? Só tens o inline num div, os outros são todos botoes-items, que não tem inline.
 
Experimenta:

html:
Código: 
    <div class="botoes-items">
       <div class="botoes">
         <img src="empresalogocinza.png"><br>
         <a href="empresa.html">EMPRESA</a>
       </div>
       <div class="botoes">
         <img src="produtoslogocinza.png"><br>
         <a href="produtos.html">PRODUTOS</a>
       </div>
       <div class="botoes">
         <img src="contatoslogocinza.png"><br>
         <a href="contatos.html">CONTATOS</a>
       </div>
     </div>

e no css:
Código: 
.botoes-items {
   text-align:center;
   margin: auto;
}

.botoes {
   display:inline;
   text-align: center;
   float: left;
}
 
Aproveito para alertar que em português de Portugal a palavra "contatos" não existe (é válido apenas em português do Brasil). A palavra correta é "contactos" independentemente de se estar a respeitar o antigo ou o novo acordo ortográfico. (http://www.priberam.pt/dlpo/contacto).

Cumprimentos e desculpem o off-topic.
 
Boas!

Tens ali um pedaço de código trocado, e o inline para elementos ficarem lado a lado é o inline-block.

aqui vai:

HTML: 
<style>
    .botoes-items {
display:inline-block;
}

.botoes {
text-align:center;
}

</style>

<div class="botoes">
    <div class="botoes-items">
    <img src="empresalogocinza.png"><br>
    <a href="empresa.html">EMPRESA</a>
    </div>
    <div class="botoes-items">
    <img src="produtoslogocinza.png"><br>
    <a href="produtos.html">PRODUTOS</a>
    </div>
    <div class="botoes-items">
    <img src="contatoslogocinza.png"><br>
    <a href="contatos.html">CONTATOS</a>
    </div>
</div>
 
66hrg3.jpg



Era exatamente isto que eu queria.
O problema agora é que eu quero colocar o texto com outra cor e tirar a linha debaixo e não estou a conseguir.
Já usei o color:black e o list-style-text:none mas nada fez.
Coloquei esse codigo quer na class .botoes-items quer na class .botoes.
 
a{text-color: Black}

a:after, a:focus, a, a:before{text-decoration:none}

Assim tiras o sublinhado antes e depois de clicares.

Para diferenciar só resto do texto, podes mudar a cor quando passas o rato por cima com:

a:hover{color:grey}

PS: list-text-style serve para as <li> (retirar as "bolinhas")

Estou no telefone é mais complicado editar o post hehe

Podes colocar no início das Css assim afeta todos os links, ficam sem o sublinhado.

Se quiseres só dentro da <div> adiciona a classe antes do a:

.botoes a{…}

Boa sorte!
 
pmpv disse:
Já agora experimenta. Fica mais giro passar o ratinho por cima das imagens (yeeyyh)

.botoes-items img:hover{opacity:0.75}
Clicar para expandir...

Muito obrigado! excelente ajuda!
Eu gostaria tipo:
Quando passar o rato por cima do botão, a imagem de cima ter a cor laranja.
Eu ja tenho as duas imagens, a cinza e a laranja, como posso fazer isso, sabes?
Abraços
 
Se o botão que falas é o <a href>, podes fazer como no exemplo em cima

.botoes a:hover{color:Orange}

Recomendo a trocares "Orange" por um laranja que gostes com #****** (vê o código hex)

Podes adicionar também pequenos efeitos que desvanece a cor, com css3.

.botoes a:hover {color: orange; transition: color 0.5s ease;} > senão fizer um efeito de mudança de cor durante meio segundo, copia a parte do "transition" para o <a href> da classe "botoes"

Existem alguns efeitos que podes usar sempre, nos teus projetos que dão mais vida às páginas.
 
Última edição:
Rafael Pinto disse:
Muito obrigado! excelente ajuda!
Eu gostaria tipo:
Quando passar o rato por cima do botão, a imagem de cima ter a cor laranja.
Eu ja tenho as duas imagens, a cinza e a laranja, como posso fazer isso, sabes?
Abraços
Clicar para expandir...

Podes fazer mas tinhas que substituir uma parte o código HTML (tirar as imagens e por uma div com classe "img" ou "image") e adicionar as imagens através de CSS.

Vê como se faz aqui: http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

Aviso te que fazê lo vai aumentar o carregamento, porque vão ser mais 3 imagens para carregar. Certifica que as mesmas ocupam pouco espaço/tamanho (apenas kylobytes ou kb).
 
Boas,
Rafael Pinto experimenta investir umas horas no Codeacademy.com ou até mesmo porque não poupares uns euros e comprares um plano mensal num website de tutoriais? Eu utilizo o treehouse.com ( é pago pela empresa, não sei os custos) e tem uns tutoriais desde amador até profissional sobre html, css, javascript , etc e é fantástico, tem-me ajudado imenso.

Por vezes mais vale investir 2 horas a ver/estudar do que 2 dias a errar e a desesperar!

Cumpz
 
pmpv disse:
Podes fazer mas tinhas que substituir uma parte o código HTML (tirar as imagens e por uma div com classe "img" ou "image") e adicionar as imagens através de CSS.

Vê como se faz aqui: http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

Aviso te que fazê lo vai aumentar o carregamento, porque vão ser mais 3 imagens para carregar. Certifica que as mesmas ocupam pouco espaço/tamanho (apenas kylobytes ou kb).
Clicar para expandir...

Então seria muito trabalhoso para quem não tem experiência nenhuma né?

Sendo assim, como ficaria bem aqueles botoes?
Apenas mudar de cor quando passa o rato? Manter a coisa simples?

Abraços
 
Dependendo da mudança que cor que queres, podes conseguir fazer só com CSS, sem teres de carregar imagens diferentes. Por exemplo, se for para mudar a parte cinza para laranja, podes criar uma imagem em que essa parte é transparente, em vez de cinza ou laranja, e depois com CSS mudas a cor do fundo.
 
Depe
Rafael Pinto disse:
Então seria muito trabalhoso para quem não tem experiência nenhuma né?

Sendo assim, como ficaria bem aqueles botoes?
Apenas mudar de cor quando passa o rato? Manter a coisa simples?

Abraços
Clicar para expandir...

Depende de ti. Como o Nfk referiu também podes usar as imagens transparentes e fazer a alteração da cor da imagem.

Não é tão complicado, até seria bom usares e aprender novos truques.

Também recomendo uma ida ao codeacademy, aprender truques de CSS.

Vale sempre a pena.
 
Em vez de teres:

<img src="contatoslogocinza.png"/> (já agora, deves sempre colocar "/" no final, para fechar um "img src", por causa da compatibilidade com IE e browsers antigos, o mesmo acontece com </br>)

Mudas para:

<div id="contatoimagem"></div>

Css:

#contatoimagem {background-image: ./contactlogocinza.png}

#contatoimagem:hover {background-image: ./contactlogolaranja.png}


Acho que não é complicado, tens que ter atenção onde estão (localização) as imagens. Eu coloco sempre numa pasta chamada "img" e vou buscar a imagem do seguinte modo:

"background-image: ./img/nomedaimagem.png"


Fazes o mesmo para as outras imagens, trocas o HTML (o nome da DIV ID) e os nomes do ID e da imagem no Css.

Boa sorte
 
Última edição:
pmpv disse:
Em vez de teres:

<img src="contatoslogocinza.png"/> (já agora, deves sempre colocar "/" no final, para fechar um "img src", por causa da compatibilidade com IE e browsers antigos, o mesmo acontece com </br>)

Mudas para:

<div id="contatoimagem"></div>

Css:

#contatoimagem {background-image: ./contactlogocinza.png}

#contatoimagem:hover {background-image: ./contactlogolaranja.png}


Acho que não é complicado, tens que ter atenção onde estão (localização) as imagens. Eu coloco sempre numa pasta chamada "img" e vou buscar a imagem do seguinte modo:

"background-image: ./img/nomedaimagem.png"


Fazes o mesmo para as outras imagens, trocas o HTML (o nome da DIV ID) e os nomes do ID e da imagem no Css.

Boa sorte
Clicar para expandir...

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
 
Inicie sessão ou registe-se para poder participar.
Back
Topo