Forums

Give help. Get help.

  • # 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.

    http://sneezy.usu.edu/~A00541778/new_po … folio.html

    Thanks for your help,
    Mike

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

    Code:
    /*****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 {
    width:545px;
    height:56px;
    left:520px;
    top:129px;
    }
    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 12:53 pm

    Is this where I would add absolute positioning?

    Code:
    ul#portfolio {
    –>position:absolute;< -- float: left; list-style: none; margin-left: 0; width: 711px; text-align: left;
    Code:
    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?

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

You must be logged in to reply to this topic.

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