CSS Dropdown Menu Positioning

How do I position a CSS dropdown menu so that it is relative to a cent

Page 1 of 1

11 Replies - 12701 Views - Last Post: 02 August 2009 - 08:11 PM

#1 VTJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 23-July 09

CSS Dropdown Menu Positioning

Posted 23 July 2009 - 10:50 AM

How do I position a CSS dropdown menu so that it is relative to a center aligned <div>? I have a page I have developed where the entire content piece sits within a center aligned <div>. The dropdown items are positioned using CSS and seem to be relative to the browser window. With the content centered I am at the mercy of the screen resolution and window size. I need to position them relative to the center aligned <div> so that they are in the right place no matter what. Can this be done? I have not yet found a way.

Here is a link to my current page, however it is subject to change if I find the solution.
http://www.servicema...ed/default.html

Thank You,
-Vaughn

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: CSS Dropdown Menu Positioning

#2 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: CSS Dropdown Menu Positioning

Posted 23 July 2009 - 12:26 PM

What I find center aligns objects with css is
margin:0 auto

Basically, that sets the top and bottom margins to 0 and the left and right ones to fall automatically to its surroundings, both being equal to one another.


For a demonstration, you can view my website's source and noticed the horizontal rule at the bottom. It is not centered by HTML, but by CSS styling (as seen in the HTML styling).
However, IE is known not to work well with CSS centering.

W3Schools.com is also useful, if one takes the time to read through it.

This post has been edited by Quin: 24 July 2009 - 10:24 AM

Was This Post Helpful? 0
  • +
  • -

#3 VTJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 23-July 09

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 07:33 AM

Thx Quin, but its not doing the trick for me...I have played around with any and all CSS positioning tricks I can think of and nothing solves the issues I am going to have when this site starts popping up on screens and in browser windows of all shapes and sizes.

I think what your comment was getting at was the idea that by centering the object first, I can then position it relative to that centered point. That would be AMAZING if I could get it to work. I can use percentages as well but I still have the problem of a resized browser messes everything up. There has to be a way! I may be fairly new to CSS but it blows my mind to think I am going to have to right align my layout to get my dropdowns to work...just straight up blows my mind!
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 08:42 AM

Ok. First off - your site is a mess, no offense. This is the easiest way to set it up:


	   <ul id="dropdown">
			<li class="header">Header
				 <ul>
						<li>Sub Link</li>
						<li>Sub Link</li>
				 </ul>
			</li>
	   </ul>




Jquery script:

<script type="text/javascript">

	$(document).ready(function(){
		$('li.header').mouseover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});

</script>



CSS:


#dropdown li.header ul { 
			display: none; }
		
		#dropdown li.header:hover ul { 
			display: block;}
			
		#dropdown li.header ul li a:link, #dropdown li.header ul li a:visited {
		 color: black;
		 display: block;
		 border-right: none;
		 text-align: center;
		 padding: 5px 15px;
		 border-bottom: 1px solid #9c7549;}
		 
		 #dropdown li.header ul li:hover {
			 background: #9c7549;}



The big piece of CSS in there controls where they are positioned. Let me know if you have any questions.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 BigVJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 07-May 07

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 08:55 AM

I agree, I never claimed to have pretty code.

I will take a look at this later today, I've been leaning towards taking the JQuery plunge, I guess now the time has come.

I will update with any questions, issues, problems I encounter.

Thanks!
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 08:59 AM

Quote

I agree, I never claimed to have pretty code.


The only reason why I stated it wasn't to offend, it was to inform. Because it makes it way easier for people to find problems when they can quickly traverse your code; thus, you get quicker and more informed answers.
Was This Post Helpful? 0
  • +
  • -

#7 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 10:28 AM

Hi Vaughn

What exactly are you wanting?
Its really hard to tell since your original post was unclear.

You are wanting a drop-down box?
You are wanting it to be put in a specific place? Where?
Are you wanting the text in the drop down box to be center aligned?
Was This Post Helpful? 0
  • +
  • -

#8 VTJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 23-July 09

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 10:47 AM

Quin,

I apologize for the lack of clearity in the first post. Let me say that through research since that first post I have learned a lot more about what exactly I am trying to do.

I have a page that I developed as a PSD and then saved as HTML & .gif. I have then been trying to use Javascript to create dropdown menus for navigation purposes. I managed to create the dropdown menus using Adobe Fireworks. However Fireworks positions the dropdowns with CSS, and thus has been forcing me to right align my page. I would really like to center align the page so I have been looking for a way to position the dropdowns so that they work with my center aligned page. And to no avail, thus I started this thread.

That being said, I agree with gregwithworth in that my code is rather messy. I have been considering redeveloping the dropdowns with an alternative language such as JQuery. I do have some apprehensions with JQuery and other newage development tactics as this site is going out to a very IE6 saturated market nearly 90% of traffic is IE, and we suspect at least half of that is IE6.

I think what I am going to do is give the JQuery code a try and I will update the thread when I am done.

I do sincerely appreciate the help as I am the "token web kid" within my department and truly have no one near me to troubleshoot with. The speed of response on this thread has been very helpful.
Was This Post Helpful? 0
  • +
  • -

#9 Quin  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 19
  • View blog
  • Posts: 382
  • Joined: 16-October 08

Re: CSS Dropdown Menu Positioning

Posted 24 July 2009 - 11:29 AM

Ok, sure.

Question is, why did you go down this route instead of just using HTML & CSS?
I've always found that programs that do the coding for you, don't do the coding for you.

Notepad remains my best friend :)

I'd be tempted to re-do the entire site, but that's because I've had years of experience with it.

If you still have trouble, you know where we are;
Good luck.
Was This Post Helpful? 0
  • +
  • -

#10 VTJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 23-July 09

Re: CSS Dropdown Menu Positioning

Posted 27 July 2009 - 12:12 PM

Okay, so I have spent some time playing with both the JQuery code Greg posted as well as another similar tutorial I found and I think, with the design elements I am trying to incorporate as well, might be asking a bit too much of JQuery.

What I would REALLY like to get working is just a simple dropdown menu that appears when the user mouse's over an image within a table. As I said I developed a very nice layout using the PSD to HTML & .gif technique. The completed HTML page is a large table with a number of spliced images including each menu item (each menu item "Home, Service Related, Field Service Support") are images within thier own cell of a table.

Is there any easy way to simply create a dropdown menu possibly using Javascript that I could set up as the onmouseover behavior? I understand that the preferred method is likely JQuery and CSS but my desire to avoid a redesign as well as to use a centered layout are making the JQuery/CSS idea very difficult to accomplish.

<td><img src="images/default_07.gif" alt="" width="134" height="34" border="0"></td>
		<td><img src="images/default_08.gif" alt="" width="119" height="34" border="0"></td>
		<td><img src="images/default_09.gif" alt="" width="162" height="34" border="0"></td>
		<td colspan="2"><img src="images/default_10.gif" alt="" width="120" height="34" border="0"></td>


Above is the table cell code with the references to the images. I would like to set up an onmouseover behavior that would then reveal a dropdown menu.

I do appreciate any and all help in advance.

If you would like a link to the page I am attempting to complete it as follows:
http://servicematter...d/default2.html

Thank You,
Was This Post Helpful? 0
  • +
  • -

#11 VTJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 23-July 09

Re: CSS Dropdown Menu Positioning

Posted 28 July 2009 - 07:32 AM

Okay guys, one more thing. I have continued to try and figure out this JQuery thing but I CANNOT seem to get it positioned the way I want.

Here is the code I am working with, and yet no bones. The boxes are just hell bent on left alignment.

head>
<title>JQuery Test</title>
<style type="text/css">
#dropdown
{
	margin-left:auto;
	margin-right:auto;
}
</style>
</head>
<body>
<style type="text/css">
/* menu styles */
#jsddm
{	margin-left: auto;
	margin-right: auto;
	padding: 0}

	#jsddm li
	{	float: left;
		list-style: none;
		font: 12px Tahoma, Arial}

	#jsddm li a
	{	display: block;
		background: #324143;
		padding: 5px 12px;
		text-decoration: none;
		border-right: 1px solid white;
		width: 70px;
		color: #EAFFED;
		white-space: nowrap}

	#jsddm li a:hover
	{	background: #24313C}
		
		#jsddm li ul
		{	margin: auto;
			padding: 0;
			position: absolute;
			visibility: hidden;
			border-top: 1px solid white}
		
			#jsddm li ul li
			{	float: none;
				display: inline}
			
			#jsddm li ul li a
			{	width: auto;
				background: #A9C251;
				color: #24313C}
			
			#jsddm li ul li a:hover
			{	background: #8EA344}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout		 = 0;
var closetimer		= 0;
var ddmenuitem	  = 0;

function jsddm_open()
{	jsddm_canceltimer();
	jsddm_close();
	ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{	if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{	closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{	if(closetimer)
	{	window.clearTimeout(closetimer);
		closetimer = null;}}

$(document).ready(function()
{	$('#jsddm > li').bind('mouseover', jsddm_open);
	$('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>
<div align="center">
<ul id="jsddm">
	<li><a href="#">Javascript</a>
		<ul>
			<li><a href="#">Drop Down Menu</a></li>
			<li><a href="#">jQuery Plugin</a></li>
			<li><a href="#">Ajax Navigation</a></li>
		</ul>
	</li>
	<li><a href="#">Effect</a>
		<ul>
			<li><a href="#">Slide Effect</a></li>
			<li><a href="#">Fade Effect</a></li>
			<li><a href="#">Opacity Mode</a></li>
			<li><a href="#">Drop Shadow</a></li>
			<li><a href="#">Semitransparent</a></li>
		</ul>
	</li>
	<li><a href="#">Navigation</a></li>
	<li><a href="#">HTML/CSS</a></li>
	<li><a href="#">Help</a></li>
</ul>
</div>
</body>
</html>



When I view it in Dreamweaver's design view the div is center aligned, meaning I finally saw margin: 0 auto; do what it was supposed to, but something in either the function script or the JQuery CSS has the whole thing unwaveringly left aligned. And frankly I am too new to CSS to hack through all of the code. What am I doing wrong?

Thanks,
Vaughn
Was This Post Helpful? 0
  • +
  • -

#12 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: CSS Dropdown Menu Positioning

Posted 02 August 2009 - 08:11 PM

Well, your problem is that you aren't giving any numbers to the browser for the browser to 'auto' for you.

What I mean by that is a div, or any block element by design fills the area until you constrain it. So, currently when you say for it to figure out the left margin, the browser says, "Everything's fine it is filling the whole window - no need to adjust."

If you simply give your ul with id of #jsddm a width, you will see it move to the middle with ease. Because now the browser knows that it has to move the ul x pixels to from the left side of the monitor, and x pixels from the right.

Make sense?

--

Greg
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1