Forums

Give help. Get help.

  • # January 15, 2009 at 4:57 pm

    NooB here needing help (again). I’m trying to make a grid with 3 graphics each centered, each with a link and possibly an icon centered underneath. I’ve been trying to float them, and I got the first column positioned but I’m stuck. I thought it would be simpler to make a single background image to position it over, but now I’m not so sure. You can see my current state of affairs at http://craigcurry.com/menu/index3.html. I keep wondering if this would have been an appropriate time to use a table vs. trying to float this stuff. I’m unable/unsure how to position my 2nd column.

    Thanks.

    # January 15, 2009 at 6:11 pm

    Thanks so much! That really does help me get going again. And just so I can learn from this, what were my mistakes? I take it setting height/widths was part of the problem, but why should I not have done that? You fixed that so fast…what made you think "here’s the problem…"?

    Should I apply bottom padding to the images to push the "learn more" links down, or is there a better way? Thanks again for the help.

    Thanks for the compliment on the menu also.

    # January 15, 2009 at 11:08 pm

    Thanks for offer to help and teach me a thing or two.

    Here’s the old code:

    Code:
    #primary_content {
    background: url(images/featured_bg.jpg) repeat-x;
    height: 350px;
    width: 960px;
    }

    #featured {
    background: url(images/featured_box.jpg) no-repeat;
    height: 350px;
    width: 764px;
    margin: 0 auto;
    }

    #featured h1 {
    text-indent: -9999px;
    }

    #featured .column1 {
    float: left;
    height: 315px;
    width: 243px;
    margin-left: 32px;
    text-align: center;
    }
    .column1 img {
    padding:90px 0 40px;

    }
    .column1 h2, a:link {
    padding-top: 35px;
    color: white;
    font-weight: normal;
    text-decoration: none;
    clear: both;
    }

    .column1 a:hover, .column2 {
    color: #9db1fb;
    }
    .coloumn1 a:visited{
    color: #c93636;

    #featured#column2{
    float: left;
    }
    #featured#column2 img {
    padding-left: 80px;
    }
    #featured#product_three {
    float: left;
    }

    Now I’m trying to add a drop shadow to the images but it’s covering the width of the column instead of only the width of the image. I’ve got to be close… Any ideas?

    The code for this area:

    Code:
    .photo {
    position:relative;
    top: -2px;
    left:-3px;
    text-align:center;
    }

    .dropshadow {
    background: url(images/shadow.png) bottom right no-repeat;
    padding: 0 2px 3px 0;
    }

    # January 16, 2009 at 10:13 am

    Thanks again for your time; I appreciate the help. Photoshop to the rescue! :D

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag