Join James Williamson for an in-depth discussion in this video Controlling link sizing and spacing, part of CSS: Styling Navigation.
Now that we've displayed our links horizontally and tamed or floats, we can turn our attention…to more familiar tasks, such as defining the sizing and the spacing of our links.…To work on that, I have once again opened up the horizontal.htm, this time from the 04_04 file.…I've modified the styles. Once again, I removed the nav selector.…We're going to bring it back a little bit later on, but right now I just want to focus…on controlling the sizing and the spacing of the menu items themselves.…Now to do that, we're going to add another selector.…
So just blow the grouped unordered and list items selectors, I'm going to create a selector…that targets all of the links inside of the list items, so that's li a, and inside that…we're just going to set a couple of properties that are going to allow us a little bit greater…control over the overall sizing and spacing of our links.…The first thing we want to do--remember that link elements display as inline elements by default.…I'm just going to go ahead and change that display property to block.…
- 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?
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.