XHTML/CSS Basics

Starting out, a barebones HTML page

So we all need a glass to put our beer in right? Well images, video and text need a vessel as well. In comes your basic HTML code, the stuff you need before you get all fancy pants and start adding images and other elements.

Resources

Definitions

  • HTML: Hypertext Markup Language
    HTML defines the structure and layout of a Web document by using a variety of tags and attributes.
  • XHTML: Extensible Hypertext Markup Language
    XHTML documents are hypertext documents and XML documents, more accessible and easier to learn than straight HTML documents.

BARE MINIMUM XHTML PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>
	<title></title>
  </head>

      <body>
      </body>

</html>

Breaking it down

DOCTYPE TAG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE> This tells the browser what’s your up to, the exact type of xhtml/html you’ll be writing on this page and your language (EN). It’s important to have this line at the top of your page so browsers don’t get confused. The variations of this are not worth freaking out about, just use it.

HTML TAG

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<html> is the opening tag that starts everything off and tells the browser that stuff between that and the </html> closing tag is an HTML document.

HEAD TAG

<head></head>

The <head> tag is pretty straight forward. It contains the <title> of the web page as well as load any other dependent files like a CSS or jQuery file.

TITLE TAG

<title></title>

The <title> does exactly what it sounds like, displays the title of the web page at the top of the browser window.

BODY TAG

<body></body>

It's between the <body></body> tags that things get juicy. This is where all the content out uses see get's displayed.

The <img> Tag

The “img” tag is used to display images in a web browser. It has several atributes that can be not only necessary but useful.
Paste these code snippets into your own HTML page, get it to work and then start changing some of the values.

Resources

STEP ONE | The Basic img Tag

Not much here, but try it out.

Give it a try:

<img src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg"/>

STEP TWO | The alt or Alternative Atribute

It is a mandatory atribute that shows an alternate description of the image if it can’t load.

Give it a try:

<img src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg" alt="Rio and Amelie Harper" />

STEP THREE | The title Atribute

Offers extra information about an element and is displayed when a you hover over it.

Let’s give it a try:

<img title="These are my kids, Rio and Amelie Harper" src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg" alt="" />

STEP FOUR | The id attribute

Identifier for the element that is unique throughout the document, CSS styles (and other tools) can then be applied to a specific element.

Let’s give it a try:
Place this line in the body of your HTML page.

<img id="kids" src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg" alt="This is  Rio an Amelie Harper" />

Now let’s add the following CSS inbetween the head tags to style the specific image:

<style type="text/css">
	#kids {border-style:solid;border-width:10px; height:225px; width:300px:};
</style>

STEP FIVE | The width and height attribute

The Width and Height attributes ensure the browser renders your image at the proper size. It is always best practices to set his attribute.

Let’s give it a try:

<img src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg" alt="" width="300" height="225" />

STEP SIX | Set an Image as a Page Background

You can place an image as the background of a div item or an entire page. Here we will use CSS to place an image as the background for our body tag with will cover our entire page.

Let’s give it a try:
Place this in-between your head tags.

<style type="text/css">
body { background: white url(http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-1202x902.jpg) no-repeat top right;}
</style>

STEP SEVEN | Make Your Image a Link

You can use an image as a link to another web page or image.

Let’s give it a try:

<a href="http://rioharper.com"<img id="kids" src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg" alt="This is  Rio an Amelie Harper" /></a>

Now try it with a new attribute, target=”_blank”

<a href="http://rioharper.com target="_blank"><img id="kids" src="http://blog-2010.newhousemilitary.org/wp-content/uploads/examples/image-example-300x225.jpg" alt="This is  Rio an Amelie Harper" /></a>

The <div> Tag | Making it Your Own with CSS

A <div> or division does exactly as you might think, it breaks content into groups. This is a block-line element (it causes a line break in the page). You can place <div> tags inside of <div> tags even. You can add a unique name like an <id=”id_name”> or <class=”class_name_here> to style multiple elements. Copy and paste these examples and see the differences.

STEP ONE | A lone <div> tag

It’s not much but let’s start here.

Let’s give a single element a try:


<div>
	<p>This is a div tag, yo, what's up?</p>
</div>

STEP TWO | Two <div> tags, they just can’t get along

Now let’s try and place two next to each other.

<div>
	<p>This is a div tag, yo, what's up?</p>
</div>
<div>
	<p>I'm a div tag too, get out of my way chump</p>
</div>

STEP THREE | Control your <div> tags man!

Using CSS in-between in the <head></head> tags we’ll manipulating these <div> tags.

<div id="firstDiv">
	<p>Hello, I'm number one div, yeah!</p>
</div>

And now place this in-between the <head></head> tags.

<style type="text/css">
	#firstDiv { background-color:#000;}
</style>

What you think? Try changing the color.

<style type="text/css">
	#firstDiv { background-color:#666;}
</style>

STEP FOUR | It’s not fat, it’s padding. Padding to your <div> tags

The padding property adds space inside the div tag. Keep the last div tag in the body of your html and we’ll leave in the color to see the result. Notice the alphabetical order or the selectors.

<style type="text/css">
	#firstDiv {
		background-color:#666;
		padding:20px;
	}
</style>

STEP FIVE | Bigger is better. Add Font size Property

Let’s use CSS to add another property, font-size.


<style type="text/css">
	#firstDiv {
		background-color:#666;
		font-size: 24px;
		padding:20px;
	}
</style>

STEP SIX | I Need to See Other People. Using external style sheets.

External style sheets enable you to change the appearance and layout of all the pages, not just the one the CSS code is in.

a. Open a blank page in your editor and cut and paste the meat of your CSS into it, just our #firstDiv chunk.


#firstDiv {
	background-color:#666;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 24px;
	padding:20px;
 }

b. Save your funky fresh new page in the same folder as your HTML page is in, save it as style.css

c. Delete the now empty <stye></stye> tags.


<style type="text/css">

</style>

d. Now let’s add this in-between our <head></head> tags to suck in our external css style sheet.

<link rel="stylesheet" type="text/css" href="style.css" />

STEP SEVEN | Move that box

Now that can talk to the div, we can define properties such as it’s width, height and placement on the page. We can use the Box Model we discussed to define the margins, border and padding of the div by adding attributes within the style. While we’re at it, let’s add a style for another tag, the body.

First we’ll talk to another tag, the body, by adding this style to our style sheet.

body {
	background-color:#000066;
	margin:0 0 0 0;
}

We were able to set the margins of the page in clockwise order: top; right; bottom; left. In this case we set them all back to zero.

Next we start to work with the box by adding a margin attribute to our style.

We can work with just the top, bottom, left or right by setting it like this:

#firstDiv {
	background-color:#666;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 24px;
	padding:20px;
	margin-top:40px;
	margin-right:10px;
	margin-bottom:10px;
	margin-left:60px;
}

Or to save space, we could follow the body example speak to all sides in one line:

#firstDiv {
	background-color:#666;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 24px;
	padding:20px;
	margin: 40px 10px 10px 60px;
}

STEP EIGHT | Adding width and height to the box

We can set the dimensions of the box so that it is exactly as wide as we want it to be. We can set it to be exact dimensions of pixels, or we can set it to be in percentages of the page. We’ll use pixels for our example and add this attribute to our div style:

#firstDiv {
	width: 200px;
	height: 400px;
	background-color:#666;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 24px;
	padding:20px;
	margin: 40px 10px 10px 60px;
}

Most of the time in coding our pages we’ll know the exact width we’d like, but not necessarily the height because that will be determined by the amount of text and other content inside. In those instances we can set the height to auto which is the default for width and height and just tells the box to be the size of the content inside it. Let’s adjust ours by changing the height to auto.

#firstDiv {
	width: 200px;
	height: auto;
	background-color:#666;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 24px;
	padding:20px;
	margin: 40px 10px 10px 60px;
}

STEP NINE | WHAT CAN GO INSIDE A DIV

Up to this point we’ve just included some basic text in our div, but we can include type, images via the img tag, links (a tag) or any other element that would go on our pages. You can even nest other divs filled with information within a div.

Let’s start with an image, which is unique because it can be place as content in the HTML page, or it can be place in the div as a background element. Let’s start with it on the page. We’re going to need an image and you can click on this link to download the image we’ll use in the exercise:

Image to use (hold control key and click to save to your images folder.
Click Here

Next let’s work on adding in the code to place the image within the html page. Start a new page and title it Div-Images. Now in the body let’s add a div and inside it place the image.

<div id="imagetest">
	<img src="images/iron-maiden-seventh-son-of-a-seventh-son.jpg" width="500" height="500"  alt="Div Testing Image of Eddy" />
</div>

Now let’s make our style sheet and add in some code to make our div move.

body {
	background-color:#000066;
	margin:0 0 0 0;
}

#imagetest {
	width:500px;
	height:500px;
	margin-top:200px;
	margin-left:400px;
}

And remember to attach the style sheet by adding the link in the head of our HTML page.

<link rel="stylesheet" type="text/css" href="style.css" />

Now let’s change things up a bit. First delete the image from the HTML page so it looks like this:

<div id="imagetest"></div>

Next we can update our imagetext div in the style sheet so that it references the image:

#imagetest {
	background-image:url(images/iron-maiden-seventh-son-of-a-seventh-son.jpg);
	width:500px;
	height:500px;
	margin-top:200px;
	margin-left:400px;
}

Next let’s try to add a new div to our HTML page with links this time

<div id="imagetest"></div>
<div id="linktest">
	<h2>Navigation</h2>
	<a href="http://www.google.com"  target="_blank">Link to Google</a><br />
	<a href="http://www.cnn.com"  target="_blank">Link to CNN</a><br />
	<a href="http://www.nytimes.com"  target="_blank">Link to New York Times</a><br />
</div>

Next add this to our CSS

#linktest {
	width:300px;
	height:auto;
	margin-top:50px;
	margin-left:400px;
	background-color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	padding:0px 10px 10px 10px;
}

#linktest a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
}

#linktest a:hover {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
	font-weight:bold;
	text-decoration:underline;
}

STEP TEN | Wrapping up the page

On most sites we see the content centered on the page. Now that you know something about positioning a div, we can use the margin attribute to move the whole box to the center of the body.

First we need to create a wrapper div that goes around our current div. You can add this code to your html page.

<div id="wrapper">
 	<div id="firstDiv">
 		<p>This is a div tag, yo, what's up?</p>
	</div>
</div>

Now we add this style to the stylesheet:

body {
	background-color:#000066;
	margin:0 0 0 0;
}

#wrapper {
	margin: 0px auto;
	padding: 0px;
	width:960px;
}

To help us see this better, let’s add in a background color to the wrapper.

#wrapper {
	margin: 0px auto;
	padding: 0px;
	width:960px;
	background-color:#FFFFFF;
}

What you’re seeing is a gap between to top of the body and the content. This would be odd on a web site and we can work around it. It’s happening because of the paragraph tag and the default margin space it has. We’ll get to the fix when we talk about setting up a two-column site below.

Floating Divs | Using CSS to Break the Stacking Order

We’ve seen how <div> tags stack on top of one another when we place multiple divs on a page. We need to work around that though if we want to create a web site with multiple columns of if we want to situate <div> tags next to one another or to have text wrap around an image or content within a <div>.

Resources

STEP ONE | MAKE SOME BOXES

First we need to make some boxes and put them on a page. What you’ll see here is that they stack because of the normal stacking order of <div> tags. Start a new HTML page and a new CSS page. We’re using a class here for the div because we have more than one.

This goes in the HTML:

<div id="wrapper">
	<div class="square"></div>
	<div class="square"></div>
	<div class="square"></div>
</div>

This goes in the CSS:

body {
	background-color:#f2f2f2;
	margin:0 0;
}

#wrapper {
	width:800px;
	margin:0 auto;
}

.square {
	width:200px;
	height:200px;
	background-color:#006;
	margin:10px 10px 10px 10px;
}

Now attach the style sheet:

<link href="styles_floats.css" rel="stylesheet" type="text/css" media="screen" />

STEP 2 | LET’S MAKE THEM FLOAT

So instead of them stacking we can have the <div> tags line up in order on the left or right by setting a float into the style.

.square {
	width:200px;
	height:200px;
	background-color:#006;
	margin:10px 10px 10px 10px;
	float:left;
}

Test that, now try changing the float to be set to the right.

STEP 3 | PLAYING BOTH SIDES AT ONCE: 2-COLUMN SITES

Now that we have floated to the left and right, it would be nice if we could do both at the same time. If we can do that, then we can begin to create the structure of a multiple column web site. Notice we’re back to IDs instead of CLASSES because we just have one of each element. Let’s try it:

Here’s the code for the HTML page:

<div id="wrapper">
	<div id="square"></div>
	<div id="square2"></div>
</div>

Now for the CSS update:

#square {
	width:500px;
	height:200px;
	background-color:#006;
	margin:10px 10px 10px 10px;
	float:left;
}

#square2 {
	width:250px;
	height:200px;
	background-color:#C03;
	margin:10px 10px 10px 10px;
	float:right;
}

STEP 4 | TIME TO CLEAR THE FLOAT

So if we’re building a site, what happens when we want to add in another <div> below this <div>? For instance, a footer, which would go under the main content of the web site. Let’s see what happens without any other assistance.

This goes in the HTML:

<div id="wrapper">
	<div id="square"></div>
	<div id="square2"></div>

	<div id="footer"></div>
</div>

Update the CSS with this code:

#square {
	width:500px;
	height:200px;
	background-color:#006;
	margin:10px 10px 10px 10px;
	float:left;
}

#square2 {
	width:250px;
	height:200px;
	background-color:#C03;
	margin:10px 10px 10px 10px;
	float:right;
}

#footer {
	width:800px;
	height:60px;
	background-color:#FF9900;
	margin:0px auto;
}

What you’re seeing is that the item that isn’t floating, the footer, since no float is specified, it returns to the normal order. The problem is that by adding the floats, it actually pulled those elements out of the normal stacking order.

So we have to find a way to clear that out and start over and CSS gives us that ability by adding in a <div> with an attribute of clear telling both sides to start over. Here’s what it looks like:

Add this to the HTML:

<div id="wrapper">
	<div id="square"></div>
	<div id="square2"></div>
	<div style="clear: both;"></div>

	<div id="footer"></div>
</div>

Text Styling Using CSS

Styling the way the text in a page looks is at the root of CSS history. To make a page work with our design we need to be able to have the text look the way we want it to within each section. We also need to be able to define our hierarchy. There are many options to text styling that we’ll explore in this example. We’ll look at changing the typeface, size, weight, color, line-height and look at the styling of links in their static, hover and visited states.

Resources:

STEP ONE | SETTING UP OUR MINI SITE

Were going to set up some divs to place our content. We’ll make a header, left and right column and footer using the work from our previous example. First, start an HTML page and save it to a new folder. Title it Text Styling – Exercise and save the page as index.html. Now make a CSS page and save it as styles.css. Then link up the two pages using the link tag that we’ve used in the past. You can also use Dreamweaver and go to TEXT at the top of the page, the CSS Styles, then Attach CSS Style Sheet.

Here’s the code for the HTML page:

<div id="wrapper">
    <div id="page">
        <div id="headersection"></div>

        <div id="maincolumn"></div>

        <div id="sidebar"></div>
        <div style="clear:both;">

        <div id="foootersection"></div>
    </div>
</div>

Here’s the text for the CSS page:

body {
	background-color:#f2f2f2;
	margin:0 0;
}

#wrapper {
	width:960px;
	height:auto;
	margin:0px auto;
	background-color:#FFFFFF;
}

#page {
	width:960px;
	margin:0px auto;
	background-color:#FFFFFF;
}

#headersection {
	width:960px;
	margin:0px 0px 10px 0px;
	padding:10px 0px 10px 0px;
	background-color:#333333;
}

#maincolumn {
	width:600px;
	height:auto;
	background-color:#E3E3E3;
	margin:20px 0px 40px 15px;
	padding:10px 20px 20px 20px;
	float:left;
}

#sidebar {
	width:220px;
	height:auto;
	background-color:#CBCBCB;
	margin:20px 20px 40px 15px;
	padding:10px 20px 20px 20px;
	float:right;
}

#foootersection {
	width:960px;
	margin:0px 0px 10px 0px;
	padding:10px 0px 10px 0px;
	background-color:#333333;
	text-align:center;
}

STEP 2 | LET”S ADD SOME TEXT

We need text in order to begin to style so add the text to the HTML page from the example below. We’re going to add in text that has an h1, h2, and text that is in a paragraph tag. We’ll also add in text using a unordered list for the navigation and links for the footer and text for the header.

<div id="wrapper">
    <div id="page">
        <div id="headersection">
        	Newhouse Military CSS Exercise
        </div>

        <div id="maincolumn">
        	<h1>Text Styling Using CSS</h1>

        	<h2>Working with classes to style our text</h2>

        	<p>We can work with the text and give a paragraph a text class, or we could also use a span tag like you see in the next paragraph below. The attributes we can work with include the typeface, text color, line-height, whether the text is underlined or bold, and the size of the text. we can set styles for the <a href="http://blog-2010.newhousemilitary.org" target="_blank">links that are within our text</a> or for links used as main, footer or sub-navigation.</p>

        	<p>In this paragraph we've got a few links and other text that and we're using a span this time to call a range of text and to set the style for the whole copy block. A span would be better for longer amounts of copy where you have many pargraphs.</p>

        	<p>This is because you don't have to set the class with every paragraph, which saves time and makes updating the text through a <a href="http://blog-2010.newhousemilitary.org/wp-admin" target="_blank">CMS much easier</a> for an every day user.</p>
        </div>

        <div id="sidebar">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="index.html">ABOUT</a></li>
                <li><a href="index.html">STORIES</a></li>
                <li><a href="index.html">RESOURCES</a></li>
                <li><a href="index.html">TEAM</a></li>
                <li><a href="index.html">CONTACT</a></li>
            </ul>
        </div>
        <div style="clear:both;">

        <div id="foootersection">
            <a href="index.html">HOME</a> |
            <a href="">ABOUT</a> |
            <a href="">STORIES</a> |
            <a href="">RESOURCES</a> |
            <a href="">TEAM</a> |
            <a href="">CONTACT</a>
        </div>
    </div>
</div>

STEP 3 | ADDRESSING TAGS DIRECTLY

We can speak to tags directly. We’ve done that already with the body tag in may of our examples and you’ve seen that to address a tag, all we have to do is to put that tag into our CSS page and add our attributes. This works like an ID, there should only be one of each.

So, let’s talk to our two headline tags directly. We can add this code to our CSS then reload our page to see what it looks like. Here’s what to add to the CSS. For efficiency purposes we recommend keeping all direct tag references at the top, then move to IDs and then to Classes.

Add this code to your CSS after the body reference:

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	color:#000033;
}

h2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000033;
}

And here’s a little trick to make the bullets in the unordered list disppear:

ul {
	list-style:none;
}

STEP 4 | TALKING TO PARAGRAPHS WITH CLASS

We can speak to the p tag directly, just like the h1 or h2, but most likely we’re going to have many different types of paragraphs in our page. So we need to talk to one type of paragraph. Since we might have more than one, we’ll make it a class so that it covers all our bases.

First we need to add the class to our first paragraph in the HTML file:

<p class="maintext1">

Next we need to add some text styles to the CSS. You’ll see that we have one for the text here:

.maintext1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	font-size:12px;
}

And now let’s talk to the links so they have their own look. We talk to the a tag by adding it after our class name and then we can also talk to the hover and visited states by adding in a:hover and a:visited.

.maintext1 a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#CC0000;
	font-size:12px;
	text-decoration:none;
}

.maintext1 a:visited {
	text-decoration:none;
}

.maintext1 a:hover {
	text-decoration:underline;
}

STEP 5 | USING THE SPAN TAG

Adding the class to every paragraph tag could get pretty old and it isn’t very efficient if you’re using a CMS so it would be better to have a way to speak to a range of text and let it talk to all the paragraphs in that range. That’s where the span tag comes in. You can set up a span that has a class and then have it cover over a range of paragraphs or other text. Let’s add that around our second and third paragraph. For illustration purposes we’ll add a new class and then add that to our CSS style sheet as a class for the text and for the links.

Add this to the HTML page by replacing the second and third paragraphs:

<span class="maintext2">
	<p>In this paragraph we've got a few links and other text that and we're using a span this time to call a range of text and to set the style for the whole copy block. A span would be better for longer amounts of copy where you have many pargraphs.</p>

	<p>This is because you don't have to set the class with every paragraph, which saves time and makes updating the text through a<a href="http://blog-2010.newhousemilitary.org/wp-admin" target="_blank">CMS much easier</a> for an every day user.</p>
</span>

Add this to the CSS page

.maintext2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000066;
	font-size:12px;
	line-height:1.5;
}

.maintext2 a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0099FF;
	font-size:12px;
	text-decoration:none;
	line-height:1.5;
}

.maintext2 a:visited {
	text-decoration:none;
}

.maintext2 a:hover {
	text-decoration:underline;
}

STEP 6 | STYLING THE REST OF THE TEXT WITH SPAN

Now that we get the span tag, we can add it to some of our other text. We can style the header, style the navigation in the sidebar and style the footer. Let’s get to it.

Here’s the text for adding a span around the headline in the HTML page:

<span class="headertext">
	Newhouse Military CSS Exercise
</span>

Here’s the text for the span around our navigation:

<span class="navtext">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="index.html">ABOUT</a></li>
        <li><a href="index.html">STORIES</a></li>
        <li><a href="index.html">RESOURCES</a></li>
        <li><a href="index.html">TEAM</a></li>
        <li><a href="index.html">CONTACT</a></li>
    </ul>
</span>

Here’s the text for the span around the footer:

<div id="foootersection">
    <span class="footertext">
        <a href="index.html">HOME</a> |
        <a href="">ABOUT</a> |
        <a href="">STORIES</a> |
        <a href="">RESOURCES</a> |
        <a href="">TEAM</a> |
        <a href="">CONTACT</a>
    </span>
</div>

Here is the text to add to our CSS:

.headertext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:30px;
	font-weight:bold;
	padding:10px 20px 10px 20px;
}

.navtext a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000066;
	font-size:12px;
	text-decoration:none;
}

.navtext a:visited {
	text-decoration:none;
}

.navtext a:hover {
	text-decoration:underline;
}

.footertext {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:10px;
	padding:10px 20px 10px 20px;
}

.footertext a {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:10px;
	font-weight:bold;
	padding:10px 20px 10px 20px;
}

.footertext a:visited {
	text-decoration:none;
}

.footertext a:hover {
	text-decoration:underline;
	color:#CCCCCC;
}

CSS Image Rollovers: How to Make it Work

We’ve now seen how we can use CSS to style the look of textual based links using the a tag and plain text. That’s great, however many site use images for the navigation because they want to have special type, or they want to have some kind of background or special element that text won’t allow.

So there’s a way around this and that is by using images as rollovers. If you’ve coded or used Dreamweaver, it will use Javascript to do this, but we don’t need to do that. We can just code it using CSS and then style the links using those states of Hover that we saw in the previous examples. (The a:hover style that we built to create the underlined type is what I’m talking about. We’ll need a few things first and that includes the imagery so you’ll have to login to the solarnh server and then we’ll get rolling. In your folder are the resources we’ll use for this exercise.

Resources:

STEP ONE | SETTING UP THE BASIS OF OUR PAGE

First we need some structure in our page and we need the supporting CSS. Create a new HTML page and a new CSS page. Title the page and save the HTML page as index.html and the CSS sheet as styles_global.css.

Here’s the code for the HTML page in the body:

<div id="wrapper">

	<div id="header">

        <div id="headerlogo">
            <a href="index.cfm" class="headerlogo"><span>Home</span></a>
        </div>

        <div id="tellafriend">
        	<a href="tellafriend.cfm" class="tellafriend"><img src="images/tellafriend_btn.jpg" width="119" height="24" alt="Navigation - Tell a Friend" border="0" /></a>
        </div>

        <div id="mailinglist">
        	<a href="mailinglist.cfm" class="mailinglist"><img src="images/mailinglist_btn.jpg" width="119" height="24" alt="Navigation - Tell a Friend" border="0" /></a>
        </div>

    </div>

</div>

Here’s the code for the CSS sheet:

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000066;
	background-color: #000066;
	background-image:url(images/3dmethod_bodybkg_full.jpg);
	background-position:center;
	background-attachment:fixed;
	background-repeat:repeat-y;
	margin: 0px;
	margin-top:0px;
}

#wrapper {
	margin: 0px auto;
	padding: 0px;
	width:1019px;
	height:2000px;
	background-color:#FFFFFF;
}

/*Header Whole*/
#header{
	width:1019px;
	height:271px;
	margin: 0 auto;
	padding:0px;
	background:#FFFFFF url(images/header_background.jpg) no-repeat;
}

/*Logo*/
#headerlogo{
	position:absolute;
	width:214px;
	height:168px;
	top:23px;
	margin-left:31px;
	background:#FFFFFF url(images/header_logo.jpg) no-repeat;
}

#headerlogo a {
	width:214px; height:168px; margin:0px; padding:0px; display: block;
}

#headerlogo a span{
	display:none;
}

/*Extra Nav Buttons*/
#tellafriend{
	position:absolute;
	width:119px;
	height:24px;
	top:52px;
	margin-left:727px;
}

#mailinglist{
	position:absolute;
	width:119px;
	height:24px;
	top:52px;
	margin-left:855px;
}

Remember to link the two pages together. Also, make sure that the pages are saved to the rollover_exercise folder that you downloaded from the server, or otherwise the images won’t link up.

STEP TWO | ADDING IN THE NAVIGATION LIST

For this step we’re going to add a div for our main navigation and in that div we’ll place an unordered list (ul) that has the correct number of list elements that we want to use.

Add this to the HTML page UNDER where the headerlogo div closes. Remember to tab in if the copying function breaks the nice structure that we’ve built.

<div id="main-nav">
	<ul>
		<li><a href="about.cfm" class="about"><span>About</span></a></li>
		<li><a href="purchase.cfm" class="purchase"><span>Purchase</span></a></li>
		<li><a href="contact.cfm" class="contact"><span>Contact</span></a></li>
		<li><a href="media.cfm" class="media"><span>View Demos</span></a></li>
		<li><a href="testimonials.cfm" class="testimonials"><span>Testimonials</span></a></li>
		<li><a href="aboutfred.cfm" class="fredkarpoff"><span>Fred Karpoff</span></a></li>
	</ul>
 </div>

We’ll need to add this code to the CSS sheet to see the list. It will break the page, but don’t worry, we’ll fix it:

#main-nav {
	margin:100px 0px 0px 300px;
}

STEP THREE | LOOKING AT THE IMAGE

Now we’re going to work with the image and the header.psd file that were in the design folder in the exercise files. In that header psd file you see how the navigation should be set up and where it should be placed. We can measure from the edge and to the bottom of where the guide go around the navigation to get our pixel margins for where to place the div.

You can also turn on and off the folder in the layers palette that says nav_on which will show you what the image rollover will look like for all of the buttons. You can see that we have the same links that we added to the span tags. We need the textual links so that the page is as accessible as possible for screen readers and for search engine optimization. It also protects us if the CSS sheet isn’t rendered properly.

What we’re going to do with the image is select the 640px x 52px area using the marquee selection tool. Next we’re going to turn the nav_on folder off so that the brackets aren’t visible in the design.

Next go to Layer and Flatten, which will flatten our file.

The final step is to copy the selection area, make a new file and then paste it into the file. We will need to make our file 640px x 104 so that we have enough room for the duplicate image that we’ll use as a rollover.

Now go back to the header.psd file and go back a step before it was flattened. Turn the nav_on folder ON and then repeat the flattening of the image under layer and Flatten. Copy the selection again and then paste that into our new file. Move the image using the move tool down to be directly below the image we pasted in the previous step.

Flatten this file and save if for web as 3dcss_nav.jpg and be sure it is in your images folder.

If you make a mistake, go to the css_nav.psd file and then just save the jpeg from that file which is already created for you.

STEP 4 | BLOCKING THE DISPLAY OF THE SPAN

We’re going to make the text that is in the span tag for the link disappear. To do this is very easy. You just have to add a style to the style sheet.

Here’s the code to add:

#main-nav ul li a span{
	display:none;
}

STEP 5 | MAKING THE NAV IMAGE APPEAR

Now we’re going to bring in the image that will work for our navigation. We’re going to place it on the page and move it right where we want it. We’ll get into absolute positioning in a future week’s lesson.

We’ll replace the main-nav style with this first:

#main-nav{
	position:absolute;
	width:640px;
	height:52px;
	top:117px;
	margin-left:336px;
	background:#FFFFFF url(images/3dcss_nav.jpg) no-repeat;
}

Then add this code for the ul tag and li element

#main-nav ul{
	border: 0;
	margin: 0;
	padding: 0;
	float: left;
	list-style-type: none;
	text-align: center;
	clear: left;
}

#main-nav ul li{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}

STEP 6 | GET THE ABOUT LINK WORKING

If we go into our navigation image that we created in STEP 3 we can start to define the distance between each button. I’ve set up guides in the css_nav.psd file so take a look at that file and you’ll see the guides. We can measure each one out so that we know how to tell the CSS how wide each link should be. We can also get the height measurement for where the rollover begins.

Here’s the styles that we need to add to get the about link working:

#main-nav ul li a.about{
	width:80px; height:52px; margin:0px; padding:0px; display: block;
}
#main-nav ul li a.about:hover{
	background: url(images/3dcss_nav.jpg) 0px 52px;
}

What does this do? How can we use this to get the rest of the buttons working?

STEP 7 | THE REST OF THE NAV

For you cheaters in the room you probably skipped the last questions in STEP 6 and went right here? Am I right?

In any event, you can finish the code in our example with the code below. You’ll see the width of each link changes as does the over state where we change the x coordinate of the image. The X & Y coordinate in any file can be spoken to using this method.

Here’s the final CSS styles:

#main-nav ul li a.purchase{
	width:102px; height:52px; margin:0px; padding:0px; display: block;
}
#main-nav ul li a.purchase:hover{
	background: url(images/3dcss_nav.jpg) -80px 52px;
}

#main-nav ul li a.contact{
	width:93px; height:52px; margin:0px; padding:0px; display: block;
}
#main-nav ul li a.contact:hover{
	background: url(images/3dcss_nav.jpg) -182px 52px;
}

#main-nav ul li a.media{
	width:118px; height:52px; margin:0px; padding:0px; display: block;
}
#main-nav ul li a.media:hover{
	background: url(images/3dcss_nav.jpg) -275px 52px;
}

#main-nav ul li a.testimonials{
	width:123px; height:52px; margin:0px; padding:0px; display: block;
}
#main-nav ul li a.testimonials:hover{
	background: url(images/3dcss_nav.jpg) -393px 52px;
}

#main-nav ul li a.fredkarpoff{
	width:124px; height:52px; margin:0px; padding:0px; display: block;
}
#main-nav ul li a.fredkarpoff:hover{
	background: url(images/3dcss_nav.jpg) -516px 52px;
}
No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Categories

  • Professors

    MMM

    Deb Pang Davis
    Newhouse 3, RM 236
    dpangdav@syr.edu
    315.443.8287

    Office Hours
    Mondays > 3:30-4:30 p.m.
    Tuesdays > 10-11 a.m. & 2:15-3:15 p.m.
    Thursdays > 10-11 a.m.

    MPJ

    Ken Harper
    Newhouse, RM 500
    kharpe01@syr.edu
    315.443.6131
    Office Hours
    W | TH 3:30–5:30

    Teaching Assistant

    Scott DuChene
    Photo lab. Rm 207/N1
    Office Hours
    Fri 10:30 - 12:30 and from 2:30 - 4:30

  • Course Server Info for Major Projects

    Place all Major Project assignments on the course server folder

    SolarNH

    • UN: GRA4472
    • PW: corner

  • Meta