Scribd
Upload
21 views2 pages

The Box Model Project Instructions

The document outlines a project to fix the website of a fictional restaurant, Dave's Burgers, by applying box model properties to various HTML elements. It includes step-by-step tasks for styling navigation, content containers, headers, buttons, and nutrition facts sections using CSS properties like height, width, padding, border, and margin. The goal is to enhance the layout and readability of the menu item on the website.

Uploaded by

seporeyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views2 pages

The Box Model Project Instructions

The document outlines a project to fix the website of a fictional restaurant, Dave's Burgers, by applying box model properties to various HTML elements. It includes step-by-step tasks for styling navigation, content containers, headers, buttons, and nutrition facts sections using CSS properties like height, width, padding, border, and margin. The goal is to enhance the layout and readability of the menu item on the website.

Uploaded by

seporeyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

The Box Model: Dave's Burgers

In this project, you will follow step-by-step instructions to fix a fictional restaurant's website. All
of the HTML and most of the CSS is intact, but the box model properties have yet to be set.
You'll use knowledge of height, width, padding, border, and margin to complete this
project.
Tasks
1.
You'll go through Davie's Burger's menu item roughly from top to bottom. Let's begin with
styling the <nav> element containing the logo and navigation elements.
 Set the width of the img to 180 pixels.
 Center the img horizontally using the margin property.

2.
Set margin of span elements inside the nav to 10 pixels on the top and bottom, and 0 pixels on
the left and right.

3.
Now set some rules for the element with the class content. This element is a container for all
the elements not included in <nav>.
 Set the height to 500 pixels.
 Create 10-pixel vertical margins and automatic horizontal margins.
 Set .body elements inside .content to have no vertical margin and automatic horizontal
margins so that it is centered.

4.
With a 500-pixel height for .content, some elements will overflow out of its box if the browser
window is made too small.
 Make .content scrollable with the overflow property.
 Resize the browser window so it is very skinny and notice that this section is now
scrollable.
5.
Now it's time to tackle the .header and its h1 text: 'BBQ BACON BURGER'.
 Set the height of the .header class to 320 pixels.
 Create a 20-pixel padding for the h1 element inside the .header.
 Set vertical margins to 0 pixels and the horizontal margins to be determined automatically
for the same h1 element.

6.
Now add some box-model formatting to the 'ORDER NOW' .button element. As you make
each change, make sure to scroll down if necessary to view the effect on the button.
 Set the width to 200 pixels.
 Set the padding to 20 pixels.
 Set the vertical margins to 40 pixels and the horizontal margins to automatic.
 Give the button a 1-pixel, solid, blue border.

7.
Finally, style the nutrition facts section at the bottom. in the element selected
with ul.nutrition.
 Set the padding of the ul.nutrition element to 20 pixels.
 Set the width of li elements within the ul.nutrition to 200 pixels.
 Set a 10-pixel vertical padding and 20-pixel horizontal padding to the same elements.
 Add a 3-pixel bottom margin to the same elements.

8.
Good job—this menu item is looking great, and the layout and spacing is much more readable. If
you'd like, you can continue refining the design or add your own spin!

You might also like