Step 1 – Positioning the Navigation Menu
Ok so let’s assume we are starting from scratch and have a blank web page:
I am now going to extend my main.html page with 2 new Divs. These are ‘content’ and ‘top_menu_bar’
I am also going to add the following styles to our style.css file for these 2 Divs:
The border properties are not required but merely demonstrate where our Divs are sitting on the web page. The Content Div will hold the page content, while the top_menu_bar Div is going to be the placeholder for our menu. If you browse to main.html you will see something like this:
Try resizing the browser menu. Notice that the menu will remain positioned in the middle of the window as we are using auto margins.
The final stage of this step is to remove our temporary borders and apply a gradient background to our ‘top_menu_bar’ Div. Go online and type gradient generator into Google. There are lots out there but essentially you want to create a gradient that is 1 pixel wide and 60 pixels in height e.g.
Save the Gradient image to your site folder and revise the Style sheet as below:
Your page will now look like this: