Advanced CSS Layout Lesson 5
Using CSS comments in the style sheet Using CSS background images Creating navigation styles Creating the ‘pages’ for navi- gation menus Work with absolute positioning Lesson Objective
Point and right click the image, inner_wrap_bg.png and copy In this lesson, you will learn how to fine-tune the appearance of a page by adding graphics, color and additional sections to your TadsTees layout page. Navigate to Master folder > demo Files’ folder > ‘tadstees_assets’ Point and right click the image, inner_wrap_bg.png and copy Then, paste inside the Images’ folder of your ‘layout’ folder inside your ‘Tads Tees’ folder
Cont’d From your ‘Layout’ folder Point and right click ‘04Instructor_ layout- start’ AND ‘styles.css’ and open with BBEdit Preview the .html file in Chrome to remind yourself what it looks like Select all the internal css styling from .html file and cut (command + x) paste all at the bottom of the last closing curly bracket in the styles.css file (nothing should change if coded correctly) In the external styles.css, comment-out all the background colors with /* */ Preview in the browser
Cont’d Scroll down to the bottom of styles.css and create a line space below the last rule Then type the following gradient background image rule. This is known as a fix that allows a background-image to be placed on a div that has no content – #innerwrap { background-image: url(images/inner_wrap_bg.png); background-repeat: repeat-x; }
Cont’d Then type the following hack (solution) rule – #innerwrap:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
To enhance the CSS navigation bar locate the #mainnav in your CSS style section and delete the comments (slashes & asterisks) from the background color Then, replace the existing color with the following - #60668b; Save and preview
Cont’d Repeat the above from mainnav li to change the background-color to #7D83A4; Save and preview Add the following code at the end of the mainnav li to vertically center the text line-height: 25px; save and preview
Cont’d Then add the following code to style the anchor and hover #mainnav ul li a { color: #ffffff; text-decoration: none; display:block; } #mainnav ul li a:hover { background-color: #29336b; save and preview
The first thing we need to do is to rename the file - To prepare this home page for multiple pages we need to do a couple of things. The first thing we need to do is to rename the file - Click Finder > navigate to your layout folder inside Tadstees > Rename 04instructor_Lay…. to index.html
Then, scroll up to locate the opening body tag, <body> Cont’d Then, scroll up to locate the opening body tag, <body> Click once after the word body and type <body id="home"> You just added an ID to the body tag which will allow you to set a style that applies to this page only.
Let’s continue styling for all the pages before they are even created. scroll back to the style.css press Enter after the last rule for a line spacing, and add the following - body#home .nav-home, body#about .nav-about, body#browse .nav-browsecatalog, body#contact .nav-contact, { } This rule will target the class nav-home on the page with the ID home and so on..
Cont’d Then, In your new, ‘Index.html’ add the following rule to the div id=“mainnav” unordered list - <li><a class="nav-home" href="index.html"> Home </a></li> <li><a class="nav-about” href="about.html">About </a></li> <li><a class="nav-browse" href="browsecatalog.html"> Browse Catalog </a></li>href="contact.html"> <li><a class="nav-contact” Contact </a></li>
We are now ready to make four functional pages out of index We are now ready to make four functional pages out of index.html which is now our Master page In BBedit From the Menu bar, click File > Save as Name this file about.html and make sure it is saved inside the layout folder.(don’t panic if bbedit closes index.html, it’s inside the folder) Scroll down and locate the h1 (in div id=“main”) and replace the text; ‘Tad’s tees is…’ with the word About Then scroll up to the opening body tag <body> and replace the id for the word Home to about like this - <body id=”about”> Save and preview
Repeat the previous steps to create a third page from index Repeat the previous steps to create a third page from index.html, the Master page In BBEdit, open Index.htm From the Menu bar, click File > Save as Name this file browsecatalog.html and make sure it is saved inside the layout folder. Scroll down and locate the h1 (in div id=“main”) and replace the text; ‘Tad’s tees is…’ with Browse a Catalog Then scroll up to the opening body tag <body id=“home”> and replace the id for the word Home to browsecatalog, like this - <body id=”browsecatalog”> Save and preview.
Repeat, the previous steps to create a forth page from index Repeat, the previous steps to create a forth page from index.html, the Master page In BBEdit, open Index.html once again. From the Menu bar, click File > Save as Name this file contact.html and make sure it is saved inside the layout folder. Scroll down and locate the h1 (in div id=“main”) and replace the text; ‘Tad’s tees is…’ with Contact Us Then scroll up to the opening body tag <body id=“home”> and replace the id for word Home to contact, like this - <body id=”contact”> Save and preview > click the navigation menus to ensure all the links work.
This concludes the lesson 5_Advanced CSS Layout Related activates - 1. Listen to video tutorial Lesson 5 again 2. Then, Read chapter 5, follow the steps and complete the project > Receive a grade 3. Complete the Review Qs_L5 4.Take Test_Advanced CSS Layout on Schoology 4. Complete self-study5a and 5b