Align Menu - Latest Bytes

2 New Member

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;">

<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>

<br>

<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>

<script type="text/javascript" src="xpmenuv21.js"></script>
</div>

<p> </p>

</body>
[/HTML]

Feb 29 '08 #1

Subscribe Reply

2312

ronverdonk

4,258

Recognized Expert Specialist

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

7,435

Recognized Expert Expert

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

Toshk

New Member

here is the css

Expand|Select|Wrap|Line Numbers

 
.navbar

{

}  
 
.mainDiv

{

  width:185px;

}
 
.topItem

{

  letter-spacing: 0;

  background: url('arrow-up-title.jpg') no-repeat center;

  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

}
 
.topItemOver

{

  text-indent:10px;

  letter-spacing: 0;

  background: url('arrow-up-title-on.jpg') no-repeat center;

  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

}
 
.topItemClose

{

  text-indent:10px;

  letter-spacing: 0;

  background: url('arrow-down-title.jpg') no-repeat center;

  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

}
 
.topItemCloseOver

{

  text-indent:10px;

  letter-spacing: 0;

  background: url('arrow-down-title-on.jpg') no-repeat center;

  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

}
 
.dropMenu

{

  border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:0px solid #FFFFFF; border-bottom:1px solid #FFFFFF; background-color: #d6dff7;

  color: #000;

  filter:alpha(opacity=100);

  padding-top:5px;

  padding-bottom:5px; font-style:normal; font-variant:normal; font-weight:bold; font-size:11px; font-family:tahoma, verdana, sans-serif

}
 
.subMenu

{

   display:block;

}
 
.subItem

{

   margin-left:10px;

   margin-top:2px;

   height:18px;

   font: 11px tahoma,verdana,sans-serif;    

   text-decoration:none;

   color: #215dc6;
 
}
 
.subItem a

{

   margin-left:23px;

   font: 11px tahoma,verdana,sans-serif;         

   text-decoration:none;

   color: #215dc6;

}
 
.subItemOver

{

   margin-left:10px;

   margin-top:2px;

   font: 11px tahoma,verdana,sans-serif;      

   height:18px;

   color: #428eff;

}
 
.subItemOver  a

{

   margin-left:23px;

   font: 11px tahoma,verdana,sans-serif;

   cursor:pointer;    

   color: #428eff;

   text-decoration:underline;

   cursor:pointer;

}
 
.drop

{

   border-left:1px solid black;

   border-right:1px solid black;    

}

Feb 29 '08 #4

ronverdonk

4,258

Recognized Expert Specialist

Replace lines 1-3 in your CSS file with

Expand|Select|Wrap|Line Numbers

 .navbar

{

margin-top: 15%;

text-align: left;

}

Ronald

Mar 1 '08 #5

Similar topics

Problem to align CSS knobs

by: Mark | last post by:

Ok, it is starting to get somewhere, but i am not sure what to do with the following problem: I designed "knobs". They are 90px in width and do have one border (right) of 1px. So i guess, within...