How do I make the text smaller in gallerys?

[occ]

Hi,
I wonder how I make the text within the gallerys smaller?
I have the same size as the description of the gallerys.

I want the description to be bigger, but the text within the gallerys to be smaller, kind like the photos.
Also the text in each gallery I want to do a bit bigger...

Here is the gallery:
http://www.pbase.com/occ

Thanx //Jess

[occ]

Now I figured that out don`t ask me how

Now, the text within the thumbnails are smaller...
BUT: when more text, it falls out of the thumbnails...
http://www.pbase.com/occ/klubbkatt_2003

Any way to get the text to stay within the thumbnails?
Grateful for your help.
//Jess

[dpnew]

Just so you know, this css stuff looks differently in different browsers. In a Firefox browser (Mozilla), your gallery doesn't have any rollover effects. That's because the effects are created with MS filters that only MS browsers like IE6 understand. That's not all bad since something like 70% of all browsers are IE6. But, in a Firefox browser, all the rollover stuff is ignored, and I see square images with text centered nicely underneath them.

On the other hand, in IE6, I see the problem you are referring too. If you click on View>Source you can see the html for your gallery page. Then you can look through the HTML to find the tags that surround the content you want to change. Using Search>Find will help you search for the text you are interested in. However, you have to know a little bit about html to do that because the text sometimes appears in several places in the html, but it's only displayed in some places, and you are interested in chaing the text where it is displayed.

Anyway, first off, the the caption on the page with the full size image looks like this:

Code: Select all

<b>Avelshanar</b>

So, you can change the style of that text by altering the style of the b tags. Initially, you might try something like this:

b{
font-size: medium;
}

Some other choices are:

xx-small | x-small | small | medium | large | x-large | xx-large

That would change the font size of all text between all b tags. But, there may be other b tags on the page that surround text that is not a caption, and you would end up also changing that text's font size However, you may want to confine the change only to the captions.

If you look closer at the html surrounding the captions:

Code: Select all

<TD class="thumbnail" align=center><A HREF="http://www.pbase.com/occ/avelshanar" class="thumbnail"><IMG class=thumbnail src="http://mikami.image.pbase.com/u38/occ/small/24887135.harimauscaesarofcadbury.jpg" WIDTH=160 HEIGHT=92 border=0 alt="Avelshanar"></A><br><b>Avelshanar</b></td>

they are also enclosed by TD tags which have the class "thumbnail". That means you could use a CSS rule that only affects b tags inside those TD tags. You would do that like this:

td.thumbnail b{
font-size: medium;
}

That says only for b tags that are inside a td tag when the td tag has the class="thumbnail" will the font-size be changed.

Now, on the gallery page with all the thumbnails, the text you are interested in changing is in this part of the html

Code: Select all

<TD align=center class="thumbnail"><A HREF="http://www.pbase.com/occ/image/24887142" class="thumbnail"><IMG class=thumbnail src="http://mikilo.image.pbase.com/u41/occ/small/24887142.johnjohnsshamansblues.jpg" WIDTH=151 HEIGHT=160 border=0 alt="7:e Bästa ungdjur: Johnjohn's Shamans Blues"></A><br><font size=3>7:e Bästa ungdjur: Johnjohn's Shamans Blues</font></TD>

This is the part that displays the text:

Code: Select all

<font size=3>7:e Bästa ungdjur: Johnjohn's Shamans Blues</font>


Notice, the font tags are also surrounded by TD tags with the class='thumbnail". I think you should try adding some 'padding' to the td.thumbnail style. Padding is the amount of space between the text and the imaginary box created by the td tag that surrounds the text.. You might want to try something like this:

td.thumbnail{
...
...
...
padding-bottom: 30px;
}

[occ]

Hi,
I tryed to do the first suggestion within the td B...b{
font-size: medium;
}

Then it affected the text all over..

Now, I tried to put the "padding-bottom: 30px;".
I tried different sizes (px) and it only seems to affect the area between the photo and the beginning of the text.
Not the area between the text and the end of the boxes...
//Jess

[dpnew]

Hi,
I tryed to do the first suggestion within the td B...b{
font-size: medium;
}

Then it affected the text all over..

td B...b{

Huh??? Where did that come from?

Now, I tried to put the "padding-bottom: 30px;".
I tried different sizes (px) and it only seems to affect the area between the photo and the beginning of the text.
Not the area between the text and the end of the boxes...
//Jess

I think this is the part of the style sheet that is affecting the thumbnails:

/* THUMBNAILS */
a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border-top: #999999 1px solid;
border-left: #999999 1px solid;
margin-bottom: -50px;
padding-top: 15px;
padding-bottom: 30px;

width: 200px;
display: block;
background: #EBEBEB;
height: 200px;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,Direction=155,Strength=10);
}



a.td.thumbnail:hover {
border-top: #999999 1px solid;
border-left: #999999 1px solid;
margin-bottom: -50px;
padding-top: 15px;
width: 200px;
display: block;
background: #CCCCCC;
height: 200px;
}

Try getting rid of padding-bottom and instead try and change the margin-bottom: make it more negative like -70px and see what happens.

In CSS every html tag forms an invisible box around the text or image inside it. The trick in editing these style sheets is to figure out what 'box' needs to get changed. You can actually see the boxes by just adding something like:

background-color: red;

to the style for the specific element. That will fill the box with a background color making it readily visible. The 'margin' of the box is the perimeter. The 'border' of a box goes around the margin. The 'padding' is the distance between the perimeter and the text or image in the box.

I just downloaded the Firefox browser this week,which takes about 20 mintues on a slow connection(I have been using IE6), and it has an add-on (called an "extension") you can download named Web Developer(which takes about 3 minutes to download), and the Web Developer adds a tool bar to the browser that lets you do some neat things:

1)You can click on a view source button, which unlike IE6 adds some styling to the source so it isn't such a jumbled mess.

2) You can click on a button that will draw a dotted line around every 'box' created by the html tags. That is very handy to help figure out what is going on with the html.

3) You can click on "edit style sheet", which opens up another pane next to the webpage with the CSS in it, and you can change the stylesheet and it will automatically show the changes on the webpage.

I recommend you try it. Firefox also has a unique feature called 'tabbed browsing', which allows you to open multiple web pages in the same window. One page will be visible and there will be tabs for the others which you can click on.

[occ]

Hi,
I tried to change the marginbottom more negative.
I have one "test-gallery" that I am playing with now.
It is in this page:
http://www.pbase.com/occ/sw

As you see, the photo to the left seems very fine.
But the photo to the right, got the text into the photo now.

//Jess

[occ]

Now I got the marginbottom just a little more negative (-55)px and that seems to be acceptable

Thousands of thanks

//Jess