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

Dúvidas sobre HTML

Discussão em 'Web Development' iniciada por peter alien, 3 de Julho de 2007. (Respostas: 17; Visualizações: 1121)

  1. peter alien

    peter alien Power Member

    Boas,

    alguém me pode tirar as seguintes dúvidas:

    Queria criar uma página de entrada para um site só com uma imagem centrada (a meio) na página.
    Como é que eu posso fazer isso sem recorrer a várias tags "BR" consecutivas (fica fatela a programação).
    Existe outra maneira ou nem por isso? E com CSS, dará?


    Outra dúvida, quando se posiciona por exemplo uma imagem numa página, que tipo de coordenadas é que convém se usar, relativas ou absolutas, de modo a que essa página apareça bem, independentemente da resolução que um utilizador esteja a usar.


    Obrigadão

    Cumps
     
  2. Conde

    Conde Power Member

    bem quanto ao centrar, podes sempre usar a tag <center></center>. Se te referes a centrar a nivel vertical, podes criar tabelas de modo a imagem ficar na tabela do meio e as outras ficarem vazias e "invisiveis".
    A nível de CSS também é possivel fazer, mas nao sei dizer de cor. www.w3c.org --> aqui encontras boas informações sobre o assunto.
     
  3. peter alien

    peter alien Power Member

    Boas Conde,

    Sim, era mesmo para a imagem ficar a meio da página.

    Vou dar uma olhadela no site que referiste.


    Obrigado.
     
  4. K0mA

    K0mA Power Member

    Metes a imagem dentro dum DIV e defines margin-top: 50% - altura_imagem/2(%)

    PS. o ideal era descobrires com javascript quanto mede em px a altura da página(resolução) e depois fazeres altura_pagina - altura_imagem/2 = margin_top (em px)
    Depois com javascript de novo alteravas a margin-top do div.
     
  5. alfinete

    alfinete Power Member

    do tipo vou-te dar uma dica muito boa mas que mete css, isto desde que aponhas ao centro, se tiveres tabs de browser ela fica sempre ao centro da pagina

    no head do html pões a linha de codigo que chama o ficheiro teste.css

    Código:
    
    <head >
         
        
         <link rel="STYLESHEET" type="text/css" href="teste.css" />
       
    </head>
    
    
    depois crias um ficheiro com o nome teste.css

    com o seguinte codigo:

    Código:
    
    .centra
    {
    
        
    position:absolute;
    top:50%;
    left:50%;
    padding:0px;
    margin:-320px 0px 0px -150px;
    
    }
    
    
    
    depois vais mexendo nesta linha de coigo
    " margin:-320px 0px 0px -150px;"

    alterandos o valor onde tens -320 andas com a imagem na vertical
    alterandos o valor onde tens -150 andas com a imagem na horizontal


    depois no teu codigo html dentro do body fazes

    Código:
    <div class="centra">
    <img ............/> aqui poes o codigo de chamar a imagem
    </div>
    
    
    com ja reparaste estas a chamar a classe centra que criaste no css

    espero que tenha ajudado

    habitua-te ao css que é uma ferramente muito potente para design de paginas
     
    Última edição: 5 de Julho de 2007
  6. majo-san

    majo-san Power Member

    Investiguei um bocado e fiz agora este código que resolve-te o problema sem precisares de alterar nada (excepto o url da imagem, óbvio):

    Centrar horizontal e verticalmente uma imagem na janela do browser com CSS


    Código:
    <style type="text/css">
    /***
    Source: Vertical Centering in CSS
    http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
    (com alterações)
    ***/
    
    body, html {height:100%; padding:0; margin:0;}
    
    #outer {height:100%; overflow:hidden; position:relative;} /* or without overflow */
    #outer[id] {display:table; position:static; margin:auto; }
    
    #middle {position:absolute; top:50%; left:50%;} /* for explorer only*/
    #middle[id] {display:table-cell; vertical-align:middle; position:static;}
    
    #inner {position:relative; top:-50%; left:-50%;} /* for explorer only */
    #inner[id] {position:static;}
    
    </style></head>
    
    
    <body>
    
    <div id="outer">
      <div id="middle">
        <div id="inner">
              <img src="http://catarinasantos.com/design/pix/mapa.jpg" />
    
        </div>
      </div>
    </div>
    Testado em Windows -- IE6, Firefox 2 e Safari

    (mudem este tópico para o Web Development e depois apaguem esta frase)
     
    Última edição: 4 de Julho de 2007
  7. peter alien

    peter alien Power Member

    Obrigadão a todos pelos vossos posts, foram muito úteis.

    Apenas estava a tentar utilizar HTML porque não tenho muita pedalada com Javascript.

    Sim é verdade alfinete, com CSS é muito melhor, para além de que tenho que reconhecer que o HTML é uma "coisa" que me costuma irritar facilmente >( raios!!!


    Obrigadão mais uma vez.

    Fiquem bem :)
     
  8. _lamy_

    _lamy_ Power Member

    xii.. tanta confusão para centrar uma imagem e tanto codigo manhoso!! tabelas e o camandro! :O

    para centrares na horizontal bastar criar em CSS a propriedade margin com auto e ja q so vai ter uma imagem podes associar mm ao body. ficava assim o ficheiro dos CSS

    body {
    margin: auto;
    }

    depios o mais dificil é centrar na vertical, mas isso em vez de centrares davas uma margenzita razoavel, que também fica catita algo como margin-top: 50px;

    então o teu ficheiro das CSS ficava

    body {
    margin: 50px auto;
    }


    and voilá

    o codigo html seria

    (...)
    <body>
    <img src="imagem.jpg" alt="a minha imagem" />
    </body>
    (...)
     
  9. peter alien

    peter alien Power Member

    Estive a experimentar os vossos códigos, e o código que o alfinete postou não surtiu efeito no IE6, mesmo mudando o nome da classe de "teste" para "centra" ( penso que foi um bug :) ). Mas não surtiu efeito na mesma.



    Em relação ao código que o majo-san postou, funcionou, mas podias-me explicar para que é que serve o "html" e o "id" nestas duas linhas de código:

    body, html {height:100%; padding:0; margin:0;}

    #outer {height:100%; overflow:hidden; position:relative;} /* or without overflow */
    #outer[id] {display:table; position:static; margin:auto; }

    E já agora para que é que existem duas linhas com o "outer" e ele tem dois valores para a "position".



    _lamy_, e com esse código quando a janela do browser é aumentada ou diminuida a imagem continuará centrada nela ?
     
  10. _lamy_

    _lamy_ Power Member

    na horizontal sim. Na vertical fica sempre com aqueles 50px em relação ao topo!! o que não me parece muito grave!!
     
  11. peter alien

    peter alien Power Member

    Prontoxxx!!! torrei a paciência mas já tá... espero é que o resto não seja tão manhoso de se fazer, porque não posso dizer que a construção do site tenha começado com o pé direito... tanto tempo só para centrar verticalmente uma imagem :(

    Tive a ver os códigos que postaram, e achei-os um bocado confusos apesar de alguns deles surtirem efeito, mas como gosto das coisas muito sintetizadas, fiz (finalmente) o raio do código.
    Testei-o apenas no IE6.


    Deixo-o aqui, para o caso de alguém um dia precisar:




    Ficheiro HTML:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Zone X</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="Enter.css"/>
    </head>
    <body>
    <div id="outer">
    <div id="inner">
    <a href="Menu.htm">
    <img src="Zone-X.png" width="455" height="97" border="0">
    </a>
    </div>
    </div>
    </body>
    </html>




    e, o conteúdo do ficheiro "Enter.css"):


    body
    {
    background-color: #000000;
    margin: 0px
    }
    #outer
    {
    top: 50%;
    left: 0px;
    width: 100%;
    position: absolute
    }
    #inner
    {
    left: 50%;
    width: 455px;
    height: 97px;
    margin-left: -227px;
    top: -48px;
    position: absolute
    }



    Mais uma vez agradeço os vossos posts.

    Fiquem bem.
     
  12. alfinete

    alfinete Power Member

    sim tinhas razão em mudar para centra, porque nas tags sa chamam as classes criadas no file.css.

    se não funciona no 6 nam sei pq, mas acho que devia funcionar, pois no 7 funciona, tenta apagara a cache do browser , a reiniciar o browser , e abrid de novo e correr, as vezs não dá logo
     
  13. majo-san

    majo-san Power Member

    Significa que tanto o "HTML" como o "body" ficam com essas propriedades. Para não estar a escrever tudo em duplicado separam-se com a vírgula e assim dá para os 2. Isto é basicamente porque o IE só reconhece um e o Firefox só reconhece outro, temos de ser picuinhas (nºão sei explicar direito sem erros, alguém mais experiente que me corrija).

    A [id] é para o IE não reconhecer essas propriedades, pois o IE é esquisito e não reconhece código como mandam os standards. Por isso preciso de 2 linhas diferentes para cada browser mostrar o que queres.

    Atenção que o teu código final só funciona para essa imagem que escolheste. Se resolveres usar outra imagem com outro tamanho vais ter de alterar as posições outra vez. É isso que eu evito quando uso o meu código, dá para tudo e todos (excepto quando a imagem é mais alta do que o ecrã, mas então por que raio é que a iríamos centrar verticalmente? :p).

    Centrar verticalmente qualquer coisa que seja com o CSS actual é o caraças. É natural que tenhas a paciência torrada. Torrou-me a mim durante 3 dias num projecto e acabei por não conseguir resolver o problema no IE até hoje (santas tabelas com conditional comments, sou uma traidora ;_;).
     
  14. -Mocho-

    -Mocho- I'm cool cuz I Fold

    Boas. estou com uma pequena duvida sobre html, e para não estar a abrir outro tópico, interrompo por aqui.
    Alguém sabe, como é que se pode abrir documentos em pdf através de uma hiperligação, numa pagina html?
    desde já obrigado
     
  15. HecKel

    HecKel The WORM

    Com um link absolutamente normal para um PDF, se o utilizador tiver o Adobe Acrobat Reader instalado, deverá abrir no browser na boa.

    HecKel
     
  16. -Mocho-

    -Mocho- I'm cool cuz I Fold

    ok, foi estupido da minha parte, já tinha tentado algo arecido, mas ao que parece tinha-me enganado.
    obrigado
     
  17. peter alien

    peter alien Power Member

    Tenho que reconhecer que quando tive a ideia de centrar uma imagem nunca me passaria pela cabeça que seria algo tão "manhoso" de se fazer 8| ... mas já tá. Finalmente!!

    Outra cena lixada é que cada browser funciona à sua maneira >( não à pachorra!!!


    Já agora, aproveitando o balanço, algum de vocês acha que se consegue fazer um menu com botões (c/ rollover) só em HTML/CSS, ou é preciso recorrer ao Javascript... ou Flash?
    O menu é do tipo vertical, e idealizei o menu a funcionar assim: quando se clica num determinado botão, os restantes deslocam-se para baixo e aparecem uns quantos "sub-Botões" por baixo do botão que se carregou ;)
    O que acham da ideia?


    Obrigado.
     
  18. SoundSurfer

    SoundSurfer Power Member

    http://techzonept.com/showthread.php?t=169605#post1786179
     

Partilhar esta Página