Help With Layout

[bruceleibowitz]

Hi, I'm kind of new here and especially with CSS. I found a nice style in the forum that really looks nice so I adapted it for mine. It does look nice...but a couple of things don't work too good.

First off, on my root gallery description I want to put some links in there to my other site. I did figure out how to make a hyperlink, but I had to drop it down to the next row with a <br> tag because when its on the same row the link doesn't stand out from the other text. I tried inserting a bold tag but it does not work. See the first link? I can't even insert a space or two.

Here is the root gallery: http://www.pbase.com/bruceleibowitz/

Secondly, I want the layouts (spacing) to be the same on all galleries - and I'm using the same stylesheet for all. But, they're not exactly the same. comparing the two airplanes galleries, space between the thumbs is the same but at the bottom of the thumbnails, where the page links are, they are further apart and too close to the thumbs on the "foreign" gallery. and on the "car" gallery, there is NO space at all between the thumbs and the "next page" links actually run into on top of the thumbs!

The size of the original image is different on the car gallery. Does this have an effect on the thumbs?

Bruce

[dang]

You might add some coding to underline your links. It should go into the style sheet html, something like this:

Code: Select all

  }
a, a:link,a:visited,a:active {
color:  #ffffff;
text-decoration: underline;
}
a:hover,A.header:hover { 
        color:  #ffffff;
        text-decoration: none;
}

The problems with 3 lines might be solved by playing with the box size (height), and changing the margins & padding which you should find under the "thumbnails" section.
And looks similar to this:

Code: Select all

}
a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active {
        border:  #A4A9AF 1px solid;
        margin-bottom: -10px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background:  #A4A9AF;
        height: 180px;
}
a.thumbnail:hover            {
        border:  #E0E7EF   1px solid;
        margin-bottom: -10px;
        padding-top: 5px;
        width: 172px;
        display: block;
        background:  #A4A9AF;
        height: 180px;
}
td.thumbnail
{
   height: 280px;
}

By playing with it, you'll learn there's lots of neat things you can make it do.

[bruceleibowitz]

Thanks for the text decoration tip! Also, I tried playing with the cell spacing but for some reason the two galleries don't look the same. There are 3 rows of 4 photo thumbnails, but there is more space between the 2nd and 3rd row than the 1st and 2nd! I don't know how that happens. That is when viewed in firefox. Now I have a whole different problem when I view in IE browser - the spacing of the text inside the thumbnail box is waaay off!

[dang]

This is because you only have 1 line of text beneath the some photos, and more in others. You need to add additional padding in your gallery section to even everything up, and not in the style sheets to correct this type problem.

It's found in this section:
columns 4 columns of thumbnails to display

table width 80 percent of screen to use for the table of thumbnails
cell spacing 15 minimum pixels between thumbnails
cell padding 15 pixels of space around thumbnails

Just play around with it until you get it where you like it.

[bruceleibowitz]

also, one more thing I noticed. My layout looks different in IE and Firefox browsers! I use Firefox at home and it is ok (the text under the thumb pics) but in IE 6.0 the thumb text is way up on top of the thumb. how can i fix this?