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/ Link to comment https://forums.phpfreaks.com/topic/92477-help/ 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 } Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-473891 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/ Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-473893 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... Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-473965 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 Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-473970 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. Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474049 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> Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474081 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> Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474099 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. Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474139 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. Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474269 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/ Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474404 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. Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474799 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... Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-474870 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... Link to comment https://forums.phpfreaks.com/topic/92477-help/#findComment-475530 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.