• 0
Sign in to follow this  
Polegar

Dúvida - Resoluções ;(

Question

Boa noite galera, estou a 1 semana para fazer uma pagina que imagino que seja simples, estou falando dessa pagina www.ptime.com.br porem estou com uma duvida, para resumir a minha duvida, peço que entrem no meu site com resolução 1024x768 e depois com outra resolução, bem vocês podem perceber que saiu todo o alinhamento e espaçamentos, já procurei na internet já usei script, comando blabla e até agora não consigo pra que se ajuste em outras resoluções. Quem puder me dar um help agradeço muito segue abaixo meu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Party Time</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<style type="text/css">
body {
padding: 0;
background-color: #000;
background-image: url(img/hp.jpg);
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
#apDiv1 {
position: absolute;
width: auto;
height: auto;
z-index: 1;
left: 76px;
top: 56px;
}
#pt {
position: absolute;
width: 200px;
height: 49px;
z-index: 2;
left: -180px;
top: -230px;
}
#apDiv4 {
position: absolute;
width: 386px;
height: 142px;
z-index: 3;
left: 274px;
top: 209px;
}
#fundo {
position:absolute;
left: 50%;
top:50%;
;
margin-top: -110px;
border: 0px solid #000;
width: 420px;
height: 500px;
text-align:center;
background-image: url(img/cd.png);
background-size: 100%;
background-repeat: no-repeat;
}
#fundo2 {
position:absolute;
left: 50%;
top:50%;
;
margin-top: -250px;
border: 0px solid #000;
width: 700px;
height: 800px;
text-align:center;
}
#cadastro {
position:absolute;
left: 50%;
top:50%;
;
margin-top: -100px;
border: 0px solid #000;
width: 360px;
height: 200px;
text-align:center;
}
#texto {
position:absolute;
left: 50%;
top:50%;
;
margin-top: -230px;
border: 0px solid #000;
width: 360px;
height: 200px;
text-align:center;
}
#logo {
position: absolute;
width: 144px;
height: 105px;
z-index: 1;
left: -300px;
top: -220px;
}
#logo2 {
position: absolute;
width: 144px;
height: 105px;
z-index: 1;
left: 520px;
top: -220px;
}
#tabela {
position:absolute;
left: 50%;
top:50%;
;
margin-top: -100px;
border: 0px solid #000;
width: 360px;
height: 200px;
text-align:center;
}
</style></head>

<body>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-collapse">
<div id="tabela">
<div id="logo"><img src="img/logo.png" /></div>
<div id="pt"><img src="img/pt.png" /></div>
<div id="logo2"><img src="img/logo2.png" /></div>
<div class="form-group" style="position: absolute; left: 20px; top: -230px; width: 215px;">
<input style="width:50%" type="email" class="form-control" id="exampleInputEmail2" placeholder="Nickname">
</div>
<span class="form-group" style="position: absolute; left: 150px; top: -230px; width: 216px;">
<input style="width:50%" type="password" class="form-control" id="exampleInputPassword2" placeholder="Senha" />
</span>
<div style="position: absolute; left: 330px; top: -235px;">
<button type="submit" class="btn btn-default">Entrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fundo">
</div>
<div id="cadastro">
<IFRAME name=centro src=cadastrar.php width=400 height=400 frameborder=0 scrolling=no></IFRAME>
</div>

<div id="fundo2"><center><img src="img/fac.gif" /></center></div>



</body>
</html>

OBS: estou usando o bootstrap também.

OBS2: os codigo q estão com ; apenas na verdade é magin-left mais estão sendo ocultados não sei o porque.

Edited by Polegar

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this