OUGD504: Design for web/ studio brief 2 - Menu.

My menu page has been the easiest to do so far, it follows the same set up in terms of image boxes as my previous two pages (about us and health benefits):

The first two sections have no overlaid text and are solely 2 images inputted into the background which I designed in illustrator, to insert these into the website. The third section is of the same set up however it has some simple overlaid text. 

I did this easily in the style sheet by creating the following three tags, as I had for the previous 2 pages, creating my first section to be the longest at 680px and the following 530px.
Below are the styles for each section,  that compromises, the width, height, a background colour similar to that of the image, for preload, and a background image as well as the small margin of 10x underneath.

#menu-red {
width:1024px;
height:680px;
background-color:#ed1c24;
margin-bottom:10px;
background-image:url(menu/images/images/menu-red.png);
}

#menu-blue {
width:1024px;
height:530px;
background-color:#79c9da;
margin-bottom:10px;
background-image:url(menu/images/images/menu-blue.png);
}

#menu-pink {
width:1024px
height:530px;
background-color:#f19ac0;
background-image:url(menu/images/images/menu-pink.png);
}

Below is these styles called into the HTML source code, and then live in google chrome, with both the header and footer pasted in as before. 

<div id="menu-red">

</div>
<div id="menu-blue">

</div>
<div id="menu-pink">

</div>

For this page all I wanted was 4 simple pieces of text on the last section (pink section) underneath the  4 illustrations. 

I created a div tag and a div class for the text:

#menu-pink .titles {

margin:0 auto;

width:700px;

}

#menu-pink p {

display:inline-block;

width:170px;

height:70px;

color:#ffffff;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

}

Whilst the div class 'titles' specified how wide the text should be as a whole, where as the div tag specifies the width and height for each individual title, white in colour and centre aligned. I then  used the inspect element tool to test how large the top margin should be so that the text sits comfortably below the illustrations. 

I found that the most appropriate top margin was 405px and so I pasted this into my code to finish the page off.

#menu-pink p {

margin:405px 0 0 0;

display:inline-block;

width:170px;

height:70px;

color:#ffffff;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

}