FyberSearch   
456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar - Site Info
Submit Your Site To Top Search Engines
Just $14.99!
Find Out Which Search Engines Have Included Your Site
Just $8.99!
Learn To Rank Higher In Search Results
Just $24.99!
Instantly Create Targeted Ads With No Setup Fees
.50+ Cents/mo
Advertise On 225+ Search Engines
Just $4.00/mo
 
Site Info

Use this tool to learn about websites, specifically the one you just entered.

If you find some aspect of it inappropriate it is not our fault.

If you are the owner of this website: yes we are a real search engine, we do have a real web crawler called FyberSpider and you can block it if you feel the urge.


Is It Cataloged?

We are in the process of updating this tool. Until we are done just use our search results to check the inclusion status of your site.

Visit this website or continue reading for info about this site saved by the FyberSearch web crawler FyberSpider.


Date & Time Cataloged

June 26th, 2008 at 4:00am


Headers

Date: Thu, 26 Jun 2008 08:55:12 GMT
Server: Apache
X-Powered-By: PHP/5.2.4
Vary:
Accept-Encoding,User-Agent
Connection: close
Transfer-Encoding: chunked
Content-Type:
text/html; charset=iso-8859-1


Favicon Icon

  -   http://www.456bereastreet.com/favicon.ico


Page Title

Turning a list into a navigation bar | 456 Berea Street


Stripped Text Content

This is just a sample of the content found on this website. Please visit the website to read the entire page.


" Skip to main content Skip to secondary content (sidebar) Switch to high contrast layout Home About Archive Lab Reviews Contact Turning a list into a navigation bar I’ve received a couple of requests for a description of how I created the navigation bar that is currently used on this site. The CSS used isn’t all that advanced, and I hadn’t really thought about describing it in detail, but after being asked about it I decided to do a write-up. I’ve cleaned up the HTML and CSS slightly, so if you compare this to what is actually used on the site there will be some small differences. In case I have redesigned by the time you read this, check out the finished example to see what the menu looked like at the time of this writing. The HTML The markup is very simple. It’s an unordered list, with each link in a separate list item: <ul id="nav"> <li id="nav-home"><a href="#">Home</a></li> <li id="nav-about"><a href="#">About</a></li> <li id="nav-archive"><a href="#">Archive</a></li> <li id="nav-lab"><a href="#">Lab</a></li> <li id="nav-reviews"><a href="#">Reviews</a></li> <li id="nav-contact"><a href="#">Contact</a></li> </ul> View Step 1 . Why use a list? Because a navigation bar, or menu, is a list of links. The best (most semantic) way of marking up a list of links is to use a list element. Using a list also has the benefit of providing structure even if CSS is disabled. At this stage, with no CSS applied, the list will look like any old (normally bulleted) list, styled only by the browser’s defaults. I’ve given id attributes to the ul and li elements. The id attribute for the ul element is used by the CSS rules that style the entire list. The li elements have different id values to enable the use of CSS to highlight the currently selected link. This is done by specifying an id"
....
read entire page


Image Links Found on this Site

http://www.456bereastreet.com/i/berea_street.jpg
http://feeds.feedburner.com/~fc/456bereastreet?bg=fb9d3a&fg=000000&anim=0
http://ads.inthesidebar.com/84B12BAE
http://www.456bereastreet.com/i/dreamhost.gif
http://www.456bereastreet.com/i/r/073571245X.01.TZZZZZZZ.jpg
http://www.456bereastreet.com/i/r/beginning-css-web-development.jpg
http://www.456bereastreet.com/i/r/web-design-business-kit.jpg
http://www.456bereastreet.com/i/netrelations.gif
http://www.456bereastreet.com/i/kaffesnobben.gif
http://www.456bereastreet.com/i/dagens-recept.gif
http://www.456bereastreet.com/i/9rules.gif



Javascript Files Found on this Site

http://www.456bereastreet.com/js/global.js
http://www.456bereastreet.com/js/search.js
http://www.authenticjobs.com/js/jobs-json-r.js
http://www.456bereastreet.com/js/authentic-jobs.js
http://www.456bereastreet.com/js/pullquote.js
http://pagead2.googlesyndication.com/pagead/show_ads.js
http://pagead2.googlesyndication.com/pagead/show_ads.js



Links to Pages on Other Domain Names

Website Address     Anchor Text     Visit Site
http://css.developpez.com/cours/liste-navigation/     transformer une liste en barre de navigation     Visit Site
http://www.orderedlist.com/     steve smith     Visit Site
http://george.hotelling.net/     george hotelling     Visit Site
http://css.maxdesign.com.au/listamatic/     list a matic     Visit Site
http://www.dinamo-online.net     radu adam     Visit Site
http://www.dcinvest.ro/new/text.html     this     Visit Site
http://www.bnioldham.co.uk     jay dee     Visit Site
http://www.andreas-kalt.de/blog/     andreas     Visit Site
http://www.complexspiral.com/publications/containi ng-floats/     containing floats     Visit Site
http://www.w3.org/TR/CSS21/visuren.html     9 1 2 containing blocks     Visit Site
http://www.tpointd.com/     tarwin stroh spijer     Visit Site
http://www.tomwoolley.com     tom     Visit Site
http://www.nmpft.org.uk/bff/2005/     here     Visit Site
http://archivenyc.zsxonline.com     amir     Visit Site
http://spaces.msn.com/members/anotherblog/     fallfish     Visit Site
http://www.ursastwin.co.uk     gaz     Visit Site
http://www.brokenkode.com     khaled     Visit Site
http://www.actonit.org.uk     llanos     Visit Site
http://gadnux.jeefuu.net     gadnux     Visit Site
http://forceouvriererfs.blogspot.com     sonia     Visit Site
http://www.hovlandsdal.com     svein     Visit Site
http://www.quotezone1.com     steve     Visit Site
http://www.kk-production.com/testmenu.htm     kelvin     Visit Site
http://nicolekidman.fan-wire.com/     kelsey     Visit Site
http://inthesidebar.com/     ads by sidebarads     Visit Site
http://www.autisticcuckoo.net/     the autistic cuckoo     Visit Site
http://www.boxofchocolates.ca/     box of chocolates     Visit Site
http://www.clagnut.com/     clagnut     Visit Site
http://www.molly.com/     molly com     Visit Site
http://www.robertnyman.com/     roberts talk     Visit Site
http://www.standards-schmandards.com/     standards schmandards     Visit Site
http://green-beast.com/blog/     beast blog com     Visit Site
http://www.wait-till-i.com/     wait till i come     Visit Site
http://www.thepickards.co.uk/     thepickards     Visit Site
http://www.brucelawson.co.uk/     bruce lawsons personal site     Visit Site
http://www.amazon.com/gp/registry/21IDI9F3Z0HN1     amazon wish list     Visit Site
http://www.movabletype.org/     movable type     Visit Site



Links to Pages on the Same Domain Name

Website Address     Anchor Text     Visit Site
http://www.456bereastreet.com/styleswitch/     switch to high contrast layout     Visit Site
http://www.456bereastreet.com/about/     about     Visit Site
http://www.456bereastreet.com/archive/     archive     Visit Site
http://www.456bereastreet.com/lab/     lab     Visit Site
http://www.456bereastreet.com/reviews/     reviews     Visit Site
http://www.456bereastreet.com/contact/     contact     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step11 /     the finished example     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step01 /     view step 1     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step02 /     view step 2     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step03 /     view step 3     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step04 /     view step 4     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step05 /     view step 5     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step06 /     view step 6     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step07 /     view step 7     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step08 /     view step 8     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step09 /     view step 9     Visit Site
http://www.456bereastreet.com/lab/ul_navbar/step10 /     view step 10     Visit Site
http://www.456bereastreet.com/archive/200505/manip ulating_definition_lists/     manipulating definition lists     Visit Site
http://www.456bereastreet.com/archive/200803/desig ning_web_navigation_book_review/     designing web navigation book review     Visit Site
http://www.456bereastreet.com/archive/200506/stand ards_and_accessibility_navigation_lists/     standards and accessibility navigation lists     Visit Site
http://www.456bereastreet.com/archive/categories/c ss/     css     Visit Site
http://www.456bereastreet.com     roger johansson     Visit Site
http://www.456bereastreet.com/     roger johansson     Visit Site
http://www.456bereastreet.com/lab/csstabs/separate /     css tabs separate lists     Visit Site
http://www.456bereastreet.com/lab/csstabs/nested/     css tabs nested lists     Visit Site
http://www.456bereastreet.com/lab/teaser/one_image /     view demo     Visit Site
http://www.456bereastreet.com/archive/200501/the_p erils_of_using_xhtml_properly/     the perils of using xhtml properly     Visit Site
http://www.456bereastreet.com/archive/200509/hand_ coding/     hand coding     Visit Site
http://www.456bereastreet.com/archive/200509/css_2 1_selectors_part_1/     part 1     Visit Site
http://www.456bereastreet.com/archive/200510/css_2 1_selectors_part_2/     part 2     Visit Site
http://www.456bereastreet.com/archive/200510/css_2 1_selectors_part_3/     part 3     Visit Site
http://www.456bereastreet.com/archive/200609/trans parent_custom_corners_and_borders_version_2/     transparent custom corners and borders version 2     Visit Site
http://www.456bereastreet.com/archive/best-of/     more popular articles     Visit Site
http://www.456bereastreet.com/accessibility/     accessibility statement     Visit Site