Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

BruFerreira

[Resolvido] centralização

Por , em Desenvolvimento frontend

Recommended Posts

BruFerreira    0

BruFerreira
Postado

Olá pessoal

 

estou com um probleminha na centralização

 

utilizei o seguinte código para à ação:

 

<html>
<head>
<title>Escola Pierre Vigne</title>
</head>
<link rel="stylesheet" href="estilos.css" type="text/css">

<body bgcolor=#f3f70c>


<div id="tudo">

<div id="bg"><img src="imagens/layoutepvGIFconstrucopy.gif" width="788" height"700"></div>

<div id="link1"><a href="conhecaaescola.html"> <img src="imagens/link1img.png" ></div>
<div id="link2"><a href="cursos.html"> <img src="imagens/link2img.png" ></div>
<div id="link3"><a href="esportes.html"> <img src="imagens/link3img.png" ></div>
<div id="link4"><a href="eventos.html"> <img src="imagens/link4img.png" ></div>
<div id="link5"><a href="calendario.html"> <img src="imagens/link5img.png" ></div>
<div id="link6"><a href="quemfoipierrevigne.html"> <img src="imagens/link6img.png" ></div>

</div>

</body>

</html>

#tudo { 
width: 788px; 
height: 700px;
margin-left: -400px;
margin-top: -300px;
position: absolute;
left: 50%;
top: 50%;}

#bg { position: absolute; left: 0px; top: 0px; }

#link1 { position: absolute; left: 15px; top: 280px; }

#link2 { position: absolute; left: 15px; top: 340px; }

#link3 { position: absolute; left: 15px; top: 400px; }

#link4 { position: absolute; left: 15px; top: 462px; }

#link5 { position: absolute; left: 15px; top: 521px; }

#link6 { position: absolute; left: 15px; top: 582px; }

centraliza bem na de 1024 por 768, o problema é que quando vou mudar a resolução para as maiores, cria uma margem de sobra, somente do topo, e quando coloco na de 800x600 ela come um pouco do topo do layout.

 

como posso resolver isso?

 

obrigado

 

edit: é confiavel esse teste mudando apenas a resolução do monitor?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, é confiável.

E na verdade você não precisa nem mudar a resolução.

 

Bastaria redimensionar a janela do navegador.

O firefox tem um plugin bem legal, em que você pode salvar as resoluções, para ele dimensionar a viewport pra você.

o plugin é o webdeveloper

E você faria nele:

Resize > 800x600 ou 1024x768 ou 1280x960..

 

Enfim, o problema ai, é que você está usando muito absolute.

Esse position é perigoso.

 

você precisa de centralizar na vertical tb ?

Posta uma imagem do resultado final.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Tem um link online para que possa testar?

 

Cumprimentos,

webflex

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito