Chevy Posted February 22, 2008 Share Posted February 22, 2008 Can anyone get the javascript to make a link move up like on this web site? http://victor.kjionline.com/ Quote Link to comment Share on other sites More sharing options...
Rohan Shenoy Posted February 22, 2008 Share Posted February 22, 2008 You won't need javascript for that. Simple CSS would do. a:hover { padding-bottom: 10px;//can be any number fo your choice } Quote Link to comment Share on other sites More sharing options...
Chevy Posted February 22, 2008 Author Share Posted February 22, 2008 Hmm, I tried that, but only got this: http://verpets.com/layout/jamestown/ Quote Link to comment Share on other sites More sharing options...
The Little Guy Posted February 22, 2008 Share Posted February 22, 2008 I don't see any links that move up... Quote Link to comment Share on other sites More sharing options...
Chevy Posted February 22, 2008 Author Share Posted February 22, 2008 The: Home Squad Roster Apply For Squad Forums Quote Link to comment Share on other sites More sharing options...
phpQuestioner_v5.0 Posted February 22, 2008 Share Posted February 22, 2008 In your CSS; you have it declared like this: #navigation a:hover { padding-bottom: 10px; } But the problem is; that your not wrapping the navigation links in a html element with a id of "navigation" - at least not from what I can see. Quote Link to comment Share on other sites More sharing options...
Chevy Posted February 22, 2008 Author Share Posted February 22, 2008 Yes, they are properly wrapped. <div id="menu"> <div id="navigation"> <a href="index.php">H o m e</a> <a href="index.php">N e w s</a> <a href="index.php">B i o</a> <a href="index.php">P i c s</a> <a href="index.php">M u s i c</a> <a href="index.php">C o n t a c t</a> <a href="index.php">T o u r s</a> </div> </div> Quote Link to comment Share on other sites More sharing options...
phpQuestioner_v5.0 Posted February 22, 2008 Share Posted February 22, 2008 Well it didn't seem to be wrapped before; but ok - try this: <html> <head><title>Jamestown Story</title> <style type="text/css"> body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background: url('tile.png'); } #menu { position:relative; left: -8px; top: -92px; height: 50px; width: 496px; background: url('menu_back.png'); border-top: 1px solid rgb(255, 255, 183); border-bottom: 1px solid rgb(255, 255, 183); overflow: hidden; } #navigation { background: url('menu_back.png') repeat-x; height: 50px; border-top: 1px solid rgb(255, 255, 183); border-bottom: 2px solid rgb(255, 255, 183); } #navigation a { background: url('menu_back.png') repeat-x; color: #000000; float: left; font: 12 veranda,sans-serif; padding: 0 14px; line-height: 50px; text-align: center; text-decoration: none; } #navigation a:hover, a:active { background: lightgreen; height: 60px; margin-top: -10px; } </style> </head> <body> <center> <table width="720" cellspacing="0" background="tile.png"><tr> <td align="center" background="middle.png"><img src="top.png" /> <div id="menu"> <div id="navigation"> <a href="index.php">H o m e</a> <a href="index.php">N e w s</a> <a href="index.php">B i o</a> <a href="index.php">P i c s</a> <a href="index.php">M u s i c</a> <a href="index.php">C o n t a c t</a> <a href="index.php">T o u r s</a> </div> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td> </tr></table> </center> </body> </html> Quote Link to comment Share on other sites More sharing options...
Chevy Posted February 23, 2008 Author Share Posted February 23, 2008 Hmm, everything seems to be going up instead of just the text. Quote Link to comment Share on other sites More sharing options...
phpQ6 Posted February 23, 2008 Share Posted February 23, 2008 Well you could try changing the padding-top; they may be an alternative to this. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 23, 2008 Share Posted February 23, 2008 You need to make the link a block if you want the padding to behave in this way. #navigation a {display:block;} That will make each link display on a separate line, so you will also need to float your links left. However, you should be using an unordered list for the navigation, see these tutorials - http://css.maxdesign.com.au/listamatic/ Quote Link to comment Share on other sites More sharing options...
php7Q Posted February 23, 2008 Share Posted February 23, 2008 I would go with phpQ6's example; seems like a better choice, then bronzemonkey's idea. Quote Link to comment Share on other sites More sharing options...
Chevy Posted February 24, 2008 Author Share Posted February 24, 2008 Hmm, I did get it, but in IE it looks funny... Quote Link to comment Share on other sites More sharing options...
Chevy Posted February 25, 2008 Author Share Posted February 25, 2008 I also tried to code the content part but hovering over links makes the content go down... 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.