Member
Member
picus   2006-02-02, 19:32
#1

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!

Member
Member
picus   2006-02-02, 19:32
#2

Oh, my site.

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

Member
Member
WeiChen   2006-02-02, 19:44
#3

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

Member
Member
picus   2006-02-02, 19:56
#4

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

Member
Member
WeiChen   2006-02-02, 20:16
#5

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

Member
Member
WeiChen   2006-02-02, 20:18
#6

remove this line in index.php

Member
Member
picus   2006-02-02, 20:38
#7

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!

Member
Member
picus   2006-02-02, 21:04
#8

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

Member
Member
picus   2006-02-02, 22:09
#9

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

Junior Member
Junior Member
asorethumb   2006-03-26, 23:24
#10

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.

  
Powered By MyBB, © 2002-2026 MyBB Group.
Made with by Curves UI.