From the course: CSS Positioning Best Practices
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Laying out a main menu - CSS Tutorial
From the course: CSS Positioning Best Practices
Laying out a main menu
In this lesson, we are going to go ahead and set up this menu here. This is our main menu for the whole site. You see it has these lovely little rollovers and it's positioned over here on the header. So we'll go ahead and get started. In our text editor, we have where we left off in the last lesson and we have there beginning.html and beginning.css out of the 04-menu folder in our Exercise Files. So we'll start by doing our Save As. I'm just going to save this as header. html, and our CSS, we'll save as main.css. All right, the first thing we are going to do here is we are going to insert the HTML for our header. So there is the div for positioning our mainMenu and inside here we have an unordered list. Again, this is so that it looks nice for browsers that don't support the graphical or the CSS. There's four line items. So I'm going to go ahead and paste that into four places. So I use copy and paste a lot. This saves a lot of typing. Put in this home.html here and this one is going…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Exploring the finished web site2m 5s
-
Building a document header9m 40s
-
Placing a contact button6m 5s
-
Laying out a main menu11m 44s
-
Creating a layout template pt. 1: Main body area11m 44s
-
Creating a layout template pt. 2: Sidebar area6m 46s
-
Creating a layout template pt. 3: Footer content5m 19s
-
Building a main home page pt. 1: Main body content10m 57s
-
Building a main home page pt. 2: Sidebar content8m 21s
-
Creating a page with a menu, graphics, and formatted links15m 31s
-
Creating a page containing an ordered list9m 8s
-
Creating a page containing video9m 23s
-
-