Can I please get help on aligning a css to the right

  • Chaze
  • Graduate
  • Graduate
  • User avatar
  • Posts: 111
  • Loc: WebHost.pro

Post 3+ Months Ago

I cannot for the life of me get this menu to line up tot he right it will only align to the left.

http://webhost.pro/why-us.html

Image

It's the top menu where 24/7 is pulled to the left, I am trying to have it pull to the right. I have added text-align: right; to every part of the CSS for this part and it still will not move.

Sorry I have worked on it for an hour so I thought I would try here before I lose it.

Code: [ Select ]
/*** MENU ***/
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        5;
    list-style:        none;
}

nav {
    float:right;
    margin-right:10px;
    padding-top:40px;
}
.sf-menu {
    line-height:    1.0;
    text-align: right;
}
.sf-menu li {
    float:            left;
    position:        relative;
    margin-left:20px;    
}
.sf-menu a {
    display:        block;
    position:        relative;
    color:#CCCCCC;
    text-transform:capitalize;
    font-size:12px;
    line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
    color:#FFFFFF;
    text-decoration:none;
}

.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
    color:#1f4460;
}

.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
    color:#58a5c4;
}

.sf-menu ul {
    position:        absolute;
    top:            -999em;
    background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
    width:            200px; /* left offset of submenus need to match (see below) */
    padding-top: 19px;
    padding-right: 0;
    padding-bottom: 8px;
    padding-left: 0;
}

.sf-menu ul:after {
    display:block;
    position:absolute;
    width:11px;
    height:6px;
    background:url(../images/marker1.png) no-repeat 0 0;
    top:-6px;
    left:14px;
    content:'  ';
}

.sf-menu ul ul:after {
    display:block;
    position:absolute;
    width:5px;
    height:9px;
    background:url(../images/marker2.png) no-repeat 0 0;
    top:13px;
    left:-5px;
    content:'  ';
}

.sf-menu ul ul {
    position:        absolute;
    top:            -999em;
    padding:10px 0 6px;
    background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
    width:            140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
    margin:0 25 30px;
    padding:20px 0 0px;
    text-align:left;
}
.sf-menu ul a {
    font-size:12px;
    color:#fff;
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: -17px;
  top: 32px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left: 151px;
  top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em; /* match ul width */
    top:            0;
}
  1. /*** MENU ***/
  2. .sf-menu, .sf-menu * {
  3.     margin:            0;
  4.     padding:        5;
  5.     list-style:        none;
  6. }
  7. nav {
  8.     float:right;
  9.     margin-right:10px;
  10.     padding-top:40px;
  11. }
  12. .sf-menu {
  13.     line-height:    1.0;
  14.     text-align: right;
  15. }
  16. .sf-menu li {
  17.     float:            left;
  18.     position:        relative;
  19.     margin-left:20px;    
  20. }
  21. .sf-menu a {
  22.     display:        block;
  23.     position:        relative;
  24.     color:#CCCCCC;
  25.     text-transform:capitalize;
  26.     font-size:12px;
  27.     line-height:16px;
  28. }
  29. .sf-menu a:hover,
  30. .sf-menu a.active,
  31. .sf-menu li.sfHover > a {
  32.     color:#FFFFFF;
  33.     text-decoration:none;
  34. }
  35. .sf-menu ul a:hover,
  36. .sf-menu ul li.sfHover > a {
  37.     color:#1f4460;
  38. }
  39. .sf-menu ul ul a:hover,
  40. .sf-menu ul ul li.sfHover > a {
  41.     color:#58a5c4;
  42. }
  43. .sf-menu ul {
  44.     position:        absolute;
  45.     top:            -999em;
  46.     background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
  47.     width:            200px; /* left offset of submenus need to match (see below) */
  48.     padding-top: 19px;
  49.     padding-right: 0;
  50.     padding-bottom: 8px;
  51.     padding-left: 0;
  52. }
  53. .sf-menu ul:after {
  54.     display:block;
  55.     position:absolute;
  56.     width:11px;
  57.     height:6px;
  58.     background:url(../images/marker1.png) no-repeat 0 0;
  59.     top:-6px;
  60.     left:14px;
  61.     content:'  ';
  62. }
  63. .sf-menu ul ul:after {
  64.     display:block;
  65.     position:absolute;
  66.     width:5px;
  67.     height:9px;
  68.     background:url(../images/marker2.png) no-repeat 0 0;
  69.     top:13px;
  70.     left:-5px;
  71.     content:'  ';
  72. }
  73. .sf-menu ul ul {
  74.     position:        absolute;
  75.     top:            -999em;
  76.     padding:10px 0 6px;
  77.     background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
  78.     width:            140px; /* left offset of submenus need to match (see below) */
  79. }
  80. .sf-menu ul li {
  81.     width:            100%;
  82.     margin:0 25 30px;
  83.     padding:20px 0 0px;
  84.     text-align:left;
  85. }
  86. .sf-menu ul a {
  87.     font-size:12px;
  88.     color:#fff;
  89. }
  90. .sf-menu li:hover {
  91.     visibility:        inherit; /* fixes IE7 'sticky bug' */
  92. }
  93. .sf-menu li:hover ul,
  94. .sf-menu li.sfHover ul {
  95.     left: -17px;
  96.   top: 32px; /* match top ul list item height */
  97.     z-index:        99;
  98. }
  99. ul.sf-menu li:hover li ul,
  100. ul.sf-menu li.sfHover li ul {
  101.     top:            -999em;
  102. }
  103. ul.sf-menu li li:hover ul,
  104. ul.sf-menu li li.sfHover ul {
  105.     left: 151px;
  106.   top: -8px;
  107. }
  108. ul.sf-menu li li:hover li ul,
  109. ul.sf-menu li li.sfHover li ul {
  110.     top:            -999em;
  111. }
  112. ul.sf-menu li li li:hover ul,
  113. ul.sf-menu li li li.sfHover ul {
  114.     left:            10em; /* match ul width */
  115.     top:            0;
  116. }
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

In your CSS you have a float:left for .sf-menu li. Change that to float:right and see if that resolves your problem.
  • Chaze
  • Graduate
  • Graduate
  • User avatar
  • Posts: 111
  • Loc: WebHost.pro

Post 3+ Months Ago

So strange when I do that it reverses everything in the menu and take out the spaces in the drop down box. But I can reverse the order in the html and center the drop down down text. Thanks!
  • Veeramanikandan
  • Novice
  • Novice
  • Veeramanikandan
  • Posts: 25

Post 3+ Months Ago

you just remove the width of main class div.

.main{margin:0 auto;
padding:0;
/* width:960px;*/}

After that your menu will appear from right side.
  • Chaze
  • Graduate
  • Graduate
  • User avatar
  • Posts: 111
  • Loc: WebHost.pro

Post 3+ Months Ago

Thanks, I will try it. For now I just reversed the format and changed the order. But it's not the best way.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 24 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.