Imagem centrada em X e Y com link

guxo

guxo

Power Member
boas...

espero obter uma ajuda para um quebra-cabeças..

quero colocar link nisto:

.bg-screen-center{
background-image:url('img/begin_500x308.png');
background-repeat:no-repeat;
background-position:center center;
border:0px;
margin:0px;
padding:20px 0px 20px 0px;
}

O objectivo é ter uma imagem com link no centro em X e em Y. o background como podem ver ja consegui colocar a imagem como quero.. agora não consigo resolver o problema do link!

alguma ideia?

tks!
 
Não sei se o que vou dizer resolve o teu problema, mas pelo que percebi deve dar.

Podes usar um onClick no elemento onde tens esse estilo.

Se for um div:

Código: 
<div class="bg-screen-center" onClick="document.location='pagina.html'">
Depois podes ainda por uma questão de estética alterar o cursor do rato para aquela mão que aparece nos links.
 
Se o que tu queres é centrar verticalmente e horizontalmente um pedaço de texto (seja link ou não) dinamicamente, esquece, com html/css não vais lá. A única forma de fazer isso dinamicamente, era usares javascript e quando o browser fosse redimensionado, era calculado de novo a posição do texto. A outra solução, é definires mais ou menos uma margem de topo e esqueceres uma centragem vertical. Porque não existe qualquer propriedade CSS para centrar elementos verticalmente. (que seja standard pelo menos)
 
guxo disse:
javascript não sei usar... podes-me indicar o codigo entao... tks

OldMan não funca esse codigo... mas tks na mesma :)
Clicar para expandir...
Algum motivo especial para não funcionar? É que eu tenho isso num site aqui no PC e funciona quer em IE quer em FF, e até está num elemento onde não imaginava que desse, na altura foi mesmo uma experiência e acabou por resultar no que queria:

Código: 
<td align="center" valign="middle" onClick="document.location='pagina.asp'">
 
o codigo que tenho agora é:

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style media="all">
.bg-screen-center{
 background-image:url('img/begin_500x308.png');
 background-repeat:no-repeat;
 background-position:center center;
 border:0px;
 margin:0px;
 padding:20px 0px 20px 0px;
}
</style>
</head>
<body class="bg-screen-center">
</body>
</html>

o resultado é este

o que tu disses-te oldman faz isto:

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style media="all">
.bg-screen-center{
 background-image:url('img/begin_500x308.png');
 background-repeat:no-repeat;
 background-position:center center;
 border:0px;
 margin:0px;
 padding:20px 0px 20px 0px;
}
</style>
</head>
<body>
<div class="bg-screen-center" onClick="document.location='pagina.html'"></div>
</body>
</html>

e o resultado é este
 
Desculpem lá o triple post...

Estive a ler esta thread, ao que parece aquela proporção que o ruimoura refere parece ser verdade.

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style media="all"><!--
body {
margin:0px;
padding:0px;
}

#bg-screen-center {
 background-image:url('img/begin_500x308.png');
 background-repeat:no-repeat;
 background-position:center center;
 border:0px;
 margin:-154px 0px 0px -250px;
 left: 50%;
 top: 50%;
 padding:20px 0px 20px 0px;
 width:500px;
 height:308px;
 cursor:pointer;
 position:absolute;
}
--></style>
</head>
<body>
<div id="bg-screen-center" onClick="document.location='pagina.html'"></div>
</body>
</html>

Vê lá se isso faz o que querias.

Já alterei o cursor do rato, só precisas de alterar a "pagina.html".
 
Altera lá o overflow: auto; para overflow: hide; senão acontece isto quando se carrega:
semttulody4.png


Já agora, imagens PNG sem fundo no IE6 ficam com uma espécie de fundo, no meu caso cinzento.
 
No firefox aparece branco porque o fundo é branco, mas no IE aparece cinzento.
semttuloft4.jpg

(a má qualidade da imagem foi de ter sido guardada no paint em JPG)

Se só vais usar essa imagem com um fundo uniforme eu sugeria que a guardasses em JPG ou mesmo em PNG mas com fundo.
 
OldMan disse:
No firefox aparece branco porque o fundo é branco, mas no IE aparece cinzento.
semttuloft4.jpg

(a má qualidade da imagem foi de ter sido guardada no paint em JPG)

Se só vais usar essa imagem com um fundo uniforme eu sugeria que a guardasses em JPG ou mesmo em PNG mas com fundo.
Clicar para expandir...

Who cares? Não sei se usas o IE6 para testes ou não, mas o IE7 já está ai há algum tempo e é mil vezes melhor que o IE6. Sinceramente, se há coisa que não me preocupo hoje em dia quando faço sites é com os PNGS e a transparência, já ta na altura de usar um browser a sério e o IE7 já eestá mais perto desse nível.

Quem prefere IE a Firefox/Opera, então que faça o upgrade para o 7 e deixe o 6 que tem mais problemas que sei lá o que...
 
Inicie sessão ou registe-se para poder participar.
Back
Topo