...

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



Gordo
01-05-2003, 08: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, 08:50 PM
padding:1px;
background:#ffffff;

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

Gordo
01-05-2003, 09: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, 09:48 PM
can you post a link to your page?

Gordo
01-05-2003, 09: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-05-2003, 11:43 PM
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-05-2003, 11:51 PM
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, 01: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, 01: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, 02: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, 05: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, 01: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum