CSS & Round Corners: Making Accessible Menu Tabs
By Trenton Moss2004-06-27
And the right corner
|
|
We can only assign one background image to a tag so we need to make a new tag and assign an image to that. We can use:
<la href="#"><span>Home</span></a>
Now we just assign this background image (another one I made earlier) to the <span> and we're ready to go! We'll call this image "right-tab.gif"
a span
{
background: url("right-tab.gif") right top no-repeat;
}
This code means that every <span> tag within an <a> tag will have this image as its background. And the final result:
Perfect! So now you can... wait a minute, can you spot why it's not so perfect? That's right, we forgot to assign some padding to that <span> tag:
a span
{
background: url("right-tab.gif") right top no-repeat;
padding-right: 10px
}
Giving us:
Now that really is perfect! Resize the text again and see how it looks!
Tutorial Pages:
» CSS & Round Corners - The problem
» The solution
» Adding the left corner
» And the right corner
» The final touch
|
