Align Labels and Fields with CSS


show more Aligning labels and fields using CSS provides you with in-depth training on Web. Taught by Zoe Gillenwater as part of the Web Accessibility Principles show less
please wait ...

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 ...

Aligning labels and fields using CSS
Video duration: 9m 39s 6h 9m Appropriate for all

Viewers:

Aligning labels and fields using CSS provides you with in-depth training on Web. Taught by Zoe Gillenwater as part of the Web Accessibility Principles

Subject:
Web
Author:
please wait ...