Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Sou estudante de webdesign e estou no começo do modulo de html/css, resolvi construir um site pra ir treinando e pra pegar o jeito, fui fazendo meu site normal no meu monitor de 15", tudo bem tudo certo, dai fui vizualiza-lo na casa da minha tia que o monitor é 19" e vejo que o jeito que eu alinhei foi errado.
Tentei ver na net uma solução para deixar o site alinhado em todas as resoluções, vi umas 2 saidas, vi uma do <center> e com alguns atributos CSS como esse:
<!--
body {
margin:0;
padding:0;
background:#0000;#tudo {
width: 760px;
margin:0 auto;
padding: 10px;#conteudo {
padding: 5px;
background-color: #eeeeee;
}Tentei, tentei, mas nada de alinhar, li algumas coisas que falavam sobre o uso abusivo do absolute e de como poderia atrapalhar na tarefa de centralizar etc.
Só que eu gosto de usar o absolute, acho mais simples, vou deixar o code com a index e o css, olhem e me deem uma luz no que eu estou errando e qual medida que eu devo tomar.
<html>
<head>
<title>Site</title>
</head>
<link rel=stylesheet href=estilos2.css type=text/css>/Conteúdo/
.obj2
{
position:absolute;
top:2;
left:150;
}
.obj3
{
position:absolute;
top:0;
left:150;
}
.obj4
{
position:absolute;
top:850;
left:150;
}
.obj5
{
position:absolute;
top:150;
left:150;
}
.obj6
{
position:absolute;
top:0;
left:135;
}
.obj7
{
position:absolute;
top:170;
left:150;
}
.obj8
{
position:absolute;
font-size:10;
font-weight:bold;
top:866;
left:340;
font-family:"verdana", "helvetica", "arial";
}
.obj9
{
position:absolute;
font-size:10;
font-weight:bold;
top:878;
left:425;
font-family:"verdana", "helvetica", "arial";
}
.obj10
{
position:absolute;
top:160;
left:150;
}
.obj11
{
position:absolute;
top:850;
left:150;
}
.obj12
{
position:absolute;
top:890;
left:150;
}
.obj13
{
display:block;
font-weight:bold;
font-family:verdana;
text-decoration:none;
color:#000;
position:absolute;
font-size:12;
color:#FFFFF;
top:178;
left:192;
}
.obj14
{
display:block;
font-weight:bold;
font-family:verdana;
text-decoration:none;
color:#000;
position:absolute;
font-size:12;
color:#FFFFF;
top:178;
left:263;
}
.obj15
{
display:block;
font-weight:bold;
font-family:verdana;
text-decoration:none;
color:#000;
position:absolute;
font-size:12;
color:#FFFFF;
top:178;
left:340;
}
.obj16
{
display:block;
font-weight:bold;
font-family:verdana;
text-decoration:none;
color:#000;
position:absolute;
font-size:12;
color:#FFFFF;
top:178;
left:430;
}
.obj18
{
display:block;
font-weight:bold;
font-family:verdana;
text-decoration:none;
color:#000;
position:absolute;
font-size:12;
color:#FFFFF;
top:178;
left:520;
}a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {text-decoration: underline;
color: #4a6275;
}.obj19
{
position:absolute;
top:220;
left:170;
}
.obj20
{
position:absolute;
top:220;
left:170;
}
.obj21
{
position:absolute;
top:220;
left:170;
}
.obj22
{
position:absolute;
top:220;
left:170;
}
.obj23
{
position:absolute;
top:220;
left:170;
}
.obj24
{
position:absolute;
top:0;
left:120;
}
.obj25
{
position:absolute;
top:0;
left:868;
}
.obj26
{
position:absolute;
top:0;
left:855;
}
.obj27
{
position:absolute;
top:220;
left:170;
}
.obj28
{
position:absolute;
top:330;
left:220;
color:#949494;
}
.obj29
{
position:absolute;
top:330;
left:220;
color:#949494;
font-size:14;
font-family:"verdana", "helvetica", "arial";
}
.obj30
{
position:absolute;
top:750;
left:320;
}
.obj31
{
position:absolute;
top:357;
left:260;
}
.obj32
{
position:absolute;
top:335;
left:170;
float:left;
display:inline;
margin:5px;
width:100px;
}
.obj33
{
position:absolute;
top:346;
left:160;
}
.obj34
{
position:absolute;
top:380;
left:180;
font-family:"verdana", "helvetica", "arial";
}
.obj35
{
position:absolute;
top:390;
left:600;
}
.obj36
{
position:absolute;
top:450;
left:600;
}
.obj37
{
position:absolute;
top:510;
left:600;
}
.obj39
{
position:absolute;
top:570;
left:600;
}
.obj40
{
position:absolute;
top:20;
left:20;
}
.obj41
{
font-size:20;
position:absolute;
top:445;
left:310;
}
.obj42
{
position:absolute;
top:350;
left:150;
}
.obj43
{
position:absolute;
top:80;
left:40;
font-family:"verdana", "helvetica", "arial";
}
.obj44
{
position:absolute;
top:610;
left:195;
font-family:"verdana", "helvetica", "arial";
font-size:10;
}
.obj45
{
position:absolute;
top:390;
left:150;
}
.obj48
{
position:absolute;
top:460;
left:300;
font-family:"verdana", "helvetica", "arial";
font-size:16;
}/Conteúdo/
<body bgcolor=#00000 link=#638aa7 vlink=#638aa7 alink=#638aa7>
<div class=obj25><img src=imagens/lateralesquerda.png></div>
<div class=obj24><img src=imagens/lateraldireita2.png></div>
<div class=obj6><img src=imagens/lateraldireita.png></div>
<div class=obj26><img src=imagens/lateraldireita3.png></div>
<div class=obj3><img src=imagens/corpo.png></div>
<div class=obj10><img src=imagens/barra.png></div>
<div class=obj4><img src=imagens/baixo.png></div>
<div class=obj11><img src=imagens/barrabaixo.png></div>
<div class=obj12><img src=imagens/barrabaixo2.png></div>
<div class=obj7><img src=imagens/menu2.png></div>
<div class=obj5><img src=imagens/menu.png></div>
<div class=obj2><img src=imagens/bannertopo750x150.png></div>
<div class=obj8><font color=#fafafa>© Copyright 2008 No, todos os direitos reservados.
</font></div>
<div class=obj9><font color=#fafafa>Proibida a reprodução total ou parcial.</font></div>
<div class=obj13><a href=index2.html>Home</a></div>
<div class=obj14><a href=equipe.html>Equipe</a></div>
<div class=obj15><a href=servicos.html>Serviços</a></div>
<div class=obj16><a href=portifolio.html>Portfólio</a></div>
<div class=obj18><a href=contato.html>Contato</a></div>
<div class=obj27><img src=imagens/homebanner.png></div>
<div class=obj34><table width=300px height=200 border=0>
<tr>
<td>
<font color=#FFFFFF><h2></h2></font>
<font color=#eaeaea>
<br>
</font>
</td
<tr>
</table></div>
<div class=obj40>
<div class=obj35><a href=equipe.html><img src=imagens2/imgequipe.png></a></div>
<div class=obj36><a href=servicos.html><img src=imagens2/imgservicos.png></a></div>
<div class=obj37><a href=portifolio.html><img src=imagens2/imgportifolio.png></a></div>
<div class=obj39><a href=contato.html><img src=imagens2/imgcontato.png></a></div>
</div>
</body>
</html>Espero uma ajuda aê galera, vlw.
Carregando comentários...