6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Trying to center my menu

by robinsden
5 replies
  • WEB DESIGN
    • |
I know the camand is margin:0 auto;

but...

I can't figure out where to put it in my css coding.

I thought I knew as I have figured out many other centering things before but this particular menu is giving me troubles.

The coding for the menu is http://robinsden.com/Scripts/topmenu.css

and my main css coding page is http://robinsden.com/Scripts/maincode.css

I got one other problem where I don't seem to be able to get the browser to display the correct font. I have changed to sans-serif" but as you will notice it dose not display as such.
#center #menu
  • Profile picture of the author ronc0011
    Centering things usually comes down to playing with Margins and padding i.e.

    margin:10PX;
    padding:10px;

    Another thing you often have to deal with is nested containers or divs

    If you use the"position" attribute give it a value of "relative" this applies everything relative o the parent container. I usually put menus in a parent div so that way all I have to center is the parent div
    {{ DiscussionBoard.errors[4597078].message }}
  • Profile picture of the author onlinecasinodeck
    Originally Posted by robinsden View Post

    I know the camand is margin:0 auto;

    but...

    I can't figure out where to put it in my css coding.

    I thought I knew as I have figured out many other centering things before but this particular menu is giving me troubles.

    The coding for the menu is http://robinsden.com/Scripts/topmenu.css

    and my main css coding page is http://robinsden.com/Scripts/maincode.css

    I got one other problem where I don't seem to be able to get the browser to display the correct font. I have changed to sans-serif" but as you will notice it dose not display as such.
    try to use this code

    .clear{
    clear:both;
    }

    insert <div class="clear"></div> it before the div on your menu.
    Signature
    online casino
    {{ DiscussionBoard.errors[4597387].message }}
    • Profile picture of the author robinsden
      Originally Posted by onlinecasinodeck View Post

      try to use this code

      .clear{
      clear:both;
      }

      insert <div class="clear"></div> it before the div on your menu.
      I tried the following form what you gave me but it did not work:

      #pro_linedrop {
      clear:both;
      margin:0 auto;
      height:70px;
      width:100%;
      padding-bottom:32px;
      padding-top:8px;
      position:relative;
      font-family:georgia, arial, verdana, sans-serif;
      font-size:12px;
      z-index:500;
      background-color:#000000;
      }

      I have not uploaded the change but I tested it offline and it did not work.
      Signature

      Photograph repairs, online computer help and simple site design. http://robinsden.com

      {{ DiscussionBoard.errors[4597629].message }}
  • Profile picture of the author iuditg
    Try this mate :

    HTML Code:
    #pro_linedrop {
    background-color: #000000;
    font-family: georgia,arial,verdana,sans-serif;
    font-size: 12px;
    height: 70px;
    padding-bottom: 32px;
    padding-top: 8px;
    position: relative;
    width: 960px;
    z-index: 500;
    margin: 0 auto;
    left: 160px;
}
    Also If you just want it centered and not floating try this :

    HTML Code:
    #pro_linedrop {
    background-color: #000000;
    font-family: georgia,arial,verdana,sans-serif;
    font-size: 12px;
    height: 70px;
    padding-bottom: 32px;
    padding-top: 8px;
    position: relative;
    width: 960px;
    z-index: 500;
    margin: 0 auto;
}
    This would solve your problem
    Signature
    {{ DiscussionBoard.errors[4598048].message }}
    • Profile picture of the author robinsden
      Originally Posted by iuditg View Post

      Try this mate :

      HTML Code:
      #pro_linedrop {
    background-color: #000000;
    font-family: georgia,arial,verdana,sans-serif;
    font-size: 12px;
    height: 70px;
    padding-bottom: 32px;
    padding-top: 8px;
    position: relative;
    width: 960px;
    z-index: 500;
    margin: 0 auto;
    left: 160px;
}
      Also If you just want it centered and not floating try this :

      HTML Code:
      #pro_linedrop {
    background-color: #000000;
    font-family: georgia,arial,verdana,sans-serif;
    font-size: 12px;
    height: 70px;
    padding-bottom: 32px;
    padding-top: 8px;
    position: relative;
    width: 960px;
    z-index: 500;
    margin: 0 auto;
}
      This would solve your problem
      Thanks, Cheers.
      Signature

      Photograph repairs, online computer help and simple site design. http://robinsden.com

      {{ DiscussionBoard.errors[4598178].message }}

Trending Topics