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

Align Menu

P: 2
I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen.

here is the code that i have got so far:

[html]
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo Menu 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >

<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>

</head>

<body>
<div class="navbar" style="width: 148; height: 253;">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Sub Menu 2</a></div>
<div class="subItem"><a href="#">Sub Menu 3</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>

<p>&nbsp;</p>

</body>
[/HTML]
Feb 29 '08 #1
Share this Question
Share on Google+
4 Replies


ronverdonk
Expert 2.5K+
P: 4,258
Please enclose any code within the approppriate code tags!

Welcome to The Scripts.

We cannot see why because your menu depends on the CSS settings. So where is the CSS definitions file?

Show it inside code tags.

Ronald
Feb 29 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
He forgot the slash on the closing [/html].

As said, we need to see the whole CSS file but, from your inline styling, it looks like you may not be setting units. Everything needs 'px' for pixels or other unit. A number alone may not work.

Also, it says you are usinng FrontPage. Make sure you have a proper doctype at the head. See the article about doctypes under Howtos at the top of this page if you don't know about them.
Feb 29 '08 #3

P: 2
here is the css

Expand|Select|Wrap|Line Numbers
  1. .navbar
  2. {
  3. }  
  4.  
  5. .mainDiv
  6. {
  7.   width:185px;
  8. }
  9.  
  10. .topItem
  11. {
  12.   letter-spacing: 0;
  13.   background: url('arrow-up-title.jpg') no-repeat center;
  14.   border:medium none; width:185px; height:25px; color:#215dc6; cursor:pointer; text-indent:10px; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:tahoma, verdana, sans-serif; background-repeat:no-repeat
  15. }
  16.  
  17. .topItemOver
  18. {
  19.   text-indent:10px;
  20.   letter-spacing: 0;
  21.   background: url('arrow-up-title-on.jpg') no-repeat center;
  22.   height:25px; width:185px; color:#428eff; cursor:pointer; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:tahoma, verdana, sans-serif; background-repeat:no-repeat
  23. }
  24.  
  25. .topItemClose
  26. {
  27.   text-indent:10px;
  28.   letter-spacing: 0;
  29.   background: url('arrow-down-title.jpg') no-repeat center;
  30.   height:25px; width:185px; color:#215dc6; cursor:pointer; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:tahoma, verdana, sans-serif; background-repeat:no-repeat
  31. }
  32.  
  33.  
  34. .topItemCloseOver
  35. {
  36.   text-indent:10px;
  37.   letter-spacing: 0;
  38.   background: url('arrow-down-title-on.jpg') no-repeat center;
  39.   height:25px; width:185px; color:#428eff; cursor:pointer; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:tahoma, verdana, sans-serif; background-repeat:no-repeat
  40. }
  41.  
  42.  
  43.  
  44. .dropMenu
  45. {
  46.   border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:0px solid #FFFFFF; border-bottom:1px solid #FFFFFF; background-color: #d6dff7;
  47.   color: #000;
  48.   filter:alpha(opacity=100);
  49.   padding-top:5px;
  50.   padding-bottom:5px; font-style:normal; font-variant:normal; font-weight:bold; font-size:11px; font-family:tahoma, verdana, sans-serif
  51. }
  52.  
  53. .subMenu
  54. {
  55.    display:block;
  56. }
  57.  
  58. .subItem
  59. {
  60.    margin-left:10px;
  61.    margin-top:2px;
  62.    height:18px;
  63.    font: 11px tahoma,verdana,sans-serif;    
  64.    text-decoration:none;
  65.    color: #215dc6;
  66.  
  67. }
  68.  
  69. .subItem a
  70. {
  71.    margin-left:23px;
  72.    font: 11px tahoma,verdana,sans-serif;         
  73.    text-decoration:none;
  74.    color: #215dc6;
  75. }
  76.  
  77. .subItemOver
  78. {
  79.    margin-left:10px;
  80.    margin-top:2px;
  81.    font: 11px tahoma,verdana,sans-serif;      
  82.    height:18px;
  83.    color: #428eff;
  84. }
  85.  
  86. .subItemOver  a
  87. {
  88.    margin-left:23px;
  89.    font: 11px tahoma,verdana,sans-serif;
  90.    cursor:pointer;    
  91.    color: #428eff;
  92.    text-decoration:underline;
  93.    cursor:pointer;
  94. }
  95.  
  96.  
  97. .drop
  98. {
  99.    border-left:1px solid black;
  100.    border-right:1px solid black;    
  101. }
  102.  
Feb 29 '08 #4

ronverdonk
Expert 2.5K+
P: 4,258
Replace lines 1-3 in your CSS file with
Expand|Select|Wrap|Line Numbers
  1. .navbar
  2. {
  3. margin-top: 15%;
  4. text-align: left;
  5. }  
Ronald
Mar 1 '08 #5

Post your reply

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