#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    108
    Rep Power
    56

    Drop down menu on href link


    Hello there, im new to the forums. decided to register because im having a bit of a problem with CSS/HTML.(pretty inexperienced with css).

    Heres what i wanna do: I have a social website where users can register and comment on things etc. I want to show a drop down menu as soon as users hover their mouse over a user name. So i took this script:

    http://javascript-array.com/scripts/...rop_down_menu/

    And modified it. But i cant figure out how to make it work if the user name is surrounded with other text, it automatically creates a new line. Heres my code:

    Code:
    <html>
    	<head>
    		<style> 
    			<!--
    
    
    				#sddm a
    				{	display: block;
    				}
    
    
    
    				#sddm span
    				{	position: absolute;
    					visibility: hidden;
    					margin: 0;
    					padding: 0;
    					background: #3D97D6;
    					border: 1px solid #5970B2}
    					
    
    					#sddm span a
    					{	position: relative;
    						display: block;
    						margin: 0;
    						padding: 5px 10px;
    						width: auto;
    						white-space: nowrap;
    						text-align: left;
    						text-decoration: none;
    						background: #3D97D6;
    						color: #FFF;
    						font: 11px arial}
    
    					#sddm span a:hover
    					{	background: #2875DE;
    						color: #FFF}
    
    			-->
    		</style>
    		<script type="text/javascript">
    			// Copyright 2006-2007 javascript-array.com
    
    			var timeout	= 500;
    			var closetimer	= 0;
    			var ddmenuitem	= 0;
    
    			// open hidden layer
    			function mopen(id)
    			{	
    				// cancel close timer
    				mcancelclosetime();
    
    				// close old layer
    				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    				// get new layer and show it
    				ddmenuitem = document.getElementById(id);
    				ddmenuitem.style.visibility = 'visible';
    
    			}
    			// close showed layer
    			function mclose()
    			{
    				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    			}
    
    			// go close timer
    			function mclosetime()
    			{
    				closetimer = window.setTimeout(mclose, timeout);
    			}
    
    			// cancel close timer
    			function mcancelclosetime()
    			{
    				if(closetimer)
    				{
    					window.clearTimeout(closetimer);
    					closetimer = null;
    				}
    			}
    
    			// close layer when click-out
    			document.onclick = mclose; 
    
    		</script>
    
    	</head>
    
    
    
    	<body>
    
    		<span id="sddm">
    			<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
    			<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    				<img src="linktoav" alt="avatar" /> <font color="#ffffff"><b>Koen</b></font></a>
    				<a href="#">Add as Friend</a>
    				<a href="#">Send message</a>
    
    				<a href="#">View Profile</a>
    				<a href="#">Report</a>
    			</span>		
    		</span>
    
    		this text comes after the username
    	</body>
    
    </html>
    So i hope its clear what i wanna do, i always find it hard to explain things
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Rhytz.

    Changing the "visibility" property to "hidden" only makes the element invisible -- it doesn't stop it from taking up space. Use the "display" property instead and set it to "none" to both hide the element and keep it from taking up space.

    Does your page really not have a doctype?

    Don't use the <font> element. CSS should be used instead.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Oops. Nevermind what I said about the visibility and the display properties. They aren't the issue in this case.

    After looking over your code more thoroughly, I see what you're really talking about. The cause of the text going to a new line is the "display:block" applied to "#sddm a". That's what blocks normally do -- they sit on a line by themselves. Simply remove the whole"#sddm a" rule or just the "display" declaration from it.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    108
    Rep Power
    56
    Thanks Kravvitz. this was just a test script so no doctype etc. If i try what you suggested, it keeps the text on one line, but the span pops up next to the user name. I want it to popup under the username. Is there any way to do that?
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    So you're testing in a different rendering mode from the regular pages? That's likely to increase development time in the long run.

    I would give "position:relative" to "#sddm a" (to create a new positioning context) and then move the inner <span> inside the <a> element. Next "#sddm span" needs to be given "top:100%" and "left:0".
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    108
    Rep Power
    56
    I cant seem to get it working
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Please show us your revised code.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    108
    Rep Power
    56
    Originally Posted by Kravvitz
    Please show us your revised code.
    Code:
    <html>
    	<head>
    
    		<style> 
    			<!--
    
    
    				#sddm a
    				{	position:relative;
    				}
    
    
    
    				#sddm span
    				{	position: absolute;
    					visibility: hidden;
    					margin: 0;
    					padding: 0;
    					background: #3D97D6;
    					border: 1px solid #5970B2;
    					top:100%;
    					left:0
    					}
    					
    
    					#sddm span a
    					{	position: relative;
    						display: block;
    						margin: 0;
    						padding: 5px 10px;
    						width: auto;
    						white-space: nowrap;
    						text-align: left;
    						text-decoration: none;
    						background: #3D97D6;
    						color: #FFF;
    						font: 11px arial}
    
    					#sddm span a:hover
    					{	background: #2875DE;
    						color: #FFF}
    
    			-->
    		</style>
    		<script type="text/javascript">
    			// Copyright 2006-2007 javascript-array.com
    
    			var timeout	= 500;
    			var closetimer	= 0;
    			var ddmenuitem	= 0;
    
    			// open hidden layer
    			function mopen(id)
    			{	
    				// cancel close timer
    				mcancelclosetime();
    
    				// close old layer
    				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    				// get new layer and show it
    				ddmenuitem = document.getElementById(id);
    				ddmenuitem.style.visibility = 'visible';
    
    			}
    			// close showed layer
    			function mclose()
    			{
    				if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    			}
    
    			// go close timer
    			function mclosetime()
    			{
    				closetimer = window.setTimeout(mclose, timeout);
    			}
    
    			// cancel close timer
    			function mcancelclosetime()
    			{
    				if(closetimer)
    				{
    					window.clearTimeout(closetimer);
    					closetimer = null;
    				}
    			}
    
    			// close layer when click-out
    			document.onclick = mclose; 
    
    		</script>
    
    	</head>
    
    
    
    	<body>
    
    		<span id="sddm">
    			<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">This is a username</a>
    			<span id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    				<img src="http://images.devshed.com/fds/belts/ds_forums.gif" alt="avatar" /> Username
    				<a href="#">Add as Friend</a>
    				<a href="#">Send message</a>
    				<a href="#">View Profile</a>
    
    				<a href="#">Report</a>
    			</span>	
    				
    		</span>
    		this text comes after the username
    	</body>
    
    </html>
    Heres my code. Added a sample avatar image. Now if i move the span m1 inside the <a> element, i get very strange results. And if i keep it the way it was, the div pops up completely at the bottom of the page (it creates a scrollbar, and you need to scroll down to see it lol)
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Now if i move the span m1 inside the <a> element, i get very strange results.
    That's because I forgot that you had <a> elements inside the inner <span>. It's not valid to put one <a> inside another.

    Give "position:relative" to "#sddm" instead of "#sddm a".

    And if i keep it the way it was, the div pops up completely at the bottom of the page
    Yeah, that's what "top:100%" should do when the positioning context for the element is the root element (<html>). That's why we give "position:relative" to a closer ancestor.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    108
    Rep Power
    56
    Thanks! Works perfect now
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    108
    Rep Power
    56
    I came across a problem. If there is a username right below the username that is used to open the span, it will show up through the span

IMN logo majestic logo threadwatch logo seochat tools logo