Thumbs three across? Galleries page tweaks

[Ardynas]

Hello,

In my searching and finding bits of code, I've hit a small bump. :scratch

I'd like to know how to get my Galleries page to show thumbnails three across with Titles under the thumbs.
Remove the Galleries Title that's showing up twice (Galleries Galleries)
Hide the border box (border: none).
background to blackhttp://www.rodostoski.com/Galleries

1 - I've already added the four across code but need to redo it for three across so it stays under my navigation (couldn't find three way code).

Code:
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

3 - I did this on my homepage but border is showing on Galleries page.

#bioBox {border: none;}

Thank you in advance!

[Allen]

Hello,

In my searching and finding bits of code, I've hit a small bump. :scratch
I'd like to know how to get my Galleries page to show thumbnails three across with Titles under the thumbs.
Remove the Galleries Title that's showing up twice (Galleries Galleries)
Hide the border box (border: none).
background to blackhttp://www.rodostoski.com/Galleries

1 - I've already added the four across code but need to redo it for three across so it stays under my navigation (couldn't find three way code).

Code:
/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}
3 - I did this on my homepage but border is showing on Galleries page.

#bioBox {border: none;}
Thank you in advance!
Looks like you got everything but this.

#galleryTitle {display: none;}
.category_Galleries #category {border: none;}

[Ardynas]

Looks like you got everything but this.

#galleryTitle {display: none;}
.category_Galleries #category {border: none;}

Hi Allen,

Thanks for responding and that code worked perfect! :ivar

The CSS I've got for the thumbnails is for "four" across and I need to have three. In the advanced customization toot it had code for two and four thumbs across. Is there one for three?

Thanks,
Rod

[Ardynas]

This Thumbnail code is throwing the fourth thumb too far down in Internet Explorer on second row. It looks fine in FF.

I'm using the four across code for three across thumbs.

http://www.pbase.com/image/107605115/original.jpg

/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:50px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

Thanks,
Rod

[jhelms]

Rod, don't have an answer for you but would like to see what the end result / answers is.

Also, when I checked out your site there was a different and decidedly non-landscape thumbnail (gulp!) :huh showing up for the landscape gallery...

[ivar]

Rod, don't have an answer for you but would like to see what the end result / answers is.

Also, when I checked out your site there was a different and decidedly non-landscape thumbnail (gulp!) :huh showing up for the landscape gallery...Yeah, I saw that too; I've hidden the photo for now, and pm'd Rod. Thanks.

[Ardynas]

Photo removed, thumbnails on galleries page still not right in IE.

[jhelms]

Photo removed, thumbnails on galleries page still not right in IE.

No problem, and I should have clarified - not that I minded or anything :wink but I was surfing from the office again :thumb

[Ardynas]

Well I tried both of these tutorials,
2x2
http://www.dgrin.com/showthread.php?t=17946

and 4 across
http://www.dgrin.com/showpost.php?p=300387&postcount=8

and neither looks the same in FF and IE. I'd prefer the 4 across but will take three across and even two. I'll pretty much take whatever will work. :cry

Andy said to post a thread if these don't work right so here I am again.

This is page I'm working on --> http://www.rodostoski.com/Galleries

Thanks

[Ardynas]

Happy New Year!

My gallery thumbnails look fine in IE going two across.

In FF, I have one column running four down (it should be 2 x 2). :scratch

http://www.rodostoski.com/Galleries

This is what I've got for the thumbnail code:

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}
.miniBox .photo {
height:auto;
_height:1px;
}
.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}
.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}
.albumLarge .photoLarge {
height:auto;
_height:1px;
}
.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

Is there a tweak that will make this work in both Firefix and IE?


Thanks!!

[Allen]

Happy New Year!

My gallery thumbnails look fine in IE going two across.

In FF, I have one column running four down (it should be 2 x 2). :scratch

http://www.rodostoski.com/Galleries

This is what I've got for the thumbnail code:

.miniBox {
width:106px;
padding:0 0 5em 0;
margin:0 129px 0;
}
.miniBox .photo {
height:auto;
_height:1px;
}
.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}
.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 104px 40px;
}
.albumLarge .photoLarge {
height:auto;
_height:1px;
}
.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}
Is there a tweak that will make this work in both Firefix and IE?


Thanks!!
That doesn't look like the CSS here (http://www.dgrin.com/showpost.php?p=300387&postcount=8). I'd use this and just tweak the margins to get any number across.

[Ardynas]

I've been trying to get one of these codes (both posted above) to work.
I added the code you're referring to (4 across) back into my CSS.

It looks fine in FF but in IE the fourth thumbnail is spacing too far down. I've been changing the perimeters in FF with the edit CSS plug in to see if I can figure out which one controls the height spacing on that last thumb (Eagle).

Here's a screen capture of the Eagle thumb too far down.

http://www.pbase.com/image/107767767/original.jpg

Here's the code a added back into CSS.

/* ================================================== == */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ================================================== == */
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:100px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

Thanks,
Rod

[Ardynas]

I'd be happy if I could just get the Bald Eagle thumb nail moved up a little.


Thanks,

[Ardynas]

Hi again,

Would love to get these thumbs aligned correctly. I just need to know what part of the code will move the Eagle up slightly. If someone could throw me a bone it'd be appreciated.

Thank!

[Allen]

Hi again,

Would love to get these thumbs aligned correctly. I just need to know what part of the code will move the Eagle up slightly. If someone could throw me a bone it'd be appreciated.

Thank!
Adjust the height in this.

.boxBottom .albumLarge {width:192px; height:220px; text-align:center; margin:0 24px;}

When you get six or more thumbs you'd adjust the height in this.

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}

[Ardynas]

Adjust the height in this.

.boxBottom .albumLarge {width:192px; height:220px; text-align:center; margin:0 24px;}

When you get six or more thumbs you'd adjust the height in this.

.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}

Thanks Allen. Really appreciate the help. :bow

I messed with that height attribute and it just wasn't responding in IE. I really need to get CSS down. Thanks again!