Results 1 to 4 of 4

Thread: Tall css menu

  1. #1
    Join Date
    Jun 2008
    Location
    North Los Angeles County
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tall css menu

    You can view an example of exactly what I'm trying to achieve by visiting the following link. I just posted up what I had created in photoshop. http://designdgraphique.com/images/coplumenumockup.jpg

    I'm kinda feeling a little stupid here that I can't figure this out, but thank the cosmos for forums!

    What I am trying to do is create a horizontal menu that is approx. 75 px tall with a gray border on the left side of each link, I want the border to be 75 px and I have a background image for each link. I want the text for each link to sit at the bottom with roughly 5 px of padding-bottom. For whatever reasons, I just can't figure out how to make this work. Any help would be greatly appreciated and I can compensate you for your time if it will help.

    Thanks in advance!

    Wen

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Start with this, and then go from there.

  3. #3
    Join Date
    Jun 2008
    Location
    North Los Angeles County
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    This is great example of incorporating that top border, my issue is getting the length of the left border to be 75 px tall. Would you know of a resource where I can see how the css is structured in order to apply that to the menu I'm trying to create? Thanks again for that example, I'll definitely be able to use similar css in this menu. Cheers!

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    The CSS to that menu is included on the page! A lot of the CSS lines that control styling are commented out as well.

    To add a height of 75pixels, just add the highlighted below to the CSS:
    Code:
    #modernbricksmenu2 a{
    float: left;
    display: block;
    font: bold 11px Arial;
    color: white;
    text-decoration: none;
    margin: 0 1px 0 0; /*Margin between each menu item*/
    padding: 5px 10px;
    background-color: black; /*Brown color theme*/ 
    border-top: 1px solid white;
    height:75px;
    }
    To add a gray border to the left, add this:
    Code:
    #modernbricksmenu2 a{
    float: left;
    display: block;
    font: bold 11px Arial;
    color: white;
    text-decoration: none;
    margin: 0 1px 0 0; /*Margin between each menu item*/
    padding: 5px 10px;
    background-color: black; /*Brown color theme*/ 
    border-top: 1px solid white;
    border-left: 1px solid gray;
    }
    Last edited by Medyman; 06-02-2008 at 12:59 PM. Reason: added more info

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
  •