html Centrar imagens e forms num panel

tomas.david100 · Maio 9, 2019

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.

winterjeferson · Maio 9, 2019

para os textos, na "div mãe", utilize text-align: center; Para imagens, margin: auto;

tomas.david100 · Maio 13, 2019

Em 09/05/2019 at 18:57, winterjeferson disse:

para os textos, na "div mãe", utilize text-align: center; Para imagens, margin: auto;

tomas.david100 · Maio 13, 2019

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>

_________________________________________________________________________________________________________

winterjeferson · Maio 14, 2019

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:

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

Thalles Rangel · Maio 14, 2019

Mais adequado é via css, utilizando:

background: url("caminho.formato") no-repeat;

tomas.david100 · Maio 15, 2019

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 _________________________________________________________________________________________________________

winterjeferson · Maio 16, 2019

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.

tomas.david100 · Maio 20, 2019

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.

winterjeferson · Maio 20, 2019

exite mais de uma forma de fazer isso. Vai depender da estrutura dos elementos.

tomas.david100 · Maio 20, 2019

Como posso fazê-lo posso meter aqui a parte do css

winterjeferson · Maio 20, 2019

copia e cola o conteúdo do arquivo. Vai precisar do html também.

tomas.david100 · Maio 20, 2019

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

HTML

__________________________________________________________________________________________________________

<div class="header"> 
       <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
}

__________________________________________________________________________________________________________

winterjeferson · Maio 20, 2019

só com isso não consigo ver a estilização dos outros elementos.

Você não tem esses arquivos hospedados em algum servidor?

tomas.david100 · Maio 20, 2019

Nao mas posso tentar enviar o ficheiro zipado unica opçao pode ser?

Desde já muito obrigado pela ajuda!

winterjeferson · Maio 20, 2019

ok

tomas.david100 · Maio 20, 2019

tentar por mediafire depois meto aqui o link

tomas.david100 · Maio 20, 2019

http://www.mediafire.com/file/2cwyga9jg245xxc/PAP.zip/file

tomas.david100 · Maio 20, 2019

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

winterjeferson · Maio 20, 2019

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

Arquivado

html Centrar imagens e forms num panel

Recommended Posts

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thalles Rangel 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tomas.david100 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

winterjeferson 0