Join James Williamson for an in-depth discussion in this video Clearing floats, part of CSS: Styling Navigation.
Floating menu items can cause two big problems, first, their parent elements can collapse…and not contain the floated items inside, and second, floated items can disrupt the…layout of elements that come after them in the source order.…Now both of those issues can be handled by properly clearing the floats.…So we are going to experiment a little bit with that in this exercise, and I have opened…up the horizontal.htm from 04_03 directory.…And there have been a couple of changes to this, so I want to scroll down into the code…and show you what I am talking about.…
I've added a nav selector, that's giving the navigation element the background of red,…and then I took off the existing float from the ul, li, and I have also removed that one…selector that was targeting the link.…Just because I want to start fresh and show you guys really what goes on when you start…floating some of these menu items.…Now, if we preview this page, currently in the browser we are back to displaying vertically…instead of horizontally, but you can see the red background of the parent nav element.…
- 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.