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

CSS Question regarding postioning

Stang02GT
Expert 100+
P: 1,208
Hello,

I have posted a couple different questions in this thread concerning a menu i had been working on. I have run into another snag in the final stages of the development. I have my current CSS file for my menu(which is posted below), I need to center the menu on the page. My menu starts off at the far left of the screen and spans the whole length of the screen, and i would like to fit under the page heading, since it is quite larger.

Here is my code any help is greatly appreciated.



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: 100px; /*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: 80px; /*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. }
Jan 9 '08 #1
Share this Question
Share on Google+
8 Replies


Stang02GT
Expert 100+
P: 1,208
Does anyone have any ideas?
Jan 15 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
Showing the css alone is only half the picture. Need the html.
Jan 15 '08 #3

Stang02GT
Expert 100+
P: 1,208
My apologies, Here is the code that my menu is based off of. The only thing different with mine is that I have added more items to the menu.

I would post my code but because of regulations at my work i would have to edit out all the links and change all the names of the items in the menu, and that would take a good deal of time.

Like i said all that is different with my menu is that i have added more items to it.



Expand|Select|Wrap|Line Numbers
  1. <div class="horizontalcssmenu">
  2. <ul id="cssmenu1">
  3. <li style="border-left: 1px solid #202020;"><a href="http://www.javascriptkit.com/">Home</a></li>
  4. <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JS</a></li>
  5. <li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
  6. <li><a href="#">References</a>
  7.     <ul>
  8.     <li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
  9.     <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
  10.     <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
  11.     </ul>
  12. </li>
  13. <li><a href="http://www.javascriptkit.com/howto/">web Tutorials</a></li>
  14. <li><a href="#">Resources</a>
  15.     <ul>
  16.     <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
  17.     <li><a href="http://www.codingforums.com">Coding Forums</a></li>
  18.     <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
  19.     <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
  20.     <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
  21.     <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
  22.     </ul>
  23. </li>
  24. </ul>
  25. <br style="clear: left;" />
  26. </div>
  27.  
  28. <p id="iepara">Rest of content here</p>
Jan 15 '08 #4

Stang02GT
Expert 100+
P: 1,208
Could i use the Min/Max width properties to keep my menu the correct size after i center it on the page?
Jan 16 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Sorry I don't have time to look at this. The problem with min/max width is it only works in modern browsers and not IE.
Jan 16 '08 #6

Stang02GT
Expert 100+
P: 1,208
I found a solution to my problem. I placed my menu in a table and it aloud me to match it up perfectly with the heading and the rest of the material on the page.



Expand|Select|Wrap|Line Numbers
  1. <table width="740" cellpadding="10" cellspacing="0" border="0">
  2. <tr>
  3.     <!-- #include file="menu2.htm" -->
  4. </tr>
Jan 18 '08 #7

drhowarddrfine
Expert 5K+
P: 7,435
Ugh. Never use tables for layout.
Jan 18 '08 #8

Stang02GT
Expert 100+
P: 1,208
Well I couldn't get any help or find another way, and it does what i need it to do, so until I can find a better way to do it it will have to stay like that.
Jan 18 '08 #9

Post your reply

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