14 {{ upvoteCount | shortNum }}
14 {{ upvoteCount | shortNum }}

How do I center some items and left align others in css menu?

by ThomasTe
11 replies
  • WEB DESIGN
    • |
Hi,

I have a menu based on this:

<style>
/* These styles create the dropdown menus. */
#navbar {
margin: 0;
padding: 0;
float:none;
height: 1em; }
#navbar li {
list-style: none;
width:170px;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #808080;
text-align: center;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 171px; /* Width to help Opera out */
background-color: #808080;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #808080;
color: #fff; }
#navbar li a:hover {
background-color: #C0C0C0; }
#navbar li li a:hover {
background-color: #C0C0C0; }
.auto-style2 {
font-family: Verdana;
font-size: 9pt;
}
.auto-style3 {
color: #666666;
}
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// Son of Suckerfish Dropdowns | HTML Dog
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTag Name("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
I would like to center the top-level items, as they are today, but left align the items on the second level (those showed as a dropdown, when moving the curser over an item in the menu bar).

Is that doable? If so, how?

thanks.

Best regards,
Thomas
#align #center #css #items #left #menu
  • Profile picture of the author Scumlabs
    To align left:

    float:left;
    To center:

    width:__px;
    margin:0px auto;
    {{ DiscussionBoard.errors[3288154].message }}
  • Profile picture of the author ThomasTe
    Hi Scumlabs,

    Would you expand a bit on that, please? I'm totally new with css.

    Thanks.

    Best regards,
    Thomas
    {{ DiscussionBoard.errors[3292089].message }}
  • Profile picture of the author ThomasTe
    Can anybody help here?

    Thanks.

    Best regards,
    Thomas
    {{ DiscussionBoard.errors[3299244].message }}
  • Profile picture of the author pvtryan
    have you tried "margin:auto" ?
    {{ DiscussionBoard.errors[3309161].message }}
  • Profile picture of the author SteveJohnson
    #navbar li li a { text-align: left; }
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[3309282].message }}
  • Profile picture of the author ThomasTe
    Thanks for the input, guys.

    @Steve: If I try this, it only puts it in the right place, when doing a mouse-over.
    @pvtryan: That's supposed to be at the #navbar, right? It doesn't seem to change anything.

    It seems that it's either or. I can left-align it, but then everything is left-aligned.

    Ideas?

    Thanks.

    Best regards,
    Thomas
    {{ DiscussionBoard.errors[3320173].message }}
    • Profile picture of the author RichKent
      Hi Thomas, you want to put the text-align:left code here:

      #navbar li:hover li, #navbar li.hover li {float: none; }

      so it will read:

      #navbar li:hover li, #navbar li.hover li {float: none;text-align:left; }

      Should work based on the css you copy/pasted.
      Signature
      Learn more about Wordpress and SEO
      {{ DiscussionBoard.errors[3325185].message }}
  • Profile picture of the author ThomasTe
    Thanks, RichKent.

    Still doesn't work though. Can it be due to some of the other definitions (for example #navbar li a)?

    Thanks for taking the time.

    Best regards,
    Thomas
    {{ DiscussionBoard.errors[3328106].message }}
    • Profile picture of the author RichKent
      Originally Posted by ThomasTe View Post

      Thanks, RichKent.

      Still doesn't work though. Can it be due to some of the other definitions (for example #navbar li a)?

      Thanks for taking the time.

      Best regards,
      Thomas
      Did you change the code from what you have above? CSS added to #navbar li a will affect Text listed in the main navbar that's also linked (a = anchor). Shouldn't affect the drop down menu.

      You could try adding the left align to this - #navbar li:hover li a, #navbar li.hover li a {
      background-color: #808080;
      color: #fff;
      text-align:left;
      }

      assuming all the nav is links it should work. If you want to PM me the site I can look at the code directly and figure it out - may be some bad code in there.
      Signature
      Learn more about Wordpress and SEO
      {{ DiscussionBoard.errors[3328229].message }}
  • Profile picture of the author ThomasTe
    Thanks, RichKent. Just sent you a pm.

    Best regards,
    Thomas
    {{ DiscussionBoard.errors[3333033].message }}

Trending Topics