Aligning labels and fields using CSS

>> In the previous movie we began cleaning up the form's appearance in CSS, but there are still some improvements…that we can make to the alignment of the labels and their fields.…Remember that we floated the items in the mainNAV bar to get them to line up nicely side by side.…We'll use a similar technique here.…We'll float the label elements so that they'll align better with their matching fields.…If you're following along with the exercise files, the page we're working on is named departments.html and can be found…in the 08_06 folder of the chapter eight exercise files.…

In the CSS styles panel click the new CSS rule button at the bottom, choose tag for the selector type.…In the Tag menu, scroll through the lists and select label.…Keep define in styles.css selected then click okay.…In the CSS rule definition dialogue box click on the block category.…Click on the arrow of the Text Align and select right.…Next click on the box category.…

We want the width of each of the labels to be consistent so that their text fields will cleanly line up on their left side,…

Resume Transcript Auto-Scroll

Author

Released

10/16/2007

Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.