Mark_M Posted November 12, 2006 Share Posted November 12, 2006 Hello all,I was reading this tutorial herehere...tab menuIm using their example and trying to create a round button. I have both end caps, which is working fine but I would like to have an image in the center as well (since I have a gradient effect applied to my end caps) so that the center has the gradient as well. I cant figure this one out. I only have been using css for a little bit now, so Im still learning.Heres the code I have so far... <head> <style type="text/css"> #navigation a { color: #000; background: #fb0 url("tab-orange-left2.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a span { background: url("tab-orange-right2.gif") right top no-repeat; padding-right: 10px } #navigation a:hover { color: #fff; background: #2166A4 url("tab-blue-left2.gif") left top no-repeat; text-decoration: none; padding-left: 10px } #navigation a:hover span { background: url("tab-blue-right2.gif") right top no-repeat; padding-right: 10px } </style> </head> <div id="navigation"><a href="/"><span>Home</span></a></div> And to take it one step further, how about adding 3 images underneath the button(will be for shadow). I’m trying to break out of the table habit and do layouts with css. Heres how I would do it in a table.. <table cellspacing="0" cellpadding="0" border="0"><tr height="34"><td width="18" background ="big_button_left.gif"></td><td width="401"background ="big_button_mid.gif">button text</td><td width="18" background ="big_button_right.gif"></td></tr><tr height="8"><td width="8" background ="big_button_left_shadow.gif"></td><td width="484"background ="big_button_mid_shadow.gif"></td><td width="8" background ="big_button_right_shadow.gif"></td></tr></table> Thanks,Mark Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now