PDA

View Full Version : Extra border around thumbnail, inside of blue hyperlink border



Gordo
01-05-2003, 09:43 PM
I could use something like this, but have not been able to determine how to get it done.

The scenario:
I have a thumbnail image that is linked to its larger counterpart I want the blue hyperlink border=1 around the thumbnail I basically want to have a 1px white border between the blue 1px border and the thumbnail -- to set it off. It's hard to see the blue border on darker thumbnails.

Any ideas how I'd get that extra white or transparent (1 pixel) sandwiched between the 1 pixel blue hyperlink border and the thumbnail image --- WITHOUT adding the white border to the actual image? I want to do this with CODE...not an image manipulation program.

Vladdy
01-05-2003, 09:50 PM
padding:1px;
background:#ffffff;

aggie
01-05-2003, 09:55 PM
Where would that go - in the image tag?

Gordo
01-05-2003, 10:41 PM
I am having difficulties including this code in the <img> tag. Any help?

Actually, having exact example code for BOTH the <img> tag and CSS styles would be beneficial for me (and others).

Vladdy
01-05-2003, 10:48 PM
can you post a link to your page?

Gordo
01-05-2003, 10:58 PM
Well, I don't have a working example up right now. I'm just using a standard img tag with hyperlink. For example:


<a href="http://www.yahoo.com"><img src="myimage.gif" alt="Click for larger image" align="left" width="100" height="50" border="1"></a>


The CSS I have is as follows...but I would need to know how to simply add this to a single image as well as to all designated images (using <span class="thumbnail"></span>).

A:link, A:visited, A:active {
COLOR: #0000FF;
text-decoration:none
}
A {
FONT: 10pt Verdana, Arial, Helvetica, sans-serif, 'Times New Roman' normal;
COLOR: #000080
}
A:link {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, 'Times New Roman';
FONT-SIZE: 10pt;
FONT-STYLE: normal;
FONT-WEIGHT: normal;
LETTER-SPACING: normal;
TEXT-DECORATION: none;
TEXT-TRANSFORM: none;
COLOR: #0000FF
}
A:visited {
COLOR: #0000FF;
text-decoration:none
}
A:hover {
COLOR: #BD4A10;
text-decoration: underline
}
A:active {
font-style: italic
}

Gordo
01-06-2003, 12:43 AM
Here's a test page (no CSS). Having this as a CSS option would be good, too. But I need to learn it in <img> tag format first.

http://www.geocities.com/gordonmerrill/thumbnail.htm

Vladdy
01-06-2003, 12:51 AM
try this:
<style type="text/css">
.imagelink
{ border: 2px solid blue;
background: #ffffff;
padding: 2px;
}

img
{ border: 0px;
}

</style>

link:

<a href="#" class="imagelink"><img src="image.gif" width="100" height="100"></a>

Gordo
01-06-2003, 02:00 AM
Cool. I now have two test pages. The first is thumbnail.htm (http://www.geocities.com/gordonmerrill/thumbnail.htm) and uses CSS in the <head>. The second, thumbnail2.htm (http://www.geocities.com/gordonmerrill/thumbnail2.htm), simply uses styles in the <img> tag.

Oh, to get it transparent (at least in my IE browser), I simply substituted it with #FFFFFF:
.imagelink { border: 2px solid blue; background: transparent; padding: 2px; }

I also tried adding this code to just a single image inside the <IMG> tag, but the padding is being ignored! Any clues?
See THIS PAGE (http://www.geocities.com/gordonmerrill/thumbnail2.htm).
<a href="http://www.yahoo.com"><img style="border: 5px solid blue; background-color: transparent; padding: 10px" src="2.gif" width="150" height="112"></a>


NOW....
While I (personally) only care about the IE browser, I am always interested in other browsers viewing capabilities. I generally also test my pages in N4.x and N6.x.

The thumbnail.htm page (has only one image on it) has a large portion of the padding black in N4.x and shows the whole border/padding deal scrunched towards to bottom of the image in N6.x.

The thumbnail2.htm page (2 images) has the border/padding deal in a small (separate) box below the image, but works perfectly in N6.x.

:confused: :confused: :confused:

MCookie
01-06-2003, 02:41 PM
Here's another testpage. Doesn't work in NN4 I guess (didn't test) but looks the same in IE, NN7, Moz and Opera on Mac...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
<!--
a {
display:block;
width:82px;
height:82px;
border:1px solid blue;
}
img {
width:80px;
height:80px;
border:1px solid white;
}
-->
</style>
<title>Untitled</title>
</head>
<body>
<a href=""><img src="image.jpg" /></a>
</body>
</html>

Gordo
01-07-2003, 03:59 AM
That's quite interesting MCookie! It does work just as it should.

Unfortunately, it's not a solution for my problem. You're declaring the image size in the CSS. The code I would need should be available to ANY image on the page so designated as a thumbnail. My images (even my thumbnails) are varying sizes. Therefore, the width/height of the images has to be given in the <img> tag.

MCookie
01-07-2003, 06:02 PM
You can declare sizes and styles in any attribute or tag. I think your problem is the xhtml DTD. It won't work if you take that out. So you have to write your page in (transitional) xhtml...

Gordo
01-08-2003, 02:43 AM
So you have to write your page in (transitional) xhtml...Nothing personal, but that's just not going to happen. This web design stuff is now a side gig, and I don' the time, etc. to move forward into anything like XHTML.

So, maybe it's just not possible (?)...certainly not for all browsers.