[Duvida] Como posso centrar o meu site?

pepezito

Power Member
Boas pessoal...

a minha razao de vir aqui é a seguinte:

eu estou a criar um site...mas eu ainda ando uma beca as escuras em relação ao HTML...

que eu queria pedir era se alguem me podia ajudar a centrar o site...

o site é: www.ligaiedp.com.sapo.pt

como podem ver o site está encostado à Esquerda...e eu queria po-lo centrado...

ja estou farto de mexer no codigo a ver se fica, mas nunca consigo meter...

Pff se alguem me puder ajudar, agradecia imenso...

no caso de ser dificil de explicarem-me...eu mando o codigo e acrescentam-me, sff


espero respostas...

abraços [[[]]]
 
experimenta por <div align="center"> no inicio...

btw... o teu site ate tem um desgin porreiro.. esta graficamente engraçado... parabens!! :D
 
obrigado... ;)

desculpa la... mas eu ainda sou uma beca noob...

mas meto isso em que zona?

<html>, <head> ou <body>??

em qual deles meto??

não ligues à minha ignorancia...loool
 
eu ja tive a ver o codigo da tua pagina e pensei k tivesses feito em tabelas.. mas fizeste com CSS...

opha.. agora tens e' k por as coordenadas para centrar o bixo....

mas tu experimentaste mesmo por <div align="center"> ?? nao <p align=center>
 
Boas,

Não sei que ferramenta utilizaste para fazer o site mas aquilo tá uma confusão do caneco.
Em resumo, primeiro fazes a estrutura do site os divs todos usando CSS (tabelas não servem para o esqueleto dos sites).
Só depois é que passas para o conteúdo se não é uma confusão para detectar erros e fazer alterações.
Precisas aprender CSS sem isso não vais a lado nenhum é por aí que deves começar.


Testa lá assim:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="pt">
<title>Liga IEDP</title>
<style>
<!--
p.MsoNormal
{mso-style-parent:"";
margin-top:0cm;
margin-right:0cm;
margin-bottom:10.0pt;
margin-left:0cm;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}
-->
</style>
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs=new Image; d.FP_imgs.src=a; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body onLoad="FP_preloadImgs(/*url*/'Buttons/button41.jpg', /*url*/'Buttons/button42.jpg', /*url*/'Buttons/button4B.jpg', /*url*/'Buttons/button4C.jpg', /*url*/'Buttons/button4E.jpg', /*url*/'Buttons/button4F.jpg', /*url*/'Buttons/button73.gif', /*url*/'Buttons/button74.gif')" background="Images/fundo.jpg" style="background-repeat:no-repeat; ">
<div align="center">
<div style="width: 480px; height: 60px; z-index: 1; left: 140px; top: 10px" id="layer2">
<span lang="pt">
&nbsp;<img border="0" src="Images/Logo.png" width="475" height="93"></span></div>
<div style="width: 400px; height: 25px; z-index: 2; left: 200px; top: 613px" id="layer3">
<p class="MsoNormal" align="center"><b>© 2007</b> Turma TGEI 1 <b>Design B<span lang="pt">y</span></b>
Pedro Lopes</div>
<div style="background-position: center; width: 480px; height: 460px; z-index: 5; left: 140px; top: 130px; border: 4px solid #000000; background-color:#FFFFFF; background-repeat:no-repeat; background-attachment:fixed" id="layer10">
&nbsp;</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 6; left: 35px; top: 150px" id="layer11">
<a href="index.htm"><img src="Buttons/button72.gif" alt="Home" name="img1" width="100" height="20" border="0" id="img1" onMouseDown="FP_swapImg(1,0,/*id*/'img1',/*url*/'Buttons/button74.gif')" onMouseUp="FP_swapImg(0,0,/*id*/'img1',/*url*/'Buttons/button73.gif')" onMouseOver="FP_swapImg(1,0,/*id*/'img1',/*url*/'Buttons/button73.gif')" onMouseOut="FP_swapImg(0,0,/*id*/'img1',/*url*/'Buttons/button72.gif')" fp-style="fp-btn: Embossed Capsule 1; fp-transparent: 1" fp-title="Home"></a>
<p>
<a href="Regras.htm"><img border="0" id="img2" src="Buttons/button40.jpg" height="20" width="100" alt="Regras" fp-style="fp-btn: Embossed Capsule 1" fp-title="Regras" onMouseOver="FP_swapImg(1,0,/*id*/'img2',/*url*/'Buttons/button41.jpg')" onMouseOut="FP_swapImg(0,0,/*id*/'img2',/*url*/'Buttons/button40.jpg')" onMouseDown="FP_swapImg(1,0,/*id*/'img2',/*url*/'Buttons/button42.jpg')" onMouseUp="FP_swapImg(0,0,/*id*/'img2',/*url*/'Buttons/button41.jpg')"></a></p>
<p>
<a href="Equipas.htm"><img border="0" id="img3" src="Buttons/button4A.jpg" height="20" width="100" alt="Equipas" fp-style="fp-btn: Embossed Capsule 1" fp-title="Equipas" onMouseOver="FP_swapImg(1,0,/*id*/'img3',/*url*/'Buttons/button4B.jpg')" onMouseOut="FP_swapImg(0,0,/*id*/'img3',/*url*/'Buttons/button4A.jpg')" onMouseDown="FP_swapImg(1,0,/*id*/'img3',/*url*/'Buttons/button4C.jpg')" onMouseUp="FP_swapImg(0,0,/*id*/'img3',/*url*/'Buttons/button4B.jpg')"></a></p>
<p>
<a href="Classificacao.htm"><img border="0" id="img4" src="Buttons/button4D.jpg" height="20" width="100" alt="Classificação" fp-style="fp-btn: Embossed Capsule 1" fp-title="Classificação" onMouseOver="FP_swapImg(1,0,/*id*/'img4',/*url*/'Buttons/button4E.jpg')" onMouseOut="FP_swapImg(0,0,/*id*/'img4',/*url*/'Buttons/button4D.jpg')" onMouseDown="FP_swapImg(1,0,/*id*/'img4',/*url*/'Buttons/button4F.jpg')" onMouseUp="FP_swapImg(0,0,/*id*/'img4',/*url*/'Buttons/button4E.jpg')"></a></div>
&nbsp;</p>
</div>
</body>
</html>
</html>


Conselho: aprende CSS e começa tudo de novo.
Depois de saberes CSS, aprende sobre layouts

PS. É natural que tenhas estas dúvidas pois esta parte não está lá muito clara porque foi aparecendo aos poucos e poucos com a necessidade de fazer melhores sites, daí que haja muita gente que pense que para fazer um site precisa de saber html, quando o que precisa mesmo é de saber bem CSS e layouts.

Deves usar o http://validator.w3.org/#validate_by_input para validares o teu código encontras um erro e investigas no google, pois há erros que são aceitáveis...
 
Última edição:
convém também habituares-te a fazer os CSS´s em ficheiros externos...em futuras alterações no site vão te dar muito jeito...
 
Centrar Div Verticalmente

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=iso-8859-1" />
<title></title>
 
<style type="text/css">
[COLOR=yellowgreen].centered_div{[/COLOR]
[COLOR=yellowgreen]width:500px;[/COLOR]
[COLOR=yellowgreen]height:200px;[/COLOR]
[COLOR=yellowgreen]position:absolute;[/COLOR]
[COLOR=yellowgreen]top:50%; left:50%;[/COLOR]
[COLOR=yellowgreen]margin-left:-250px;  /*METADE DE width:500px */[/COLOR]
[COLOR=yellowgreen]margin-top:-100px; /* METADE DE height:200px; */[/COLOR]
[COLOR=yellowgreen]background:red;[/COLOR]
[COLOR=yellowgreen]}[/COLOR]
</style>
</head>
 
<body>
 
<div class="[COLOR=yellowgreen]centered_div[/COLOR]">
centered div content
</div>
 
</body>
</html>

O resultado podes ver aqui.

fonte http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div/
 
Última edição:
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=iso-8859-1" />
<title></title>

<style type="text/css">
[COLOR=yellowgreen] .centered_div{
width:500px;
height:200px;
position:absolute;
top:50%; left:50%;
margin-left:-250px;
margin-top:-100px;
background:red;
}[/COLOR]
</style>
</head>
 
<body>

<div class="[COLOR=yellowgreen]centered_div[/COLOR]">
centered div content
</div>
 
</body>
</html>
O resultado podes ver aqui.

fonte http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div/

Era mesmo isso que precisava! :p
Obrigado!
 
Back
Topo