Jump to content

Separar imagem botao ( como no exemplo )


Paulo1471
 Share

Recommended Posts

Boas !!

Tenho isto : https://dl.dropbox.com/u/33652950/d2.PNG

Mas queria algo como : https://dl.dropbox.com/u/33652950/d1.PNG

Ou seja , queria separar a imagem !! Ja pensei em fazer dois botoes, um com imagem, outro com texto, mas nao me parece que seja uma boa soluçao ( o border parece o mesmo neste exemplo, nao parece tar algum a sobrepor-se a outro ) . !!

Sugestões !!

Obrigado !!

__________________

Paulo Oliveira

Link to comment
Share on other sites

Podes meter um elemento <a> contendo a imagem e o texto.

Se necessario metes o <a> dentro do <div>

<div class="two_part_button">
   <a href="whatever"><img src="whatever">Download</a>
</div>

Depois é uma questão de formatares a <div>, o <a> e a <img> de acordo com os teus requerimentos.

What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Link to comment
Share on other sites

Podes meter um elemento <a> contendo a imagem e o texto.

Se necessario metes o <a> dentro do <div>

<div class="two_part_button">
<a href="whatever"><img src="whatever">Download</a>
</div>

Depois é uma questão de formatares a <div>, o <a> e a <img> de acordo com os teus requerimentos.

Vou tentar assim !! Com formatações !!

Obrigado !!

Podes definir uma background-image (CSS) para esses links/botões.

(E também podias ver como é que isso está implementado nesse exemplo que deste.)

Isto é uma imagem, não está implementado na pagina !!

separar porque ? eu vejo um e só um botão ...

Separar no sentido de dividir !! Por uma divisória !! A resposta do pmg pode ser que resulte !!

__________________

Paulo Oliveira

Link to comment
Share on other sites

Tentei fazer com duas div's !! A mais pequena dentro da outra maior !!

Obti isto: https://dl.dropbox.com/u/33652950/d3.PNG

Com este código:

<div class="two_part_button">
	 <div class="two_part_button2"><img src="download.png"></div>
</div>
 
.two_part_button {
border-radius:5px;
width:200px;
height:45px;
border: 1px solid #008000;
background: #32CD32;
}
.two_part_button2 {
padding:1px;
width:50px;
height:43px;
border: 1px solid #1E90FF;
background: #00BFFF;
 

É mais ou menos isto !! Alguma ideia para a formatação ficar melhor ?? Ou algum link com algo parecido !!

Obrigado.

__________________

Paulo Oliveira

Link to comment
Share on other sites

Que complicação !! fiz isto com a imagem que apresentaste no primeiro post (a verde)

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.download {
			background: url(d1.png) no-repeat;
			width: 220px;
			height: 69px;
			padding: 25px 0 0 70px;
		}
		.download a {
			font-size: 18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="download">
		<a>Download Now!</a>
	</div>
</body>
</html>	
  • Vote 2
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Com a imagem era fácil, bastava fazer quase :

<a href=""><img src="d1.png"></a>

Mas eu queria ter algo em css que me permitesse construir algo deste tipo, com imagem e texto 'separados' !! Porque ito é só uma imagem de exemplo !!

Vou tentar melhorar aquele que apresentei mal 'desenhado' .

Obrigado .

__________________

Paulo Oliveira

Link to comment
Share on other sites

Mas o texto nao coincide com o da imagem !!

E eu só tenho esta imagem !! É so um exemplo, que gostava de reproduzir !!

Sem usar imagens, que assim podiam fazer efeitos hover e assim , na mesma sem imagens .

__________________

Paulo Oliveira

Link to comment
Share on other sites

já que queres ir pelo caminho mais difícil, visto que os meus concelhos é a mesma coisa que chover no molhado, depois de conseguires alguma coisa parecida com o que pretendes, verifica o teu resultado nos browsers ainda em uso

- IE 7

- IE 8

- IE 9

- Firefox

- Opera

- Safari

- Chrome

isto para não falar nos mobile

IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Vou tentar com CSS, senao photoshop para fazer imagens xd

Qual é o problema da solução apresentada pelo HappyHippyHippo?

Ele apresentou uma solução que separa a imagem do texto, que não coloca o texto na imagem, que não coloca a imagem no HTML, que te permite facilmente alterar o formato do botão (alterando a imagem no CSS), que funciona decentemente num browser em modo texto, etc.

Confesso que não estou mesmo a ver o que é que queres mais...

Pessoalmente, apenas tentaria remover a necessidade da div à volta do link, mesmo que para isso tivesse que deixar de usar várias cores para o fundo (imagem/texto) e gradientes.

  • Vote 1
Link to comment
Share on other sites

já que queres ir pelo caminho mais difícil, visto que os meus concelhos é a mesma coisa que chover no molhado, depois de conseguires alguma coisa parecida com o que pretendes, verifica o teu resultado nos browsers ainda em uso

- IE 7

- IE 8

- IE 9

- Firefox

- Opera

- Safari

- Chrome

isto para não falar nos mobile

Nenhum conselho foi chover no molhado !!

Só disse que não queria usar o botão 'ja feito' como fundo; usar imagem como fundo ja uso, aqui por exemplo : d2.PNG

Tenho é que conseguir separar isto !

Qual é o problema da solução apresentada pelo HappyHippyHippo?

Ele apresentou uma solução que separa a imagem do texto, que não coloca o texto na imagem, que não coloca a imagem no HTML, que te permite facilmente alterar o formato do botão (alterando a imagem no CSS), que funciona decentemente num browser em modo texto, etc.

Confesso que não estou mesmo a ver o que é que queres mais...

Pessoalmente, apenas tentaria remover a necessidade da div à volta do link, mesmo que para isso tivesse que deixar de usar várias cores para o fundo (imagem/texto) e gradientes.

A solução não tem problema !! Foi um mal-entendido, veja o comentário de cima !

__________________

Paulo Oliveira

Link to comment
Share on other sites

Bem, por acaso com tantas tentativas fartei.me um bocado !!

Secalhar é melhor fazer a imagem toda em photoshop ( com ou sem o texto ) , pois a imagem pode ser posta como link ou como fundo !

É melhor !!

Obrigado, e peço por alguma coisa !!

Já agora: Como fui a unica pessoa a responder a este tópico : http://www.portugal-a-programar.pt/topic/55249-ciclo-para-mostrar-divs/

Coloquei uma nova duvida, será que pode 'botar o olho' xd

__________________

Paulo Oliveira

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.