How do I put my content in a box?


Tags: html,css,design

Problem :

I'm new to HTML and CSS, but I have managed to create a basic website, I have a small menu on the top that consists of links directing you to the different pages such as "Home", "About" and "Contact". The site is only gonna consist of information and pictures so it's good enough.

Anyway, I feel like the site would look better if I could put the content in a box and have the background on the sides because the text doesn't show up that well even when putting black outlines on the letters. What I'd like to do is basically put my menu, logo and text inside a box like this site: http://www.kakservice.se/?gclid=Cj0KEQiAzai0BRCs2Yydo8yptuIBEiQAN3_lFqaNO2scD5hQCDW0jBWNIAOAyPrZRG20X2a1LsBTIrcaAko68P8HAQ (Couldn't remember a site in English with this design, but I suppose it's unimportant.) and preferably adding a shadow at the border.

So how would I go about this? I have searched online, but I don't know exactly what to search for.

Thanks in advance.



Solution :

What you need to do is, wrap all the contents of your <body> tag inside a wrapper like:

<div id="wrap">
  <!-- Everything inside body. -->
</div>

And add this following CSS:

body {background: url("bg.jpg") center center repeat;}
#wrap {width: 80%; margin: auto;}

You can replace the bg.jpg with the background of your choice.

An example of what's before is:

body {
  background: url("http://thumbs.dreamstime.com/x/grunge-tiled-background-6169673.jpg") center center repeat;
  margin: 0;
  padding: 0;
}
#wrap {
  width: 80%;
  margin: auto;
  background: #fff;
  overflow: hidden;
  padding: 15px;
  
}
<div id="wrap">
  <h1>Welcome to My Site</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>


    CSS Howto..

    how to make background fit on screen bootstrap3

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to set height of child div while hovering over a parent div in css?

    How do I float a div to the right of a title div without affecting the content of the title?

    How to borrow styles from another CSS rule

    How to activate jQuery function with img instead of button?

    how do I make overflowing and float positioned elements stay all on one line?

    How to get css property value in pure javascript

    IE7: CSS & jQuery: dragging up, dragged item is on top, dragging down: dragged item is below. How do I get both to be on top?

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    How could I add two separate text styles to a button in a form in CSS?

    how to remove one canvas element from displaying on top of another canvas element

    how to change css style for every second data (picture) from database?

    How to design aggregations filter in css for week, month?

    How to move an entire group of objects with Javascript

    How change the radio button hover color

    How to fix an image compared with another one in CSS?

    how to give css for following data

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    how to get a rounded corner table with a body in different color with CSS?

    How to rotate multiple words with CSS?

    How can i overlap inline divs?

    How to CSS sandbox/reset an entire DIV area in the current page?

    How can I fix this jumbotron/carousel to be the size of the image?

    how to change the CSS linear-gradien backgroundt height (thickness)?

    How do I left pad a div in a JavaFX WebView?

    How to get a navbar to display text depending on button clicked

    How can I get two form fields side-by-side, with each legend above the field?

    How can I set inline css styles for an element with javascript?

    How to recalculate css vw and vh values after resizing?