Results 1 to 6 of 6

Thread: Solid Block Menu - I wnat to make it centered, it is possible?

  1. #1
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Solid Block Menu - I wnat to make it centered, it is possible?

    I need to make the Solid Block Menu http://www.dynamicdrive.com/style/cs...id-block-menu/
    Centered, any help?
    Thanks in advance

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Change:
    Code:
    <ul class="solidblockmenu">
    To:
    Code:
    <ul class="solidblockmenu" align="center">
    Jeremy | jfein.net

  3. #3
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the answer, but it doesnŽt work

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    You want the links in
    the center of the menu?
    Or the menu in the center of the page?
    Last edited by Nile; 02-12-2008 at 01:11 AM. Reason: update
    Jeremy | jfein.net

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    html
    Code:
    <ul class="solidblockmenu">
         <li><a href="http://www.dynamicdrive.com/">Home</a></li>
         <li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
         <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
         <li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
         <li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
         <li><a href="http://www.cssdrive.com">Gallery</a></li>
    </ul>
    css
    Code:
    .solidblockmenu{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width: 100%;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(media/blockdefault.gif) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    To center the whole menu you first need to remove the reference to float: left from the first element, then you need to do some margin / alignment work
    Code:
    ul.solidblockmenu{
    margin: 0 auto;
    text-align: center;
    width: 100%;
    }
    you then need to make sure that the bullets are not on the left side of the elements and you want to keep the code already being used in as the list item to display the menu horizontally.
    Code:
    ul.solidblockmenu li {
         display: inline;
         list-style-type: none;
         text-align: left;
    }
    if that is not what you were looking for please explain more in-depth what you are attempting to accomplish

  6. #6
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank a lot, IŽll try it today, and let you know later...

Bookmarks

Posting Permissions

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