Centralizar Home do Fórum!

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Centralizar Home do Fórum!

Mensagem por Brunelli em 25/03/18, 12:33 am

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>
avatar

Brunelli
Nível 8

Masculino
Inscrito dia : 09/10/2016
Mensagens : 143
Pontos Ativos : 234

Ver perfil do usuário http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Fraise em 25/03/18, 03:54 am

Bom dia!

Você teria uma printscreen do que deseja?

Atenciosamente,
Fraise.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Fraise — Moderadeiro
avatar

Fraise
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5281
Pontos Ativos : 6951

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Chanp em 25/03/18, 01:07 pm

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/
avatar

Chanp
Nível 9

Masculino
Inscrito dia : 03/01/2018
Mensagens : 183
Pontos Ativos : 210

Ver perfil do usuário http://ctrofc.forumeiros.com

Resolvido Re: Centralizar Home do Fórum!

Mensagem por poko em 25/03/18, 02:47 pm

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,
avatar

poko
Novo membro

Masculino
Inscrito dia : 24/03/2018
Mensagens : 1
Pontos Ativos : 6

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Brunelli em 25/03/18, 06:16 pm

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!
avatar

Brunelli
Nível 8

Masculino
Inscrito dia : 09/10/2016
Mensagens : 143
Pontos Ativos : 234

Ver perfil do usuário http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Brunelli em 27/03/18, 10:08 pm

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

Brunelli
Nível 8

Masculino
Inscrito dia : 09/10/2016
Mensagens : 143
Pontos Ativos : 234

Ver perfil do usuário http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Luiz em 28/03/18, 01:21 pm

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/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Admineiro
avatar

Luiz
Admineiro
Admineiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 6532
Pontos Ativos : 7305

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Brunelli em 28/03/18, 08:17 pm

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

Brunelli
Nível 8

Masculino
Inscrito dia : 09/10/2016
Mensagens : 143
Pontos Ativos : 234

Ver perfil do usuário http://gsf-nwd.forumeiros.com/ https://www.facebook.com/BrunelliK3 https://twitter.com/BrunelliK3

Resolvido Re: Centralizar Home do Fórum!

Mensagem por Luiz em 28/03/18, 08:48 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Admineiro
avatar

Luiz
Admineiro
Admineiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 6532
Pontos Ativos : 7305

Ver perfil do usuário https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum