navbar misbehaving... |
 Jan 31 2009, 02:30 PM
Post
#1
|
|
 Senior Member  Group: Official Designer Posts: 5,880 Joined: Nov 2007 Member No: 593,382  |
Im making a site for someone and the nav is currently a image map but i dont like using image maps.
So im trying to make it from just css and an image but it aint working! Heres what its supposed to look like: And here is the code im trying to change it too. CODE <style type="text/css"> #nav{ width:800px; height:100px; background-image:url(http://www.amelia.wefuze.com/designimages/blank_bar.png); background-repeat:no-repeat; padding-top:29px; word-spacing:30px; text-align:center; } a.nav:link, a.nav:active, a.nav:visited{ font-family:sans-serif; color:#6F6F6F; text-decoration:none; font-size:24px; padding-bottom:10px; } a.nav:hover{ color:#5e5e5e; } .divider{ padding-bottom:-10px; } </style> <div id="nav"> <a class="nav" href="index.php">home</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif"> <a class="nav" href="literary/">literary</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif"> <a class="nav" href="art/">art</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif"> <a class="nav" href="performance/">performance</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif"> <a class="nav" href="contact/">contact</a> </div> You can put the code in here to see it: html editor So you see whats happening?! The dividers are images but when i put them in the links moved down. So im trying to get the dividers to stay where they are but move up the links up to the center!?! |
|
|
|
 |
Replies
|
Jan 31 2009, 03:14 PM
Post
#2
|
|
 Mel Blanc was allergic to carrots. Group: Official Designer Posts: 6,371 Joined: Aug 2008 Member No: 676,291 |
Ok, so I know it's a bit much but I got about the same result you wanted in the image.
CODE <style type="text/css"> #nav{ position:absolute; width:800px; height:100px; background-image: url(http://www.amelia.wefuze.com/designimages/blank_bar.png); word-spacing:70px; text-align:center; padding:35px; margin-top:0px; margin-left:0px; } a.nav:link, a.nav:active, a.nav:visited{ font-family:sans-serif; color:#6F6F6F; text-decoration:none; font-size:24px; } a.nav:hover{ color:#5e5e5e; } #dividers{ position: absolute; width: 800px; height: 100px; padding-top:30px; margin-top:0px; } </style> <body> <div id="nav"> <a class="nav" href="index.php">home</a> <a class="nav" href="literary/">literary</a> <a class="nav" href="art/">art</a> <a class="nav" href="performance/">performance</a> <a class="nav" href="contact/">contact</a> </div> <div id="dividers">   <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0"> <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0"> <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0"> <img src="http://www.amelia.wefuze.com/designimages/divider.gif" border="0"> </div> Try it out in your HTML editor. 
|
|
|
|
Posts in this topic
JosephCohen123 navbar misbehaving... Jan 31 2009, 02:30 PM
JosephCohen123 hmm...
Well unfortunately it only works on ie:(
no... Jan 31 2009, 03:18 PM Mikeplyts No prob. Glad I at least tried. Jan 31 2009, 03:20 PM Aberisk your using padding instead of margins
here try thi... Jan 31 2009, 03:28 PM Mikeplyts ^That works way better than mine. Jan 31 2009, 03:37 PM JosephCohen123 It worked?!
Its really weird though cause i to... Jan 31 2009, 03:49 PM Aberisk no prob :] Jan 31 2009, 04:50 PM fixtatik just quickly before this is closed...
using so man... Jan 31 2009, 05:08 PM
manny-the-dino Guys, use codeboxes & thumb large images! ... Jan 31 2009, 05:27 PM |
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: