Workshop: Advanced CSS ​

CSS navigation bars ​

1. In a new folder, create a basic empty HTML page, and external CSS file. Call it index.html, and name the external CSS file styles.css.
2. Create a simple header for your page using a semantic heading tag with a main heading. The main heading should contain your first name and then "'s website".
3. Using HTML and CSS to create a horizontal navigation bar (with list class topnav) with 3 links on it: “Home”, “Hobbies”, and then “Contact me”.
4. This page is now your home page. Make copies of the file, so that there are the same number of pages in your website’s folder as there are in your navigation bar. Rename each one according to your navigation bar links.
5. Make the navigation bar on each page link to the appropriate files.

CSS dropdown and breadcrumb menus ​

1. In the “Home” html document of the last task, create and style a dropdown menu (with overall class dropdown) for your “Hobbies” navigation link with a container (class dropdown-content) with 3 links to new pages, all with the same navigation system as the home page. These new pages are subpages of the “Hobbies” page, and for the purposes of this workshop the titles should be: “Films”, “Galleries”, “Reading”. The file names for each for these are films.html, galleries.html, reading.html respectively.
2. Create a breadcrumb system of links (with list class breadcrumb) for each page in your website.

CSS positioning, z-index and float ​

1. Download the images zip folder from moodle. Extract the images and put them in an images folder in the root of your website folder.
2. In your index.html add the images Blue-Butterfly.png, catbg.png, cat.jp and ballofwool.png to a new section element, keeping the images in that specific order in the HTML code.
3. Give the catbg.png image an id of catsitting and use absolute positioning to put it to the right of the viewport.
4. Give the cat.jpg image an id of catFace and use CSS to make it 300px wide, positioning so it stays in the same place near the bottom left corner of the viewport, even if the page is scrolled.
5. Give the ballofwool.png image an id of ballWool and use CSS to make it 600px wide and use relative positioning to place it between the sitting cat and the cat face images.
6. Give the Blue-Butterfly.png image an id of butterfly use CSS to make the width 80px and position it over the picture of the cat sitting (specify it is 10 'levels' above the cat), resting just on its forehead.
7. In the HTML create a div under all these images (in CSS make it 700p widex) positioning it between the cat sitting and the cat face but above the ball of wool. Inside this div place the image of the computer mouse (giving it an id mouse) in the top left corner (use CSS to make it 200px wide) and wrap the following text, making it small so it fits as best as possible, around the image to its right:

A Town Mouse once visited a relative who lived in the country. For lunch the Country Mouse served wheat stalks, roots, and acorns, with a dash of cold water for drink. The Town Mouse ate very sparingly, nibbling a little of this and a little of that, and by her manner making it very plain that she ate the simple food only to be polite. After the meal the friends had a long talk, or rather the Town Mouse talked about her life in the city while the Country Mouse listened. They then went to bed in a cozy nest in the hedgerow and slept in quiet and comfort until morning. In her sleep the Country Mouse dreamed she was a Town Mouse with all the luxuries and delights of city life that her friend had described for her. So the next day when the Town Mouse asked the Country Mouse to go home with her to the city, she gladly said yes. When they reached the mansion in which the Town Mouse lived, they found on the table in the dining room the leavings of a very fine banquet. There were sweetmeats and jellies, pastries, delicious cheeses, indeed, the most tempting foods that a Mouse can imagine. But just as the Country Mouse was about to nibble a dainty bit of pastry, she heard a Cat mew loudly and scratch at the door. In great fear the Mice scurried to a hiding place, where they lay quite still for a long time, hardly daring to breathe. When at last they ventured back to the feast, the door opened suddenly and in came the servants to clear the table, followed by the House Dog. The Country Mouse stopped in the Town Mouse's den only long enough to pick up her carpet bag and umbrella. "You may have luxuries and dainties that I have not," she said as she hurried away, "but I prefer my plain food and simple life in the country with the peace and security that go with it."