Join James Williamson for an in-depth discussion in this video Displaying links horizontally, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
In this exercise, we are going to focus on displaying our links horizontally.…Now since there are multiple ways to build a horizontal menu, I am going to demo a couple…of techniques that allow us to do that, talk about some of the issues surrounding them,…and then discuss what my preferred technique is.…To do that, I'm working on the horizontal.htm file, this time from the 04_02 directory,…but we're just sort of picking up right where we left off.…Again, first order of business is to get those links displaying horizontally rather than…vertically, which is the default.…
Now the key to this is the list item element itself, list items by default are displayed…in browsers as block-level elements.…Now what that means is that these elements are stacked one on top of another which is…why they're displayed vertically.…In order to get them to display horizontally we need to sort of change that someway.…So the first technique I am going to show you guys is to change the display property.…So just below the existing selector here I am just going to do a selector that targets…
- Organizing menus with lists
- Creating block-level links
- Styling links, link states, and image links
- Defining link dimensions
- Controlling link spacing in a menu
- Creating rollovers
- Clearing floats
- Indicating current pages
- Controlling cursor states
- Building dropdown menus
- Creating CSS-only buttons
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.