+- ZenphotoCMS Forum (https://forum.zenphoto.org)
+-- Forum: Support (https://forum.zenphoto.org/forum-1.html)
+--- Forum: General support (https://forum.zenphoto.org/forum-4.html)
+--- Thread: An easy way to line up albums horizontally? (/thread-277.html)
An easy way to line up albums horizontally? - picus - 2006-02-02
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!
An easy way to line up albums horizontally? - picus - 2006-02-02
Oh, my site.
http://www.rockpaperpixels.com/zenphoto/
An easy way to line up albums horizontally? - WeiChen - 2006-02-02
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
An easy way to line up albums horizontally? - picus - 2006-02-02
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;
}
An easy way to line up albums horizontally? - WeiChen - 2006-02-02
here add
.album {
padding: 10px;
margin-bottom: 12px;
float:left;
width:240px; // add this line
border: 1px solid #E7F0F5;
background: #FBFCFD;
}
An easy way to line up albums horizontally? - WeiChen - 2006-02-02
remove this line in index.php
<p style="clear: both; ">
An easy way to line up albums horizontally? - picus - 2006-02-02
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!
An easy way to line up albums horizontally? - picus - 2006-02-02
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;
}
An easy way to line up albums horizontally? - picus - 2006-02-02
Nevermind - I figured it out. Looks like the default padding is a tad whacky. Thanks again!
An easy way to line up albums horizontally? - asorethumb - 2006-03-26
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.