Upload File

listamatic1

prev
next
out of 105
Download Listamatic1

Upload: gargamel2014

Post on 06-Mar-2016

7 views

Category:

Documents


0 download

Report

DESCRIPTION

HTML List and CSS

TRANSCRIPT

http://css.maxdesign.com.au/listamatic/index.htmCan you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.Vertical listsSimple listSimple list with square bulletsSimple list with circle bulletsUsing images for bulletsUsing CSS background images for bulletsEric Meyer's simple separatorsEric Meyer's PaneliseRollover listsEric Meyer's Strengthening the linksA List Apart's Taming listsProjectSeven's UberlistBieler Batiste's listVertical buttonsBulleted Rollover List3D Imenu in blueDouble BorderCopongcopong's Pop Pad ListIE HACK for "Eric Meyer's Strengthening the links"- added 17 May 2005Horizontal listsSimple horizontal listRollover horizontal listRollover horizontal list navbarEric Meyer's navbarEric Meyer's tabbed navbarSimple Bits tabbed navbarProjectSeven's horizontal UberlistKalsey CSS tabsJeffrey Zeldman's DWWS navigationClagnut CSS TabsUnraveled CSS TabsDive into Mark Pure CSS TabsHorizontal buttonsWebfroot Horizontal NavBarZDnet EmulationCentred list navbarImage swapSeth's horizontal listFloat your boatBrickContrast: smhillAlteration to Rollover Horizontal List NavbarSuperfluousBanter 2003Horizontal Bullet On HoverThe Gradient Green Navigation BarCentred List Navbar UpdatedTomek Garbiak's listReflowing Folder Image Rollover NavCopongcopong's Under TabsCentral Horizontal BoxesFat Erik 5s Simple Pipe ListFat Erik's breadcrumbsCheapOsxSleek vertical boxesPipe dreamExperimental listsAnton Andreasson's Big BoxesAdjacent-Sibling selector listLinks to other listsMenus dynamiquesHorizontal Toolbar List with Access KeysPureDom NavHover CSS menuModification of Seth's horizontal listSeth's new vertical listArchadia Bluff Golf ClubsSitemap Structure ListSitemap Structure List (rounded)TJK design CSS-based Dropdown with a twistTJK design Tabs menuCSS dropdown menuwithdownloadable zip fileCSS rollover galleryFull width navigation bar with CSSAndrea Lazzarotto's centered listAndrea Lazzarotto's centered list(English version)Pushbutton LinksCaptioned list exampleInformation about the listsExternal resources used on this siteWhy use lists for site navigation?Browsers types and listsThe IE box model and Doctype modesBrowser support chartList Auto-GeneratorsList-o-Rama Dreamweaver ExtensionBellspaceVertical lists1. Simple listItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: The basic list has four "hooks" that can be used to apply styles. None of the samples use more than two hooks - an overall hook and an active hook.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSNone2.Simple list with square bulletsItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Uselist-style-type: squareto change the bullets to squares.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist li { list-style-type: square; }3.Simple list with circle bulletsItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Uselist-style-type: circle;to change the bullets to circles.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist li { list-style-type: circle; }4.Using images for bulletsItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Uselist-style-image: url(imagename);to replace the bullets entirely with images. The downside of this method is that each browsers positions the images differently.CSS background images for list bulletsis a more consistent method.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist { list-style-image: url(images/arrow.gif); }5.Using CSS background images for bulletsItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Usebackground-image: url(images/arrow.gif)to add images to the background of each list item. Use padding to shift the content so that it does not overlap the background image.This method gives much more consistent results than simply replacing the bullets with images.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{margin-left: 0;padding-left: 0;list-style: none;}

#navlist li{padding-left: 10px;background-image: url(images/arrow.gif);background-repeat: no-repeat;background-position: 0 .5em;}6.Eric Meyer's Simple SeparatorsItem oneItem twoItem threeItem fourItem fiveAuthor: Eric MeyerComments: FromEric Meyers Minimal Markup, Surprising StylePresentation.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{padding-left: 0;margin-left: 0;border-bottom: 1px solid gray;width: 200px;}

#navlist li{list-style: none;margin: 0;padding: 0.25em;border-top: 1px solid gray;}

#navlist li a { text-decoration: none; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.7.Eric Meyer's PaneliseItem oneItem twoItem threeItem fourItem fiveAuthor: Eric MeyerComments: FromEric Meyers Minimal Markup, Surprising StylePresentation.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{padding: 1px;margin-left: 0;font: bold 12px Verdana, sans-serif;border: 2px solid;border-color: #AAA #666 #666 #AAA;background: #CCC;width: 13em;}

#navlist li{list-style: none;margin: 0;padding: 0.25em 1em;border: 1px solid;border-color: #FFF #AAA #AAA #FFF;text-align: center;}

#navlist li a { text-decoration: none; }#navlist li a:link { color: black; }#navlist li a:visited { color: gray; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.8.Rollover listsItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Rollovers can be achieved by converting theaelements within the list to blocks usingdisplay: block;and swapping background colors using thea:hoverpseudo-class.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer { width: 200px; }

#navcontainer ul{margin-left: 0;padding-left: 0;list-style-type: none;font-family: Arial, Helvetica, sans-serif;}

#navcontainer a{display: block;padding: 3px;width: 160px;background-color: #036;border-bottom: 1px solid #eee;}

#navcontainer a:link, #navlist a:visited{color: #EEE;text-decoration: none;}

#navcontainer a:hover{background-color: #369;color: #fff;}9.Eric Meyer's Strengthening the linksItem oneItem twoItem threeItem fourItem fiveAuthor: Eric MeyerComments: Rollover lists can also be styled with borders and different colors. FromEric Meyers Minimal Markup, Surprising StylePresentation.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{padding: 0 1px 1px;margin-left: 0;font: bold 12px Verdana, sans-serif;background: gray;width: 13em;}

#navlist li{list-style: none;margin: 0;border-top: 1px solid gray;text-align: left;}

#navlist li a{display: block;padding: 0.25em 0.5em 0.25em 0.75em;border-left: 1em solid #AAB;background: #CCD;text-decoration: none;}

#navlist li a:link { color: #448; }#navlist li a:visited { color: #667; }

#navlist li a:hover{border-color: #FE3;color: #FFF;background: #332;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.10.A List Apart's Taming listsItem oneItem twoItem threeItem fourItem fiveAuthor: Mark NewhouseComments: TheTaming Listsarticle paved the way for styling lists.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{width: 12em;border-right: 1px solid #000;padding: 0 0 1em 0;margin-bottom: 1em;font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;background-color: #90bade;color: #333;}

#navcontainer ul{list-style: none;margin: 0;padding: 0;border: none;}

#navcontainer li{border-bottom: 1px solid #90bade;margin: 0;}

#navcontainer li a{display: block;padding: 5px 5px 5px 0.5em;border-left: 10px solid #1958b7;border-right: 10px solid #508fc4;background-color: #2175bc;color: #fff;text-decoration: none;width: 100%;}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover{border-left: 10px solid #1c64d1;border-right: 10px solid #5ba3e0;background-color: #2586d7;color: #fff;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.11.ProjectSeven's UberlistItem oneItem twoItem threeItem fourItem fiveAuthor: Project SevenComments: Use combinations of background images, anda:hoverto achieve different list effects. FromProjectSeven's Uberlist.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{margin: 0;padding: 0;list-style-type: none;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}

#navcontainer li { margin: 0 0 3px 0; }

#navcontainer a{display: block;padding: 2px 2px 2px 24px;border: 1px solid #333;width: 160px;background-color: #999;background-image: url(images/l1_down.gif);}

#navcontainer a:link, #navlist a:visited{color: #EEE;text-decoration: none;}

#navcontainer a:hover{border: 1px solid #333;background-color: #F60;background-image: url(images/l1_over.gif);color: #333;}

#active a:link, #active a:visited, #active a:hover{border: 1px solid #333;background-color: #FF6600;background-image: url(images/l1_over.gif);color: #333;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.12.Bieler Batiste's listItem oneItem twoItem threeItem fourItem fiveAuthor: Bieler BatisteComments: This list is built to have a correct display in IE5+ for PC when the element is display as blockBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist li{display: inline;/* for IE5 and IE6 */}

#navlist{width: 7em;/* to display the list horizontaly */font-family: sans-serif;margin: 0 0 0 3em;padding: 0;border-top: 1px #000 solid;border-left: 1px #000 solid;border-right: 1px #000 solid;}

#navlist a{width: 99.99%;/* extend the sensible area to the maximum with IE5 */display: block;background-color: #fff;border-bottom: 1px #000 solid;text-align: center;text-decoration: none;color: #000;}

#navlist a:hover { background-color: orange; }#navlist a:visited { color: #000; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.13.Vertical Buttonsitem oneitem twoitem threeitem fouritem fiveAuthor:Claire CampbellComments: Use of contrasting borders and a:hover makes it look like "push down" buttons. Adapted from myCSS zenGarden submission(though it used background images and was not a list). Note: I wouldn't normally use fixed font size but NN7 doesn't display some of the borders when using % or ems.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{background: #f0e7d7;width: 30%;margin: 0 auto;padding: 1em 0;font-family: georgia, serif;font-size: 13px;text-align: center;text-transform: lowercase;}

ul#navlist{text-align: left;list-style: none;padding: 0;margin: 0 auto;width: 70%;}

ul#navlist li{display: block;margin: 0;padding: 0;}

ul#navlist li a{display: block;width: 100%;padding: 0.5em 0 0.5em 2em;border-width: 1px;border-color: #ffe #aaab9c #ccc #fff;border-style: solid;color: #777;text-decoration: none;background: #f7f2ea;}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a{background: #f0e7d7;color: #800000;}

ul#navlist li a:hover, ul#navlist li#active a:hover{color: #800000;background: transparent;border-color: #aaab9c #fff #fff #ccc;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.14.Bulleted Rollover ListItem oneItem twoItem threeItem fourItem fiveAuthor:Philip LindsayComments: A simple effect achieved by switching the background image of a 5 pixel gif through different anchor statesBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{list-style-type: none;text-align: left;}

#navcontainer ul li a{background: transparent url(images/list-off.gif) left center no-repeat;padding-left: 15px;text-align: left;font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;text-decoration: none;color: #999;}

#navcontainer ul li a:hover{background: transparent url(images/list-on.gif) left center no-repeat;color: black;}

#navcontainer ul li a#current{background: transparent url(images/list-active.gif) left center no-repeat;color: #666;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.15.3D Imenu in blueItem oneItem twoItem threeItem fourItem fiveAuthor:Ingo TurskiComments: The colors of this menu are choosen for blue (i.e. #39c) background or other blue elements on the website.Notice: delete the Tantek-hack if you use this list in a document that forces Internet Explorer 6 to render it in quirks mode. If you have not set font-size for BODY or you have set it with 'EM', you should set font-size:100% for '#navcontainer'. Otherwise the Internet Explorer won't zoom correctly. If you like to show the current item as simple text and not as a link, cover it with a SPAN and define '#navlist span' similar to '#navlist a' but with the PADDING, BACKGROUND and BORDER of '#navlist a:active' except the red BORDER-RIGHT-COLOR of 'a#current'.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{color: white;background: #17a;border-bottom: 0.2em solid #17a;border-right: 0.2em solid #17a;padding: 0 1px;margin-left: 0;width: 12em;font: normal 0.8em Verdana, sans-serif;}

#navlist li{list-style: none;margin: 0;font-size: 1em;}

#navlist a{display: block;text-decoration: none;margin-bottom: 0.5em;margin-top: 0.5em;color: white;background: #39c;border-width: 1px;border-style: solid;border-color: #5bd #035 #068 #6cf;border-left: 1em solid #fc0;padding: 0.25em 0.5em 0.4em 0.75em;}

#navlist a#current { border-color: #5bd #035 #068 #f30; }

#navlist a{width: 99%;/* only necessary for Internet Explorer */}

#navlist a{voice-family: "\"}\"";voice-family: inherit;width: 9.6em;/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */}

#navcontainer>#navlist a{width: auto;/* only necessary if you use the hacks above for the Internet Explorer */}

#navlist a:hover, #navlist a#current:hover{background: #28b;border-color: #069 #6cf #5bd #fc0;padding: 0.4em 0.35em 0.25em 0.9em;}

#navlist a:active, #navlist a#current:active{background: #17a;border-color: #069 #6cf #5bd white;padding: 0.4em 0.35em 0.25em 0.9em;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.16.Double BorderItem oneItem twoItem threeItem fourItem fiveAuthor:David BlackwellComments: The padding in the li comes to life with the a:hover, creating a double border on the roll-over. Using {padding: 0 .3em;} gives a double border effect only on the left and right, which is a slightly different effect and also 'shortens' the list vertically, if necessary.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSul#navlist{margin: 0 0 0 30px;padding: 0;width: 12.5%;}

#navlist li{list-style-type: none;background-color: #191970;color: #daa520;border: .2em solid #daa520;font-weight: 600;text-align: center;padding: .3em;margin-bottom: .1em;}

#navlist li a{color: #daa520;text-decoration: none;display: block;}

#navlist li a:hover{background-color: #faebd7;color: #191970;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.17.Copongcopong's Pop Pad ListItem oneItem twoItem threeItem fourItem fiveAuthor:CopongcopongComments: The effect may not be best when using words like (item one, item two etc ...). Works Best For 2-digit number links and 2-letter links.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{width: 150px;display: block;}

#navlist{display: block;list-style: none;font-size: 12px;}

#navlist li{list-style: none;font-family: 'Trebuchet MS', verdana;margin: 1px;border: 1px solid #333;text-align: center;background: #fff;display: block;float: left;color: #ccc;}

#navlist li a{margin: 1px;padding: 0px;border: 1px solid #000;font-weight: normal;display: block;width: 25px;text-decoration: none;color: #003399;}

#navlist li a:hover{margin: 1px;padding: 0px;border: 1px solid #fff;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;font-weight: bold;}

#navlist li a#current{font-weight: bold;background: #ECECEC;border: 1px solid #999;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.18.IE HACK for "Eric Meyer's Strengthening the links"Item oneItem twoItem threeItem fourItem fiveAuthor: Maks FeltrinComments: This is just a hack for ie bug in "Eric Meyer's Strengthening the links" list. IE(6) show an unexspected bottom-border for each li. This hack solves the problem giving a fixed width for ul and a.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSul#navlist{width: 158px;\width: 160px;w\idth: 158px;padding: 0px;border: 1px solid #808080;border-top: 0px;margin: 0px;font: bold 12px verdana,helvetica,arial,sans-serif;background: #808080;}

ul#navlist li{list-style: none;margin: 0px;border: 0px;border-top: 1px solid #808080;}

ul#navlist li a{display: block;width: 122px;\width: 158px;w\idth: 122px;padding: 4px 8px 4px 8px;border: 0px;border-left: 20px solid #aaaabb;background: #ccccdd;text-decoration: none;text-align: right;}

ul#navlist li a:link { color: #666677; }div#navcontainer li a:visited { color: #666677; }

ul#navlist li a:hover{border-color: #ff9000;color: #ffffff;background: #000d33;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.Horizontal lists1.Simple horizontal listItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Usedisplay: inline;andlist-style-type: none;to make a basic horizontal list.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist li{display: inline;list-style-type: none;padding-right: 20px;}2.Rollover horizontal listItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: Usedisplay: inline;andlist-style-type:none; to set a basic horizontal list. Use padding and background color on the "a" element to achieve colored blocks. Use a different background color on thea:hoverto achieve a rollover effect.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSul#navlist{margin-left: 0;padding-left: 0;white-space: nowrap;}

#navlist li{display: inline;list-style-type: none;}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited{color: #fff;background-color: #036;text-decoration: none;}

#navlist a:hover{color: #fff;background-color: #369;text-decoration: none;}3.Rollover horizontal list navbarItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: To convert the previous list into a navbar, style theULwithfloat: leftandwidth: 100%.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{padding-left: 0;margin-left: 0;background-color: #036;color: White;float: left;width: 100%;font-family: arial, helvetica, sans-serif;}

#navcontainer ul li { display: inline; }

#navcontainer ul li a{padding: 0.2em 1em;background-color: #036;color: White;text-decoration: none;float: left;border-right: 1px solid #fff;}

#navcontainer ul li a:hover{background-color: #369;color: #fff;}4.Eric Meyer's navbarItem oneItem twoItem threeItem fourItem fiveAuthor: Eric MeyerComments: FromEric Meyers Minimal Markup, Surprising StylePresentation.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{padding: 0 1px 1px;margin-left: 0;font: bold 12px Verdana, sans-serif;}

#navlist li{list-style: none;margin: 0;border-top: 1px solid gray;display: inline;}

#navlist li a{padding: 0.25em 0.5em 0.25em 0.75em;border-left: 1em solid #AAB;background: #CCD;text-decoration: none;}

#navlist li a:link { color: #448; }#navlist li a:visited { color: #667; }

#navlist li a:hover{border-color: #FE3;color: #FFF;background: #332;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.Submit a list5.Eric Meyer's tabbed navbarItem oneItem twoItem threeItem fourItem fiveAuthor: Eric MeyerComments: FromEric Meyers Minimal Markup, Surprising StylePresentation.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{padding: 3px 0;margin-left: 0;border-bottom: 1px solid #778;font: bold 12px Verdana, sans-serif;}

#navlist li{list-style: none;margin: 0;display: inline;}

#navlist li a{padding: 3px 0.5em;margin-left: 3px;border: 1px solid #778;border-bottom: none;background: #DDE;text-decoration: none;}

#navlist li a:link { color: #448; }#navlist li a:visited { color: #667; }

#navlist li a:hover{color: #000;background: #AAE;border-color: #227;}

#navlist li a#current{background: white;border-bottom: 1px solid white;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.6.Simple Bits tabbed navbarItem oneItem twoItem threeItem fourItem fiveAuthor: Dan CederholmComments: FromSimple bits mini Tabs. There is also a variety ofmini-tab shapesthat work with this list model as well.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{margin: 0;padding: 0 0 20px 10px;border-bottom: 1px solid #000;}

#navlist ul, #navlist li{margin: 0;padding: 0;display: inline;list-style-type: none;}

#navlist a:link, #navlist a:visited{float: left;line-height: 14px;font-weight: bold;margin: 0 10px 4px 10px;text-decoration: none;color: #999;}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover{border-bottom: 4px solid #000;padding-bottom: 2px;background: transparent;color: #000;}

#navlist a:hover { color: #000; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.7.ProjectSeven's horizontal UberlistItem oneItem twoItem threeItem fourItem fiveAuthor: Project SevenComments: FromProjectSeven's Uberlist.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist ul{margin: 0;white-space: nowrap;padding: 0;}

#navlist li{display: inline;list-style-type: none;}

#navlist a{padding: 1px 8px 1px 24px;border: 1px solid #333;background-color: #999;background-image: url(images/l1_down.gif);}

#navlist a:link, #navlist a:visited{color: #EEE;text-decoration: none;}

#navlist a:hover{border: 1px solid #333;background-color: #FF6600;background-image: url(images/l1_over.gif);color: #333;}

#active a:link, #active a:visited, #active a:hover{border: 1px solid #333;background-color: #FF6600;background-image: url(images/l1_over.gif);color: #333;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.8.Kalsey CSS tabsItem oneItem twoItem threeItem fourItem fiveAuthor: Adam KalseyComments: FromKalsey CSS tabs.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{border-bottom: 1px solid #ccc;margin: 0;padding-bottom: 19px;padding-left: 10px;}

#navlist ul, #navlist li{display: inline;list-style-type: none;margin: 0;padding: 0;}

#navlist a:link, #navlist a:visited{background: #E8EBF0;border: 1px solid #ccc;color: #666;float: left;font-size: small;font-weight: normal;line-height: 14px;margin-right: 8px;padding: 2px 10px 2px 10px;text-decoration: none;}

#navlist a:link#current, #navlist a:visited#current{background: #fff;border-bottom: 1px solid #fff;color: #000;}

#navlist a:hover { color: #f00; }

body.section-1 #navlist li#nav-1 a,body.section-2 #navlist li#nav-2 a,body.section-3 #navlist li#nav-3 a,body.section-4 #navlist li#nav-4 a{background: #fff;border-bottom: 1px solid #fff;color: #000;}

#navlist #subnav-1,#navlist #subnav-2,#navlist #subnav-3,#navlist #subnav-4{display: none;width: 90%;}

body.section-1 #navlist ul#subnav-1,body.section-2 #navlist ul#subnav-2,body.section-3 #navlist ul#subnav-3,body.section-4 #navlist ul#subnav-4{display: inline;left: 10px;position: absolute;top: 95px;}

body.section-1 #navlist ul#subnav-1 a,body.section-2 #navlist ul#subnav-2 a,body.section-3 #navlist ul#subnav-3 a,body.section-4 #navlist ul#subnav-4 a{background: #fff;border: none;border-left: 1px solid #ccc;color: #999;font-size: smaller;font-weight: bold;line-height: 10px;margin-right: 4px;padding: 2px 10px 2px 10px;text-decoration: none;}

#navlist ul a:hover { color: #f00 !important; }

#contents{background: #fff;border: 1px solid #ccc;border-top: none;clear: both;margin: 0px;padding: 15px;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.9.Jeffrey Zeldman's DWWS menuItem oneItem twoItem threeItem fourItem fiveAuthor: Jeffrey ZeldmanComment: FromJeffrey Zeldman's DWWS menu.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin: 10px 0 0 30px;padding: 0;height: 20px;}

#navcontainer ul{border: 0;margin: 0;padding: 0;list-style-type: none;text-align: center;}

#navcontainer ul li{display: block;float: left;text-align: center;padding: 0;margin: 0;}

#navcontainer ul li a{background: #fff;width: 78px;height: 18px;border-top: 1px solid #f5d7b4;border-left: 1px solid #f5d7b4;border-bottom: 1px solid #f5d7b4;border-right: none;padding: 0;margin: 0 0 10px 0;color: #f5d7b4;text-decoration: none;display: block;text-align: center;font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;}

#navcontainer ul li a:hover{color: #930;background: #f5d7b4;}

#navcontainer a:active{background: #c60;color: #fff;}

#navcontainer li#active a{background: #c60;border: 1px solid #c60;color: #fff;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.10.Clagnut CSS TabsItem oneItem twoItem threeItem fourItem fiveAuthor: Richard RutterComment: FromClagnut CSS Tabs.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin: 0;padding: 0 0 0 12px;}

#navcontainer UL{list-style: none;margin: 0;padding: 0;border: none;}

#navcontainer LI{display: block;margin: 0;padding: 0;float: left;width: auto;}

#navcontainer A{color: #444;display: block;width: auto;text-decoration: none;background: #DDDDDD;margin: 0;padding: 2px 10px;border-left: 1px solid #fff;border-top: 1px solid #fff;border-right: 1px solid #aaa;}

#navcontainer A:hover, #navcontainer A:active { background: #BBBBBB; }

#navcontainer A.active:link, #navcontainer A.active:visited{position: relative;z-index: 102;background: #BBBBBB;font-weight: bold;}

#subnav{position: relative;top: -1px;z-index: 101;margin: 0;padding: 0px 0 3px 0;background: #BBBBBB;border-top: 1px solid #fff;border-bottom: 1px solid #aaa;}

#subnav UL{list-style: none;margin: 1px 0 0px 13px;padding: 0px;border-right: 1px solid #fff;border-left: 1px solid #aaa;}

#subnav LI{position: relative;z-index: 102;display: block;margin: 0;padding: 0;float: left;width: auto;}

#subnav A{color: #fff;display: block;width: auto;text-decoration: none;margin: 0;padding: 2px 12px 2px 10px;}

#subnav A:hover, #subnav A:active { color: #444; }#subnav A.active:link, #subnav A.active:visited { color: #444; }#subnav BR, #navcontainer BR { clear: both; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.11.Unraveled CSS TabsItem oneItem twoItem threeItem fourItem fiveAuthor: Joshua KaufmanComment: FromUnraveled CSS Tabs.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSul#navlist{font: bold 11px verdana, arial, sans-serif;list-style-type: none;padding-bottom: 24px;border-bottom: 1px solid #6c6;margin: 0;}

ul#navlist li{float: left;height: 21px;background-color: #cfc;margin: 2px 2px 0 2px;border: 1px solid #6c6;}

ul#navlist li#active{border-bottom: 1px solid #fff;background-color: #fff;}

li#active a { color: #000; }

#navlist a{float: left;display: block;color: #666;text-decoration: none;padding: 4px;}

#navlist a:hover { background: #fff; }

NOTE"The tabs will work in either Opera 7/Win or IE 5.2/Mac but not both browsers at the same time. In the current demo, they work in IE 5.2/Mac. To add Opera 7/Win compatibility (and remove IE 5.2/Mac compatibility), remove the float property for the selector #tabnav a. Alternatively, you can apply Mark Pilgrim's *7 Hack to the float property, and the tabs should work in both browsers simultaneously."

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.12Dive into Mark Pure CSS TabsItem oneItem twoItem threeItem fourItem fiveAuthor: Mark PilgrimComments: FromDive into Mark Pure CSS Tabs.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{display: block;list-style: none outside;padding: 0;margin: 0 0 0 10px;font-family: Verdana, sans-serif;font-size: x-small;}

#navcontainer li{padding: 0;margin: 0 4px 0 0;border-top: 1px solid #cecbc6;border-right: 1px solid #cecbc6;border-left: 1px solid #cecbc6;background-color: #000066;color: #ffffff;font-weight: bold;/* the next 4 lines are magic */display: block;float: left;position: relative;top: -1.32em;}

#navcontainer a:link,#navcontainer a:visited{background-color: #000066;color: #ffffff;text-decoration: none;padding-left: 1em;padding-right: 1em;}

#navcontainer a:hover{background-color: #cecbc6;color: #000066;}

#navcontainerclear { display: none; }

html>body #navcontainerclear{display: block;clear: both;}

#navcontainer li#active a{background-color: #fff;color: #000066;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.13.Horizontal Buttonsitem oneitem twoitem threeitem fouritem fiveAuthor:Claire CampbellComments: Use of contrasting borders and a:hover makes it look like "push down" buttons. Adapted from myvertical list.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{background: #f0e7d7;margin: 0 auto;padding: 1em 0 0 0;font-family: georgia, serif;text-transform: lowercase;}

/* to stretch the container div to contain floated list */#navcontainer:after{content: ".";display: block;line-height: 1px;font-size: 1px;clear: both;}

ul#navlist{list-style: none;padding: 0;margin: 0 auto;width: 80%;font-size: 0.8em;}

ul#navlist li{display: block;float: left;width: 15%;margin: 0;padding: 0;}

ul#navlist li a{display: block;width: 100%;padding: 0.5em;border-width: 1px;border-color: #ffe #aaab9c #ccc #fff;border-style: solid;color: #777;text-decoration: none;background: #f7f2ea;}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a{background: #f0e7d7;color: #800000;}

ul#navlist li a:hover, ul#navlist li#active a:hover{color: #800000;background: transparent;border-color: #aaab9c #fff #fff #ccc;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.13.Webfroot Horizontal NavBarItem oneItem twoItem threeItem fourItem fiveAuthor:Brett TaylorComments: To create the roll-over effect I used a border color which matched the background to prevent unwanted movement. On roll-over, the border changes to blackBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{border-bottom: 1px solid #FFCC66;border-top: 1px solid #FFCC66;margin: 0px;margin-bottom: 30px;padding: 0px;padding-left: 180px;background-color: #FF9900;font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;padding-bottom: 3px;padding-top: 3px;}

#navlist a, #navlist a:link, #navlist a:visited{border: 1px solid #FF9900;padding: 1px;padding-left: 0.5em;padding-right: 0.5em;color: #000000;font-weight: bold;text-decoration: none;}

#navlist a:hover, #navlist a:active, #navlist a:focus{border: 1px solid #000000;padding: 1px;padding-left: 0.5em;padding-right: 0.5em;text-decoration: none;}

#navlist li{padding-right: 1px;display: inline;font-size: 0.6em;}

#navlist ul{margin: 0px;padding: 0px;}

#navlist #active a { background-color: #FFCC66; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.14.ZDnet EmulationItem oneItem twoItem threeItem fourItem fiveAuthor:Terence OrdonaComments: Emulation of the tabs onwww.zdnet.comBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{background: #369;border-top: 1px solid #9CC;font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;}

#navlist{list-style: none outside none;margin: 0;padding: 0;}

@media all {#navlist {text-align: center}}

#navlist li{bottom: 11px;display: inline;line-height: 1.2em;margin: 0;padding: 0;position: relative;}

html>body #navlist li{background: #000;margin: 0 3px 0 0;padding: 4px 0px 4px 0;}

#navlist a, #navlist a:link, #navlist a:visited{background: #900;border: 1px solid #FFF;bottom: 2px;color: #FFF;cursor: pointer;display: inline;height: 1em;margin: 0;padding: 3px 5px 3px 5px;position: relative;right: 2px;text-decoration: none;}

#navlist a:hover{background: #C00;bottom: 1px;color: #FFF;position: relative;right: 1px;}

#navlist a:active{background: #999;bottom: 0px;color: #FFF;position: relative;right: 0px;}

#navlist li#active{background: #369;bottom: 13px;display: inline;margin: 0 3px 0 0;padding: 0;position: relative;}

html>body #navlist li#active{background: #000;margin: 0 4px 0 4px;}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover{background: #369;border-bottom: none;border-left: 1px solid #9CC;border-right: 1px solid #9CC;border-top: 1px solid #9CC;bottom: 0;color: #FFF;cursor: text;margin: 0;padding: 2px 5px 0 5px;position: relative;right: 0;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.15.Centred list navbarItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComments: There have been a few requests for a centred list navbar, so here it is. The key is "text-align: center" applied to the UL element.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{padding: .2em 0;margin: 0;list-style-type: none;background-color: #036;color: #FFF;width: 100%;font: normal 90% arial, helvetica, sans-serif;text-align: center;}

li { display: inline; }

li a{text-decoration: none;background-color: #036;color: #FFF;padding: .2em 1em;border-right: 1px solid #fff;}

li a:hover{background-color: #369;color: #fff;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.16.Image SwapItem oneItem twoItem threeItem fourItem fiveAuthor:Josh SiegelComments: This list involves a background image swapBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{margin: 0;padding-top: 20px;list-style-type: none;text-align: center;font-family: arial;font-size: 14px;height: 82px;}

#navcontainer ul li { display: inline; }

#navcontainer ul li a{text-decoration: none;padding-top: 25px;padding-right: 55px;padding-bottom: 35px;padding-left: 50px;color: #000;background: url(http://www.intwist.com/myPosts/lists/bk.jpg) top left no-repeat;width: 146px;height: 82px;}

#navcontainer ul li a:hover{color: #fff;background-position: 0 -82px;width: 146px;height: 82px;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.17.Seth's horizontal listItem oneItem twoItem threeItem fourItem fiveAuthor:Seth GundersonComments: Depending on the font you use, you may need to adjust the negative margin-top inside #navcontainer ul. I made no use of the #navlist or #active, but put them there for consistency.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin-left: auto;margin-right: auto;margin-bottom: 40px;border-top: 1px solid #999;z-index: 1;}

#navcontainer ul{list-style-type: none;text-align: center;margin-top: -8px;padding: 0;position: relative;z-index: 2;}

#navcontainer li{display: inline;text-align: center;margin: 0 5px;}

#navcontainer li a{padding: 1px 7px;color: #666;background-color: #fff;border: 1px solid #ccc;text-decoration: none;}

#navcontainer li a:hover{color: #000;border: 1px solid #666;border-top: 2px solid #666;border-bottom: 2px solid #666;}

#navcontainer li a#current{color: #000;border: 1px solid #666;border-top: 2px solid #666;border-bottom: 2px solid #666;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.18.Float your boatItem oneItem twoItem threeItem fourItem fiveAuthor:Marc LiddellComments: "Floats the active tab to the right while keeping the rest in a black grid thing. Turns blue/white on hover."Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{border: 3px solid #222;padding: 0 0 0 20px;margin: 0;background-color: #ACF;font-family: verdana,sans-serif;font-size: 12px;font-weight: bold;}

#navlist li{display: inline;list-style: none;padding: 0;margin: 0;}

#navlist #active{float: right;margin-right: 10px;}

#navlist li a{text-decoration: none;border: 3px solid #000;padding: 0 8px 1px 8px;margin: 0 2px;background-color: #FFF;color: #000;}

* html #navlist li a { padding: 0 8px; }

#navlist li a:hover{background-color: #26A;color: #FFF;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.19.

BrickItem oneItem twoItem threeItem fourItem fiveAuthor:Allen Day"My last list was technically/visually more impressive but I like simplicity, versatility and blockiness of this one"Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSdiv#navcontainer{font-family: arial;font-weight: bold;background: #642;position: absolute;right: 0px;margin: 0;padding: 10px;border: 0;}

div#navcontainer ul{display: inline;margin: 0;padding: 0;list-style: none;border: solid 1px #642;}

div#navcontainer h2{border: solid 1px #642;padding: 4px;text-align: center;}

div#navcontainer ul li{display: inline;margin: 0;}

div#navcontainer ul li a{color: #a10;background: #ffc;margin: 0;padding: 2px 5px 2px 5px;text-decoration: none;}

div#navcontainer ul li a:hover{background: #e8db6f;border-bottom: solid 9px #ffc;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.20.Contrast : smhillItem oneItem twoItem threeItem fourItem fiveAuthor:S.M.HillComments: "I like to try to use contrast as a design element, so I made a nav bar with several examples of contrast. (size, quality, case, etc...)"Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navlist{background: #FFCC00;margin: 0px;padding: 0px;height: 16px;border: 1px solid #FFEA93;}

#navlist li{display: inline;float: left;margin: 0px;padding: 0px;list-style: none;}

#navlist li a:link, #navlist li a:visited{font: bold 24px/18px Georgia, "Times New Roman", Times, serif;color: #FFEA93;text-decoration: none;display: block;padding: 0px 0px 0px 3px;margin: 0px;height: 16px;overflow: hidden;width: 135px;text-align: center;}

#navlist li a#current{color: #FFFFFF;font-style: italic;}

#navlist li a:hover, #navlist li a:active{color: #FFFFFF;text-decoration: none;background: #CC3333;text-align: left;text-transform: uppercase;font: bold normal 10px/16px "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.21.Alteration to Rollover Horizontal List NavbarItem oneItem twoItem threeItem fourItem fiveAuthor:Keith BurginBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{width: 100%;float: left;background-color: #426208;}

#navcontainer ul { padding: 0; }#navcontainer ul li { display: inline; }

#navcontainer ul{margin: 0;padding: 0 0 0 7%;color: #FFFFFF;font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;font-size: .65em;letter-spacing: 2px;font-weight: bold;}

#navcontainer ul li a{padding: 0.2em 12px;background-color: #426208;color: #FFFFFF;text-decoration: none;float: left;border-right: 1px solid #94B473;}

#navcontainer ul li a:hover{background-color: #7B9D25;color: #FFFFFF;}

#navlist li a:hover, #navlist li a:active{color: #FFFFFF;text-decoration: none;background: #CC3333;text-align: left;text-transform: uppercase;font: bold normal 10px/16px "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.22.SuperfluousBanter 2003Item oneItem twoItem threeItem fourItem fiveAuthor:Dan RubinComments: This is the simple list navigation I've used on SB for a while now (in the original Green; right now the site is still in "winter" mode). The new version of SB, due within the next month or two, will feature my take on CSS tabs (though it might be a little too complex for your markup sample) -- I'll take a stab at submitting that around the time the redesign launches.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer { /* none needed */ }

ul#navlist{margin: 0;padding: 0;list-style-type: none;white-space: nowrap;}

ul#navlist li{float: left;font-family: verdana, arial, sans-serif;font-size: 9px;font-weight: bold;margin: 0;padding: 5px 0 4px 0;background-color: #eef4f1;border-top: 1px solid #e0ede9;border-bottom: 1px solid #e0ede9;}

#navlist a, #navlist a:link{margin: 0;padding: 5px 9px 4px 9px;color: #95bbae;border-right: 1px dashed #d1e3db;text-decoration: none;}

ul#navlist li#active{color: #95bbae;background-color: #deebe5;}

#navlist a:hover{color: #74a893;background-color: #d1e3db;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.23.Horizontal Bullet On HoverITEM ONEITEM TWOITEM THREEITEM FOURITEM FIVEAuthor:HekimaComments: This is a pretty simple horizontal menu that displays a bullet image to the left of the menu items on hover. Simplicity isn't always a bad thing, you know.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin-left: auto;margin-right: auto;margin-top: 20px;margin-bottom: 10px;}

#navlist li{display: inline;padding-bottom: 14px;padding-left: 20px;background-repeat: no-repeat;}

#navlist a{padding-left: 20px;padding-bottom: 14px;font-weight: bold;text-transform: uppercase;text-decoration: none;}

#navlist a:link, #navlist a:visited{padding-left: 20px;color: red;background: url(http://hekima.lionking.org/randomness/arrowbullet.gif);background-position: 0 -28px;background-repeat: no-repeat;}

#navlist a:hover{color: black;padding-left: 20px;background: url(http://hekima.lionking.org/randomness/arrowbullet.gif);background-repeat: no-repeat;background-position: 0 -14px;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.24.Centred List Navbar UpdatedItem oneItem twoItem threeItem fourItem fiveAuthor:Chris HesterComments: I found your Centred List Navbar didn't quite work in Opera 7.54. On hover, the lists were showing a gap at one side. So I've debugged it and retested in recent browsers until it worked. I found a few ways to improve it on the way. Firstly, for Opera to behave, the HTML code MUST NOT HAVE ANY LINEBREAKS! Otherwise a gap between each list will always appear that CSS cannot seem to get rid of! I found specific padding was required on both the LI and the hyperlink inside it. These both had to have matching padding (makes sense) though oddly not for the left and the right on the LI! Adding padding to the UL causes Opera to move it down a line! I had to add a zero top margin to cure this. An extra left border was also needed for the first LI to match the other ones. Firefox 0.9.3 showed an odd behaviour where the UL was 1 pixel deeper than the LI, leaving a blue line across the bottom. I found it was down to line-height, so I added a value to correct this on the UL.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer ul{text-align: center;padding-bottom: 5px;padding-top: 5px;padding-left: 0;margin-top: 0;/* cancels gap caused by top padding in Opera 7.54 */margin-left: 0;background-color: #036;color: white;width: 100%;font-family: Arial,Helvetica,sans-serif;line-height: 18px;/* fixes Firefox 0.9.3 */}

#navcontainer ul li{display: inline;padding-left: 0;padding-right: 0;padding-bottom: 5px;/* matches link padding except for left and right */padding-top: 5px;}

#navcontainer ul li a{padding-left: 10px;padding-right: 10px;padding-bottom: 5px;padding-top: 5px;color: white;text-decoration: none;border-right: 1px solid #fff;}

#navcontainer ul li a:hover{background-color: #369;color: white;}

#navcontainer #active { border-left: 1px solid #fff; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.25.Tomek Garbiak's listItem oneItem twoItem threeItem fourItem fiveAuthor: Tomek GarbiakBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin: 0;padding: 0;height: 22px;font: 11px Verdana, sans-serif;width: 100%;border-bottom: 1px solid #bbb;list-style-type: none;background: #fff;}

#navlist li{float: left;margin: 0;padding: 0;width: auto;display: block;}

#navlist li a, #navlist li a:link{background: #fff;color: #555;text-decoration: none;padding: 3px 5px 3px 5px;display: block;}

#navlist li a:hover{color: #039;border-bottom: 3px solid #bbb;cursor: pointer;background: #eee;}

#navlist li a#current, #navlist li a#current:link{color: #000;cursor: default;font-weight: bold;border-bottom: 3px solid #999;}

#navlist li a#current:hover{border-bottom: 3px solid #f90;background: #eee;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.26.Reflowing Folder Image Rollover NavItem oneItem twoItem threeItem fourItem fiveAuthor:Luke DornyComments: The trick to this one was knowing what your final width and height was going to be and adjusting for the padding which pushed the folder names into a viewable area of the png. Applications of this UI are open to your imagination.Solves:1. if this is area needs to be expandable to X amount of folders, it can do that within a DIV.2. a problem i discovered with a mixture of padding on the A and a set width or height of the LI or ADirections:1. Determine what width and height you want2. Create pic accordingly3. Subtract the padding from the total width and height accordingly (Ex: if you want 100px and a padding of 15px, then set your size at 85px)Problems:1. PNG support. I needed to have transparency because of where this nav is integrated into our intranet. Use the hack de jour, or change it to GIF or JPG for your application.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin: 0px;padding: 0px;}

#navcontainer ul{margin: 0px;padding: 0px;list-style-type: none;text-align: left;}

#navcontainer ul li { float: left; }

#navcontainer ul li a{text-decoration: none;background: url(http://butterlabel.com/transfer/butterlist/images/folderOFF.png) no-repeat top left;font-size: 10px/12px;float: left;margin: 0px;height: 67px;width: 75px;padding-top: 13px;padding-right: 15px;padding-bottom: 0px;padding-left: 10px;}

#navcontainer li a:hover{background: url(http://butterlabel.com/transfer/butterlist/images/folderON.png) no-repeat left top;color: #000000;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.27.Copongcopong's Under TabsItem oneItem twoItem threeItem fourItem fiveAuthor:CopongcopongComments: Works best as an "under tab" where in information is over the tabs. This uses the border-size and padding trick so that the tabs does not "jerk" when hover. See the code for details.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{padding: 0;background: #ccc;height: 20px;}

#navlist{margin: 0px;padding: 0px 0px;display: block;}

#navlist li{list-style: none;float: left;}

#navcontainer a, #navlist li.extend{margin: 0px;display: block;border-top: 1px solid #333;padding: 1px 6px;text-decoration: none;background: #ccc;font: normal 12px verdana, serif;color: #000;}

#navcontainer a:hover, #navcontainer a#current{padding: 1px 5px;background: #FAFAFA;border-right: 1px solid #333;border-left: 1px solid #333;border-top: 1px solid #FAFAFA;border-bottom: 1px solid #333;color: #000;}

#navcontainer a#current{background: #F6F6F6;border-top: 1px solid #F6F6F6;font-weight: bold;}

#navcontainer li#active{border-right: 2px solid #828282;border-bottom: 2px solid #828282;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.28.

Central Horizontal BoxesItem oneItem twoItem threeItem fourItem fiveAuthor:Rick DyerComments: This is a variation onCentred list navbarso it is assumed it works in most of the required browsers. The only caveate is that css validation fails the negative margin-left value I have used to close up the space to the left of the list item that shows on hover. Despite this validation failure it works OK in IE6, Netscape 7 and FireFox.Update: A solution can be found atAndrea Lazzarotto's centered list(Italian).Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSSdiv#navcontainer{background-color: #1F00CA;border-top: solid 1px #FFFFFF;border-bottom: solid 1px #FFFFFF;}

div#navcontainer ul{font-family: Arial, Helvetica, sans-serif;font-weight: bold;color: white;text-align: center;margin: 0;padding-bottom: 5px;padding-top: 5px;}

div#navcontainer ul li{display: inline;margin-left: -4px;}

div#navcontainer ul li a{padding: 5px 10px 5px 10px;color: white;text-decoration: none;border-right: 1px solid #fff;}

div#navcontainer ul li a:hover{background-color: #16008D;color: white;}

#active a { border-left: 1px solid #fff; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.29.Fat Erik 5s Simple Pipe ListItem oneItem twoItem threeItem fourItem fiveAuthor: Fat Erik 5Comments: Horizontal pipe list, items separated with a pipe ("|"), using 'before' and 'first-child' pseudo selectors. Includes a workaround for IE browsers using border and negative margin values. In IE the LI's are shifted to the left using a negative margin value, this hides the first pipe.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer { margin-left: 30px; }

/*Fat Erik's Pipelist*/#navlist{list-style: none;padding: 0;margin: 0;}

#navlist li{display: inline;padding: 0;margin: 0;}

#navlist li:before { content: "| "; }#navlist li:first-child:before { content: ""; }

/*IE workaround*//*All IE browsers*/* html #navlist li{border-left: 1px solid black;padding: 0 0.4em 0 0.4em;margin: 0 0.4em 0 -0.4em;}

/*Win IE browsers - hide from Mac IE\*/* html #navlist { height: 1%; }

* html #navlist li{display: block;float: left;}

/*End hide*//*Mac IE 5*/* html #navlist li:first-child { border-left: 0; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.30.Fat Erik's breadcrumbsItem oneItem twoItem threeItem fourItem fiveAuthor: Fat ErikComment: Horizontal breadcrumbs navigation list, items separated with a ">", using 'before' and 'first-child' pseudo selectors. Includes a workaround for IE browsers using a background image and negative margin values. In IE the LI's are shifted to the left using a negative margin value, this hides the first ">".Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer { margin-left: 30px; }

/*Fat Erik's Breadcrumbs*/#navlist{list-style: none;padding: 0;margin: 0;}

#navlist li{display: inline;padding: 0;margin: 0;}

#navlist li:before { content: "> "; }#navlist li:first-child:before { content: ""; }

/*IE workaround*//*All IE browsers*/* html #navlist li{background-image: url("images/gt.gif");background-repeat: no-repeat;background-position: 0 50%;padding: 0 0.5em 0 1em;margin: 0 1em 0 -1em;}

/*Win IE browsers - hide from Mac IE\*/* html #navlist { height: 1%; }

* html #navlist li{display: block;float: left;}

/*End hide*//*Mac IE 5*/* html #navlist li:first-child { background-image: none; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.31.CheapOsxItem oneItem twoItem threeItem fourItem fiveAuthor:Chris HeilmannComments: Just a quick shot at an OSX Dock Style list.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{font-family: Arial,Sans-Serif;margin: 0 auto;width: 70%;border-bottom: 1px solid #ddd;}

#navlist{width: 60%;text-align: center;margin: 0 auto;padding: 0;text-indent: 0;list-style-type: none;}

#navlist li{padding: 0;margin: 0;text-indent: 0;display: inline;}

#navlist li a{letter-spacing: -1px;text-decoration: none;color: #ccc;font-size: 1em;padding: 0 2px;border-top: .5em solid #eee;}

#navlist li a:hover,#navlist a#current{color: #333;border-top: none;font-size: 1.5em;}

#navlist a#current { color: #fc6; }

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.32.Sleek vertical boxesItem oneItem twoItem threeItem fourItem fiveAuthor: Ben PierceComments: This job would be easy if all browsers used the same rules. This one works in IE 6, Netscape 7.2, Moz, Opera, etc. I couldn't tell without putting it online, but the active key may stick on item 1 in IE.I noticed that a lot of lists didn't bother to make active and hover work on Item 1, but I wanted to give it a go.Using CSS line-height rather than padding around the links makes the vertical (height) work on the navcontainer. Otherwise, it's a train wreck, especially on IE.Thanks to Claire (Suzy) and Terence Ordana lists for unspoken direction.Browser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin: 0;padding: 5px 0 7px 5px;width: 50%;line-height: 1.75;background-color: #669;font-family: Arial, Helvetica, sans-serif;font-size: 90%;}

ul#navlist{display: inline;list-style: none;}

ul#navlist li{float: left;width: auto;margin-right: 5px;border: 2px solid #fff;background-color: #ddd;}

ul#navlist li a{padding: 0 10px;line-height: 1.75;text-decoration: none;color: #03C;}

ul#navlist li a#current{background-color: #669;color: #fff;}

ul#navlist li a:hover, ul#navlist a#current:hover{background-color: #777;color: #fff;}

ul#navlist li a:active, ul#navlist li#active a#current:active{background-color: #f63;color: #fff;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.33.

Pipe dreamItem oneItem twoItem threeItem fourItem fiveAuthor: Michael BarrishComments:See comments hereBrowser support chartHTML

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five

CSS#navcontainer{margin-bottom: 1em;overflow: hidden;width: 460px;}

#navlist{list-style-type: none;margin: 0;padding: 0;}

#navlist li{border-left: 1px solid #000;float: left;line-height: 1.1em;margin: 0 .5em 0 -.5em;padding: 0 .5em 0 .5em;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

Anton Andreasson's Big Boxes

Author: Anton AndreassonComment: Changing the width of the list items results in different forms of grids. Note that IE5 for Mac may produce some strange padding-right-like effects.Browser support chart#navlist { margin: 0; }

#navlist li{float: left;width: 50%;list-style-type: none;text-align: center;}

#navlist li a{display: block;padding: 2em;background-color: #ccc;color: #333;font: normal bold 36px/40px Verdana,Arial,Helvetica,sans-serif;text-decoration: none;}

#navlist li a:hover{background-color: #666;color: #fff;}

ABOUT THE CODESome lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.Adjacent-Sibling selector listItem oneItem twoItem threeItem fourItem fiveAuthor: Russ WeakleyComment: Adjacent-Sibling selectors will select an element which immediately follows another element. Using Adjacent-Siblings you can actuallyswap the order of list items. This method is not supported by Win/IE5 or Win/IE6 (two of the most widely used browsers). In fact, both browsers render this list so poorly that it is not recommended for general use at this stage.Browser support chart#navlist{list-style-type: none;padding: 0;margin: 0 0 0 30px;width: 11em;height: 10em;position: relative;}

#navlist a{text-decoration: none;display: block;width: 10em;height: 1em;padding: .2em;background: #ccc;color: #333;border: 1px solid #aaa;}

#navlist a:hover{background: #333;color: #fff;border: 1px solid #000;}

#navlist li{position: absolute;left: 0;top: 8em;text-decoration: none;}

#navlist li+li{position: absolute;left: 0;top: 6em;}

#navlist li+li+li{position: absolute;left: 0;top: 4em;}

#navlist li+li+li+li{position: absolute;left: 0;top: 2em;}

#navlist li+li+li+li+li{position: absolute;left: 0;top: 0;}


United States Constitution

Do you admire Leonardo da Vinci?

Fortran

18 Tricks to Teach Your Body

Heidegger Kritik

Rubik's cube solution

xCDC14a

The Dutch Republic In International Trade

Plato - Symposium

European Colinization of Latin America

Life Is Just A Dream - Or Is It?

Chapter 24

I Am a Holocaust Denier and I Am Unafraid

Chapter-01

Improve the Color Quality Of Your Monitor

Disclaimer

Aesops Fables

Jan Van Eyck and the Man In A Red Turban

Effective Parenting: Establishing Boundaries

Algorithms

The Best American Humorous Short Stories

Star Wars Original Trilogy Trivia (Episodes IV-VI)

How Computer Monitors Work

Explore The Levels of Creation

Steve Jobs' Commencement Speech at Stanford

Venture Capital

Who Killed God

Bhagavad Gita

Compressing And Decompressing Folders

The Last Carnival I Ever Saw

Oedipus The King: The Ideal Tragic Play

Keyboard Shortcuts for the Opera Browser for Mac OS X

Introduction to Six Sigma

Barclays1

Cakes Recipes