ifusion Posted September 23, 2008 Share Posted September 23, 2008 Hey, How do you add a round end on hover links. Heres my website. As you can see the first link on the left is round but when you hover over it it is square. HTML code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Nav</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> <body> <div id="header"></div><div id="grey"></div> <div id="center"> <h3 class="small_red">Projects in Process:</h3> <div id="nav"> <li><a href="#">In-Process</a><img src="border.png" width="2" height="34" class="border" /></li> <li><a href="#">Completed</a><img src="border.png" width="2" height="34" class="border" /></li> <li><a href="#">All Projects</a><img src="border.png" width="2" height="34" class="border"/></li> <li><a href="website.zip">Download!</a><img src="border.png" width="2" height="34" class="border"/></li> </div> <p> You can download this website by clicking the download link above^ </div> </body> </html> CSS code: body { margin: 0px; padding: 0px; font-family: Verdana; font-size: 11px; color: #2f2f2f; } #center { margin: 0 auto; width: 900px; } #header { background: url('header2.png') repeat-x; width: 100%; height: 150px; } #grey { background: url('grey.png') repeat-x; width: 100%; height: 30px; border-top: 1px solid #fff; } #nav { width: 500px; height: 34px; background: url('back.png') no-repeat; width: 661px; height: 34px; display: block; } #nav li { list-style-type: none; display: inline; } #nav li a { font-family: Verdana; font-size: 11px; color: #484848; font-weight: bold; text-decoration: none; padding: 11px 10px 10px 10px; float: left; } #nav li a:hover { background: url('hover.png') repeat-x; color: #eeeeee; } img.border { margin: 0px; padding: 0px; float: left; } h3.small_red { font-family: Verdana; font-size: 11px; color: #f93737; } Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 23, 2008 Share Posted September 23, 2008 you didnt include a link but you have this on hover background: url('hover.png') repeat-x; and i dont see that on any other links in your css Quote Link to comment Share on other sites More sharing options...
ifusion Posted September 23, 2008 Author Share Posted September 23, 2008 Sorry heres the link: http://www.goome.co.nz/nav/ Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 23, 2008 Share Posted September 23, 2008 http://www.goome.co.nz/nav/back.png has a rounded edge and is the background of your nav but when hovered the background is for the link goes to this which is square http://www.goome.co.nz/nav/hover.png Quote Link to comment Share on other sites More sharing options...
ifusion Posted September 23, 2008 Author Share Posted September 23, 2008 Yea, and when i hover over the first link i want to include this: http://www.goome.co.nz/nav/round.png so that the link isnt square. But i cant add 2 images in one div? Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 23, 2008 Share Posted September 23, 2008 nope your best bet would be to make an image the is a background for the entire like so just round the corners of http://www.goome.co.nz/nav/hover.png to your liking and if you dont want it on all of them and only the first just class it different Quote Link to comment Share on other sites More sharing options...
ifusion Posted September 23, 2008 Author Share Posted September 23, 2008 But if i do that then the whole image would have to load when i hover. Theres got to be an easier way. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted September 23, 2008 Share Posted September 23, 2008 not that i can think of honestly id just make it a png and probably get it to like 3k tops wouldnt hurt load times at all Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 23, 2008 Share Posted September 23, 2008 Here's a link to one solution (out of many): http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml Go beyond this and make it liquid by using a sliding-doors technique as well. http://www.alistapart.com/articles/slidingdoors/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.