Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Extra border around thumbnail, inside of blue hyperlink border

    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.
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    padding:1px;
    background:#ffffff;
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    New Coder
    Join Date
    Jan 2003
    Location
    Florida
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where would that go - in the image tag?

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you post a link to your page?
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool. I now have two test pages. The first is thumbnail.htm and uses CSS in the <head>. The second, 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.
    <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.

    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    TEXAS . . . 'nuf said
    Posts
    468
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Gordo
    "In the End, we will remember not the words of our enemies, but the silence of our friends."
    - Martin Luther King Jr. (1929-1968)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •