Results 1 to 9 of 9

Thread: Solid Block Menu

  1. #1
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Solid Block Menu

    Hey was wondering if there was a way I could center the menu?

    http://stmarkcrestview.com/index_test.html

    Heres my CSS



    Code:
    body {background:#990000;}
    
    .solidblockmenu{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width:100;
    overflow: hidden;
    margin-bottom: 1em;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(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;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li .current{
    color: white;
    background: transparent url(blockactive.gif) center center repeat-x;
    }

  2. #2
    Join Date
    Aug 2009
    Posts
    399
    Thanks
    42
    Thanked 4 Times in 4 Posts

    Default

    I think you can fix it in several different ways.
    first one by fixing this:
    PHP Code:
    </div></td>
        </
    tr>
        <
    tr valign='center';[maybe align]>

          <
    td height="50"><div align="center"><ul class="solidblockmenu" >
    <
    li><a href="http://www.dynamicdrive.com/" class="current">Home</a></li>
    <
    li><a href="http://www.dynamicdrive.com/style/" >Schedule</a></li>
    <
    li><a href="http://www.dynamicdrive.com/forums/">Events</a></li>
    <
    li><a href="http://tools.dynamicdrive.com">Links</a></li>
    <
    li><a href="http://www.javascriptkit.com/">Our Pastors</a></li>
    <
    li><a href="http://www.cssdrive.com">Prayer List</a></li>
    <
    li><a href="http://www.cssdrive.com">Ministries</a></li>
    <
    li><a href="http://www.cssdrive.com">Photo Gallery</a></li>

    <
    li><a href="http://www.cssdrive.com">Newsletter</a></li>
    <
    li><a href="http://www.cssdrive.com">Contact Us</a></li
    also you can use margin:auto;
    PHP Code:
    body {background:#990000;}

    .solidblockmenu{
    marginauto;
    padding0;
    floatleft;
    fontbold 13px Arial;
    width:100;
    overflowhidden;
    margin-bottom1em;
    border1px solid #625e00;
    border-width1px 0;
    backgroundblack url(blockdefault.gifcenter center repeat-x;
    }

    .
    solidblockmenu li{
    displayinline;
    }

    .
    solidblockmenu li a{
    floatleft;
    colorwhite;
    padding9px 11px;
    text-decorationnone;
    border-right1px solid white;
    }

    .
    solidblockmenu li a:visited{
    colorwhite;
    }

    .
    solidblockmenu li a:hover, .solidblockmenu li .current{
    colorwhite;
    backgroundtransparent url(blockactive.gifcenter center repeat-x;

    or use padding-left: xx pixels while you menu will be in the right spot. HTH

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,544
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there youngwebmaster,

    try changing this...
    Code:
    
    .solidblockmenu{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width:100;
    overflow: hidden;
    margin-bottom: 1em;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(blockdefault.gif) center center repeat-x;
    }
    
    ...to this...
    Code:
    
    .solidblockmenu {
        margin:0;
        padding:0;
        font: bold 13px arial;
        width:824px;
        overflow:hidden;
        margin-bottom:1em;
        border:1px solid #625e00;
        border-width:1px 0;
        background:black url(blockdefault.gif) center center repeat-x;
     }
    
    coothead

  4. #4
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    For learning purposes, can you tell me, was float: left; was part of the problem? I had looked at this question many times and wondered if that had anything to do with it.

    Thank you.

  5. #5
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Okay I tried both posts, and nothing worked. Any other thoughts?? I think the float: left; had something to do with it, because it will change if I take it out, but wont center it.

  6. #6
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I can change both float lefts to float: center and the menu will shrink vertically, but its centered. Anyway to make it not shrink vertically?

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,544
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there youngwebmaster,
    Okay I tried both posts, and nothing worked. Any other thoughts??
    Well, my thoughts say did you correctly implement the change that I gave you?
    I don't think that you could have.
    Check out the attached image to see the results of my suggestion in Firefox, IE, Opera and Safari.
    I know that my eyes are getting old but the menu certainly looks centered to me.

    coothead

  8. #8
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I must not have, it works great now
    I really really appreciate the help. Thanks!!!

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,544
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there youngwebmaster,
    I must not have, it works great now
    Well, thank heavens for that.
    I can now cancel my appointment with the optician.

    coothead

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
  •