Centralizar Home do Fórum!

[Brunelli]

Detalhes da questão

Endereço do fórum: http://gsf-nwd.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

Olá,

Eu gostaria de saber como eu centralizo a Home do meu fórum?
Tipo eu fiz ela aqui mesmo, porém eu queria centralizar a caixa de login e o logo que tem em cima dela,

Aqui está o código da Home:

Código:

<meta content="text/html; charset=utf-8" http-equiv="content-type" /><title>Grove Street Families</title><link type="image/x-icon" href="http://i.imgur.com/jTwGEvJ.png" rel="icon" <div="" class="inner" />                                 <div style="display: none">
                                <a target="_blank" href="http://www.forumeiros.com">forumeiros.com</a>               
</div>
                                 <div class="bgbuttons">
                                               
  <center>
                                                     
      <p>
                                                                       
      </p>
                   
      <p>
                                                                         
      </p>
                   
      <p>
                                                                       
      </p>
                   
      <p>
                                     
      </p>
                   
      <p>
                                                                       
      </p>
                   
      <p>
                                     
      </p>
                   
      <p>
                                                                       
      </p>
                   
      <p>
                                                                         
      </p>
                   
      <p>
                                                                         
      </p>
                   
      <p>
                                                                                         
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <p>
                       
      </p>
                   
      <table>
                                                                                                                                                                     
      </table>
                                                   
  </center>
                                                   
  <div class="buttons">
                                                             
      <li>
                                                  <a style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>                                       
      </li>
                                                             
      <li>
                                                  <a style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>                                       
      </li>
                                                             
      <li>
                                                  <a target="_blank" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>                                       
      </li>
                                                             
      <li>
                                                  <a target="_blank" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>                                       
      </li>
                                                       
  </div>
                                               
</div>
                                          <br />  <div class="logo">
  <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" width="650" height="210" left="5"/>
 </div>   <div class="content2">
                                                 
  <div>
                                                               
      <div>
                                                                     
      </div>
                                                               
      <p>
                                                                                     
      </p>
                                                                                       
  </div>
                       
  <div class="login">
                                                 
      <form name="form_login" method="post" action="/login">
                                                               
        <div class="frm_connexion">
                                                   
            <center>
                  <dl>              <dt><label for="username">Nome de usuário:</label></dt>              <dd><input class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" /></dd>            </dl>            <dl>              <dt><label for="password">Senha:</label></dt>              <dd><input class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" /></dd>            </dl>            <dl>              <dt></dt>              <dd><label id="lbl_autologin" for="autologin"><input checked="checked" class="checkbox" tabindex="4" id="autologin" name="autologin" style="width: 12.2px;" type="checkbox" /> <span style="font-size: 13px;">Conexão automática</span></label></dd>            </dl>                           
            </center>
               
        </div>
                              <dl>            <dt> </dt>            <dd><input value="" name="redirect" type="hidden" /><input value="" name="query" type="hidden" /><input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" /></dd>        </dl>   
        <center>
                                                          <br /><span class="footerlogin">Ainda não tem conta no Fórum GSF? <a target="_blank" href="/register">Registre-se</a></span>        <br /><span class="creditos">Página desenvolvida por <a href="/u1">[GSF]H.Brunelli</a></span> 
        </center>
             
      </form>
         
  </div>
                         
  <form style="display:none;" id="form2" enctype="multipart/form-data" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post" method="post" action="http://gsf-nwd.forumeiros.com/">
                                  <input name="username[]" value="" type="text" style="margin-top:2px" /> <input title="" maxlength="64" value="" name="subject" type="text" /><input value="" name="message" type="hidden" /><input value="" name="lt" type="hidden" /><input value="post" name="mode" type="hidden" /><input value="inbox" name="folder" type="hidden" /><input id="sendMP" accesskey="s" tabindex="6" value="Enviar" name="post" type="submit" />   
  </form><br /><embed style="width: 1px; height: 1px;" src="https://www.youtube.com/user/BrunelliK3/videos" /><style>
img.buttonssv:hover {
  background: rgba(0, 0, 0, 0.2);
}
img.buttonssv {
  transition: 0.8s;
}
.footerlogin {
font-size:12px;
}
.creditos {
  font-size: 11px;
  float: right ;
  padding-bottom: 6px;
  padding-top: 15px;
  padding-right: 80px;
}
.login {
  float: right;
  margin-top: -12.6pc;;
  padding: 0.1px 10px;
  width: 355px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  border-radius: 4px;
}
.iheload-login {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #216C58);
  border-width: 1px;
  border-style: solid;
  box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  color: #fff;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.iheload-login:hover {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #30845E);
}
.iheload-login:active {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #A7D393, #52A891);
}
dl {
margin-bottom: 10px;
font-size: 1.1em;
font-weight: 700;
}
dt {
width: 33%;
padding-top: 5px;
border: none;
float: left;
transition: .3s;
font-size: 13px;
}
dd {
padding: 5px;
padding-right: 5px;
margin-left: 32%;
vertical-align: middle;
}
body {
  background: #f4f4f4 url(https://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.jpg);
  font-family: Arial;
  background-size: 100% 100%;
}
input[type="text"],input[type="password"] {
padding: 7px;
outline: none;
margin-top: -6px;
text-shadow: none;
border: none;
width: 14.5pc;
font-family: Arial;
box-shadow: 0 0 5px #000;
border-radius: 3px;
}
.bgbuttons {
  background: rgba(0, 0, 0, 0.66);
  width: auto;
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  min-width: 6em;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  border: 0px;
  padding: 5px;
  border-radius: 4px;
}
.buttons {
  font-family: Arial;
  font-size: 100%;
  color: white;
  margin-top: -1pc!important;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 14px 0;
  text-align: center;
}
.buttons li {
display: inline-block;
}
.buttons li a {
  background: rgba(0, 0, 0, 0);
  padding: 13px 17px;
  color: white;
  margin: -2.5px;
  transition: .8s;
}
.buttons li a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
}
.content2 {
  width: 840px;
  border-top: 300px solid rgba(0, 0, 0, 0);
}
* {
  text-shadow: 1px 1px 1px #000;
}
a {
  text-decoration: none;
  color: #8BBE89;
  text-shadow: 1px 1px 1px #000;
  transition: .8s;
}
a:hover {
  color: #fff;
  text-shadow: 0px 0px 2px #fff;
}
.logo img{
 float: left;
 width: 48%;
 padding: 5px;
 margin: -50px 10px 0px 320;
}
</style>
</div>

[Fraise]

Bom dia!

Você teria uma printscreen do que deseja?

Atenciosamente,
Fraise.

[Chanp]

Olá, Brunelli.
Peço que da próxima vez seja mais específico na questão. Só consegui identificar o que você de fato desejava por estar presente na seu último pedido.

Como já dito pelo Cooper no seu último pedido, o logo e a caixa de login estão perfeitamente alinhados na página. Contudo, eles acabam por desalinhar quando a resolução da página utilizada está fora do desejado, no caso, 100%. Observe:

Resolução da Página em 100%:

Resolução da Página em 90%:

A resolução necessária para que a página fique conforme o planejado é 100%.
Para alterar, aperte CTRL + ou CTRL - no seu teclado para aumentar ou diminuir a resolução da tela, respectivamente.

Até breve!
o/

[Convidado]

Olá,
mude a sua página para

Código:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<link type="image/x-icon" href="http://i.imgur.com/jTwGEvJ.png" rel="icon" />
<title>Grove Street Families</title>
</head>
<body>
<style>
body {
      background-color: #f4f4f4;
      background-image: url(https://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.jpg);
      background-repeat: repeat-x;
      background-position: center;
      background-size: cover;
    color: #8BBE89;
  text-shadow: 1px 1px 1px #000;
      }
.buttons {
  top: 0px;
  left: 0px;
  right: 0px;
  padding: 14px 0;
  text-align: center;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
}
.buttons li {
  display: inline-block;
}
.buttons li a {
  border-right: 1px solid rgba(0, 0, 0, 0.17);
  padding: 13px 17px;
  color: white;
  margin: -2.5px;
  transition: .8s;
}
.buttons li a:hover {
  background: rgba(0, 0, 0, 0.2);
}
.login {
  margin: auto;
  padding: 0.1px 10px;
  width: 355px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  border-radius: 4px;
} 
  .login p {
  padding: 12px;
}
.login input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  padding: 16px;
  outline: 0;
  font-family: inherit;
  font-size: 0.95em;
}
  .login input[type="email"],
.login input[type="password"] {
  background: #fff;
  border-color: #bbb;
  color: #555;
}
.login input[type="email"]:focus,
.login input[type="password"]:focus {
  border-color: #888;
}
.btn {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #216C58);
  border-width: 1px;
  border-style: solid;
  box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  color: #fff;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.btn:hover {
    border-color: #49825C;
    border-bottom-color: #89C97B;
    background: linear-gradient(to bottom, #9ED087, #30845E);
}
 .btn:active {
    border-color: #49825C;
    border-bottom-color: #89C97B;
    background: linear-gradient(to bottom, #A7D393, #52A891);
}
 .logo {
    background: url(https://i.imgur.com/Cn8b2yV.png);
    height: 210px;*/
    margin: auto;
    text-align: center;
 }
 a {
    text-decoration: none;
    color: #8BBE89;
    text-shadow: 1px 1px 1px #000;
    transition: .8s;
}
 a:hover {
    color: #fff;
    text-shadow: 0px 0px 2px #fff;
}
</style>

 <div class="buttons">
                                                           
      <li>
      <a href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>                                     
      </li>
                                                           
      <li>
        <a href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>                                     
      </li>
                                                           
      <li>
          <a target="_blank" href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>                                     
      </li>
                                                           
      <li>
                                                  <a target="_blank" href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>                                     
      </li>
                                                     
  </div>
         
              <div class="logo">
                  <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" width="650" />
                </div>
 
 
  <div class="login">
  <form name="form_login" method="post" action="/login">
                                                             
        <div class="frm_connexion">
                                                 
        <p><input class="inputfield" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" placeholder="Seu usuário" /></p> 
        <p><input class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" /></p>
        <label id="lbl_autologin" for="autologin">
        <input checked="checked" class="checkbox" tabindex="4" id="autologin" name="autologin" type="checkbox" />
          <span style="font-size: 13px;">Conexão automática</span>
          </label>

        </div>
          <input value="" name="redirect" type="hidden" /><input value="" name="query" type="hidden" />
          <input class="btn" value="Login" tabindex="6" name="login" type="submit" />
          <br /><span>Ainda não tem conta no Fórum GSF? <a target="_blank" href="/register">Registre-se</a></span>        <br /><span class="creditos">Página desenvolvida por <a href="/u1">[GSF]H.Brunelli</a></span>
           
      </form>
       
  </div>
</body>
</html>


Como Centralizar as coisas?

Para os que não sabem existe várias formas de por um elemento centralizado a mais usada é margin: auto.

Atenciosamente,

[Brunelli]

A página está assim: http://prntscr.com/iw9psq
Para todos os usuários, se não me engano apenas 1 membro está certo, tem como deixar do mesmo jeito para todos com tudo centralizado? Eu sei que varia de resolução para resolução, porém eu gostaria de saber se há algum modo de ficar certo para todos, perdão pelo erro fiz o tópico as pressas e acabei esquecendo de detalhar!

[Brunelli]

Up ...
Ainda no aguardo, se alguém puder me ajudar, agradeço muito!

[Luiz]

Olá,

Isso realmente extrapola um pouco o nosso escopo de trabalho aqui no Fórum dos Fóruns, tendo em vista que não estamos aqui para criar páginas HTML com este nível de personalização.

É possível? É.

Deixo aqui uma documentação de como se usar isso em páginas HTML, usando um recurso do CSS3 chamado media queries:
-> https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

Porém, como salientei acima, não poderemos te ajudar dado que ultrapassa o nosso escopo de função por aqui.

o/

[Brunelli]

Tudo bem então, eu agradeço demais a compreensão e a ajuda de todos, muito obrigado!

[Luiz]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.