Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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