WDI Fundamentals Unit 5
This is the final part of our ELK Design exercise! Here, we'll become more familiar with positioning elements and images using floats. Remember, floats pull whatever element they're applied to out of the normal document flow. They're your secret weapon for positioning HTML elements on a page!
If you don't see the JS Bin below, please refresh the page.
Here's the editor you should use to write your code:
1) Set your
div's font-size to 1.2em, and tell it to only stretch across 50% of the screen's width.
2) Note that the
divs both have classes applied:
services. Set both
divs to display as inline-block elements.
3) Create CSS rules (selectors) for
.about a float of left.
.services a float of right.
At this point, you'll notice a few problems with our page:
6) Let's start with the quickest fix. Give the footer a
clear value of
both. Now the footer is in the right place.
7) To fix the columns, first note that
.about take up 50% of the page width each. You have to borrow from the page's width to add a 2% padding on all four sides, so that each
div keeps a total width of 50%. So, go ahead and add a
width of 46% and
padding of 2%.
8) Now, let's box up and position the four listed services in the right-hand column.
lirule, and give it a float of left.
li an outline value of 3px solid #222222.
10) Set its
text-align to center and
line-height to 6em.
Well done! The basics of the multi-column layout are all laid out. All that's left to finish are some visual elements, including color.
img a width of 480px.
12) Flip to your HTML, and wrap a new
div with the class "hero" around the main image.
img might freak out, but don't worry. It's because the "hero"
div is grabbing the default
div style written for your columns.
13) Let's prevent that from happening. You need to counteract the styles set in the
div selector by setting new styles for "hero." Set the "hero" class' width to 100%, its display to block, and its margin to 0.
14) In your HTML, wrap a section around both
divs; open it after the
</header> closing tag, and close it before the opening
15) Create a CSS style for the section. Set its background to #222222 and make its color white. Set the section's overflow to auto.
16) Set the
h2 color to pale yellow: #fffebb. Set
border-bottom to #fffebb as well.
17). Set the
li color to black and its background to white.
Bravo! Well done.