Dúvidas sobre HTML

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
 
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.
 
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.
 
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:
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:
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 :)
 
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>
(...)
 
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 ?
 
na horizontal sim. Na vertical fica sempre com aqueles 50px em relação ao topo!! o que não me parece muito grave!!
 
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.
 
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
 
Em relação ao código que o[A :p] 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;}

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

#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".

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 ;_;).
 
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
 
Com um link absolutamente normal para um PDF, se o utilizador tiver o Adobe Acrobat Reader instalado, deverá abrir no browser na boa.

HecKel
 
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.
 
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.

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