Jump to content
tomas.david100

Centrar imagens e forms num panel

Recommended Posts

Boa tarde, tenho algumas dúvidas relacionadas com html e css, criei um panel de um menu lateral e gostaria de conseguir centrar o logo e centrar os botões "voltar/Home/avançar".

 

Se me conseguissem ajudar agradeço, melhores cumprimentos,

Tomás David.

 

 

html.PNG

Share this post


Link to post
Share on other sites

Já consegui fazer as alterações obrigado pela ajuda, só mais uma coisa como posso colocar uma imagem como fundo no panel já tentei de tudo mas não deu resultado vou deixar aqui o código para que seja mais fácil perceber.

 

 

________________________________________________________________________________________________________________________

 

<body>


        <nav id="menu" class="panel" role="navigation">
            <img src="C:\Users\Tomás\Desktop\PAP\Imagem\LOGO_PAP.png" width="70" class="center">
            <div class="linha">
            <form>
                <input type="button" value="Voltar" onclick="history.go(-1)"> / <input type="button" value="Home" onclick="history.go(0)"> / <input type="button" value="Avançar" onclick="history.forward()">
            </form>
            </div>
            <hr></hr>
        <ul>
        <li><a href="Index.html">Home</a></li>
        <li><a href="Interesses.html">Marcas</a></li>
        <li><a href="Projetos.html">Acessórios</a></li>
        <li><a href="Sobre.html">Sobre</a></li>
        <li><a href="Contactos.html">Contactos</a></li>
        </ul>
        </nav>

        <div class="wrap push">
                <a href="#menu" class="menu-link"> Menu</a>
        </div>

 

_________________________________________________________________________________________________________

Share this post


Link to post
Share on other sites

você pode colocar uma imagem de background com css. Por exemplo:

body {
 background-image: url("imagem.jpg");
}

 

Reparei que você está utilizando o endereço absoluto da imagem:

  <img src="C:\Users\Tomás\Desktop\PAP\Imagem\LOGO_PAP.png" width="70" class="center">

 

Você terá problemas com isso quando subir os arquivos para o servidor. Recomendo utilizar endereços relativos.

Share this post


Link to post
Share on other sites

Não deu na mesma tentei fazer o que os dois disseram e nao deu em nada. Acaba por ficar sem fundo. E copiei exatamente o caminho que o windows me dá na imagem e mesmo assim fica sem fundo. 

 

____________________________________________________________________________________________________________________

 

.panel {
    position: fixed;
    left: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
        background: url("Imagem\bimmer.jpg") no-repeat;
    }

 

__________________________________________________________________________________________________________________________

 

Screenshot_1.png.d8c37314b595dc82ea995acdb259b678.png_________________________________________________________________________________________________________

Share this post


Link to post
Share on other sites

Reparei que você está utilizando a barra errada:

background: url("Imagem\bimmer.jpg") no-repeat;

Mude por:

background: url("Imagem/bimmer.jpg") no-repeat;

Tente também inspecionar os elementos (tecla f12 no navegador).

Se o erro persistir, tente hospedar os arquivos em algum servidor para que possamos visualizar.

Share this post


Link to post
Share on other sites

Tenho outra dúvida como posso colocar o menu e o spotify nos cantos, eu penso que não consiga por causa das margens definidas mas já dei volta a todo e não arranjo forma de o fazer. Obrigado pela a ajuda que me tem dado. Isto é um header se precisar de alguma parte depois seja do html ou do css diga me alguma coisa que eu disponibilizarei.

 

Melhores cumprimentos,

Tomás David.Screenshot_2.thumb.png.b5b146380408418b1b3980d18d6cfab9.png

Share this post


Link to post
Share on other sites

Ok vou meter o header entao e a parte relacionada com o css

 

HTML

__________________________________________________________________________________________________________

<div class="header"> <!--para criar um sistema grid de linhas e colunas -->
        <div clas="sides">
        <nav id="menu" class="panel" role="navigation">
            <div class="linha">
             <div class="coluna col3" align="center">
                <img src="Imagem\LOGO_PAP1.png" width="110" class="center">
             </div>
            </div>
            <div class="linha">
                <div class="coluna col3" align="center">
            <form>
                <input type="button" value="Voltar" onclick="history.go(-1)"> / <input type="button" value="Home" onclick="history.go(0)"> / <input type="button" value="Avançar" onclick="history.forward()">
            </form>
            </div>
         </div>
            <hr></hr>
            <ul>
                <li><a href="Index.html">Home</a></li>
                <li><a href="Interesses.html">Marcas</a>
                    <ul>
                        <li><a href=""><img src="Imagem/Audi.png" /> Audi</a></li>
                        <li><a href=""><img src="Imagem/bmw_logo.png" /> BMW</a></li>
                        <li><a href=""><img src="Imagem/ford-logo.png" /> Ford</a></li>
                        <li><a href=""><img src="Imagem/koenigsegg_logo.png" /> Koenigsegg</a></li>
                        <li><a href=""><img src="Imagem/mercedes_logo.png" /> Mercedes</a></li>
                        <li><a href=""><img src="Imagem/nissan_logo.png" /> NISSAN</a></li>
                        <li><a href=""><img src="Imagem/subaru_logo.png" /> Subaru</a></li>
                    </ul>
                </li>
                <li><a href="Projetos.html">Acessórios</a>
                    <ul>
                        <li><a href=""><img src="Imagem/sparco_logo.png" /> Sparco</a>
                            <ul>
                                <li><a href=""> Volantes</a></li>
                                <li><a href=""> Capacetes</a></li>
                                <li><a href=""> Assentos</a></li>
                            </ul>
                        </li>
                        <li><a href=""><img src="Imagem/momo_logo.png" /> MOMO</a>
                            <ul>
                                <li><a href=""> Jantes</a></li>
                                <li><a href=""> Volantes</a></li>
                                <li><a href=""> Assentos</a></li>
                                <li><a href=""> Pneus</a></li>
                            </ul>
                        </li>
                        <li><a href=""><img src="Imagem/air_logo.png" /> AIR Lift Performance</a>
                            <ul>
                                <li><a href=""> Suspensão</a></li>
                                <li><a href=""> Dispositivos</a></li>
                            </ul>
                        </li>
                        <li><a href=""><img src="Imagem/drift_logo.png" /> DRIFTWORKS</a>
                            <ul>
                                <li><a href=""> Performance</a></li>
                                <li><a href=""> Suspensão</a></li>
                                <li><a href=""> Interior e Exterior</a></li>
                            </ul>
                        </li>
                    </ul>
                <li><a href="Sobre.html">Sobre</a></li>
                <li><a href="Contactos.html">Contactos</a></li>
            </ul>
        </nav>

        <div class="wrap push">
                <a href="#menu" class="menu-link"></a>
        </div>
    </div>
    <div class="sides">
    <a class="spotify"><iframe src="https://open.spotify.com/embed?uri=spotify:user:spotify:playlist:37i9dQZF1DXcBWIGoYBM5M" width="200" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></a>
  </div>
          <div class="info">
              <h4><a href="#category">UI DESIGN</a></h4>
            <h1>ANIMATED HEADERS ARE THE BEST</h1>
        <div class="meta">
          <a  href="https://twitter.com/TomasDavid017" target="_b" class="author"></a><br>
          By <a href="https://twitter.com/TomasDavid017" target="_b"><u>Tomás David</u></a> on May, 2019
        </div>
      </div>
    </div>

__________________________________________________________________________________________________________

 

CSS:

__________________________________________________________________________________________________________

body{
    font-family: 'Roboto', sans-serif;
    background: #ffffff;
    margin: 0;
    font-size: 100%;
    vertical-align: baseline;
    display: block;
}


.linha{
    width:960px;
    margin:0 auto;
    overflow:auto;
    padding:5px 0;
}
.coluna{
    padding:0 10px;
    float:left;
}
.col1{
    width:60px; /*60+80*/

}
.co2{
    width:140px; /*140+80*/
}
.col3{
    width:220px; /*220+80*/
}
.col4{
    width:300px; /*300+80*/
}
.col5{
    width:380px; /*380+80*/
}
.col6{
    width:460px; /*460+80*/
}
.col7{
    width:540px; /*540+80*/
}
.col8{
    width:620px; /*620+80*/
}
.col9{
    width:700px; /*700+80*/
}
.col10{
    width:780px; /*780+80*/
}
.col11{
    width:860px; /*860+80*/
}
.col12{
    width:940px; /*940+80*/
}


.header{
    position:relative;
  overflow:hidden;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  height:50vw;
  min-height:400px;
  max-height:550px;
  min-width:300px;
  color:#eee;
}

.header:after{
  content:"";
  width:100%;
  height:40%;
  position:absolute;
  bottom:0;
  left:0;
  z-index:-1;
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(27,32,48,1) 100%);
}

.header:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
  background:#1B2030 url(Imagem\header.png) top center no-repeat;
  background-size:cover;
  background-attachment:fixed;
  animation: grow 60s  linear 10ms infinite;
  transition:all 0.2s ease-in-out;
  z-index:-2
}

.header a{
  color:#eee
}

__________________________________________________________________________________________________________

Share this post


Link to post
Share on other sites

Depois se me poder ajudar em relação aos backgrounds no css nao me estao a funcionar, se for no css na parte do header e do author tentei meter como me disse (background: url("Imagem/bimmer.jpg") no-repeat;) mas as imagens continuam a nao aparecer

Share this post


Link to post
Share on other sites

substitua esta parte para alinhar o spotify a direita:

 

.spotify {
    text-decoration: none;
    display: block;
    margin: 20px;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 1.2em;
    box-sizing: border-box;
    text-align: right;
}

 

e esta para o background:


.header {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    height: 50vw;
    min-height: 400px;
    max-height: 550px;
    min-width: 300px;
    color: #eee;
    background: url(../Imagem/bimmer.jpg) no-repeat;
}

 

se quiser alinhar o background: 

https://www.w3schools.com/cssref/pr_background-position.asp

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

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.