Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    problem styling list/menu

    Hi,

    I have trouble styling my list-based menu. I would like the leftmost and rightmost menu items with equal margin to the wrapper (in the center of the wrapper). I have tried applying margin-left:auto, margin-right:auto to ul.menu. However this does not seem to work. I have also played around a long time with the Firefox Developer Toolbar - but I can't seem to find my mistake... What am I doing wrong?

    This is the relevant code:

    <div id="navMenu">
    <div class="moduletable_menu">
    <ul class="menu">
    <li class="item-435"><a href="/joomla17/" >Forside</a></li>
    <li class="item-499 parent"><a href="/joomla17/index.php/nyheder" >Nyheder</a></li>
    <li class="item-477 current active parent"><a href="/joomla17/index.php/foreninger" >Foreninger</a></li>
    <li class="item-466 parent"><a href="/joomla17/index.php/2012-01-13-12-37-11" >Turistinformation</a></li>
    <li class="item-465 parent"><a href="/joomla17/index.php/om-nyord" >Om Nyord</a></li>
    </ul>
    </div>
    </div> <!--navMenu END-->

    #navMenu {
    height:60px;
    width:960px;
    background: #f1f7e2 url(../images/gradient2_alt.png) repeat-x top left;
    }

    #navMenu ul.menu {
    margin:0;
    padding: 5px 0 0 0;
    list-style-type: none;
    text-transform: uppercase;
    font-size: 1.385em;
    }

    #navMenu li {
    float: left;
    }

    #navMenu ul a:link,
    #navMenu ul a:visited {
    font-weight: bold;
    padding: 0 25px 0 25px;
    vertical-align: middle;}

    a:hover and visited states are also applied, but not interesting in this context.

    Any help would be greatly appreciated!! Thanks.

    -nitro29

  • #2
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Put right and left padding on the wrapper instead of on the navigation. Depending on your code you might have to split up your wrapper into sub-sections such as: Header container, navigation container, content container, then footer container. Doing this will separate the navi from the other sections and give you the ability to have different padding for each section.

  • Users who have thanked jackdaniels for this post:

    nitro29 (02-08-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •