Hi,
experimenting with menu tabs in CSS by creating round corner menu tabs, here is the link that i have used to help create them, have a problem with it though-
1. i want the user to be able to click anywhere within the tab to go to the selected page, at present you can only select the top left hand corner of the image - here is the code for what i have created:
<html>
<head>
<title>Test Page</title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
a
{
vertical-align: bottom;
color: #ffffff;
background: #4263D1 url("images/left-tab.jpg") left top no-repeat;
text-decoration: none;
padding-left: 45px;
height: 24px;
}
a span
{
background: url("images/right-tab.jpg") right top no-repeat;
padding-right: 45px;
height: 24px;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm"><span><b>Home</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"showroom.htm"><span><b>Showroom</b></b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.htm"><span><b>Specials</b></b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"projects.htm"><span><b>Projects</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm"><span><b>Order Info</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"shipping.htm"><span><b>Shipping</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"quotes.htm"><span><b>Quotes</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm"><span><b>Contact</b></span></a>
</body>
</html>
thanksTo start with use an unordered list to mark-up your menu then that will solve your other problem- more than one link = list of links semantically.ok done that with the following code:
<html>
<head>
<title>Test Page</title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
a
{
vertical-align: bottom;
color: #ffffff;
background: #4263D1 url("images/left-tab.jpg") left top no-repeat;
text-decoration: none;
padding-left: 45px;
height: 24px;
}
a span
{
background: url("images/right-tab.jpg") right top no-repeat;
padding-right: 45px;
height: 24px;
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
}
#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm"><span><b>Home</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"showroom.htm"><span><b>Showroom</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.htm"><span><b>Specials</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"projects.htm"><span><b>Projects</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm"><span><b>Order Info</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"shipping.htm"><span><b>Shipping</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quotes.htm"><span><b>Quotes</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm"><span><b>Contact</b></span></a></li>
</ul>
</body>
</html>sorry meant to say that the link still does not properly work, only in the top left hand corner stillhere, this works for you:
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
#navigation {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
display: block;
margin: 0;
padding: 0;
width: 7em;
border: solid #000 2px;
border-width: 0 2px 0 2px;
text-align: center;
background: #4263D1 url("images/left-tab.jpg") left top no-repeat;
color: #ffffff;
font-weight: bold;
text-decoration: none;
vertical-align: bottom;
}
#navigation a {
background: url("images/right-tab.jpg") right top no-repeat;
height: 24px;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"showroom.htm">Showroom</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.htm">Specials</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"projects.htm">Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm">Order Info</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"shipping.htm">Shipping</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quotes.htm">Quotes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm">Contact</a></li>
</ul>
</BODY>
</HTML>pawkys code should work i think the reason was there was no need for a span in your lists and this was causing the trouble.the links work, but the graphics dont, the reason the span tag is there is because without it you can only have 1 background image, and therefore without the span tag you have a round corner on one end and then a big square background.
so my question is can it be done with the span tag??Try removing the quotes from the URLs in the CSS; you usually only need URLs with specifying a font that has spaces in the name.
Also, can you upload the images for us? It's kind of hard to help out without being able to see it in action.
You shouldn't need the span — you already have two elements you can apply background images to: the LI and A elements.
***EDIT***
You might be interested in this article by Eric Meyer (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/rounding-tabs/">http://www.complexspiral.com/publicatio ... ding-tabs/</a><!-- m -->).if u give them a fixed width like i asigned:
#navigation li {
width: 7em;
then u can just make one that will do both left and right as one picture. otherwise, itll have to be changed a bit, but should still be able to be done
experimenting with menu tabs in CSS by creating round corner menu tabs, here is the link that i have used to help create them, have a problem with it though-
1. i want the user to be able to click anywhere within the tab to go to the selected page, at present you can only select the top left hand corner of the image - here is the code for what i have created:
<html>
<head>
<title>Test Page</title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
a
{
vertical-align: bottom;
color: #ffffff;
background: #4263D1 url("images/left-tab.jpg") left top no-repeat;
text-decoration: none;
padding-left: 45px;
height: 24px;
}
a span
{
background: url("images/right-tab.jpg") right top no-repeat;
padding-right: 45px;
height: 24px;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm"><span><b>Home</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"showroom.htm"><span><b>Showroom</b></b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.htm"><span><b>Specials</b></b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"projects.htm"><span><b>Projects</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm"><span><b>Order Info</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"shipping.htm"><span><b>Shipping</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"quotes.htm"><span><b>Quotes</b></span></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm"><span><b>Contact</b></span></a>
</body>
</html>
thanksTo start with use an unordered list to mark-up your menu then that will solve your other problem- more than one link = list of links semantically.ok done that with the following code:
<html>
<head>
<title>Test Page</title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
a
{
vertical-align: bottom;
color: #ffffff;
background: #4263D1 url("images/left-tab.jpg") left top no-repeat;
text-decoration: none;
padding-left: 45px;
height: 24px;
}
a span
{
background: url("images/right-tab.jpg") right top no-repeat;
padding-right: 45px;
height: 24px;
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
}
#navigation li
{
float: left;
display: block;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm"><span><b>Home</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"showroom.htm"><span><b>Showroom</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.htm"><span><b>Specials</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"projects.htm"><span><b>Projects</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm"><span><b>Order Info</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"shipping.htm"><span><b>Shipping</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quotes.htm"><span><b>Quotes</b></span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm"><span><b>Contact</b></span></a></li>
</ul>
</body>
</html>sorry meant to say that the link still does not properly work, only in the top left hand corner stillhere, this works for you:
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
#navigation {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
display: block;
margin: 0;
padding: 0;
width: 7em;
border: solid #000 2px;
border-width: 0 2px 0 2px;
text-align: center;
background: #4263D1 url("images/left-tab.jpg") left top no-repeat;
color: #ffffff;
font-weight: bold;
text-decoration: none;
vertical-align: bottom;
}
#navigation a {
background: url("images/right-tab.jpg") right top no-repeat;
height: 24px;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"showroom.htm">Showroom</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"specials.htm">Specials</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"projects.htm">Projects</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm">Order Info</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"shipping.htm">Shipping</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quotes.htm">Quotes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm">Contact</a></li>
</ul>
</BODY>
</HTML>pawkys code should work i think the reason was there was no need for a span in your lists and this was causing the trouble.the links work, but the graphics dont, the reason the span tag is there is because without it you can only have 1 background image, and therefore without the span tag you have a round corner on one end and then a big square background.
so my question is can it be done with the span tag??Try removing the quotes from the URLs in the CSS; you usually only need URLs with specifying a font that has spaces in the name.
Also, can you upload the images for us? It's kind of hard to help out without being able to see it in action.
You shouldn't need the span — you already have two elements you can apply background images to: the LI and A elements.
***EDIT***
You might be interested in this article by Eric Meyer (<!-- m --><a class="postlink" href="http://www.complexspiral.com/publications/rounding-tabs/">http://www.complexspiral.com/publicatio ... ding-tabs/</a><!-- m -->).if u give them a fixed width like i asigned:
#navigation li {
width: 7em;
then u can just make one that will do both left and right as one picture. otherwise, itll have to be changed a bit, but should still be able to be done