Hi,
Quite simply I am awful at CSS. I am trying to create a facebook/flickr style photo gallery. So far after a ridiculously long time I have managed to create:
http://www.stuartjackson.co.uk/v1/album/index.php?album=travel/australia&image=cradlemountain.jpgAs my image page. I however would like it to resemble:
http://www.stuartjackson.co.uk/layout.jpgCan anyone tell me how I create the column on the right so I can have a big list of tags? Basically just trying to create pretty much what I have displayed there, with ability to add lots of tags.
I know as good as zero about css and have just being getting lost or not the end result I was looking for so far.
Any help is greatly appreciated.
Oh and this is my css I've just been trying to alter the default theme:
/*
Zen Photo Default 1.0
*/
/* Basics
------------------------------ */
html {
/* Moz */
height: 100%;
}
/* Main Layout
------------------------------ */
body {
background: #FFFFFF;
margin: 0px;
padding: 0px 0px 0px;
text-align: center;
margin-bottom: 0px;
}
#main {
text-align: left;
margin: 0px auto;
width: 700px;
background: #fff url('images/mainback.gif') repeat-x top;
padding: 20px 30px 70px;
}
#credit, #sort {
margin: 0 auto;
width: 640px;
font-size: 85%;
color: #96967E;
text-align: right;
clear: both;
}
#credit a, #sort a {
text-decoration: none;
color: #96967E;
border-bottom: 1px dotted #96967E;
}
#credit a:hover, #sort a:hover {
color: #BDBDAE;
border-bottom: 1px solid #BDBDAE;
text-decoration: none;
}
#gallerytitle {
border-bottom: 1px solid #000000;
padding-bottom: 14px;
margin-bottom: 20px;
/*min-height: 40px;
_height: 40px;*/
}
#gallerytitle h2 {
font-weight: normal;
font-size: 8pt;
margin-top: 8px;
width:510px;
}
/* Link Styles
------------------------------ */
a:link, a:active, a:visited { text-decoration: none; color: #5F841D; }
a:hover, a:focus { text-decoration: underline; color: #5F841D; }
/* Text Styles
------------------------------ */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #5F841D;
}
h2 a:link, h2 a:visited {
color: #5F841D;
text-decoration: none;
}
h2 span {
color: #5F841D;
}
h2 a:hover {
color: #5F841D;
text-decoration: underline;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
margin-top: 20px;
}
h3 a:link, h3 a:visited { text-decoration: none; }
h3 a:hover { text-decoration: underline; }
/* Miscellaneous
------------------------------ */
hr {
clear: both;
height: 0;
border: 0;
border-top: 1px solid #5F841D;
margin: 0 0 12px 0;
padding: 0;
}
img {
border: 0;
}
blockquote {
border-left: 1px dotted #96967E;
margin-left: 20px;
padding-left: 20px;
color: #363630;
}
#imagemetadata {
text-align: right;
position: relative;
display: none;
}
#imagemetadata table {
text-align: left;
line-height: 1em;
border: 1px solid #ccc;
position: absolute;
top: 2em;
right: 0px;
background-color: #fafafa;
}
#imagemetadata table td {
border-bottom: 1px solid #f0f0f0;
background-color: #f8f8f8;
padding: 2px 5px;
}
/* Page Navigation
------------------------------ */
ul.pagelist {
clear: both;
padding: 0;
margin: 20px 0 0 0;
list-style-type: none;
}
ul.pagelist li {
display: inline;
}
ul.pagelist li a, ul.pagelist span.disabledlink {
padding: 4px;
}
ul.pagelist li.current a {
font-weight: bold;
text-decoration: none;
cursor: default;
color: #000000;
}
ul.pagelist li.prev {
margin-right: 10px;
}
ul.pagelist li.next {
margin-left: 10px;
}
.disabledlink {
color: #ddd;
cursor: default;
}
.pagenav {
clear: both;
}
.disabled_nav {
visibility: hidden;
}
/* AJAX
------------------------------ */
#albumDescEditable, #albumTagsEditable {
margin-bottom: 12px;
}
#imageDescEditable, #albumTagsEditable {
margin-top: 24px;
}
#imageDesc, #exif_link {
margin-bottom: 4px;
}
#exif_link {
float: right;
}
/* Tags
------------------------------ */
.taglist ul {
display: inline;
list-style-type: none;
}
.taglist ul li {
background: url(../images/tag.png) no-repeat left center;
list-style-type: none;
padding-left: 18px;
float:left;
padding-right: 5px;
color: #999999;
display: inline;
list-style-type: none;
}
.taglist .tags_title {
background: none;
padding-right: 5px;
padding-left: 0;
}
/* Image Thumbnails
------------------------------ */
.imagethumb a, .imagethumb a:hover {
display: block;
padding: 9px;
margin: 0px 9px 9px 0px;
line-height: 0px;
border: 1px solid #e6e6e6;
background-color: #f6f6f6;
}
.imagethumb a:visited {
background-color: #fcfcfc;
border: 1px solid #f8f8f8;
}
.imagethumb a:hover {
background-color: #f3f3f3;
border: 1px solid #cccccc;
}
.imagethumb {
float: left;
}
.albumdesc2 {
line-height: 18px;
}
/* Album Thumbnails
------------------------------ */
#albums {
float: left;
}
.album {
margin: 0 22px 8px 0;
padding: 10px 8px 8px 10px;
float: left;
width: 300px;
border: 1px solid #E7F0F5;
background: #FFFFFF;
line-height: 100%;
}
.album a img { }
.album .thumb {
float: left;
margin-right: 6px;
}
.album h3 {
padding: 0;
margin: 0;
}
.album p {
line-height: 12px;
font-size: 11px;
padding: 8px 0px 0px;
margin: 0px;
}
.albumdesc small {
color: #666666;
}
/* Individual Image
------------------------------ */
.image {
margin: 0;
padding: 0;
border: 0;
}
#image {
text-align: center;
line-height: 0;
}
.imgnav {
float: right;
width: 80px;
text-align: center;
border: 0px solid #D5E6EE;
background: #ffffff;
margin-top: -7px;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
display: block;
width: 50%;
height: 40%;
float: left;
padding: 4px 0;
font-size: 10px;
text-decoration: none;
line-height: 180%;
color: #5F841D;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
background-color: #5F841D;
text-decoration: none;
color: #FFFFFF;
}
.imgnav .imgprevious a {
float: left;
}
.imgnav .imgnext a {
float: right;
}
#narrow {
margin: 0 auto;
width: 640px;
}
/* Comments
------------------------------ */
#comments {
clear: both;
}
.error {
color: #C33;
font-weight: bold;
}
.comment {
padding: 10px;
border: 1px solid #E7F0F5;
background: #FBFCFD;
margin-bottom: 12px;
}
.commentmeta {
margin-bottom: 12px;
}
.commentauthor {
font-weight: bold;
}
.commentdate {
margin-top: 12px;
color: #000000;
font-size: 85%;
}
/* Forms
------------------------------ */
.inputbox {
width: 250px;
padding: 2px;
}
textarea {
padding: 4px;
width: 100%;
color: #5A5A4B;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
.checkbox {
cursor: pointer;
}
.pushbutton {
cursor: pointer;
padding: 5px 10px;
}
label {
cursor: pointer;
}
label:hover {
color: #000;
}
#map {margin-left: -77px;}
#rating { margin-top: 10px; }
/* Admin Toolbox
------------------------------ */
#admin, #admin_data{
position: fixed;
right: 0px;
top: 0px;
width: 130px;
border-bottom: 1px solid #E6E6DF;
border-left: 1px solid #E6E6DF;
background: #fff;
z-index: 2; text-align: left;
}
#admin_data{
top: 0px;
padding-top: 20px;
z-index: 1;
line-height: 1.6em;
}
#admin h3 {
font-weight: normal;
color: #999;
margin:0;
padding:0; text-align: center;
}
#admin h3:hover { color: #036; }
/* Search Box
------------------------------ */
#search {
float: right;
text-align: left;
margin:0;
padding:0;
background: #fff;
}
#search input.pushbutton {
padding: 1px;
font-size: 80%;
}
#search a {
text-decoration: none;
}
#search ul {
border: 1px solid #ccc; position:absolute; text-align:left; list-style: none;
height: 8em; width: 20em; overflow: auto;
background-color: white;
}
#searchfields_icon {
position: relative;
top: 4px;
}
.clear {
clear:both;
height:10px;
}
/* Archive View
---------------------------- */
#archive{
width: 300px;
margin: 0 auto;
text-align: center;
}
ul.archive * {
padding:0;
margin:0;
list-style:none;
}
ul.archive .year {
margin-top:10px;
text-align: center;
margin-bottom:5px;
font-weight:bold;
font-size:18px;
}
ul.archive .month {
font-size: 14px;
list-style:none;
border-top:2px solid #E6E6DF;
padding-top: 5px;
}
/* Tag Cloud
---------------------------- */
#tag_cloud {
text-align: center;
background: #eee;
}
#tag_cloud ul li {
display: inline;
list-style-type: none;
}
#tag_cloud p {
padding:10px 0;
margin:20px 0;
background: #fff;
border-top: 3px solid #E6E6DF;
border-bottom: 3px solid #E6E6DF;
font-size: 18px;
font-weight:bold;
text-align: center;
}
/* Error Messages
------------------------------ */
.errorbox {
padding: 20px;
background-color: #FDD;
border-top: 1px solid #FAA;
border-left: 1px solid #FAA;
border-right: 1px solid #FAA;
border-bottom: 5px solid #FAA;
margin-bottom: 10px;
font-size: 100%;
co
Zenphoto
Comments
I've looked and it doesn't appear to? Think I might just give in and use flickr. Tried to adapt another page I found but just can't get it dispalyed right. Might have one last try then if unsuccessful use flickr or facebook.
Thanks for the response anyway.
No need to "steal" as it is free.
Thanks again for the help.