Problem with filterable images

[mkteagle]

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; }

[mkteagle]

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?

[Author]

Posts