Please, help me center my drop-down menu

Dev Shed Forums Sponsor:

November 16th, 2012, 11:16 AM

pi2a

Registered User

Join Date: Nov 2012

Posts: 4

Time spent in forums: 46 m 57 sec
Reputation 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 05:37 PM. Reason: added [code] tags

November 16th, 2012, 11:47 AM

Hostwinds_Alex

Registered User

Join Date: Oct 2012

Location: Tulsa, OK

Posts: 5

Time spent in forums: 2 h 33 m 56 sec
Reputation Power: 0

Send a message via Skype to Hostwinds_Alex

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.

November 16th, 2012, 03:05 PM

pi2a

Registered User

Join Date: Nov 2012

Posts: 4

Time spent in forums: 46 m 57 sec
Reputation 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!

November 16th, 2012, 03:50 PM

pi2a

Registered User

Join Date: Nov 2012

Posts: 4

Time spent in forums: 46 m 57 sec
Reputation 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!

November 16th, 2012, 03:56 PM

Hostwinds_Alex

Registered User

Join Date: Oct 2012

Location: Tulsa, OK

Posts: 5

Time spent in forums: 2 h 33 m 56 sec
Reputation 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!

November 16th, 2012, 04:37 PM

pi2a

Registered User

Join Date: Nov 2012

Posts: 4

Time spent in forums: 46 m 57 sec
Reputation Power: 0

Quote:

Originally Posted by Hostwinds_Alex

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

Please, help me center my drop-down menu

Developer Shed Advertisers and Affiliates