|
| |
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
CSS Beveled Button Effect - Horizontal Layout - 5/19/2003 13:22:16
CSS Beveled Button Effect - Horizontal Format
Okay, I think I figured this one out. I' ve tested in IE and Opera and it appears to be working as intended...
#menu{
position:absolute;
left:1px;
top:31px;
width:100%;
padding:5px 0px;
white-space:nowrap;
}
#menu a{
display:inline;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #808080;
border-bottom:1px solid #000;
font-size:11px;
color:#ccc;
background:#68849c;
text-decoration:none;
padding:3px 2px 3px 4px;
text-align:center;
}
#menu a:hover{
border-top:1px solid #000;
border-left:1px solid #666;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
color:#fff;
background:#47748e url(' /images/tile-blu-blu-grn.jpg' ) fixed;
}
#menu a:active{
color:#fff;
background:#47748e;
}
Note that I have my menu absolutely positioned from the top at 31px. This is because I have a <div> sitting above the navigation that runs 100% the width of the window and is 30px in height with a 1px top/bottom border. The code looks like this...
div.top{
position:absolute;
top:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:30px;
text-align:right;
white-space:nowrap;
color:#000;
background:#47748e;
border-top:1px solid;
border-bottom:1px solid;
z-index:1;
}
I' ve positioned the #menu exactly 1px below the top div (31px). This creates a nice shadow effect when merged with the border of the #menu a elements.
Note: <a href' s> must be on one line in your code...
<a href></a><a href></a><a href></a>
P.S. Andy, this one may not degrade so well in NN4.x. I' m working on improving the degradation this week.
To see this in action, you can visit my new working area here...
[url=" http://www.csstips.com/" ]CSS Tips and Tricks[/url]
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
|
|
|
|
garry
Posts: 858
From: Northern Territory Outback Australia
Status: offline
|
RE: CSS Beveled Button Effect - Horizontal Layout - 5/19/2003 21:46:39
A steep learning curve for me..................but what fantastic backgrounds!!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
k¥ 