{"id":339,"date":"2012-09-07T02:25:08","date_gmt":"2012-09-07T02:25:08","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=339"},"modified":"2016-03-19T03:52:15","modified_gmt":"2016-03-19T03:52:15","slug":"05-styling-the-navigation","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/05-styling-the-navigation\/","title":{"rendered":"05 Styling the Navigation"},"content":{"rendered":"<style>\nul a {color: blue; background: none; padding: 0; margin 0; position: relative; left: 0px; border-bottom: none; text-decoration: underline} \nul a:hover {color: #222; border-bottom: none; text-decoration: underline;\na:active {color: #222; border-bottom: none; text-decoration: underline }\n<\/style>\n<p>Anchors make the Word Wide Web. These <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html#the-link-element\"  target=\"_blank\">hyperlinks<\/a> are the essence of the web, and styling them is no small matter.\n<\/p>\n<p>The anchor element <code>&lt;a ><\/code>contains the <code> href <\/code>attribute that specifies the hyper reference (address). It can also contain a target atribute, which can target the link so it opens in a new window: <code>target=\"_blank\"<\/code>. The link text comes next. This could just as well be a picture. The link element is closed with a <code>&lt;\/a><\/code>.\n<\/p>\n<p>The link element plays a central roll in information architecture and user experience design; everything depends on the navigation and what it looks like, and that\u2019s what we look at here.<\/p>\n<h2>Styling the &lt;a> Pseudo Classes<\/h2>\n<\/p>\n<p>Pseudo-classes affect the document as if \u2014 and this is what makes them pseudo \u2014 they add a class to the document. The document will display that whether or not a <code>a:link<\/code> has been <code>a:visited<\/code> or not, based on the browser history.\n<\/p>\n<p>The other three pseudo links indicate interactive feedback. The <code>a:hover<\/code> link applies while the user is over the element with the cursor, the <code>a:active<\/code> pseudo-class applies while an element is being clicked on by the user.\n<\/p>\n<p> Notice that <code>a:hover<\/code> and <code>a:active<\/code>have be placed after <code>a:link<\/code> and <code>a:visited<\/code> otherwise the cascade can hide their color property. To avoid that, make sure to write them in the order you see here, for it makes a difference.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#link a:link {color: red;}\r\n\t\/*unvisited link*\/\r\n#link a:visited {color: blue }\r\n\t\/*visited links*\/\r\n#link a:hover {color: yellow;}\r\n\t\/*user mouses over the link*\/\r\n#link a:focus {color: green;}\r\n\t\/*user accesses link through keyboard*\/\r\n#link a:active {color: lime;}\r\n\t\/*user clicks the link*\/}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"link\" style=\"margin: 20px auto 0; width: 400px; \">\n <a href=\"#key\" accesskey=\"a\">Click Me or press Control-Option-a<\/a> anywhere in the document.\n<\/div>\n<pre>\r\n&lt;a href=\"#key\" accesskey=\"a\">Click Me or press Control-Option-a&lt;\/a> anywhere in the document.\r\n\r\n<\/pre>\n<p><a id=\"key\">&nbsp;<\/a><\/p>\n<h2>Keyboard Focus<\/h2>\n<\/p>\n<p>The <code>a:focus<\/code> pseudo-class applies to an element that accepts a keyboard event. It is not widely used. There is no feedback in Safari, but Firefox and Opera show that you have pressed the key before executing the link. In Safari you hold down both control and option and the key, in Firefox, just the control button and the key, in Opera, you press shift escape and then select the key and in Internet Explorer, the alt key. In case you want to include keyboard access, you need to add the attribute and the key to the link element, like this: <code>accesskey=\"a\"<\/code>.<\/p>\n<h2>Using Lists for Navigation<\/h2>\n<\/p>\n<p>It was decided a long time ago that menus are really lists, and should be wrapped in a list to be semantically correct. The code for most of these demonstrations use the following code:<\/p>\n<pre>\r\n&lt;ul>\r\n&lt;li>&lt;a href=\"#\">Home&lt;\/a>&lt;\/li>\r\n&lt;li>&lt;a href=\"#\">Topic 1&lt;\/a>&lt;\/li>\r\n&lt;li>&lt;a href=\"#\">Topic 2&lt;\/a>&lt;\/li>\r\n&lt;li>&lt;a href=\"#\">Topic 3&lt;\/a>&lt;\/li>\r\n&lt;li>&lt;a href=\"#\">Topic 4&lt;\/a>&lt;\/li>\r\n&lt;\/ul>\r\n<\/pre>\n<\/p>\n<p>Which, when it has no CSS styling, takes the default look:<\/p>\n<style>\n.link-blue {color: #00f; text-decoration: underline; cursor: pointer;}\n<\/style>\n<ul>\n<li><span class=\"link-blue\">Home<\/span>\n<\/li>\n<li><span class=\"link-blue\">Topic 1<\/span>\n<\/li>\n<li><span class=\"link-blue\">Topic 2<\/span>\n<\/li>\n<li><span class=\"link-blue\">Topic 3<\/span>\n<\/li>\n<li><span class=\"link-blue\">Topic 4<\/span>\n<\/li>\n<\/ul>\n<p>The remaining sections will use CSS to style what are otherwise lists of menu choices.<br \/>\n<a id=\"10\">&nbsp;<\/a><a id=\"11\">&nbsp;<\/a><a id=\"12\">&nbsp;<\/a><a id=\"13\">&nbsp;<\/a><a id=\"14\">&nbsp;<\/a><\/p>\n<h2>Using Display: Block and Inline-Block<\/h2>\n<\/p>\n<p>The most obvious CSS changes to the menu are to give it a color (<code>color: white;<\/code>), to remove the underline (<code>text-decoration: none;<\/code>), to give it a background (<code>background: orange;<\/code>), a border (<code>border-left: 5px solid a00;<\/code>), padding  (<code>padding: 42px 0px;<\/code>), and margins (<code>margin: 5px 5px;<\/code>). You can use the pseudo classes to target the hover, active and visited states with different attributes, so that the user gets feedback when they go over, click or have visited that link.\n<\/p>\n<p>You can change the list item <code>li<\/code> that creates the menu to be either vertical or horizontal by changing its display from <code>display: block<\/code> which is the default and renders the list vertical to <code>display: inline-block;<\/code>. This creates a horizontal menu. <\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi ul {\r\nwidth: 470px; \r\npadding: 0 5px;\r\nlist-style: none;}\r\n#navi li {display: block;}\r\n\/*block inline-block (inline-block turns it horizontal)*\/\r\n#navi a:link {\r\ndisplay: block;\r\nwidth: 75px;\r\ncolor: #fff; \r\nbackground: orange; \r\npadding: 4px 0px;\r\nmargin: 5px 5px;\r\ntext-align: center;\r\nfont-weight: 700;\r\nborder-left: 5px solid #a00;\r\nborder-bottom: 1px solid black;\r\ntext-decoration: none;\r\n}\r\n#navi a:visited {color: blue }\r\n#navi a:hover {color: #000;\r\nbackground: #ff5;\r\nborder-left: 5px solid #f00;\r\n}\r\n#navi a:focus {color: green;}\r\n#navi a:active {color: lime;}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi\" style=\"margin: 20px auto 0; width: 500px; \">\n<ul>\n<li><a href=\"#10\">Home<\/a><\/li>\n<li><a href=\"#11\">Topic 1<\/a><\/li>\n<li><a href=\"#12\">Topic 2<\/a><\/li>\n<li><a href=\"#13\">Topic 3<\/a><\/li>\n<li><a href=\"#14\">Topic 4<\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<p><a id=\"20\">&nbsp;<\/a><a id=\"21\">&nbsp;<\/a><a id=\"22\">&nbsp;<\/a><a id=\"23\">&nbsp;<\/a><a id=\"24\">&nbsp;<\/a><\/p>\n<h2>Using Display: Table to Make Horizontal or Vertical Menus<\/h2>\n<\/p>\n<p>If the <code>&lt;ul><\/code> is displayed as a <code>table<\/code>, then the <code>&lt;li><\/code> can be displayed as a <code>table-cell<\/code>. That also creates a horizontal menu. Changing the display to <code>table-row<\/code> makes the menu vertical.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi-t ul {background: #ccc; \r\nlist-style: none;\r\ndisplay: table;}\r\n#navi-t li {display: table-cell;}\r\n\/*table-cell, table-row (table-row turns it vertical)*\/\r\n#navi-t a:link {\r\ndisplay: block;\r\nwidth: 75px;\r\ncolor: #fff; \r\nbackground: #fa5; \r\npadding: 4px 0px;\r\nmargin: 5px 5px;\r\ntext-align: center;\r\nfont-weight: 700;\r\nborder-left: 5px solid #a00;\r\nborder-bottom: 1px solid #000;\r\ntext-decoration: none;\r\n}\r\n#navi-t a:visited {color: blue }\r\n#navi-t a:hover {color: #000;\r\nbackground: #ff5;\r\nborder-left: 5px solid #f00;\r\n}\r\n#navi-t a:focus {color: green;}\r\n#navi-t a:active {color: lime;}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi-t\" style=\"margin: 20px auto 0; width: 500px; \">\n<ul>\n<li><a href=\"#20\">Home<\/a><\/li>\n<li><a href=\"#21\">Topic 1<\/a><\/li>\n<li><a href=\"#22\">Topic 2<\/a><\/li>\n<li><a href=\"#23\">Topic 3<\/a><\/li>\n<li><a href=\"#24\">Topic 4<\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<p><a id=\"30\">&nbsp;<\/a><a id=\"31\">&nbsp;<\/a><a id=\"32\">&nbsp;<\/a><a id=\"33\">&nbsp;<\/a><a id=\"34\">&nbsp;<\/a><\/p>\n<h2>Using Floats to Layout the List<\/h2>\n<\/p>\n<p>Floats can also be used to layout the list. Just float all of the <code>&lt;li><\/code>s left. You have to remember to <code>clear: left<\/code> the element that follows the list, but otherwise it works well. To make this horizontal, reduce the <code>width<\/code> of the <code>&lt;ul><\/code> to 100px. If you want two rows going down, change the <code>width<\/code> to 185px.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi-f ul {background: #ccc; \r\nwidth: 460px; \r\npadding: 0 5px;\r\nlist-style: none;\r\noverflow: auto;}\r\n#navi-f li {float: left}\r\n\/*change the ul width to 100px for vertical*\/\r\n#navi-f a:link {\r\ndisplay: block;\r\nwidth: 75px;\r\ncolor: #fff; \r\nbackground: #fa5; \r\npadding: 4px 0px;\r\nmargin: 5px 5px;\r\ntext-align: center;\r\nfont-weight: 700;\r\nborder-left: 5px solid #a00;\r\nborder-bottom: 1px solid #000;\r\ntext-decoration: none;\r\n}\r\n#navi-f a:visited {color: blue }\r\n#navi-f a:hover {color: #000;\r\nbackground: #ff5;\r\nborder-left: 5px solid #f00;\r\n}\r\n#navi-f a:focus {color: green;}\r\n#navi-f a:active {color: lime;}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi-f\" style=\"margin: 20px auto 0; width: 500px; \">\n<ul>\n<li><a href=\"#30\">Home<\/a><\/li>\n<li><a href=\"#31\">Topic 1<\/a><\/li>\n<li><a href=\"#32\">Topic 2<\/a><\/li>\n<li><a href=\"#33\">Topic 3<\/a><\/li>\n<li><a href=\"#34\">Topic 4<\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<h2 style=\"clear:left\">Image Rollovers<\/h2>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/lab.simurai.com\/css\/buttons\/buttons.css\"\/>\n<style>\n#button { float: right; margin: 0 0 20px 20px; }\n#button a:hover { \tpadding: 12px 14px 9px; margin: 9pt;}\n<\/style>\n<div id=\"button\" ><a style=\"\" href=\"http:\/\/lab.simurai.com\/css\/buttons\/\" class=\"button\">Button<\/a><\/div>\n<\/p>\n<p>Now buttons with the CS3 goodness have come a long way, but when the menu needs more pizzaz than even CSS3 can provide, you turn to pictures, so when you hover over a link, the picture changes. This is easily accomplished in CSS using a single image divided into three, where the first part is what you see as a link, the second part is what you see when you hover over, and the third part is what you see when you click the link. The picture looks like this:<a id=\"1\">&nbsp;<\/a><a id=\"2\">&nbsp;<\/a><a id=\"3\">&nbsp;<\/a><a id=\"4\">&nbsp;<\/a><\/p>\n<figure style=\"width: 303px; margin: 0 auto;\">\n<img decoding=\"async\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png\" alt=\"rollover folder icon\" \/><br \/>\n<\/figure>\n<p><a id=\"40\">&nbsp;<\/a><a id=\"41\">&nbsp;<\/a><a id=\"42\">&nbsp;<\/a><a id=\"43\">&nbsp;<\/a><br \/>\nThe picture is simple enough, with a folder in three colors. The strategy is to show only the first icon, and with each state, move the picture so that it shows a different icon. That way, its blue, red when rolled over and green when clicked. If you want to tell the audience that they have clicked the link before, you can add a forth icon. The HTML is an empty anchor tag <code>&lt;li>&lt;a href=\"0\">&lt;\/a>&lt;\/li><\/code>.<\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi-i ul {list-style: none;}\r\n#navi-i li {float: left; margin: 5px 5px;}\r\n\/*change the ul width to 100px for vertical*\/\r\n#navi-i a:link {\r\ndisplay: block;\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png') no-repeat 0 -8px;\r\nwidth: 96px;\r\nheight: 85px;}\r\n#navi-i a:hover {\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png') no-repeat -102px -8px;}\r\n#navi-i a:active {\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png') no-repeat -204px -8px;}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi-i\" style=\"margin: 20px auto 0; width: 500px; \">\n<ul>\n<li><a href=\"#40\" style=\"border: none;\" ><\/a><\/li>\n<li><a href=\"#41\" style=\"border: none;\" ><\/a><\/li>\n<li><a href=\"#42\" style=\"border: none;\" ><\/a><\/li>\n<li><a href=\"#43\" style=\"border: none;\" ><\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<p><a id=\"50\">&nbsp;<\/a><a id=\"51\">&nbsp;<\/a><a id=\"52\">&nbsp;<\/a><a id=\"53\">&nbsp;<\/a><\/p>\n<h2>Making the Links Accessible<\/h2>\n<\/p>\n<p> Because screen-readers cannot read anything from a picture, it&#8217;s necessary to put in a title. You get a popup after a second or so of hovering, with the title on it. <code>&lt;li>&lt;a  title=\"link to Home\" href=\"#\">&lt;\/a>&lt;\/li><\/code><\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi-a ul {list-style: none;}\r\n#navi-a li {float: left}\r\n\/*change the ul width to 100px for vertical*\/\r\n#navi-a a:link {\r\ndisplay: block;\r\nwidth: 96px;\r\nheight: 100px;\r\nbackground: url(http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png) no-repeat 0 0;\r\nmargin: 5px 5px;\r\n}\r\n#navi-a a:hover {\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png') no-repeat -102px 0px;}\r\n#navi-a a:active {\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/folder.png') no-repeat -204px 0px;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi-a\" style=\"margin: 20px auto 0; width: 500px; \">\n<ul>\n<li><a title=\"link to Home\" href=\"#50\" style=\"border: none;\" ><\/a><\/li>\n<li><a title=\"link to 1\" href=\"#51\" style=\"border: none;\" ><\/a><\/li>\n<li><a title=\"link to 2\" href=\"#52\" style=\"border: none;\" ><\/a><\/li>\n<li><a title=\"link to 3\" href=\"#53\" style=\"border: none;\" ><\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<h2 style=\"clear: left;\">Image Sprites<\/h2>\n<\/p>\n<p> To have three pictures on an image and to seamlessly move between them is called an image sprite. It works very well for one link, and it works even better when there are more links, as in the following example with three variations per link for four links on one image file. Each pseudo class calls up the same image but at a different position, using the <code>background-position: no-repeat 0 0<\/code> property to easily indicate where the pictures are on the image. The first number after no-repeat is the horizontal (x) offset, and the second is the vertical (y) offset. You can easily get this information from PhotoShop or Illustrator, but that still quite a chore.\n<\/p>\n<p>To make this process even easier is <a href=\"http:\/\/www.spritecow.com\/\">Sprite Cow<\/a>, which can take an image with lots of sprites on it, and easily provide you with the code containing the coordinates that makes this process a snap. Take the following image, load it into <a href=\"http:\/\/www.spritecow.com\/\">Sprite Cow<\/a>, click on each image and copy and paste the coordinates into your stylesheet. Once you get the idea, you&#8217;ll never go back.<\/p>\n<figure style=\"width: 500px; margin: 0 auto;\">\n<img decoding=\"async\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/sprite-example.png\" alt=\"rollover sprites for menu\" \/><br \/>\n<\/figure>\n<\/p>\n<p>Since it is necessary to target each link individually, every link gets its own id. <a id=\"60\">&nbsp;<\/a><a id=\"61\">&nbsp;<\/a><a id=\"62\">&nbsp;<\/a><a id=\"63\">&nbsp;<\/a><\/p>\n<div class=\"handson_demo\" >\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#navi-s ul {list-style: none;}\r\n#navi-s li {float: left; margin: 5px;}\r\n#navi-1 a:link {width: 102px; height: 102px; display: block;\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/sprite-example.png') no-repeat -24px -43px; }\r\n#navi-1 a:hover {background-position: -184px -43px; }\r\n#navi-1 a:active {background-position: -344px -43px; }\r\n#navi-2 a:link {width: 103px; height: 103px; display: block;\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/sprite-example.png') no-repeat -24px -181px; }\r\n#navi-2 a:hover {background-position: -184px -191px; }\r\n#navi-2 a:active {background-position: -344px -191px; }\r\n#navi-3 a:link {width: 103px; height: 95px; display: block;\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/sprite-example.png') no-repeat -24px -320px; }\r\n#navi-3 a:hover {background-position: -184px -329px; }\r\n#navi-3 a:active {background-position: -344px -329px; }\r\n#navi-4 a:link {width: 103px; height: 87px; display: block;\r\nbackground: url('http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/sprite-example.png') no-repeat -24px -459px; }\r\n#navi-4 a:hover {background-position: -184px -459px; }\r\n#navi-4 a:active {background-position: -344px -459px; }\r\n<\/style><\/pre>\n<\/div>\n<div id=\"navi-s\" style=\"margin: 20px auto 0; width: 100%; \">\n<ul>\n<li id=\"navi-1\"><a href=\"#60\" style=\"border: none;\"  ><\/a><\/li>\n<li id=\"navi-2\"><a href=\"#61\" style=\"border: none;\" ><\/a><\/li>\n<li id=\"navi-3\"><a href=\"#62\" style=\"border: none;\" ><\/a><\/li>\n<li id=\"navi-4\"><a href=\"#63\" style=\"border: none;\" ><\/a><\/li>\n<\/ul>\n<ul><\/ul>\n<\/div>\n<h2>Sprites Save Time<\/h2>\n<\/p>\n<p>Every time that the browser has to request an image from the server, it takes time, not only for the image to download, but for the server-request. In fact, the server request can take more time than the downloading of the image. The ability to gang up all of your web pictures into one image is for that reason, a real time saver and significantly speeds up the loading of a web page.\n<\/p>\n<p>As the process for doing so is exactly the same, using  <a href=\"http:\/\/www.spritecow.com\/\">Sprite Cow<\/a>, we do not need to go into a <a href=\"09-background-image-strategy\/\">sprite \/ background image demonstration<\/a>, as we have covered a lot of ground already, but be prepared to combine all of the smaller pictures into one large image like this for your final web site.<br \/>\n<br id=\"pseudo-classn\"\/><\/p>\n<h2 class=\"l-head\">Pseudo Classes: not<\/h2>\n<p><a href=\"#TofContents\"><\/a>\n<\/p>\n<p class=\"pat\">\n<p>A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover <code>li:not(:target):not(:hover) <\/code>.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#vce {\r\n\tdisplay: table;\r\n\twidth: 95%;\r\n}\r\n#vce > article,\r\n#vce > nav {\r\n\tdisplay: table-cell; \r\n\twidth: 200px;\r\n}\r\n#vce > article {\r\n\twidth: 100%;\r\n\tbackground: white;\r\n}\r\n#vce ul,\r\n#vce li {\r\n\tlist-style: none;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}\r\n#vce > nav > ul {\r\n\tbackground: #444;\r\n\tborder-radius: 0.5em;\r\n\tpadding: 0.075em;\r\n}\r\n#vce li {\r\n\tpadding: 0 0.5em;\r\n\tbackground: #ddd;\r\n\tcolor: black;\r\n\tborder-radius: 0.40em;\r\n\tborder: #444 solid 0.075em;\r\n}\r\n#vce li li {\r\n\tbackground: #444;\r\n\tcolor: white;\r\n\tmargin: 0 -0.5em;\r\n\tborder-radius: 0;\r\n}\r\n#vce li li:first-child {\r\n\tborder-radius: 0.375em 0.375em 0 0;\r\n}\r\n#vce a {\r\n\tbackground: transparent;\r\n\tcolor: inherit;\r\n}\r\n#vce > nav > ul > li:target,\r\n#vce > nav > ul > li:hover {\r\n\tbackground: #888;\r\n\tcolor: white;\r\n}\r\n#vce > nav > ul > li:not(:target):not(:hover) > ul {\r\n\theight: 0;\r\n\toverflow: hidden;\r\n}<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\" style=\"padding: 4px;\">\n<h3>Live Demo<\/h3>\n<div id=\"vce\">\n<nav>\n<ul>\n<li id=\"nav-about\"><a href=\"#nav-about\">Layout Modes<\/a>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#layoutModes\" target=\"_blank\">Layout Modes<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#block\" target=\"_blank\">Block Display<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#inline\" target=\"_blank\">Inline Display<\/a>\n\t\t\t        <\/li>\n<\/ul>\n<\/li>\n<li id=\"nav-projects\"><a href=\"#nav-projects\">Positioning<\/a>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#positioning\" target=\"_blank\">Normal<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#relative\" target=\"_blank\">Relative<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#absolute\" target=\"_blank\">Absolute<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#fixed\" target=\"_blank\">Fixed<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#floats\" target=\"_blank\">Floats<\/a>\n\t\t\t\t<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#tables\" target=\"_blank\">Tables<\/a>\n\t\t\t        <\/li>\n<\/ul>\n<\/li>\n<li id=\"nav-interact\"><a href=\"#nav-interact\">Other<\/a>\n<ul>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#display\" target=\"_blank\">Display<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#zindex\" target=\"_blank\">Z Index<\/a>\n\t\t\t          <\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#over-flow\" target=\"_blank\">Overflow<\/a>\n\t\t\t        <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/nav>\n<div>\n\t\t\t   Here you will find links to the <a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\" target=\"_blank\">layout modes<\/a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.\n\t\t\t  <\/div>\n<\/p><\/div>\n<\/div>\n<p>HTML<\/p>\n<pre style=\"font-size: 70%;\">\r\n  &lt;nav>\r\n    &lt;ul>\r\n      &lt;li id=\"nav-about\">&lt;a href=\"#nav-about\">Layout Modes&lt;\/a>\r\n        &lt;ul>\r\n          &lt;li>&lt;a href=\"#layoutModes\" target=\"_blank\">Layout Modes&lt;\/a>\r\n          &lt;li>&lt;a href=\"#block\" target=\"_blank\">Block Display&lt;\/a>\r\n          &lt;li>&lt;a href=\"#inline\" target=\"_blank\">Inline Display&lt;\/a>\r\n        &lt;\/ul>\r\n      &lt;li id=\"nav-projects\">&lt;a href=\"#nav-projects\">Positioning&lt;\/a>\r\n        &lt;ul>\r\n          &lt;li>&lt;a href=\"#positioning\" target=\"_blank\">Normal&lt;\/a>\r\n          &lt;li>&lt;a href=\"#relative\" target=\"_blank\">Relative&lt;\/a>\r\n          &lt;li>&lt;a href=\"#absolute\" target=\"_blank\">Absolute&lt;\/a>\r\n          &lt;li>&lt;a href=\"#fixed\" target=\"_blank\">Fixed&lt;\/a>\r\n          &lt;li>&lt;a href=\"#floats\" target=\"_blank\">Floats&lt;\/a> \r\n          &lt;li>&lt;a href=\"#tables\" target=\"_blank\">Tables&lt;\/a>\r\n        &lt;\/ul>\r\n      &lt;li id=\"nav-interact\">&lt;a href=\"#nav-interact\">Other&lt;\/a>\r\n        &lt;ul>\r\n          &lt;li>&lt;a href=\"#display\" target=\"_blank\">Display&lt;\/a>\r\n          &lt;li>&lt;a href=\"#zindex\" target=\"_blank\">Z Index&lt;\/a>\r\n          &lt;li>&lt;a href=\"#over-flow\" target=\"_blank\">Overflow&lt;\/a>\r\n        &lt;\/ul>\r\n    &lt;\/ul>\r\n  &lt;\/nav>\r\n  &lt;div>\r\n   Here you will find links to the &lt;a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\" target=\"_blank\">layout modes&lt;\/a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties. \r\n  &lt;\/div>\r\n&lt;\/div>\r\n<\/pre>\n<h2>Drop Down Menus<\/h2>\n<\/p>\n<p>While drop down menus are not really appropriate for small web sites of the kind that you will build here, I include a demonstration of a CSS only drop down menu just in case you do not feel complete if you do not have one, or better yet, build a really big site.<\/p>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#nav {\r\nmargin: 0;\r\npadding: 7px 6px 0;\r\nline-height: 100%;\r\nborder-radius: 2px;\r\nbackground: #8b8b8b; \r\nborder: solid 1px #6d6d6d;\r\n\/*width: 120px;*\/\r\n\/*changes the menu to a vertical menu*\/}\r\n#nav li {\r\nmargin: 0 5px;\r\npadding: 0 0 8px;\r\nfloat: left;\r\nposition: relative;\r\nlist-style: none;\r\n}\r\n\/* main level link *\/\r\n#nav a {\r\nfont-weight: bold;\r\ncolor: #e7e5e5;\r\ntext-decoration: none;\r\ndisplay: block;\r\npadding: 8px 20px;\r\nmargin: 0;\r\ntext-shadow: 0 1px 1px rgba(0, 0, 0, .3);\r\n}\r\n\/* main level hover *\/\r\n#nav .current a, #nav li:hover > a {\r\nbackground: #d1d1d1;\r\ncolor: #444;\r\nborder-top: solid 1px #f8f8f8;\r\nbox-shadow: 0 1px 1px rgba(0, 0, 0, .2);\r\ntext-shadow: 0 1px 0 rgba(255, 255, 255, .8);\r\npadding: 8px 20px;\r\nmargin: 0;\r\n}\r\n\/* sub levels hover *\/\r\n#nav ul li:hover a, #nav li:hover li a {\r\nbackground: #aaa\r\nborder: none;\r\ncolor: #444;\r\npadding: 8px 20px;\r\nmargin: 0;\r\n}\r\n#nav ul a:hover {\r\nbackground: #0399d4\r\ncolor: #fff !important;\r\ntext-shadow: 0 1px 1px rgba(0, 0, 0, .1);\r\npadding: 8px 20px;\r\nmargin: 0;\r\n}\r\n\/* level 2 list, menus stay hidden till hover changes display*\/\r\n#nav ul {\r\nbackground: #ddd;\r\ndisplay: none;\r\nmargin: 0;\r\npadding: 0;\r\nwidth: 185px;\r\nposition: absolute;\r\ntop: 35px;\r\nleft: 0;\r\nborder: solid 1px #b4b4b4;\r\nborder-radius: 2px;\r\nbox-shadow: 0 1px 3px rgba(0, 0, 0, .3);\r\n}\r\n\/* dropdown activates the sub-menus to display*\/\r\n#nav li:hover > ul {\r\ndisplay: block;\r\npadding: 8px 20px;\r\nmargin: 0;\r\n}\r\n#nav ul li {\r\nfloat: none;\r\nmargin: 0;\r\npadding: 0;\r\n}\r\n#nav ul a {\r\nfont-weight: normal;\r\ntext-shadow: 0 1px 1px rgba(255, 255, 255, .9);\r\n}\r\n\/* level 3+ list *\/\r\n#nav ul ul {\r\nleft: 181px;\r\ntop: -3px;\r\n}\r\n\/* rounded corners for first and last child *\/\r\n#nav ul li:first-child > a {\r\nborder-top-left-radius: 2px;\r\nborder-radius-topright: 2px;\r\n}\r\n#nav ul li:last-child > a {\r\nborder-top-left-radius: 2px;\r\nborder-radius-topright: 2px;\r\n}\r\n\/* clearfix *\/\r\n#nav:after {\r\ncontent: \".\"\";\r\ndisplay: block;\r\nclear: both;\r\nvisibility: hidden;\r\nline-height: 0;\r\nheight: 0;\r\n}\r\n#nav {\r\ndisplay: inline-block;\r\n}\r\nhtml[xmlns] #nav {\r\ndisplay: block;\r\n}\r\n* html #nav {\r\nheight: 1%;\r\n<\/style><\/pre>\n<\/div>\n<ul id=\"nav\">\n<li class=\"current\"><a href=\"#\">Home<\/a><\/li>\n<li><a href=\"#\">Menu_A<\/a>\n<ul>\n<li><a href=\"#\">Menu_A-1<\/a>\n<ul>\n<li><a href=\"#\">Menu_A-1-a<\/a><\/li>\n<li><a href=\"#\">Menu_A-1-b<\/a><\/li>\n<li><a href=\"#\">Menu_A-1-c<\/a><\/li>\n<li><a href=\"#\">Menu_A-1-d<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#\">Menu_A-2<\/a>\n<ul>\n<li><a href=\"#\">Menu_A-2-a<\/a><\/li>\n<li><a href=\"#\">Menu_A-2-b<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#\">Menu_A-3<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">Menu_A-4<\/a>\n\t\t<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#\">Menu_B<\/a>\n<ul>\n<li><a href=\"#\">Menu_B-1<\/a>\n<ul>\n<li><a href=\"#\">Menu_B-1-a<\/a><\/li>\n<li><a href=\"#\">Menu_B-1-b<\/a><\/li>\n<li><a href=\"#\">Menu_B-1-c<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#\">Menu_B-2<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">Menu_B-3<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">Menu_B-4<\/a>\n<ul>\n<li><a href=\"#\">Menu_B-4-a<\/a><\/li>\n<li><a href=\"#\">Menu_B-4-b<\/a><\/li>\n<li><a href=\"#\">Menu_B-4-a<\/a><\/li>\n<li><a href=\"#\">Menu_B-4-b<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#\">Menu_C<\/a>\n<ul>\n<li><a href=\"#\">Menu_C-1<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">Menu_C-2<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">Menu_C-3<\/a>\n<ul>\n<li><a href=\"#\">Menu_C-3-a<\/a><\/li>\n<li><a href=\"#\">Menu_C-3-b<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#\">Menu_C-4<\/a>\n\t\t\t<\/li>\n<li><a href=\"#\">Menu_C-4<\/a>\n<ul>\n<li><a href=\"#\">Menu_C-4-a<\/a><\/li>\n<li><a href=\"#\">Menu_C-4-b<\/a><\/li>\n<li><a href=\"#\">Menu_C-4-a<\/a><\/li>\n<li><a href=\"#\">Menu_C-4-b<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>The HTML Code <\/h2>\n<pre style=\"font-size: 80%; white-space: pre;\">\r\n&lt;ul id=\"nav\"> \r\n\t&lt;li class=\"current\">&lt;a href=\"#\">Home&lt;\/a>&lt;\/li> \r\n\t&lt;li>&lt;a href=\"#\">Menu_A&lt;\/a> \r\n\t\t&lt;ul> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-1&lt;\/a> \r\n\t\t\t\t&lt;ul> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-1-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-1-b&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-1-c&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-1-d&lt;\/a>&lt;\/li> \r\n\t\t\t\t&lt;\/ul> \r\n\t\t\t&lt;\/li> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-2&lt;\/a> \r\n\t\t\t\t&lt;ul> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-2-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-2-b&lt;\/a>&lt;\/li> \r\n\t\t\t\t&lt;\/ul> \r\n\t\t\t&lt;\/li> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-3&lt;\/a> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_A-4&lt;\/a> \r\n\t\t&lt;\/ul> \r\n\t&lt;\/li> \r\n\t&lt;li>&lt;a href=\"#\">Menu_B&lt;\/a> \r\n\t\t&lt;ul> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-1&lt;\/a> \r\n\t\t\t\t&lt;ul> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-1-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-1-b&lt;\/a>&lt;\/li>\r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-1-c&lt;\/a>&lt;\/li>\r\n\t\t\t\t&lt;\/ul> \r\n\t\t\t&lt;\/li> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-2&lt;\/a> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-3&lt;\/a> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-4&lt;\/a> \r\n\t\t\t\t&lt;ul> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-4-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-4-b&lt;\/a>&lt;\/li>\r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-4-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_B-4-b&lt;\/a>&lt;\/li>\r\n\t\t\t\t&lt;\/ul> \r\n\t\t\t&lt;\/li> \r\n\t\t&lt;\/ul> \r\n\t&lt;\/li> \r\n\t&lt;li>&lt;a href=\"#\">Menu_C&lt;\/a> \r\n\t\t&lt;ul> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-1&lt;\/a> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-2&lt;\/a> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-3&lt;\/a> \r\n\t\t\t\t&lt;ul> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-3-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-3-b&lt;\/a>&lt;\/li>\r\n\t\t\t\t&lt;\/ul> \r\n\t\t\t&lt;\/li> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-4&lt;\/a> \r\n\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-4&lt;\/a> \r\n\t\t\t\t&lt;ul> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-4-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-4-b&lt;\/a>&lt;\/li>\r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-4-a&lt;\/a>&lt;\/li> \r\n\t\t\t\t\t&lt;li>&lt;a href=\"#\">Menu_C-4-b&lt;\/a>&lt;\/li>\r\n\t\t\t\t&lt;\/ul> \r\n\t\t\t&lt;\/li> \r\n\t\t&lt;\/ul> \r\n\t&lt;\/li> \r\n&lt;\/ul> \r\n<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anchors make the Word Wide Web. These hyperlinks are the essence of the web, and styling them is no small matter. The anchor element &lt;a >contains the href attribute that specifies the hyper reference (address). It can also contain a &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/05-styling-the-navigation\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/339"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":25,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/339\/revisions"}],"predecessor-version":[{"id":3336,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/339\/revisions\/3336"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}