What is the best way to contain my content within a bordered box?

Question

What is the best way to contain my content within a bordered box?

As a beginner in HTML and CSS, I have successfully created a basic website with a simple menu at the top that includes links to different pages like "Home," "About," and "Contact." The website will mainly feature information and images, but I believe it would look more appealing if I could enclose the content in a box with background on the sides. Despite adding black outlines to the text, I find that it doesn't stand out well enough. I envision structuring my menu, logo, and text within a box similar to this example site: . Additionally, incorporating a shadow effect along the border would enhance the overall design.

I am unsure of how to proceed with implementing this layout. Although I have attempted to research online, I am uncertain about the specific terms to search for. Any guidance on achieving this desired visual aesthetic would be greatly appreciated.

Thank you for your help in advance.

html css

Answer 1

Answer №1

To properly structure your HTML code, enclose all the elements within the <body> tags in a wrapper like this:

<div id="container">
  <!-- All content inside body goes here. -->
</div>

Next, include this CSS styling:

body {background: url("custom-bg.jpg") center center repeat;}
#container {width: 70%; margin: auto;}

You can swap out "custom-bg.jpg" with your preferred background image.

Here's an example of what the setup looks like:

body {
  background: url("http://example.com/bg-image.jpg") center center repeat;
  margin: 0;
  padding: 0;
}
#container {
  width: 70%;
  margin: auto;
  background: #efefef;
  overflow: hidden;
  padding: 15px;
}

<div id="container">
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum accumsan ex ac ornare.</p>
  <p>Proin non ligula quis elit fringilla varius vel ut tellus. Nulla facilisi.</p>
</div>

Answer 2

To properly structure your HTML code, enclose all the elements within the <body> tags in a wrapper like this:

<div id="container">
  <!-- All content inside body goes here. -->
</div>

Next, include this CSS styling:

body {background: url("custom-bg.jpg") center center repeat;}
#container {width: 70%; margin: auto;}

You can swap out "custom-bg.jpg" with your preferred background image.

Here's an example of what the setup looks like:

body {
  background: url("http://example.com/bg-image.jpg") center center repeat;
  margin: 0;
  padding: 0;
}
#container {
  width: 70%;
  margin: auto;
  background: #efefef;
  overflow: hidden;
  padding: 15px;
}

<div id="container">
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum accumsan ex ac ornare.</p>
  <p>Proin non ligula quis elit fringilla varius vel ut tellus. Nulla facilisi.</p>
</div>

What is the best way to contain my content within a bordered box?

Answer №1

Similar questions

Refreshing a specific div without refreshing the entire page is currently not functioning as expected

What is the best way to achieve a consistent style for two tables?

I am trying to connect HTML input with Python but I am not sure how to do it

Using Font Awesome icons instead of markers in Leaflet

How to locate and extract specific data from a webpage table using JavaScript and Node.js for web scraping and storing in an array of objects

Overruled fashion

Unable to get CSS transition to function properly after adding a class using jQuery

What are the steps to ensure the equalizer start button functions properly?

When scrolling, the fixed menu bar at the top of the page is making the content below jump

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

Press on a circle to adjust its size to fit the section or division

When attempting to access the callback response with HTML tags from the server, the AJAX request in jQuery fails

Retrieve data from multiple inputs with the same name in a Spring MVC form

Having trouble with your HTML iFrame not functioning properly?

JavaScript tag filtering system: Display only the div elements that contain all the specified classes in an array; otherwise, hide them

filtering elements with selectable functionality in jQuery UI

Calculate values dynamically when styling material-UI components

The positioning of the text appears to be in the center, but it is actually

Attempting to transfer a JSON object from a frontend Form Input to an Express backend

Incorporate the stylish PayPal icon from Font Awesome into the PayPal code