![\"Styling](\"http:\/\/devsnippets.com\/img\/list-5.jpg\")
<\/p>\n
By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.<\/p>\n
Elastic Calendar Styling with CSS<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-15.jpg\")
<\/a><\/p>\nYou can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.<\/p>\n
<\/a><\/a><\/div>\nThree Column CSS <\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-10.jpg\")
<\/p>\n
A Three Column CSS Layout Using Just an Unordered List<\/p>\n
<\/a><\/a><\/div>\nSimulating a Table Using an Unordered List<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-11.jpg\")
<\/p>\n
With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more \u201ctabley\u201d information. Here is how to simulate a table using an unordered list.<\/p>\n
How to Create a Block Hover Effect for a List of Links<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-16.jpg\")
<\/a><\/p>\nLearn how to create this \u201cblock hover\u201d effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.<\/p>\n
<div id=\"links\">\r\n <ul>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div><\/pre>\n<\/a><\/a><\/div>\nThe Amazing LI<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-7.jpg\")
<\/p>\n
Using CSS and Unordered List Items to Do Just About Anything.<\/p>\n
Centering List Items Horizontally<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-14.jpg\")
<\/a><\/p>\nSlightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table;<\/strong> trick.<\/p>\n<\/a><\/a><\/div>\nTurning a list into a navigation bar<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-12.jpg\")
<\/a><\/p>\nLearn how to create a navigation bar using unordered lists.<\/p>\n
<\/a><\/a><\/div>\nFORM elements design using CSS and list (ul and dl)<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-13.jpg\")
<\/a><\/p>\nTables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.<\/p>\n
<fieldset>\r\n<legend>Sign-up Form<\/legend>\r\n<form name=\"signup\" action=\"index.html\" method=\"post\">\r\n<ul>\r\n<li> <label for=\"name\">Name<\/label>\r\n<input type=\"text\" name=\"name\" id=\"name\" size=\"30\" \/>\r\n<\/li>\r\n<li> <label for=\"email\">Email<\/label>\r\n<input type=\"text\" name=\"email\" id=\"email\" size=\"30\" \/>\r\n<\/li>\r\n<\/fieldset><\/pre>\n5 Ways to Set Your Unordered Lists Apart<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-18.jpg\")
<\/a><\/p>\nHere are five different ways to style your unordered lists with CSS.<\/p>\n
Taming Lists<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-6.jpg\")
<\/a><\/p>\nIn this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It\u2019s time for you to tell lists how to behave, instead of letting them run wild on your web page.<\/p>\n
<div id=\"bread\">\r\n<ul>\r\n\t<li class=\"first\">Home\r\n\t<ul>\r\n\t\t<li>» Products\r\n\t\t<ul>\r\n\t\t\t<li>» Computers\r\n\t\t\t<ul>\r\n\t\t\t\t<li>» Software<\/li>\r\n\t\t\t<\/ul><\/li>\r\n\t\t<\/ul><\/li>\r\n\t<\/ul><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\nNested lists used to create a simple folder metaphore<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-9.jpg\")
<\/a><\/p>\nHere\u2019s a rough and ready example showing how to make a folder analalogy using a nested list.<\/p>\n
<ul id=\"sitemap\">\r\n<li><a href=\"#\">item 1<\/a><\/li>\r\n<li><a href=\"#\">item 2<\/a><\/li>\r\n<li><a href=\"#\">item 3<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">item 4<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 3<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">item 5<\/a><\/li>\r\n<li><a href=\"#\">item 6<\/a><\/li>\r\n<\/ul><\/pre>\nHandcrafted CSS + HTML Grid Calendar 2009<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-17.jpg\")
<\/a><\/p>\nSome experiments with css and grids in order to make CSS Grid Calendar for 2009.<\/p>\n
Best Practices<\/h3>\nMixx\u2019s Popular Stories<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-1.jpg\")
<\/p>\n
The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.<\/p>\n
<ul>\r\n <li>\r\n <h4><a href=\"#\"><\/a><span><a target=\"_blank\" href=\"#\"><\/a><\/span><\/h4>\r\n <div>\r\n\t<div><span><\/span><\/div>\r\n\t<div>\r\n <form>\r\n\t\t <input\/>\r\n\t\t <button type=\"submit\"><span><\/span><\/button>\r\n\t\t <input\/>\r\n <\/form>\r\n\t <\/div>\r\n <\/div>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><\/li>\r\n\t <li><\/li>\r\n <\/ul>\r\n <blockquote>\r\n\t <p><\/p>\r\n <\/blockquote>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n <\/ul>\r\n\r\n <\/li>\r\n<\/ul><\/pre>\nThecosmicmachine<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-2.jpg\")
<\/p>\n
Thecosmicmachine\u2019s Supported social networks, uses unordered list. Clean and simple.<\/p>\n
<ul id=\"web2List\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/twitter_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Twitter<\/strong><br\/>\r\n\t\t\t\t\t\tWhat are you doing?\r\n\t\t\t\t\t<\/li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/facebook_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Facebook<\/strong><br\/>\r\n\t\t\t\t\t\tConnect with the people around you.\r\n\t\t\t\t\t<\/li>\r\n<\/ul><\/pre>\nViget- Inspire<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-3.jpg\")
<\/p>\n
Viget- Inspire uses a pretty nice calender in their footer using unordered list.<\/p>\n
<ul class=\"clearfix\">\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/05\/\">May 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/04\/\">Apr 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/03\/\">Mar 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/02\/\">Feb 09<\/a><\/li>\r\n ......\r\n<\/ul><\/pre>\nProduct Planner<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-4.jpg\")
<\/p>\n
Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.<\/p>\n
<ol>\r\n\t\t<li class=\"step_1\">Find a flow from the gallery.<\/li>\r\n\t\t<li class=\"step_2\">Use that flow to create your own.<\/li>\r\n\t\t<li class=\"step_3\">Share it with your colleagues.<\/li>\r\n<\/ol><\/pre>\nOnwired Code block<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-8.jpg\")
<\/p>\n
Onwired uses ordered list to create their code block.<\/p>\n
Jobs on the wall<\/a><\/h3>\n![\"Styling](\"http:\/\/devsnippets.com\/img\/list-19.jpg\")
<\/p>\n
Nick La uses unordered lists to display all available jobs.<\/p>\n
<ul class=\"joblist\">\r\n <li class=\"\">\r\n <img class=\"employerlogo\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/logos\/small_1390806013\"\/>\r\n <img class=\"category\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/cat-design.gif\"\/>\r\n <h3><a href=\"http:\/\/jobs.webdesignerwall.com\/job.php?id=310\">Web\/Graphic Designer<\/a><\/h3>\r\n <p class=\"jobinfo\"><span class=\"type\">Full-Time<\/span> <em>at<\/em> Hallmark Channel <em>(Studio City, Ca)<\/em><\/p>\r\n <\/li>\r\n<\/ul><\/pre>\n","protected":false},"excerpt":{"rendered":"When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,91,92,70],"tags":[100,165,168,160,167,170,72,169,16],"class_list":["post-1761","post","type-post","status-publish","format-standard","hentry","category-blog","category-resources-blog","category-tutorials-blog","category-web-design-blog","tag-code","tag-css","tag-how","tag-html","tag-list","tag-personalize","tag-site","tag-to","tag-web"],"_links":{"self":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1761"}],"version-history":[{"count":1,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions"}],"predecessor-version":[{"id":1763,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions\/1763"}],"wp:attachment":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/a><\/p>\nYou can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.<\/p>\n
Three Column CSS <\/a><\/h3>\n<\/p>\n
A Three Column CSS Layout Using Just an Unordered List<\/p>\n
<\/a><\/a><\/div>\nSimulating a Table Using an Unordered List<\/a><\/h3>\n<\/p>\n
With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more \u201ctabley\u201d information. Here is how to simulate a table using an unordered list.<\/p>\n
How to Create a Block Hover Effect for a List of Links<\/a><\/h3>\n<\/a><\/p>\nLearn how to create this \u201cblock hover\u201d effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.<\/p>\n
<div id=\"links\">\r\n <ul>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div><\/pre>\n<\/a><\/a><\/div>\nThe Amazing LI<\/a><\/h3>\n<\/p>\n
Using CSS and Unordered List Items to Do Just About Anything.<\/p>\n
Centering List Items Horizontally<\/a><\/h3>\n<\/a><\/p>\nSlightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table;<\/strong> trick.<\/p>\n<\/a><\/a><\/div>\nTurning a list into a navigation bar<\/a><\/h3>\n<\/a><\/p>\nLearn how to create a navigation bar using unordered lists.<\/p>\n
<\/a><\/a><\/div>\nFORM elements design using CSS and list (ul and dl)<\/a><\/h3>\n<\/a><\/p>\nTables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.<\/p>\n
<fieldset>\r\n<legend>Sign-up Form<\/legend>\r\n<form name=\"signup\" action=\"index.html\" method=\"post\">\r\n<ul>\r\n<li> <label for=\"name\">Name<\/label>\r\n<input type=\"text\" name=\"name\" id=\"name\" size=\"30\" \/>\r\n<\/li>\r\n<li> <label for=\"email\">Email<\/label>\r\n<input type=\"text\" name=\"email\" id=\"email\" size=\"30\" \/>\r\n<\/li>\r\n<\/fieldset><\/pre>\n5 Ways to Set Your Unordered Lists Apart<\/a><\/h3>\n<\/a><\/p>\nHere are five different ways to style your unordered lists with CSS.<\/p>\n
Taming Lists<\/a><\/h3>\n<\/a><\/p>\nIn this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It\u2019s time for you to tell lists how to behave, instead of letting them run wild on your web page.<\/p>\n
<div id=\"bread\">\r\n<ul>\r\n\t<li class=\"first\">Home\r\n\t<ul>\r\n\t\t<li>» Products\r\n\t\t<ul>\r\n\t\t\t<li>» Computers\r\n\t\t\t<ul>\r\n\t\t\t\t<li>» Software<\/li>\r\n\t\t\t<\/ul><\/li>\r\n\t\t<\/ul><\/li>\r\n\t<\/ul><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\nNested lists used to create a simple folder metaphore<\/a><\/h3>\n<\/a><\/p>\nHere\u2019s a rough and ready example showing how to make a folder analalogy using a nested list.<\/p>\n
<ul id=\"sitemap\">\r\n<li><a href=\"#\">item 1<\/a><\/li>\r\n<li><a href=\"#\">item 2<\/a><\/li>\r\n<li><a href=\"#\">item 3<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">item 4<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 3<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">item 5<\/a><\/li>\r\n<li><a href=\"#\">item 6<\/a><\/li>\r\n<\/ul><\/pre>\nHandcrafted CSS + HTML Grid Calendar 2009<\/a><\/h3>\n<\/a><\/p>\nSome experiments with css and grids in order to make CSS Grid Calendar for 2009.<\/p>\n
Best Practices<\/h3>\nMixx\u2019s Popular Stories<\/a><\/h3>\n<\/p>\n
The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.<\/p>\n
<ul>\r\n <li>\r\n <h4><a href=\"#\"><\/a><span><a target=\"_blank\" href=\"#\"><\/a><\/span><\/h4>\r\n <div>\r\n\t<div><span><\/span><\/div>\r\n\t<div>\r\n <form>\r\n\t\t <input\/>\r\n\t\t <button type=\"submit\"><span><\/span><\/button>\r\n\t\t <input\/>\r\n <\/form>\r\n\t <\/div>\r\n <\/div>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><\/li>\r\n\t <li><\/li>\r\n <\/ul>\r\n <blockquote>\r\n\t <p><\/p>\r\n <\/blockquote>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n <\/ul>\r\n\r\n <\/li>\r\n<\/ul><\/pre>\nThecosmicmachine<\/a><\/h3>\n<\/p>\n
Thecosmicmachine\u2019s Supported social networks, uses unordered list. Clean and simple.<\/p>\n
<ul id=\"web2List\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/twitter_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Twitter<\/strong><br\/>\r\n\t\t\t\t\t\tWhat are you doing?\r\n\t\t\t\t\t<\/li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/facebook_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Facebook<\/strong><br\/>\r\n\t\t\t\t\t\tConnect with the people around you.\r\n\t\t\t\t\t<\/li>\r\n<\/ul><\/pre>\nViget- Inspire<\/a><\/h3>\n<\/p>\n
Viget- Inspire uses a pretty nice calender in their footer using unordered list.<\/p>\n
<ul class=\"clearfix\">\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/05\/\">May 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/04\/\">Apr 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/03\/\">Mar 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/02\/\">Feb 09<\/a><\/li>\r\n ......\r\n<\/ul><\/pre>\nProduct Planner<\/a><\/h3>\n<\/p>\n
Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.<\/p>\n
<ol>\r\n\t\t<li class=\"step_1\">Find a flow from the gallery.<\/li>\r\n\t\t<li class=\"step_2\">Use that flow to create your own.<\/li>\r\n\t\t<li class=\"step_3\">Share it with your colleagues.<\/li>\r\n<\/ol><\/pre>\nOnwired Code block<\/a><\/h3>\n<\/p>\n
Onwired uses ordered list to create their code block.<\/p>\n
Jobs on the wall<\/a><\/h3>\n<\/p>\n
Nick La uses unordered lists to display all available jobs.<\/p>\n
<ul class=\"joblist\">\r\n <li class=\"\">\r\n <img class=\"employerlogo\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/logos\/small_1390806013\"\/>\r\n <img class=\"category\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/cat-design.gif\"\/>\r\n <h3><a href=\"http:\/\/jobs.webdesignerwall.com\/job.php?id=310\">Web\/Graphic Designer<\/a><\/h3>\r\n <p class=\"jobinfo\"><span class=\"type\">Full-Time<\/span> <em>at<\/em> Hallmark Channel <em>(Studio City, Ca)<\/em><\/p>\r\n <\/li>\r\n<\/ul><\/pre>\n","protected":false},"excerpt":{"rendered":"When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,91,92,70],"tags":[100,165,168,160,167,170,72,169,16],"class_list":["post-1761","post","type-post","status-publish","format-standard","hentry","category-blog","category-resources-blog","category-tutorials-blog","category-web-design-blog","tag-code","tag-css","tag-how","tag-html","tag-list","tag-personalize","tag-site","tag-to","tag-web"],"_links":{"self":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1761"}],"version-history":[{"count":1,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions"}],"predecessor-version":[{"id":1763,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions\/1763"}],"wp:attachment":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\nSimulating a Table Using an Unordered List<\/a><\/h3>\n<\/p>\n
With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more \u201ctabley\u201d information. Here is how to simulate a table using an unordered list.<\/p>\n
How to Create a Block Hover Effect for a List of Links<\/a><\/h3>\n<\/a><\/p>\nLearn how to create this \u201cblock hover\u201d effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.<\/p>\n
<div id=\"links\">\r\n <ul>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div><\/pre>\n<\/a><\/a><\/div>\nThe Amazing LI<\/a><\/h3>\n<\/p>\n
Using CSS and Unordered List Items to Do Just About Anything.<\/p>\n
Centering List Items Horizontally<\/a><\/h3>\n<\/a><\/p>\nSlightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table;<\/strong> trick.<\/p>\n<\/a><\/a><\/div>\nTurning a list into a navigation bar<\/a><\/h3>\n<\/a><\/p>\nLearn how to create a navigation bar using unordered lists.<\/p>\n
<\/a><\/a><\/div>\nFORM elements design using CSS and list (ul and dl)<\/a><\/h3>\n<\/a><\/p>\nTables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.<\/p>\n
<fieldset>\r\n<legend>Sign-up Form<\/legend>\r\n<form name=\"signup\" action=\"index.html\" method=\"post\">\r\n<ul>\r\n<li> <label for=\"name\">Name<\/label>\r\n<input type=\"text\" name=\"name\" id=\"name\" size=\"30\" \/>\r\n<\/li>\r\n<li> <label for=\"email\">Email<\/label>\r\n<input type=\"text\" name=\"email\" id=\"email\" size=\"30\" \/>\r\n<\/li>\r\n<\/fieldset><\/pre>\n5 Ways to Set Your Unordered Lists Apart<\/a><\/h3>\n<\/a><\/p>\nHere are five different ways to style your unordered lists with CSS.<\/p>\n
Taming Lists<\/a><\/h3>\n<\/a><\/p>\nIn this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It\u2019s time for you to tell lists how to behave, instead of letting them run wild on your web page.<\/p>\n
<div id=\"bread\">\r\n<ul>\r\n\t<li class=\"first\">Home\r\n\t<ul>\r\n\t\t<li>» Products\r\n\t\t<ul>\r\n\t\t\t<li>» Computers\r\n\t\t\t<ul>\r\n\t\t\t\t<li>» Software<\/li>\r\n\t\t\t<\/ul><\/li>\r\n\t\t<\/ul><\/li>\r\n\t<\/ul><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\nNested lists used to create a simple folder metaphore<\/a><\/h3>\n<\/a><\/p>\nHere\u2019s a rough and ready example showing how to make a folder analalogy using a nested list.<\/p>\n
<ul id=\"sitemap\">\r\n<li><a href=\"#\">item 1<\/a><\/li>\r\n<li><a href=\"#\">item 2<\/a><\/li>\r\n<li><a href=\"#\">item 3<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">item 4<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 3<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">item 5<\/a><\/li>\r\n<li><a href=\"#\">item 6<\/a><\/li>\r\n<\/ul><\/pre>\nHandcrafted CSS + HTML Grid Calendar 2009<\/a><\/h3>\n<\/a><\/p>\nSome experiments with css and grids in order to make CSS Grid Calendar for 2009.<\/p>\n
Best Practices<\/h3>\nMixx\u2019s Popular Stories<\/a><\/h3>\n<\/p>\n
The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.<\/p>\n
<ul>\r\n <li>\r\n <h4><a href=\"#\"><\/a><span><a target=\"_blank\" href=\"#\"><\/a><\/span><\/h4>\r\n <div>\r\n\t<div><span><\/span><\/div>\r\n\t<div>\r\n <form>\r\n\t\t <input\/>\r\n\t\t <button type=\"submit\"><span><\/span><\/button>\r\n\t\t <input\/>\r\n <\/form>\r\n\t <\/div>\r\n <\/div>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><\/li>\r\n\t <li><\/li>\r\n <\/ul>\r\n <blockquote>\r\n\t <p><\/p>\r\n <\/blockquote>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n <\/ul>\r\n\r\n <\/li>\r\n<\/ul><\/pre>\nThecosmicmachine<\/a><\/h3>\n<\/p>\n
Thecosmicmachine\u2019s Supported social networks, uses unordered list. Clean and simple.<\/p>\n
<ul id=\"web2List\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/twitter_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Twitter<\/strong><br\/>\r\n\t\t\t\t\t\tWhat are you doing?\r\n\t\t\t\t\t<\/li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/facebook_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Facebook<\/strong><br\/>\r\n\t\t\t\t\t\tConnect with the people around you.\r\n\t\t\t\t\t<\/li>\r\n<\/ul><\/pre>\nViget- Inspire<\/a><\/h3>\n<\/p>\n
Viget- Inspire uses a pretty nice calender in their footer using unordered list.<\/p>\n
<ul class=\"clearfix\">\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/05\/\">May 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/04\/\">Apr 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/03\/\">Mar 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/02\/\">Feb 09<\/a><\/li>\r\n ......\r\n<\/ul><\/pre>\nProduct Planner<\/a><\/h3>\n<\/p>\n
Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.<\/p>\n
<ol>\r\n\t\t<li class=\"step_1\">Find a flow from the gallery.<\/li>\r\n\t\t<li class=\"step_2\">Use that flow to create your own.<\/li>\r\n\t\t<li class=\"step_3\">Share it with your colleagues.<\/li>\r\n<\/ol><\/pre>\nOnwired Code block<\/a><\/h3>\n<\/p>\n
Onwired uses ordered list to create their code block.<\/p>\n
Jobs on the wall<\/a><\/h3>\n<\/p>\n
Nick La uses unordered lists to display all available jobs.<\/p>\n
<ul class=\"joblist\">\r\n <li class=\"\">\r\n <img class=\"employerlogo\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/logos\/small_1390806013\"\/>\r\n <img class=\"category\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/cat-design.gif\"\/>\r\n <h3><a href=\"http:\/\/jobs.webdesignerwall.com\/job.php?id=310\">Web\/Graphic Designer<\/a><\/h3>\r\n <p class=\"jobinfo\"><span class=\"type\">Full-Time<\/span> <em>at<\/em> Hallmark Channel <em>(Studio City, Ca)<\/em><\/p>\r\n <\/li>\r\n<\/ul><\/pre>\n","protected":false},"excerpt":{"rendered":"When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,91,92,70],"tags":[100,165,168,160,167,170,72,169,16],"class_list":["post-1761","post","type-post","status-publish","format-standard","hentry","category-blog","category-resources-blog","category-tutorials-blog","category-web-design-blog","tag-code","tag-css","tag-how","tag-html","tag-list","tag-personalize","tag-site","tag-to","tag-web"],"_links":{"self":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1761"}],"version-history":[{"count":1,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions"}],"predecessor-version":[{"id":1763,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions\/1763"}],"wp:attachment":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\nLearn how to create this \u201cblock hover\u201d effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.<\/p>\n Using CSS and Unordered List Items to Do Just About Anything.<\/p>\n Slightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table;<\/strong> trick.<\/p>\n Learn how to create a navigation bar using unordered lists.<\/p>\n Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.<\/p>\n Here are five different ways to style your unordered lists with CSS.<\/p>\n In this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It\u2019s time for you to tell lists how to behave, instead of letting them run wild on your web page.<\/p>\n Here\u2019s a rough and ready example showing how to make a folder analalogy using a nested list.<\/p>\n Some experiments with css and grids in order to make CSS Grid Calendar for 2009.<\/p>\n The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.<\/p>\n Thecosmicmachine\u2019s Supported social networks, uses unordered list. Clean and simple.<\/p>\n Viget- Inspire uses a pretty nice calender in their footer using unordered list.<\/p>\n Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.<\/p>\n Onwired uses ordered list to create their code block.<\/p>\n Nick La uses unordered lists to display all available jobs.<\/p>\n When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,91,92,70],"tags":[100,165,168,160,167,170,72,169,16],"class_list":["post-1761","post","type-post","status-publish","format-standard","hentry","category-blog","category-resources-blog","category-tutorials-blog","category-web-design-blog","tag-code","tag-css","tag-how","tag-html","tag-list","tag-personalize","tag-site","tag-to","tag-web"],"_links":{"self":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1761"}],"version-history":[{"count":1,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions"}],"predecessor-version":[{"id":1763,"href":"https:\/\/eagrapho.com\/index.php?rest_route=\/wp\/v2\/posts\/1761\/revisions\/1763"}],"wp:attachment":[{"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eagrapho.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n<div id=\"links\">\r\n <ul>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <li><a href=\"#\" title=\"Text\">Link Heading One\r\n <em>Description of link.<\/em>\r\n <span>Date posted<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/div><\/pre>\n
The Amazing LI<\/a><\/h3>\n
<\/p>\nCentering List Items Horizontally<\/a><\/h3>\n
<\/a><\/p>\nTurning a list into a navigation bar<\/a><\/h3>\n
<\/a><\/p>\nFORM elements design using CSS and list (ul and dl)<\/a><\/h3>\n
<\/a><\/p>\n<fieldset>\r\n<legend>Sign-up Form<\/legend>\r\n<form name=\"signup\" action=\"index.html\" method=\"post\">\r\n<ul>\r\n<li> <label for=\"name\">Name<\/label>\r\n<input type=\"text\" name=\"name\" id=\"name\" size=\"30\" \/>\r\n<\/li>\r\n<li> <label for=\"email\">Email<\/label>\r\n<input type=\"text\" name=\"email\" id=\"email\" size=\"30\" \/>\r\n<\/li>\r\n<\/fieldset><\/pre>\n
5 Ways to Set Your Unordered Lists Apart<\/a><\/h3>\n
<\/a><\/p>\nTaming Lists<\/a><\/h3>\n
<\/a><\/p>\n<div id=\"bread\">\r\n<ul>\r\n\t<li class=\"first\">Home\r\n\t<ul>\r\n\t\t<li>» Products\r\n\t\t<ul>\r\n\t\t\t<li>» Computers\r\n\t\t\t<ul>\r\n\t\t\t\t<li>» Software<\/li>\r\n\t\t\t<\/ul><\/li>\r\n\t\t<\/ul><\/li>\r\n\t<\/ul><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\n
Nested lists used to create a simple folder metaphore<\/a><\/h3>\n
<\/a><\/p>\n<ul id=\"sitemap\">\r\n<li><a href=\"#\">item 1<\/a><\/li>\r\n<li><a href=\"#\">item 2<\/a><\/li>\r\n<li><a href=\"#\">item 3<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">item 4<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\" class=\"open\">sub-sub-item 3<\/a>\r\n<ul>\r\n<li><a href=\"#\">sub-sub-sub-item 1<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 2<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 3<\/a><\/li>\r\n<li><a href=\"#\">sub-sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">sub-item 4<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">item 5<\/a><\/li>\r\n<li><a href=\"#\">item 6<\/a><\/li>\r\n<\/ul><\/pre>\n
Handcrafted CSS + HTML Grid Calendar 2009<\/a><\/h3>\n
<\/a><\/p>\nBest Practices<\/h3>\n
Mixx\u2019s Popular Stories<\/a><\/h3>\n
<\/p>\n<ul>\r\n <li>\r\n <h4><a href=\"#\"><\/a><span><a target=\"_blank\" href=\"#\"><\/a><\/span><\/h4>\r\n <div>\r\n\t<div><span><\/span><\/div>\r\n\t<div>\r\n <form>\r\n\t\t <input\/>\r\n\t\t <button type=\"submit\"><span><\/span><\/button>\r\n\t\t <input\/>\r\n <\/form>\r\n\t <\/div>\r\n <\/div>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><\/li>\r\n\t <li><\/li>\r\n <\/ul>\r\n <blockquote>\r\n\t <p><\/p>\r\n <\/blockquote>\r\n <ul>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n\t <li><a href=\"#\"><\/a><\/li>\r\n <\/ul>\r\n\r\n <\/li>\r\n<\/ul><\/pre>\n
Thecosmicmachine<\/a><\/h3>\n
<\/p>\n<ul id=\"web2List\">\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/twitter_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Twitter<\/strong><br\/>\r\n\t\t\t\t\t\tWhat are you doing?\r\n\t\t\t\t\t<\/li>\r\n\t\t\t\t\t<li>\r\n\t\t\t\t\t\t<img src=\"images\/facebook_32.png\"\/>\r\n\t\t\t\t\t\t<strong>Facebook<\/strong><br\/>\r\n\t\t\t\t\t\tConnect with the people around you.\r\n\t\t\t\t\t<\/li>\r\n<\/ul><\/pre>\n
Viget- Inspire<\/a><\/h3>\n
<\/p>\n<ul class=\"clearfix\">\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/05\/\">May 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/04\/\">Apr 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/03\/\">Mar 09<\/a><\/li>\r\n <li><a href=\"http:\/\/www.viget.com\/inspire\/2009\/02\/\">Feb 09<\/a><\/li>\r\n ......\r\n<\/ul><\/pre>\n
Product Planner<\/a><\/h3>\n
<\/p>\n<ol>\r\n\t\t<li class=\"step_1\">Find a flow from the gallery.<\/li>\r\n\t\t<li class=\"step_2\">Use that flow to create your own.<\/li>\r\n\t\t<li class=\"step_3\">Share it with your colleagues.<\/li>\r\n<\/ol><\/pre>\n
Onwired Code block<\/a><\/h3>\n
<\/p>\nJobs on the wall<\/a><\/h3>\n
<\/p>\n<ul class=\"joblist\">\r\n <li class=\"\">\r\n <img class=\"employerlogo\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/logos\/small_1390806013\"\/>\r\n <img class=\"category\" alt=\"\" src=\"http:\/\/jobs.webdesignerwall.com\/images\/cat-design.gif\"\/>\r\n <h3><a href=\"http:\/\/jobs.webdesignerwall.com\/job.php?id=310\">Web\/Graphic Designer<\/a><\/h3>\r\n <p class=\"jobinfo\"><span class=\"type\">Full-Time<\/span> <em>at<\/em> Hallmark Channel <em>(Studio City, Ca)<\/em><\/p>\r\n <\/li>\r\n<\/ul><\/pre>\n","protected":false},"excerpt":{"rendered":"