• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

Center Web page and drop down menues

With the code below, I will always center my webpage regardless of resolution. But then I have to position my drop down menues relatively to where certain items on the webpage er placed depending on the resolution. Today I am using absolute positioning, and that is not working when I center the webpage by the code below. Does anyone know of any good tutorials or tips on how to position a drop down menu, when the web-page is centered as shown in the code box below? Right now I am using hidden absolutely positioned div fields that are shown via a simple javascript when hovering a link, and then hidden again when the link is not hovered anymore.
body
{
	text-align: center;
}

div#container
{
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
}

Open in new window

0
itnifl
Asked:
itnifl
  • 3
  • 2
1 Solution
 
Eternal_StudentCommented:
Do you have a working example we can look at?
0
 
itniflAuthor Commented:
Yes I have, but I want to keep it to myself :) I was hoping on a general tutorial on how to position a drop down menu correctly next to an item like an link, table or div no matter the size of the browser or resolution that is used(wich affects where that item is placed).
0
 
Jagadishwor DulalBraces MediaCommented:
To center align your content use one div with margin 0 auto. And to use it will be better to use a div for menus and others Like:

#wrapper{
  width:980px; /*YOur Wrapper size*/
 margin:0 auto;
}

Open in new window

It will center align your div and you can add menus inside the div.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Eternal_StudentCommented:
You can use http://tinyurl.com/ to post a link.

So am I correct in saying that the menu is not appearing in the same position for different resolutions and browser sizes?

Perhaps you need to give your container div a position relative so that anything positioned absolutely inside that will be relative to the container and not the browsers size?

 
div#container
{
margin: 0 auto;
width: 50em;
text-align: left;
position:relative;
}

Open in new window


Without seeing all of your code, that is a stab in the dark ^
0
 
itniflAuthor Commented:
You were right on. Obviously I don't know much about mixing relative and absolute positions. Here I undersand that if the parent div is positioned relative, then the absolute positioning within that div are measured out from that? Could you paste any links that explain this?
0
 
Eternal_StudentCommented:
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now