1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Imagem centrada em X e Y com link

Discussão em 'Web Development' iniciada por guxo, 22 de Setembro de 2007. (Respostas: 20; Visualizações: 1234)

  1. 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!
     
  2. OldMan

    OldMan Power Member

    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.
     
  3. Nazgulled

    Nazgulled Power Member

    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)
     
  4. guxo

    guxo Power Member

    javascript não sei usar... podes-me indicar o codigo entao... tks

    OldMan não funca esse codigo... mas tks na mesma :)
     
  5. OldMan

    OldMan Power Member

    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'">
     
  6. CMPT

    CMPT Power Member

    boas!

    nao esperimentei mas talves "50%" em margin-top e em margin-left..
     
  7. guxo

    guxo Power Member

    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
     
  8. guxo

    guxo Power Member

    o resultado do que dizes é isto
     
  9. OldMan

    OldMan Power Member

    Não queres usar tabelas pois não?
    Estou a experimentar várias maneiras mas com divs não está fácil...
     
  10. OldMan

    OldMan Power Member

    O que querias está aqui, mas eu nem assim consegui fazer, os 50% dele parecem ser bem maiores...
     
  11. OldMan

    OldMan Power Member

    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".
     
  12. OldMan

    OldMan Power Member

    Altera lá o overflow: auto; para overflow: hide; senão acontece isto quando se carrega:
    [​IMG]

    Já agora, imagens PNG sem fundo no IE6 ficam com uma espécie de fundo, no meu caso cinzento.
     
  13. OldMan

    OldMan Power Member

    A cena dos scrolls está resolvida.
     
  14. guxo

    guxo Power Member

    e o background?
     
  15. OldMan

    OldMan Power Member

    No firefox aparece branco porque o fundo é branco, mas no IE aparece cinzento.
    [​IMG]
    (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.
     
  16. Nazgulled

    Nazgulled Power Member

    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...
     
  17. OldMan

    OldMan Power Member

    Eu uso firefox, o IE só cá está porque não me incomoda minimamente, é raro o usar.
     
  18. guxo

    guxo Power Member

    eu tenho ie7 e nao aparece cinzento :S, no entanto vou tentar com jpg
     

Partilhar esta Página