Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson we are going to create this main menu here at the top of the page. These are the menu links for navigating the site. You will notice that when I click on one, it changes and it becomes this other image that's grayed out, and the mouse changes, and it's no longer has the pointer that will indicate that it's a link, and so for each of these we have two images. We have the tall gray one and the short ocean colored one with the white lettering on it and so that's what we'll be creating in this lesson.
So here's our beginning XHTML file and our beginning CSS and we are going to go ahead and as we have been in all these lessons, we are going to save this as with a different name, so that we don't overwrite files in the exercise files. Save this one as heading.html and this one here, save it as main.css, because that's how it's referenced in the XHTML file. And now we'll go ahead here in the XHTML and we'll create the main menu table row.
And again, we'll have a div inside of that so that we can position it easily, and we'll go ahead and type in the menu images. The images that end in -current, that's the tall gray ones. Again, I'll end my image tag on the next line. Embed it up against the following one. The following one has an anchor tag around it because it's actually a link. This first one because it's the current page does not have a link. I'll end the anchor tag on the next line at the beginning of the image tag and I'm going to do some copy and paste here, so that we can do this more quickly.
So what I'm doing here is I'm selecting the image, and this is the way I work in my projects. I'm a big fan of efficiency or one could say I'm big fan of lazy, and so I'll do copy and paste, rather than typing everything out every time, and so I'm pressing Ctrl+C on the keyboard because I'm on a PC. If you are on a Mac, you would use Command+C for copy. So I'll go ahead and Ctrl+V to paste, and so I have copied and pasted that image and I just have to change the name of the image here, which is now gear.png.
It doesn't have the -current because it's not the current page. It has a link on it and the width will be different, it will be 73, and the height is 25 for the ones that aren't current. The height is 30 for the ones that are, and there we have that, and I'll close the anchor tag at the end of that and begin the next one and I'll change the Alt tag as well, to say gear. Now I'm going to copy and paste just all of this and so my text editor is trying to help me by selecting more than I want it to, so I had to do it again there, and so I'll just copy and paste, and paste, because there's three of those and so let's see here the next one is lifestyle and its width is 100, height is the same, and the alt is lifestyle, and link for that is also lifestyle, and then the following one is for videos.
I am going to make sure you get all the occurrences. That's the down side of the copy and paste. It's easier for getting parts of it and end up with something that's say gear on the videos page, and there we have it. So that is our link and if we look at this in the browser and there is heading.html and we'll go over here and you will see that it looks like that and of course, that will get better as we style it.
So let's go ahead and style it now. Move down here to the bottom of our Style Sheet. I'm going to enter a section called main menu and we used an id tag called main menu so td#mainMenu. And again, the height is 55 pixels and this one, we are going to change the vertical align to bottom. This is the only place where we use that in the entire document and that's why we have our default is for top.
For this one we are going to have it be bottom and this will select our div. Height is 30 pixels, which is the tallest of our images. Margin left of 300 pixels and padding of zero and then finally the images themselves. Now this will select all of the images in the main menu context, which there are four, and this will give them a zero top and bottom margin, while giving them five pixels to the right and the left, and that's what spaces them apart and you will see there's ten pixels in between them because there's five pixels of each side, and border none.
That will get rid of this border around the ones that are anchors. I'll go ahead and save that and then load it up in the browser, and there we have it. That's our menu. So how this works, it's really very simple. We have images with links around them, which we know all about from the lessons on images and links, and we have styled it using the CSS to give it the spacing that we wanted to have, take off the border, and to line it up with the table cell, and so that gives us this lovely menu.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99094 Viewers
56 Video lessons · 112376 Viewers
71 Video lessons · 81203 Viewers
131 Video lessons · 39003 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.