Website with centralized content but out of context with the background [closed]

Navigation
-2

I have my website ready, but I wanted to change something that has been bothering me for some time.

I'm having a hard time leaving the site in two layers, I'll try to exemplify it to make it easier.

The layout of Facebook has the central part where the feed appears, and the background.

The feed is a centralized div (?). Which line of code would make it easier for me to get this result?

Edit .: Another example is the LinkedIn website, where content is centralized and disconnected from the background of the site.

Website link, if it is of help:

  

link

    
asked by anonymous 12.11.2018 / 16:02

3 answers

-2

I do not know if this is what you want to correct but if you want to align everything first you should align the photo with this css (I changed the width) 

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

Then the text with this css (if quixeres you can by 0 gets better on the margin) 

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

Then I used this code in section 2 

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

Finally in this section I gave this code 

<section id="contact" style="/*! text-align: center; */padding-left: 750px;">
I do not know if this is what you want but I do not understand the question very well either.     
12.11.2018 / 16:30
-2

Here's an example of usage, leaving <div> "disconnected" from the content and allowing it to move, regardless of what's on the side, for example: 

#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>
    
12.11.2018 / 16:36
-2

If your goal is to centralize a div, just add the "margin" property with the "auto" value in CSS like this: margin: auto;

If the goal is to set the content to a specific position in such a way that even scrolling it never exits the desired point, then in CSS you can do something like this:

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

    
13.11.2018 / 22:46
How to run a task every month using Java [closed] What exactly is the Model in a PHP application? [duplicate]