Get a free trial // Grow your CSS skills // Land your dream job

Problem with filterable images

  • # March 20, 2009 at 6:25 am

    I am currently trying to set up a filterable portfolio jquery option on my nonworking portfolio. I’m trying to set the images up like puzzle, so they fit together. But I am not all that informative when it comes to working with css. I walked through the tutorial on nettuts to actually incorporate this into my site. The tutorial supposes that you are going to have the same sizes of images. I would rather only have the same width. I’ve taken away the padding and the borders but I need help fitting the images together. I would appreciate any help.

    Please take a look and this page isn’t anywhere near done yet and the bg size is huge I need to fix that but am worried about this immediate problem. … folio.html

    Thanks for your help,

    Here is the css for the part of the layout that pertains to what I am having an issue with. I think.

    /*****Custom Classes*****/
    .clearing { clear: both; }
    .last { margin-bottom: 0; }
    .screenReader { left: -9999px; position: absolute; top: -9999px; }

    /*****Basic Layout*****/
    div#container { margin: 20px auto 0; overflow: hidden; width: 672px; }

    ul#filter {
    ul#filter li {
    border-right: 0px solid #dedede;
    float: left;
    line-height: 16px;
    margin-right: 0px;
    padding-right: 0px;
    ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
    ul#filter a { }
    ul#filter li.current a, ul#filter a:hover {

    ul#filter li.current a {
    color: #FFF;
    font-size: large;
    font-family: Verdana, Helvetica, Arial, sans-serif;

    ul#portfolio {
    float: left;
    list-style: none;
    margin-left: 0;
    width: 672px;
    text-align: left;
    ul#portfolio li {
    border: 0px solid #dedede;
    float: left;
    margin: 0 0px 0px 0;
    padding: 0px;
    width: 180px;
    ul#portfolio a { display: block; width: 100%; }
    ul#portfolio a:hover { text-decoration: none; }
    ul#portfolio img { border: 0px solid #dedede; display: block; padding-bottom: 0px; }

    # March 20, 2009 at 10:09 am

    If you are going to have different height images the only way to display them like a grid is to use absolute positioning.

    # March 20, 2009 at 12:53 pm

    Is this where I would add absolute positioning?

    ul#portfolio {
    –>position:absolute;< -- float: left; list-style: none; margin-left: 0; width: 711px; text-align: left;
    ul#portfolio a { display: block; width: 100%; }
    ul#portfolio a:hover { text-decoration: none; }
    ul#portfolio img {–> postition: absolute; < --border: 0px solid #dedede; display: block; padding-bottom: 0px; }

    Okay wouldn’t this cause me to have to change the positioning of the top and left of the container? Would my effect still work?

# March 20, 2009 at 1:29 pm

You need to make the containing div position:relative and then absolutely position each image.

But to be honest you really need to sort out your layout before you start worrying about your content. It’s difficult to see from your code what you are trying to achieve, divs all over the place, at least one of which that isn’t closed, divs inside lists, divs inside list items and a stray < floating around in there.
You have started off by specifying a container and then gone on to position everything outside of it!?

You might find it easier to wrote your html first and then start adding divs and classes for your styling.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed