Align Menu

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Toshk
    New Member
    • Feb 2008
    • 2
    #1

    Align Menu

    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="Micros oft FrontPage 5.0">
    <meta name="ProgId" content="FrontP age.Editor.Docu ment">
    <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>JSwitc h 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="#">Config uration</a></div>
    <div class="subItem" ><a href="#">Tool Box</a></div>
    <div class="subItem" ><a href="#">Contac t 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="#">Config uration</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]
    Tags: None
    • ronverdonk
      Recognized Expert Specialist
      • Jul 2006
      • 4259
      #2
      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

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          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.

            Comment

            • Toshk
              New Member
              • Feb 2008
              • 2
              #4
              here is the css

              Code:
              .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;	
}

                Comment

                • ronverdonk
                  Recognized Expert Specialist
                  • Jul 2006
                  • 4259
                  #5
                  Replace lines 1-3 in your CSS file with
                  Code:
                  .navbar
{
margin-top: 15%;
text-align: left;
}
                  Ronald

                    Comment

                    Previous template Next
                    Working...