CSS box in middle of content?

Question

I don't want the top right button to be functional, it will be just a picture. What I need help with is trying to make the content that looks like a grey background with box inside it.

I made the background but I need to make the box inside it and learn how to type the <p> inside the box.

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
header {
    width: 100%;
    height: 90px;
    background-color: #212022;
    border-bottom:1px solid orange;
}
main {
  background-color: #181719;
}
footer {
  width: 100%;
  height: 167px;
  background-color : #212022;
  border-top:1px solid orange;
}
p{
  color: white
}
#logo{
 width: 520px;
 height: 80px;
 background: url('//i.imgur.com/PHXLLsn.png') no-repeat scroll center;
 margin-top:5px;
  left: 120px;
  float: left;
 position: absolute;
}
#steamlogin{
 width:154px;
 height: 23px;
 background: url('//i.imgur.com/qKairpt.png');
 margin-top: 32px;
 float: right;
 position: absolute;right: 130px
}

<body class="Site">
  <header>
    
    <div class="wrapper">
     <div id="logo"></div>
     <div id="steamlogin"></div>

  </header>
  <main class="Site-content">this is content</main>
  <footer>this is footer</footer>
</body>

Hi @MDub, welcome to StackOverflow! Your question is similar to one above and already has been answered. — evrim oku, Aug 17 '15 at 16:54
idk , iam new i dont know where to put the code for the box in , and i dont know the code for the box that the website shows , i want the box be just like the site with the text inside it like how i can type "HOW CSGOSHUFFLE WORKS" inside it and in the middle i dont know how to do all of that — MDub, Aug 17 '15 at 17:02

score 1 · Accepted Answer · answered Aug 17 '15 at 17:23

1

You can use margin-right:auto and margin-left:autoon an element with fixed width (eg. width:980px, width:80%) to center that element. (I used margin property's shorthand version like margin: 50px auto;)

If you want to center elements contain text like h1, h2, p, etc. you can use text-align:center on those elements.

in the example below i created a div element with a class named "centered" and you can see how i centered the h2 elements, too. I hope this helps you.

http://jsfiddle.net/t5m4ew3r/4/

Also i suggest you to check out some html/css tutorials. you can easly find them on the internet. By this way you can learn better.

answered Aug 17 '15 at 17:23

evrim oku

229
1
7

omg thx man you really helped me with this - but can u just tell me what code i type to make a border around the box we made ? and where i put that code please – MDub Aug 17 '15 at 17:54
nvm i remembered the command for border thx man <3 ! you're beast – MDub Aug 17 '15 at 18:01
i just have 1 Q please after i did that i save my html as index.html and the css as style.css but how i host it ? i bought doamin + server i go to cPanel > file manger and i see lots of folders Main one is Home logs mail public_ftp public_html tmp with those sub folders I think i put the html in public_html but what about the .css and am i missing command to link my html with the css ? or i am good to go – MDub Aug 17 '15 at 18:07
you need to put your files in public_html. you can put css file according to how you link it in your html file. better aproach is putting your css, javascript, etc files in a folder. so link your css file like: and create a new folder named as css in public_html. and put your css here. – evrim oku Aug 17 '15 at 18:40
man i dont know what to say you fixing all my probs just couple more questions xD lets say my domain is www.mydomain.com how i can make page like www.mydomain.com/staff and i upload html and css files to that page any idea about how to make that ? – MDub Aug 17 '15 at 19:28
lets say that iam going to use those codes that i made for a page on my site like www.mydomain.com/staff – MDub Aug 17 '15 at 19:31
Create a folder named "staff" in public_html and put your html file and your css folder in it. i don't mind answering your Qs. But seriously, if you are interested in web developing, please start to learn from proper sources :) – evrim oku Aug 17 '15 at 19:51
i am really happy with your help and i know that you maybe start getting annoyed by me , i uploaded the page every thing cool i just dont know how to make those buttons on the header , u see where it says "Support" "how to play" and in the footer where it says all those stuff with facebook , twitter etc , how i can add that ? if you cant type the code for me just give me keyword that i should search for on the internet :) thx brother <3 – MDub Aug 17 '15 at 22:29
this is how it looks like now http://codepen.io/anon/pen/VLOrZy the images are missing cuz they are on the host u probably knows that already – MDub Aug 17 '15 at 22:36
http://codepen.io/anon/pen/PqvOmL here is a basic example of links, they are tags. But MDub start learning html from a site like http://www.w3schools.com/html/html5_intro.asp this will be better for you :) and this was my last answer on this post, i hope i could help you. And i mean it start learing it :D – evrim oku Aug 17 '15 at 23:45
thank you very much! you really helped me hope i can return the favor later – MDub Aug 17 '15 at 23:53

CSS box in middle of content?

1 Answers1