Jump to content
Sign in to follow this  
flavio_jeronimo

PIxels website

Recommended Posts

flavio_jeronimo

Boa noite estou com um problema, em ajustar o meu website em todos os monitores devido ao diferente tamanho dos monitors.

O meu website e o seguinte:

http://projecto.net84.net/final/sitepro/

O meu codigo e o seguinte:

<html>
<head>
<meta http-equiv="Content-Language" content="pt">
<style type="text/css">
body {

margin: 0px;
padding: 0;
text-align: center;
}


div.footer
{
width:400px;


background-image: url('footer.jpg');
margin-left: auto;
margin-right: auto;
}



div.banner
{
width:400px;
margin:6px;
background-color:#008080;
margin-left: auto;
margin-right: auto;
background-image: url('banner.jpg');

}


div.mainnav
{
width:400px;

background-color:#000080;
margin-left: auto;
margin-right: auto;
}




div.news
{

margin-top: 6px;
background-image: url('news.jpg');
margin-left: auto;
margin-right: auto;

}

div.advertisement
{

margin-top: 6px;
background-color:#000080;
margin-left: auto;
margin-right: auto;
background-image: url('sponsor.jpg');
top: 433px


}

div.anuncios
{

margin-top: 6px;
background-image: url('anuncios.jpg');
margin-left: auto;
margin-right: auto;
top: 252px;

}

div.direitos
{
width:400px;
background-image: url('direitos.jpg');

margin-left: auto;
margin-right: auto;
top: 885px;
}


form.login {

}
.campos {
background-color:#000; 
color:#ffffff;margin-right: 20px;
}


.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 20px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 60px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#000; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}


</style>
</head>

<body>
<div class="footer" style="width: 808px; height: 35px; left: 264px;">
<form id="form1" name="form1" method="post" action="login.php">
<label><b><font color="#FFFFFF">Usuario</font>: 
</b> 
<input name="login" 
tabindex="1" size="15" class="campos" style="font-weight: 700"><b>
<font color="#FFFFFF">Password: 
</font></b> 
<input name="password" type="password" 
tabindex="2" size="15" class="campos" style="font-weight: 700"><b> </b> 
<input type="submit" name="Submit" 
value="logar" tabindex="3" class="botao" style="font-weight: 700"><b> </b>
</div>


<div class="banner" style="width: 808px; height: 170px; left: 264px;">
</div>

<div class="mainnav" style="width: 808px; height: 35px; left: 264px;">
<ul class="menu2">
<li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>News</b></a></li>
<li><a href="#nogo"><b>Espetaculos disponiveis</b></a></li>
<li><a href="#nogo"><b>Comprar</b></a></li>
<li><a href="#nogo"><b>Contactos</b></a></li>

</ul>
</div>

<div class="news" style="position: absolute; width: 200px; height: 175px;  rigth: 180px; left: 265px; ">
</div>

<div class="advertisement" style="position: absolute; width: 200px; height: 363px; rigth: 180px; left: 265px">
;</div>
<p>
</div>

<div class="anuncios" style="position: absolute; width: 596px; height: 545px; rigth: 180px; left: 478px ">
</div>

<div class="direitos" style="position: absolute; width: 809px; height: 35px; top: 809px; rigth: 180px; left: 265px ">
</div>


</label>

</body>
</html>

quem me poder ajudar a descobrir o erro agradeço desde ja.

obrigado e cumps

Usar as tag's 'code' para formatar o código | Caya

Share this post


Link to post
Share on other sites
mjamado

Se estás a usar tamanhos absolutos (isto é, em pixels), é lógico que não vai ajustar a diversas resoluções - os tamanhos são fixos.

Se quiseres que isso aconteça, tens que usar tamanhos relativos (em percentagem ou ems).


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
Matunga

flavio_jeronimo, tal como disse o mjamado, com a forma que estas a utilizar (pixels), apenas estás a ajustar a página ao teu ecrã e consequentemente à sua resolução, para que todos possam visualizar a página em condições, deverás usar valores percentuais.

Uma sugestão, no inicio de todo o teu código, coloca uma <div> que abranja todo o conteudo do teu site: EX:

#tudo { margin: 0 auto; text-align:left;}

Em todas as tuas div's que possuis deveras inserir o comando margin: 0 auto também.

Não sei se ajuda, diz alguma coisa depois

Cumprimentos :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.