Floats
Use Dreamweaver to edit the CSS file. You may not edit the HTML.
Part 1
Assigning multiple classes to an HTML element can be a powerful way of controlling formatting in a more flexible, modular way:
- At the beginning of the two paragraphs below, a
span
is wrapping an image and caption. Useimagecap
to make a caption style: make the text color a small, all-caps sans-serif in gray. Also remember to letter-space the text, since it's all-caps. - The span has one other class:
left
orright
: Write rules to float them left or right. Check your work and add padding on the appropriate sides of thespan
so that the image/caption are separated from the surrounding paragraph.
A Subheading
The Nashville sky line Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The Nashville sky lineQuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia sunt in culpa qui officia deserunt mollit anim id est laborum. In reprehenderit in voluptate velit esse cillum id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Part 2
- Write a rule that adds a the background color
#bbf6ff
toul#gallery
. Add 15px of padding toul#gallery
and float to the left. This is called floating the container and is almost always a good first step when you plan on floating the contents of an element. - The images and captions below are marked up as a simple unordered list: the most common way of marking up a gallery of thumbnails. First style the captions to be like the captions in Part 1.
- Use CSS to remove the bullets and float the list items (
li
) into a grid of thumbnails. - Most likely the different caption lengths will be messing up your grid. What CSS rules can you add to solve this?
The Nashville Skyline
The Nashville Skyline. But this caption is longer.
The Nashville Skyline
The Nashville Skyline
The Nashville Skyline. But this caption is longer.
The Nashville Skyline
The Nashville Skyline
The Nashville Skyline
Part 3
Woohoo, a form!
- The markup below is very common: a
form
tag containing multiple groups oflabel
s andinput
s, with those pairs wrapped indiv
s for convenience. Let's use floats to create a cleaner arrangement between the labels and their fields: - Target
#contact-form
and give it some padding and a light gray background color (#eaeaea) - Remember, the
div
tag is just a generic, block-level container. It doesn't always need an id or class to be useful. Target all thediv
s in#contact-form
and float them left. Optional: shout "Floating the container!" out loud. Add a 1px white bottom border and top- and bottom-padding to thesediv
s, too. - Now we'll attach the pair of tags inside the
div
s and use the "opposing floats" technique. First, target thelabel
s. Set them to be small, sans-serif, and bold. Give them a width and float them left.; - Everything probably looks crazy: we still need to do the second half of "opposing floats." Target all the
input
tags in the#contact-form
, give them a width, and float them right. Now tinker with the widths until your form looks good. Hint: since your essentially creating two columns each set of floats, make sure the widths add up to 620px or less. - In the same rule, refine your input styles: turn off borders and add padding. Also set the font to a light gray color.
- The last div in the form pairs a
label
with atextarea
instead of aninput
: go back up to your selector, add a comma, and get the rule to apply to this pair as well. - Since your default style is now gray, lets add a rule specifically for the form the user is typing into: Use the
:focus
pseudo-class to set the color to black. - Lets say we want to provide the user with a cue about which fields are required, as they're inputting they're text. Use the
.required
class in conjunction with:focus
to add a blue border around those particular fields. - Finally, add some margin to the submit button to left-align it with the input fields.
- Bonus: go back to your rule for the
label
s and addtext-align:right;
. Does this improve or detract from legibility/usability?