For Your Lungs Only » web accessiblity http://www.foryourlungsonly.net Everything you wanted to know about web development, espresso, typography, nicotine, user interface design, whiskey, javascript, php, cascading style sheets, css hacks, beer, prototype, jquery, mysql, usability and accessiblity (but were afraid to ask) Mon, 14 Jun 2010 22:08:30 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 CL, CSS Navigation and How to Waste an Afternoon http://www.foryourlungsonly.net/2007/05/31/cl-css-navigation-and-how-to-waste-an-afternoon/ http://www.foryourlungsonly.net/2007/05/31/cl-css-navigation-and-how-to-waste-an-afternoon/#comments Thu, 31 May 2007 21:22:23 +0000 Jonathan Harriot http://www.foryourlungsonly.net/words/2007/05/31/cl-css-navigation-and-how-to-waste-an-afternoon/ Finished my workload by 10am so I have been putting around net killing time. This of course means I have been obsessively reading Craigslist. Here are some of my favorite findings for the day:

Pushed out two comps one I played around with floating left the navigation at different heights and floating right an accessible search right under the navigation. There’s even room to add image replacement for hover effects on the navbar but I’m pretty sure the more traditional layout will win out with the client. So have at it and view the one I played with that won’t be chosen. Also, here is the standard layout that I haven’t coded yet as it’s fairly straight forward.

If you are having any CSS issues feel free to contact me and I might help you out and write something about the issue/solution on here. I was debating writing something about floats, clears, alignment, fluid layouts and lucky charms. The last bit there means I need lunch or a big bag of marshmallows.

Technorati Profile

]]> http://www.foryourlungsonly.net/2007/05/31/cl-css-navigation-and-how-to-waste-an-afternoon/feed/ 0 skip to content http://www.foryourlungsonly.net/2007/04/29/skip-to-content/ http://www.foryourlungsonly.net/2007/04/29/skip-to-content/#comments Sun, 29 Apr 2007 21:26:30 +0000 Jonathan Harriot http://www.foryourlungsonly.net/words/2007/04/29/skip-to-content/ Amy asked for my assistance in creating a compliant “skip to content” bar for a project we are currently working on. So I decided to make it a bit more styled and pretty. eventually I may even make the skip to content fade in.

Here it goes:

the css

a#skipAhead {
	display: inline; position:absolute; top:0; left:0;
	width:10%; z-index:1000;
	filter:alpha(opacity=0); -moz-opacity:0.0; opacity:0.0;
}
/* accesibility for skipper aka skipAhead from comments by
patrick h. lauke aka redux@splintered.co.uk */
a#skipAhead:focus,a#skipAhead:hover,a#skipAhead:active {
	filter:alpha(opacity=0.85); -moz-opacity:0.85; opacity:0.85;
	border-bottom:1px solid #023845; border-right:1px solid #023845; background:#0E4E70;
	color:#fff; font-weight: bold; text-align: center; padding: 5px;
}

the html


[a href="#yourMom" title="Skip to the content" id="skipAhead"]skip to content[/a]

[a name="yourMom" title="yourMom"][/a]

some info

by placing the triggering anchor tag right after the body tag as this is a feature for accessibility we allow the user to skip flashy navigation and other page elements and get to the guts of the page.

updated

Many thanks to Patrick H. Lauke

]]> http://www.foryourlungsonly.net/2007/04/29/skip-to-content/feed/ 0