Results 1 to 4 of 4

Thread: Help centering an HTML drop-down menu

  1. #1

    Thread Starter
    New Member
    Join Date
    Jan 2014
    Posts
    2

    Help centering an HTML drop-down menu

    Hello, I hope I've found the right place for help. I have a sports blog at www.phins-spotlight.com and as you can see I have an HTML menu near the top. (I did not write the code for this, someone helped me.) However, I'd like to either do one of two things: 1) center it horizontally; or 2) have it stretch to be 100% of the page width for any viewer.

    Here is the relevant code. If someone could please help me I'd greatly appreciate it!

    Code:
    #jsddm {
    margin: 0;
    padding: 0px;
    z-index:1000000000;
    position:relative;
    }
    
    #jsddm li {
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }
    
    #jsddm li a {
    display: block;
    white-space: nowrap;
    margin:1px 3px;
    border: 1px solid #FFFFFF;
    background: #cccccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#008e97), to(#005878));
    background: -moz-linear-gradient(top, #008e97, #005878);
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: #000000 1px 0;
    color: #FFFFFF;
    font-size: 15px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight:bold;
    text-decoration: none;
    vertical-align: middle;
    }
    
    #jsddm li a:hover {
    background: #008e97;
    }
    
    #jsddm li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white;
    }
    
    #jsddm li ul li {
    float: none;
    display: inline;
    }
    
    #jsddm li ul li a {
    width: auto;
    background: #008e97;
    }
    
    #jsddm li ul li a:hover {
    background: #005878;

  2. #2
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Help centering an HTML drop-down menu

    Hi there ChrisJNelson,

    and a warm welcome to these forums.

    Making the highlighted additions to your code...
    Code:
    
    #jsddm {
    float:right;
    right:50%;
    margin: 0;
    padding: 0px;
    z-index:1000000000;
    position:relative;
    }
    
    #jsddm li {
    position:relative;
    left:50%;
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }
    ...will, hopefully, center your menu.


    ~ the original bald headed old fart ~

  3. #3

    Thread Starter
    New Member
    Join Date
    Jan 2014
    Posts
    2

    Re: Help centering an HTML drop-down menu

    Quote Originally Posted by coothead View Post
    Hi there ChrisJNelson,

    and a warm welcome to these forums.

    Making the highlighted additions to your code...
    Code:
    
    #jsddm {
    float:right;
    right:50%;
    margin: 0;
    padding: 0px;
    z-index:1000000000;
    position:relative;
    }
    
    #jsddm li {
    position:relative;
    left:50%;
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }
    ...will, hopefully, center your menu.
    That did center it, thank you!

  4. #4
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: Help centering an HTML drop-down menu


    No problem, you're very welcome.


    ~ the original bald headed old fart ~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width