By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,480 Members | 1,144 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,480 IT Pros & Developers. It's quick & easy.

Positioning problem with a menu

Stang02GT
Expert 100+
P: 1,208
I have created a menu ( as some of you may have seen in my previous post about adding a third level to a 2 level menu) and now my problem with the menu is that the menu stretches across the whole screen and i would like to position it directly in the center of the screen and fit between a certain area.


Is there a way threw the CSS file or maybe something that i can add into the HTML file that i can move the position of the menu and have i need it to not go past a certain spot on the right on of screen. (the menu will adjust it's self based on the size of the screen, if the screen is shrunk the menu moves the times that would be cut of to a second row)

here is my css file

Expand|Select|Wrap|Line Numbers
  1. .horizontalcssmenu ul{
  2. margin: 0;
  3. padding: 0;
  4. list-style-type: none;
  5. }
  6.  
  7. /*Top level list items*/
  8. .horizontalcssmenu ul li{
  9. position: relative;
  10. display: inline;
  11. float: left;
  12.  
  13. }
  14.  
  15. /*Top level menu link items style*/
  16. .horizontalcssmenu ul li a{
  17. display: block;
  18. width: 120px; /*Width of top level menu link items*/
  19. padding: 2px 8px;
  20. border: 1px solid #202020;
  21. border-left-width: 0;
  22. text-decoration: none;
  23. background: url(untitled.bmp) center center repeat-x;
  24. color: white;
  25. font: bold 10px Tahoma;
  26. }
  27.  
  28. /*2nd level menu*/
  29. .horizontalcssmenu ul li ul{
  30. left: 0;
  31. top: 0;
  32. border-top: 1px solid #202020;
  33. position: absolute;
  34. display: block;
  35. visibility: hidden;
  36. z-index: 100;
  37. }
  38.  
  39. /*2nd level menu list items*/
  40. .horizontalcssmenu ul li ul li{
  41. display: inline;
  42. float: none;
  43. }
  44.  
  45.  
  46. /* 2nd level menu links style */
  47. .horizontalcssmenu ul li ul li a{
  48. width: 130px; /*width of sub menu levels*/
  49. font-weight: normal;
  50. padding: 2px 5px;
  51. background: url(untitled1.bmp) center center repeat-x;
  52. border-width: 0 1px 1px 1px;
  53. }
  54.  
  55. .horizontalcssmenu ul li a:hover{
  56. background: url(untitled1.bmp) center center repeat-x;
  57. }
  58.  
  59. .horizontalcssmenu ul li ul li a:hover{
  60. background: url(untitled2.bmp) center center repeat-x;
  61. }
  62.  
  63. .horizontalcssmenu .arrowdiv{
  64. position: absolute;
  65. right: 0;
  66. background: transparent url(menuarrow.gif) no-repeat center left;
  67. }
  68.  
  69. * html p#iepara{ 
  70. padding-top: 1em;
  71. }
  72.  
  73. /*3rd level menu*/
  74. .horizontalcssmenu ul li ul li ul{
  75. left: 0;
  76. top: 0;
  77. border-top: 0px solid #202020;
  78. position: absolute;
  79. left: 30px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
  80. display: block;
  81. visibility: hidden;
  82. z-index: inherit;
  83. }
  84.  
  85. /*3rd  menu list items*/
  86. .horizontalcssmenu ul li ul li ul li{
  87. display: inherit;
  88. float: right;
  89. }
  90.  
  91.  
  92. /*3rd  menu links style */
  93. .horizontalcssmenu ul li ul li ul li a{
  94. width:120px; /*width of sub menu levels*/
  95. display:block;
  96. font-weight: normal;
  97. padding: 2px 2px;
  98. background:  url(untitled.bmp) center center repeat-x;
  99. border-width: 0 1px 1px 1px;
  100. }
Dec 21 '07 #1
Share this Question
Share on Google+
3 Replies


Death Slaught
100+
P: 1,137
Have you tried putting the entire thing into a division, and adding this:

Expand|Select|Wrap|Line Numbers
  1.  text-align:center;
If this gives you the desired effect, but doesn't quite fit in the area you wanted, just reduce the width a little.

Hope it helps, Thanks, Death

*EDIT* You could just give it an absolute positioning, and then move it where you want it.
Dec 21 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
The CSS doesn't mean anything without the html.
Dec 21 '07 #3

Death Slaught
100+
P: 1,137
The CSS doesn't mean anything without the html.
True, however, his problem does not lie within his HTML, or really have much to do with it. His problem is positioning, which is CSS. Although having the HTML so we may see what space we have to work with would have been nice (not to mention make our lives slighty easier). I believe that he provided enough information so we could provide a decent assumption, and therefor provide ways of accomplishing his goal (based entirely upon that assumption of course).

I understand what your saying so just ignore my rant above :)

Thanks, Death
Dec 21 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.