#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0

    Please, help me center my drop-down menu


    Hi guys!
    I have some basic site, consisting of css divs. In one of the divs I have placed a drop-down menu. I want it to stay always at the center of the screen.
    All the options that I tried did not work - it either pushes down the other divs, at drop down, or is not horizontal, or messes up in another way.
    The only option that worked is fixing it to stay 350px from the left - which is not an option - as in different screen resolutions it will stay at different places. And I need it at the center.
    So can you please help me with it?
    All advices and ideas on fixing it are welcome as I have ran out of options already
    Best regards,
    Pi2a


    Here is the .css code:

    Code:
    html{
        height: 100%;
    }
    *{
        margin: 0px;
        padding: 0px;
    }
      
    img, fieldset{
        padding: 0px;
        border: none;
    }
      
    a{
        color: #0000FF;
        text-decoration: none;
        font-weight: bold;
    }
      
    a:hover {
        text-decoration: none;
        color: #004a42;
    }
      
    #bg_top{
        position: absolute;
        height: 485px;
        background: url(images/bg1.jpg) repeat-x top;
        width: 100%;
    }
      
    #wrap{
        position: relative;
        background: url(images/bg3.png) repeat-x bottom;
        min-height: 100%;
    }
      
    body {  
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 17px;
        color: #000000;
        background: #FFFFB7;
        height: 100%;
    }
      
    h2{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #0066CC;
        font-weight: normal;
        padding: 0px 0px 10px 10px;
    }
      
    h3{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #ffffff;
        font-weight: normal;
        padding: 0px 0px 10px 30px;
    }
    h44
    {
        font-family: Arial, Helvetica, sans-serif;
        color: #0066CC;
        background: #D2FFCC;
        font-size : 15px;
        border:1px solid #ccc;
        padding:10px 25px 10px 15px;
    }
      
    .clear{
        clear: both;    
    }
      
    .read{
        text-align: right;
        padding: 5px 10px 0px 0px;
    }
      
    .read a{
        color: #d84005;
        font-weight: normal;
    }
      
    #logo{
        height: 45px;
        padding-top: 6px;
        padding-left: 40px;
        float: left;
    }
      
    #logo h1 a{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #0066CC;
        font-weight: bold;
        text-decoration: none;
    }
      
    #logo a small{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
    }
      
      
    .dd_menu    {
        list-style:none;
        font-weight:normal;
        margin-bottom:10px;
        float:left;
        width:100%;
    position:absolute;
    left: 350px;
    z-index:5;
    font-size: 17px;
        z-index:5;
          
      
    }
      
    .dd_menu li     {
        float:left;
        margin-right:10px;
        position:relative;
    }
      
    .dd_menu li a   {
        display:block;
        padding:5px;
        color:#fff;
        background:#0F87FF;
        text-decoration:none;
    }
      
    .dd_menu li:hover a {
            color:#fff;
        background:#DADADA;
        text-decoration:underline;
    }
      
      
      
    .dd_menu ul {
        background:#fff; 
        background:rgba(255,255,255,0); 
        list-style:none;
        position:absolute;
        left:-9999px; 
    }
      
      
    .dd_menu ul li{
        padding-top:1px; 
        float:none;
    }
    .dd_menu ul a{
        white-space:nowrap; 
    }
    .dd_menu li:hover ul{ 
        left:0;
    }
    .dd_menu li:hover a{ 
        background:#B7CCD2;
        text-decoration:underline;
    }
    .dd_menu li:hover ul a{ 
        text-decoration:none;
    }
    .dd_menu li:hover ul li a:hover{ 
        background:#0F87FF;
    }
      
      
      
      
      
      
      
      
      
    #content{
        width: 980px;
         background: #F5FBFC; 
        margin: 0 auto;
        text-align:justify;
        box-shadow: 3px 3px 8px #818181;
    -webkit-box-shadow: 3px 3px 8px #818181;
    -moz-box-shadow: 3px 3px 8px #818181;
        }
      
    #content p{
        padding-left: 10px;
        padding-right: 10px;
    }
      
      
    .content_pad{
        padding: 10px;
    }
      
    .con_bor{
        border-top: 1px solid #9933FF;
        height: 10px;
        margin-top: 10px;
    }
      
    .con_bau
    {
        font-family: Arial, Helvetica, sans-serif;
        color: #0066CC;
        background: #fff;
        font-size : 18px;
        border:1px solid #ccc;
        padding: 5px 5px 5px 5px;
        }
          
    .con_bau2
    {
        font-family: Arial, Helvetica, sans-serif;
            border:1px solid #ccc;
        padding: 5px 5px 5px 5px;
        }
          
        img.floatLeft { 
        float: left; 
        margin: 4px;
        padding: 5px 5px 5px 5px; 
    }
        img.floatRight { 
        float: left; 
        margin: 4px;
        padding: 5px 5px 5px 5px; 
    }
      
      
      
      
      
      
    #header{
        background: url(images/header.jpg) no-repeat;
        width: 980px;
        height: 246px;
    }
      
      
    .column_box{
        background: url(images/box_one_bg.jpg) repeat-x top;
        min-height: 135px;
        padding-top: 20px;
        margin-top: 10px;
    }
      
    .column_razd{
        background: url(images/column_razd.png) repeat-y center;    
    }
      
    .column1, .column2, .column3{
        float: left;
        width: 33.3%;
    }
      
    .img_column{
        float: left;
        padding: 0px 10px 0px 30px;
    }
      
    .text_column1, .text_column2, .text_column3{
        float: left;
        width: 298px;
    }
      
    .text_column1{
        padding: 0px 0px 0px 10px;
    }
      
    .text_column2{
        padding: 0px 33px 0px 33px;
    }
      
    #content .text_column1 p, #content .text_column2 p, #content .text_column3 p{
        padding-left: 5px;
    }
      
    #content .text_column1 h2, #content .text_column2 h2, #content .text_column3 h2{
        padding-left: 0px;
        text-align: center;
    }
      
      
    #footer_top{
        width: 841px;
        margin: 0 auto;
        background: url(images/footer_top_border.png) no-repeat bottom;
        padding-top: 30px;
    }
      
    #footer_top h3{
    color: #0066CC;
        padding-bottom: 5px;
    }
      
    #footer_top a{
        color: #333333;
        font-weight: bold;
    }
      
    #footer_top a:hover{
        color: #578f0e;
    }
      
    #footer_top p{
        color: #666666;
    }
      
    #footer_column1, #footer_column2, #footer_column3{
        width: 226px;
        float: left;
    }
      
    .footer_text{
        background: url(images/footer_top_border.png) no-repeat top left;
        width: 226px;
        padding: 10px 0px 10px 0px;
    }
      
    #footer_column2{
        padding: 0px 87px 0px 75px;
    }
      
    .foot_pad{
        padding-left: 45px;
        padding-top: 10px;
    }
      
    .link1{
        background: url(images/link1.png) no-repeat 0px 2px;
        padding-left: 30px;
        min-height: 18px;
        padding-bottom: 10px;
    }
      
    .link2{
        background: url(images/link2.png) no-repeat 0px 2px;
        padding-left: 30px;
        min-height: 18px;
        padding-bottom: 10px;
    }
      
    .link3{
        background: url(images/link3.png) no-repeat 0px 2px;
        padding-left: 30px;
        min-height: 18px;
        padding-bottom: 10px;
    }
      
    .link4{
        background: url(images/link4.png) no-repeat 0px 2px;
        padding-left: 30px;
        min-height: 18px;
        padding-bottom: 10px;
    }
      
    .ls{
        list-style: none;
        padding-left: 0px;
    }
      
    .ls li{
        background: url(images/ls1.gif) no-repeat 0px 6px;
        margin-bottom: 8px;
        padding-left: 15px;
    }
      
    #footer_bot{
        text-align: center;
        padding: 20px;
        font-size: 10px;
    }
      
    #footer_bot p, #footer_bot a{
        color: #999999;
        font-weight: normal;
        font-size: 10px;
    }
    I cannot post the htm code as the forum blocks the posting
    Last edited by Kravvitz; November 16th, 2012 at 06:37 PM. Reason: added [code] tags
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Tulsa, OK
    Posts
    5
    Rep Power
    0
    One option that you could try is putting it into a <Tr> and positioning the DIV in the center of that, if margin-left and margin-right aren't working or are obstructing your other elements. Your wall of text kind of blanked me out, if you would be more descriptive about which element you cent centered and such then it would probably be easier for you to get help.
    Best of luck.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Hi Hostwinds_Alex,
    Thank you for your reply and your effort!
    I will try what you suggested!
    Sorry for the wall of text, I wasn't sure what I could cut off. Tried to post the .css and .htm file, but I'm not allowed, so it was blocked and I copied & pasted it.
    The part I want to put in the center is the drop down menu - dd_menu part
    Thank you for your time and advice!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Hi again!
    I am afraid, I couldn't make it this way I am a newbee, so I am sure it was my bad
    Thank you for the advice anyway!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Location
    Tulsa, OK
    Posts
    5
    Rep Power
    0
    I took a look at your CSS, what could very likely be the problem is your float: left; attribute. This could be preventing it from centering.
    Disregard my previous suggestion, try taking that out and using margin-left: auto; and
    margin-right: auto;

    If that doesn't work, then try messing with your width attribute and see how that helps.

    Good luck!
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Originally Posted by Hostwinds_Alex
    I took a look at your CSS, what could very likely be the problem is your float: left; attribute. This could be preventing it from centering.
    Disregard my previous suggestion, try taking that out and using margin-left: auto; and
    margin-right: auto;

    If that doesn't work, then try messing with your width attribute and see how that helps.

    Good luck!
    Thank you!

    Did so:

    .dd_menu {
    list-style:none;
    font-weight:normal;
    margin-bottom:10px;
    margin-left: auto;
    margin-right: auto;
    width:100%;
    position:absolute;
    font-size: 17px;
    z-index:5;
    }

    It makes the whole drop-down menu stick to the left of the div

    If I mess with the width of the drop-down menu - I need fixed width - which bothers me because as I am not sure how wide it would be on different screens, as the drop-down menu contains text (not fixed width) and changing the text size would change the position, right?

    Regards,
    Pi2a

IMN logo majestic logo threadwatch logo seochat tools logo