Website BannerS2C Home « Website Banner

In this lesson we create a banner for our homepage. We will highlight the appropriate section of the proposal and look at the Fine Fancy Foods Layout Diagram. This will give us the information required to create the banner and the CSS and HTML we need to achieve it.

Fine Fancy Food's Website Proposal Revisited

Areas that affect the banner are highlighted in red.

Deciphering our highlighted text

Ok, let's go through our highlighted text and see what we can learn from the website proposal with regards to our banner.

The site will consist of a banner with our name and a couple of links so our users can mail us and learn more about FFF and our products.

There is no mention of placement here so lets revisit the diagram Fine Fancy Foods sent us.

Creating Our Layout

Well from the diagram the banner title seems to be centred in large white text on a blue background. There is no mention of an icon but Fine Fancy Foods sent us a jpg file 'ffflogo.jpg' under the 'Banner' heading and after investigation we find this file matched the icon on the diagram. We also have 'Contact Us' and 'About Us' text which must be the couple of links mentioned above for contacting the company and other information.

Open up the file with Notepad we created and tested in Lesson 2: Page Layout for our global CSS.

You saved the file to your computer in the C:\_CaseStudy folder as global.css

Copy and paste the following code into the reopened file, overwriting the existing #banner style.

/* position banner relative to the wrapper and use a blue background */
#banner {
  position: relative;
  background-color: blue;
}
/* style banner header */
#banner h1 {
  color: white;
  margin-bottom: 10px; 
  text-align: center;
  padding: 25px 0 5px; 
  font: 3.8em "Comic Sans", Georgia, "Times New Roman", Times, serif;
  font-weight: 100;
}
/* position banner icon */
#banner #ffficon {
  position: absolute;
  top: 10px;
  left: 45px;
}
/* style list for links */
#banner ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: absolute;
  right: 20px;
  bottom: 5px;
}
#banner li {
  display: inline;
  margin-left: 10px;
}
#banner li a {
  color: white;
  text-decoration: none;
  font: 1em "Comic Sans";
}
#banner li a:hover {
  color: red;
}
#seperator {
  border-right: 1px solid white;
  padding-right: 10px;
}

Save the file in the C:\_CaseStudy folder and close the Notepad.

Reviewing The CSS

Ok we set the #banner division relative to its containing element which is the #wrapper division. We then set some styling for the <h1> </h1> element. After this we absolutely position the icon using left and top margins. Lastly we style the lists and links requested in the banner by the client.

Creating Our HTML

Reopen up the file with Notepad we updated in Lesson 2: Page Layout.

You saved the file to your computer in the C:\_CaseStudy folder as index.html

Copy and paste the following code into the reopened file, between the opening <div id="banner"> and closing </div> element.

<div id="ffficon">
  <img src="https://server2client.com/images/ffflogo.jpg"  alt="FFF ICon"  title="FFF ICon">
</div>
<h1>Fine Fancy Foods</h1>
<ul>
  <li id="seperator"><a href="mailto:charlie@server2client.com">Contact Us</a></li>
  <li><a href="pages/aboutus.html">About Us</a></li>
</ul><br />

Save the file in the C:\_CaseStudy folder and close the Notepad.

Viewing Our Saved File

From the C:\_CaseStudy folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

Reviewing The Code

The HTML is fairly self explanatory and we did most of the work when we styled the tags with CSS. Just make sure you understand the CSS and HTML we used before going on to the next lesson.

Lesson 3 Complete

In this lesson we have reviewed the proposal and retrieved information to create a banner for the site as requested by the client.

Related Tutorials

HTML Basic Tutorials - Lesson 6 - Ordered and Unordered Lists

HTML Basic Tutorials - Lesson 7 - Images

HTML Intermediate Tutorials - Lesson 2 - HTML Structure - Layout

CSS Basic Tutorials - Lesson 5 - Styling Text

CSS Basic Tutorials - Lesson 8 - Padding & Margins

CSS Basic Tutorials - Lesson 9 - Borders

CSS Intermediate Tutorials - Lesson 1 - Backgrounds

CSS Intermediate Tutorials - Lesson 7 - Positioning

CSS Intermediate Tutorials - Lesson 8 - Display

CSS Advanced Tutorials - Lesson 3 - Styling Lists

CSS Advanced Tutorials - Lesson 6 - Layout

What's Next?

In the next lesson we extract the information from the proposal that is relevant to the creation of a navigation bar.

Homepage Top