jc624 Posted March 6, 2008 Share Posted March 6, 2008 Hey this is pretty simple hover tab, but one thing I want to figure out is how can you increase the bottom so the text can be align in the middle of the tab demostrated here. If I do that(increase the padding) the image (the side images -left/right) will show up(repeat). My assumption is to make the image bigger but just want to make sure:http://www.sitepoint.com/article/accessible-menu-tabsIC Link to comment Share on other sites More sharing options...
jlhaslip Posted March 6, 2008 Share Posted March 6, 2008 Not sure if padding will do it. You might need to set a line-height, instead.Go ahead and set up a Demo of this Menu and then post a link to it so we can play with it without needing to do all the work of downloading those images, etc. Thanks. Link to comment Share on other sites More sharing options...
jc624 Posted March 6, 2008 Author Share Posted March 6, 2008 Not sure if padding will do it. You might need to set a line-height, instead.Go ahead and set up a Demo of this Menu and then post a link to it so we can play with it without needing to do all the work of downloading those images, etc. Thanks.Its the same thing as that code:<html><head> <title>Untitled</title> <style type="text/css" rel="stylesheet">#nav{ list-style: none; padding: 0; margin: 0; font-family: Verdana, sans-serif; font-size: 10px; }#nav li{ float: left; display: block; margin: 4px 4px 0 0; padding: 0; } #nav a{ color: #fff; background: #806d62 url("tab_statica.gif") left bottom no-repeat; text-decoration: none; padding-left: 8px; }#nav a span{ background: url("tab_staticb.gif") right bottom no-repeat; padding-right: 8px;}#nav a:hover { color: #fff; background: #e4701e url("tab_hovera.gif") left bottom no-repeat; text-decoration: none; padding-left: 8px;}#nav a:hover span{ background: url("tab_hoverb.gif") right bottom no-repeat; padding-right: 8px;} </style> </head><body><ul id="nav"> <li><a href="/"><span>One thing goes</span></a></li> <li><a href="/"><span>Two thing goes</span></a></li> </ul></body></html>So if I ad bottom padding I get the repeat from the graphics.. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 7, 2008 Share Posted March 7, 2008 then you will need to make the images taller. Link to comment Share on other sites More sharing options...
jc624 Posted March 7, 2008 Author Share Posted March 7, 2008 then you will need to make the images taller.Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.