-2

Estou com meu website pronto, porém, queria mudar algo que vem me incomodando faz tempo.

Estou com certa dificuldade em deixar o site dividido em duas camadas, tentarei exemplificar para ficar mais fácil.

O layout do Facebook possui a parte central onde aparece o feed, e o background.

O feed é uma div (?) centralizada. Qual linha de código me facilitaria a chegar neste resultado?

Edit.: Outro exemplo é o site do LinkedIn, onde o conteúdo é centralizado e desconexo do background do site.

Link do site, caso seja de ajuda:

https://esteticaflordeiris.com

2
  • Não entendi a colocação do Facebook. Nem background tem a não ser uma cor sólida.
    – Sam
    12/11/2018 às 15:17
  • Não é sobre cor. Print do facebook: prntscr.com/lhfdoa Print do LinkedIn: prntscr.com/lhfe68 Pode-se perceber que o conteúdo a frente é desconexo do fundo. Ou seja, o fundo permanece fixo enquanto apenas essa div a frente se mexe, entende? 12/11/2018 às 15:29

3 Respostas 3

-2

Não sei se e isto que queres corrigir mas se quiseres alinhar tudo primeiro deves alinhar a foto com este css (mudei a width)

#showcase img {
    width: 80%;
    margin-left: 60px;
}

Depois o texto com este css (se quixeres podes por 0 fica melhor na margin)

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
}

a seguir usei este codigo na section 2

<section id="info2" style="padding-left: 0px;margin-left: 500px;">

por ultimo nesta secção dei este codigo

<section id="contact" style="/*! text-align: center; */padding-left: 750px;">
nao sei se e isto que queres mas também nao percebo muito bem a pergunta

3
  • isto é para alinhares tudo ao centro mas como disse não sei se e isto que queres. Se queres incorporar feed do facebook ou outro site tenta procurar por iframe pois como sao codigo ja arranjados por eles pode-te facilitar a vida por norma no site deles esta como (input ou embed com icone "< >")
    – joao dias
    12/11/2018 às 15:31
  • É quase lá, fazendo isso fica tudo no centro, tudo bem, é algo que eu queria. Porém, eu queria que ficasse neste estilo aqui: prntscr.com/lhfdoa e prntscr.com/lhfe68 12/11/2018 às 15:35
  • pois isso são containers experimenta usar bootstap e tens templates já feitos mas procura aqui getbootstrap.com/docs/4.1/layout/overview
    – joao dias
    12/11/2018 às 15:38
-2

Aí cara, um exemplo de uso, deixando a <div> "desconectada" do conteúdo e permitindo que ele possa se mover, sem preocupação com o que está do lado, por exemplo:

#menu-vertical{
  position: fixed;
  z-index: 999;
  overflow: hidden;
  color: white;
}
#principal{
  margin: 0 auto;
  width: 350px;
  height: 1200px;
  background-color: white;
}
body{
  background-color: blue;
}
<body>
  <div id="menu-vertical">
     <table cellpadding="0" cellspacing="0">
       <tr><td>Item 1</td></tr>
       <tr><td>Item 2</td></tr>
       <tr><td>Item 3</td></tr>
       <tr><td>Item 4</td></tr>
     </table>
  </div>

  <div id="principal">
     <table cellpadding="0" cellspacing="0">
       <tr><td>Item 1</td></tr>
       <tr><td>Item 2</td></tr>
       <tr><td>Item 3</td></tr>
       <tr><td>Item 4</td></tr>
     </table>
  </div>
</body>

2
  • Exatamente isto, obrigado! Agora irei fazer os ajustes juntamente com o amigo joao dias que me deu uma ajuda também! 12/11/2018 às 15:38
  • @LucasMarra boa, se alguma resposta atendeu mais suas necessidades, marque-a como a aceita ;) 12/11/2018 às 15:42
-2

Se o seu objetivo for centralizar uma div é só adicionar no CSS a propriedade "margin" com o valor "auto", desta forma: margin: auto;

Caso o objetivo seja fixar o conteúdo em uma posição especifica de tal forma que mesmo movendo o scroll ele nunca saia do ponto desejado, então no CSS você pode fazer algo assim:

position: fixed; top: 50%; left: 50%; tansform: translate(-50%, -50%);

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .