Grow your CSS skills. Land your dream job.

Floating question (solved)

  • # 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 5:22 pm

    Change the html of the div titles to:

    <div id="column1">
    <div id="column2">
    <div id="column3">

    Remove all that you’ve done so far for the old columns in your css and replace it with this:

    Code:
    #column1 {
    float:left;
    margin:0 0 0 30px;
    width:222px;
    padding:50px 0 0 0;
    text-align:center;
    }

    #column2 {
    float:left;
    margin:0 0 0 22px;
    width:222px;
    padding:50px 0 0 0;
    text-align:center;
    }

    #column3 {
    float:left;
    margin:0 0 0 22px;
    width:222px;
    padding:50px 0 0 0;
    text-align:center;
    }

    That should getcha going. I really like the nav bar.

    # 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 6:22 pm

    Floats took me a little while to wrap my head around, but once I got them, they were the easiest thing in the world to figure out.

    I’m not quite sure there was any one particular thing that I saw, it’s just that I knew what you were trying to go for, and since I knew it was simple, it was quicker to just completely redo it than to try and change what you had already done.

    If you re-post the old code (just that portion of the CSS), I’d be happy to go through it and point out what was wrong and why.

    # 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 12:00 am

    So I was going through it writing notes, but I realized that it was just too far off overall for the notes to really make any sense.

    For the drop shadow, nix that whole thing you’re trying to do completely. Just add the drop shadow to the image in a program like Photoshop.

    # January 16, 2009 at 10:13 am

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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".