Website with centralized content but out of conjunction with the background

Asked

Viewed 54 times

-2

I have my website ready, however, I wanted to change something that has been bothering me for a long time.

I am having some difficulty to leave the site divided in two layers, I will try to exemplify to be easier.

The Facebook layout 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 site background.

Website link if helpful:

https://esteticaflordeiris.com

html css html5

  • I didn’t understand the placement of Facebook. Nor does background have to be a solid color.

  • It’s not about color. Print from facebook: http://prntscr.com/lhfdoa Print from Linkedin: http://prntscr.com/lhfe68 You can see that the content in front is disconnected from the background. That is, the bottom remains fixed while only the front div moves, understand?

3 answers

-2


I don’t know if this is what you want to fix 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 can 0 is better in 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;">

last in this section I gave this code 

<section id="contact" style="/*! text-align: center; */padding-left: 750px;">
I don’t know if this is what you want but I don’t quite understand the question either

  • This is about you lining up downtown, but like I said, I don’t know if this is what you want. If you want to embed facebook feed or other site tries to search for iframe because as they are code already arranged by them can make life easier by default on their site this as (input or embed with icon "< >")

  • It’s almost there, doing this is all in the center, all right, it’s something I wanted. However, I wanted you to stay in this style here: http://prntscr.com/lhfdoa and http://prntscr.com/lhfe68

  • as these are containers try bootstap and you have templates already made but look here https://getbootstrap.com/docs/4.1/layout/overview/

-2

There man, an example of use, leaving the <div> "disconnected" from the content and allowing it to move, with no concern for what is 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>

  • Exactly that, thank you! Now I will make the adjustments along with friend July days that gave me a help too!

  • @Good Lucasmarra, if any answer has met your needs more, mark it as accepted ;)

-2

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

If the goal is to fix the content in a specific position in such a way that even moving the scroll never leaves the desired point, then in CSS you can do something like this:

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

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.