making odd shaped css links

http://www.hansman.org

how can i make each link on top that oval type shaped link in css?

 

You can't really do that using css, not on an angle like that anyway, you can only really do it by using images or Flash.

 

I could probably pull that off using kind of an unusual trick - problem is it's a LOT of code.

What you do is make the anchors wrap a bunch of empty tags like say B. You then absolute position those B tags on the page as a staggered 'staircase' type effect over your image.

It can be done, but it's damned ugly. Something like:

<a href="#" class="staggerLink" title="home">
	<span>Home</span>
	<b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b>
	</b><b></b></b></b></b><b></b></b></b></b><b></b></b></b></b><b></b></b></b>
</a>

Code (markup):

with the following CSS:

.staggerLink {
	position:relative;
	height:4px;
	width:30px;
	text-indent:-1000em;
	overflow:visible;
}

.staggerLink span {
	position:absolute;
	left:-1000em;
}

.staggerLink b {
	position:absolute;
	top:4px;
	left:-4px;
	width:30px;
	height:4px;
}

Code (markup):

This is completely untested, but should work or at least point you in the direction you want to go. The span is there so our link actually has TEXT in it, though due to the unusual shape we have to position it off-screen. This means there's no graceful degredation for this layout. (though I have some ideas on how that too could be implemented). Because all fifteen of those bold tags are nested, they all position down and to the left of the previous one, giving you your sloped area.

The 'other' solution is to use an image map. In this case you would likely be better off doing that - though it would be a complete accessability /FAIL/. Perhaps one could make a normal UL menu, use this stagger technique to place the characters of the menu, then put the image map over it.

Either way you are looking at using images to make the actual appearance.

 

They are a bit close together for this, but one could use normal square links too... although it would mean that the entire line thingie could not be clicked, but most people click sloppy (in the general area until they get a hand cursor or the clicking works... I see it every day).

I would probably always try that manner first.

 

I suggest this. It can handle almost anything.

http://alistapart.com/articles/sprites

 

You'll have to use an image map to accomplish this.

 

which you shouldn't do.

 

To add to HDaddy's article, there's this:
http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites
which I have used for this however the design at hansman.org has the stripes too close together to get it working right. But it can be a useful technique for similar situations.

Deathshadow's is the only one that isn't an image map yet allows a truly deformed clickable area-- where people can even click on the top of the stripe and get to the correct link.

 

I did something similar but simpler than your map with the triangle on here: http://www.yorkinterweb.com. I agree that deathshadow's example it the only way to get close to creating those awkward diagonal stripes in css. As Andrew Johnson said an image map would work but they're such an ugly way of doing things and, even though it's very easy to do with Dreamweaver for instance, it generates as much code as doing the nicer css version.

I still think for the all the trouble it would be, unless you're showing off uber skills, you may as well draw the menu in Flash and put a slightly less diagonal css image swap version underneath that for people who don't have flash installed.