Download styling-social-media

STYLING SOCIAL MEDIA NAVIGATION ICONS
Web 120 – Web Authoring II
© 2015 Raven Gildea
Social media icons are navigation, and should be marked up just like any other nav
on your web page: as an unordered list nested inside an HTML <nav> element.
This nav should be styled in much the same manner as the horizontal main nav we
created in our Styling Lists exercise.
1. Give the nav element a declared width (aligned to your grid if feasible) and, if
you want it on the right side of your header, float it right.
2. Use a descendent selector to remove the global list indent from the ul nested
inside the social nav:
#social ul {
margin-left: 0;
padding-left: 0;
}
3. Give the list items a declared width, float them left, and give them a marginright.
Note that if you float the list items right, they will display in reverse order: the first
item in the HTML will be the far right (last) item visible on the page. Float them left.
4. To get the icon imgs to display on the right side of the list item boxes (which may
be wider than the images they contain) give the list items a text-align: right;
declaration.
5. Give the last item in the list a class="last" in the HTML. Use this class to remove
the margin-right from this list item:
<li class="last">
.last {
margin-right: 0;
}
This will make the right edge of the last icon image align at the far right of the nav
element, which is right-floated and aligns with the far right of its container (usually
a sidebar or the header).
If you want space between the last social icon and the edge of the header, add side
padding to the header element.
Here’s a diagram:
1
STYLING SOCIAL MEDIA NAVIGATION ICONS
Web 120 – Web Authoring II
© 2015 Raven Gildea
6. Remember that these nav items, like all links, need visually distinct hover/focus
styles.
Good options include:
• Borders that change color on hover/focus
Change their color, don’t make them appear/disappear, as this will cause other text on
the page to jump/move when you hover on the icons!
• Swapping out the images for ones with reversed/different colors
See our JavaScript Image Rollover resource:
http://kaidez.com/tutorial-simple-effective-jquery-image-rollover/
• Drop shadows
http://www.css3.info/preview/box-shadow/
2