An easy way to line up albums horizontally?

picus

Sorry for all the posts lately. I appreciate all the help I've been given and my site is coming along nicely. ZP is a great tool. What I am trying to do now is modify my theme so I can line the albums up horizontally (say, three across), so it would appear like this

album album album
album album album

rather than

album
album
album

etc...

Any tips?

Thanks!

picus

Oh, my site.

http://www.rockpaperpixels.com/zenphoto/

WeiChen

you need to modify the following lines in zen.css
(see the comments)
.album {
padding: 10px;
margin-bottom: 12px;
clear: both; //change to float:left;
border: 1px solid #E7F0F5;
background: #FBFCFD;
}
.album img {
float: left;
}
.album h3 {
padding: 0;
margin: 0;
}
.album h3 a {
display: block;
width: 340px;//Change the width;
padding: 3px 0 6px 0;
}
.album p {
margin: 0 0 4px 0;
}
.albumdesc {
float: right;
width: 480px;//Changed it
}
.albumdesc small {
margin-top: 8px;
line-height: 130%;
width: 120px;//Change it
float: right;
color: #8DB8CF;
}

Haha, seems we have the same taste.
see my gallery, I have two album in each line.
http://blog.dukechina.org/gallery/index.php

picus

Hey thanks for the reply. I love that there is so much activity on this forum. So I changed the code indicated to the following just to kind of play with it, but it doesn't seem to have worked. All I got was some weirdly formatted text. I am still playing with it, but my albums seem to be "stuck" vertically.:

.album {
padding: 10px;
margin-bottom: 12px;
float:left;
border: 1px solid #E7F0F5;
background: #FBFCFD;
}
.album img {
float: left;
}
.album h3 {
padding: 0;
margin: 0;
}
.album h3 a {
display: block;
width: 40px;//Change the width
padding: 3px 0 6px 0;
}
.album p {
margin: 0 0 4px 0;
}
.albumdesc {
float: right;
width: 80px;//changed
}
.albumdesc small {
margin-top: 8px;
line-height: 130%;
width: 60px;//Change it
float: right;
color: #8DB8CF;
}

WeiChen

here add
.album {
padding: 10px;
margin-bottom: 12px;
float:left;
width:240px; // add this line
border: 1px solid #E7F0F5;
background: #FBFCFD;
}

WeiChen

remove this line in index.php
<p style="clear: both; ">

picus

Sweet, it worked wonderfully. Thanks so much for the help. Now I just need to format the albums so they have a little space in between them, etc... but it's looking good!

picus

Hah! I'm back - any idea why it won't do three rows horizontally? It looks like I have plenty of room.

http://www.rockpaperpixels.com/zenphoto/

.album {
padding: 10px;
margin-right: 12px;
margin-bottom: 12px;
float:left;
width:180px;
border: 1px solid #E7F0F5;
background: #FBFCFD;
}
.album img {
float: left;
}
.album h3 {
padding: 0;
margin: 0;
}
.album h3 a {
display: block;
width: 140px;
padding: 3px 0 6px 0;
}
.album p {
margin: 0 0 4px 0;
}
.albumdesc {
float: right;
width: 85px;
}
.albumdesc small {
margin-top: 8px;
line-height: 130%;
width: 160px;
float: right;
color: #8DB8CF;
}

picus

Nevermind - I figured it out. Looks like the default padding is a tad whacky. Thanks again!

asorethumb

Hi picus, I've been trying to get my links under my album thumnails, like you have on your site. Can you point me in the right direction? Using the css posted here has helped me to get my albums listed horizontally, but still struggling with the links.

tia.