Preventing a border around a graphic

Discussion in 'HTML' started by Cogito, Jul 14, 2005.

  1. Cogito

    Cogito Guest

    In a page the consists of picture thumbnails, I have the following
    code that places a border around each picture and changes the colour
    of the border when the pointer hovers over a picture. This part works
    just fine.

    <STYLE TYPE="text/css">
    a.mainlink:link { font-family:Arial; font-size:10pt; color:Light
    Steel Blue; font-weight:normal; line-height: 11pt;}
    a.mainlink:visited { font-family:Arial; font-size:10pt; color:Light
    Steel Blue; font-weight:normal; line-height: 11pt;}
    a.mainlink:hover { font-family:Arial; font-size:10pt; color:#AF1F00;
    font-weight:bold; line-height: 11pt;}
    a.mainlink:active { font-family:Arial; font-size:10pt; color:red;
    font-weight:normal; line-height: 11pt;}

    img{border:1px solid blue;}
    a:hover img{border:1px dotted red;}

    img.noborder {border: 0px;}
    a.noborder:hover {border: 0px;}

    img{margin:.1em .1em;}
    </STYLE>

    An added complication is the need to place one graphic at the bottom
    of the page without having a border placed around it. Something like:
    <img align=top src="pic.gif" border=0>
    I'm sure that there is a simple solution to it, but no matter what I
    try, I cannot stop the border being placed in this section.
    Any suggestions?
     
    Cogito, Jul 14, 2005
    #1
    1. Advertising

  2. Cogito wrote:
    > In a page the consists of picture thumbnails, I have the following
    > code that places a border around each picture and changes the colour
    > of the border when the pointer hovers over a picture. This part works
    > just fine....


    Why not just make a class that doesn't hae a border and apply it to the
    bottom graphic?

    --
    -=tn=-
     
    Travis Newbury, Jul 14, 2005
    #2
    1. Advertising

  3. Cogito

    saz Guest

    In article <>,
    am says...
    > In a page the consists of picture thumbnails, I have the following
    > code that places a border around each picture and changes the colour
    > of the border when the pointer hovers over a picture. This part works
    > just fine.
    >
    > <STYLE TYPE="text/css">
    > a.mainlink:link { font-family:Arial; font-size:10pt; color:Light
    > Steel Blue; font-weight:normal; line-height: 11pt;}
    > a.mainlink:visited { font-family:Arial; font-size:10pt; color:Light
    > Steel Blue; font-weight:normal; line-height: 11pt;}
    > a.mainlink:hover { font-family:Arial; font-size:10pt; color:#AF1F00;
    > font-weight:bold; line-height: 11pt;}
    > a.mainlink:active { font-family:Arial; font-size:10pt; color:red;
    > font-weight:normal; line-height: 11pt;}
    >
    > img{border:1px solid blue;}
    > a:hover img{border:1px dotted red;}
    >
    > img.noborder {border: 0px;}
    > a.noborder:hover {border: 0px;}
    >
    > img{margin:.1em .1em;}
    > </STYLE>
    >
    > An added complication is the need to place one graphic at the bottom
    > of the page without having a border placed around it. Something like:
    > <img align=top src="pic.gif" border=0>
    > I'm sure that there is a simple solution to it, but no matter what I
    > try, I cannot stop the border being placed in this section.
    > Any suggestions?
    >
    >
    >


    Very simple solution. Give the bottom image it's own class without the
    border.
     
    saz, Jul 14, 2005
    #3
  4. Cogito

    Cogito Guest

    On 14 Jul 2005 06:41:10 -0700, "Travis Newbury"
    <> wrote:

    >Cogito wrote:
    >> In a page the consists of picture thumbnails, I have the following
    >> code that places a border around each picture and changes the colour
    >> of the border when the pointer hovers over a picture. This part works
    >> just fine....

    >
    >Why not just make a class that doesn't hae a border and apply it to the
    >bottom graphic?


    That must be the correct approach. The problem is that I am not too
    familiar with CSS and I am not sure of the syntax and how to do it. I
    usually look at code in pages that appeal to me and adapt them (when
    successful) to my needs.

    Basically, what I'm asking is: can you please show me an example how
    to code this?
     
    Cogito, Jul 14, 2005
    #4
  5. > Basically, what I'm asking is: can you please show me an example how
    > to code this?
    >


    change

    > <img align=top src="pic.gif" border=0>


    to
    <img class="noborder" src="pic.gif" align="top">

    or
    <img src="pic.gif" align="top" style="border:0px solid black;">
     
    Emanuel Rumpf, Jul 14, 2005
    #5
  6. Emanuel Rumpf wrote:

    [...]
    > <img src="pic.gif" align="top" style="border:0px solid black;">


    Would that not be <img src="pic.gif" style="border:0;">
    --
    Robert
    http://brightonfixedodds.net
     
    Robert Frost-Bridges, Jul 14, 2005
    #6
  7. Cogito

    Cogito Guest

    On Thu, 14 Jul 2005 20:02:40 +0200, Emanuel Rumpf <>
    wrote:

    >> Basically, what I'm asking is: can you please show me an example how
    >> to code this?
    >>

    >
    >change
    >
    > > <img align=top src="pic.gif" border=0>

    >
    >to
    ><img class="noborder" src="pic.gif" align="top">
    >
    >or
    ><img src="pic.gif" align="top" style="border:0px solid black;">


    They both work. Thank you very much.

    Just to clarify something, is
    class="noborder"
    a predefined keyword/value or should it also be defined elsewhere?
     
    Cogito, Jul 15, 2005
    #7
  8. Cogito

    dorayme Guest

    > From: Cogito <>

    >>> <img align=top src="pic.gif" border=0>

    >>
    >> to
    >> <img class="noborder" src="pic.gif" align="top">
    >>
    >> or
    >> <img src="pic.gif" align="top" style="border:0px solid black;">

    >
    > They both work. Thank you very much.
    >
    > Just to clarify something, is
    > class="noborder"
    > a predefined keyword/value or should it also be defined elsewhere?
    >


    No it is just a class made up by someone for the purpose of doing the sort
    of thing you want. "borderless" would work as well, as long as you also used
    this name in your html ...

    dorayme
     
    dorayme, Jul 15, 2005
    #8
  9. Cogito

    Cogito Guest

    On Fri, 15 Jul 2005 18:01:33 +1000, dorayme <>
    wrote:

    >> From: Cogito <>

    >
    >>>> <img align=top src="pic.gif" border=0>
    >>>
    >>> to
    >>> <img class="noborder" src="pic.gif" align="top">
    >>>
    >>> or
    >>> <img src="pic.gif" align="top" style="border:0px solid black;">

    >>
    >> They both work. Thank you very much.
    >>
    >> Just to clarify something, is
    >> class="noborder"
    >> a predefined keyword/value or should it also be defined elsewhere?
    >>

    >
    >No it is just a class made up by someone for the purpose of doing the sort
    >of thing you want. "borderless" would work as well, as long as you also used
    >this name in your html ...


    Thanks. Please bear with me, I'm still trying to learn how it all
    hangs together. The tag:
    <img class="noborder" src="pic.gif" align="top">

    appears only once in my html, in place where I want the graphic to
    appear, and it does it's job quite well. Where else and how should I
    define the entity class="noborder"?
     
    Cogito, Jul 15, 2005
    #9
  10. Cogito

    dorayme Guest

    > From: Cogito <>

    >>> Just to clarify something, is
    >>> class="noborder"
    >>> a predefined keyword/value or should it also be defined elsewhere?
    >>>

    >>
    >> No it is just a class made up by someone for the purpose of doing the sort
    >> of thing you want. "borderless" would work as well, as long as you also used
    >> this name in your html ...

    >
    > Thanks. Please bear with me, I'm still trying to learn how it all
    > hangs together. The tag:
    > <img class="noborder" src="pic.gif" align="top">
    >
    > appears only once in my html, in place where I want the graphic to
    > appear, and it does it's job quite well. Where else and how should I
    > define the entity class="noborder"?
    >


    You are doing much the right thing re the html, this is where you are using
    the class. Your first post, if I recall right, showed that there was another
    place where the noborder class style information was specified, see your
    first post and your quoted.

    This may help:

    In html mark up there are associated instructions to style various things.
    These instructions must be marked in the html. This you have done by telling
    the img it is in the class of noborder. But what is the class of noborder?
    It could be any name, you might recall from my last post, besides noborder,
    eg.fredNurk. So the nature of this class must be specified somewhere. It is
    specified in what is called CSS (Cascading Style Sheet) instructions. These
    instructions can be found in at least one of three possible locations, 1.
    Right there in the img mark up itself "inline" (see some of the suggestions
    for the example in other posts in this thread) 2. In a block of style
    instructions in the head of the html and 3. In a quite separate document
    that is linked to the html page. The details of these three methods you
    should look up.

    dorayme
     
    dorayme, Jul 15, 2005
    #10
  11. Cogito

    Cogito Guest

    On Sat, 16 Jul 2005 07:32:26 +1000, dorayme <>
    wrote:

    >> From: Cogito <>

    >
    >>>> Just to clarify something, is
    >>>> class="noborder"
    >>>> a predefined keyword/value or should it also be defined elsewhere?
    >>>>
    >>>
    >>> No it is just a class made up by someone for the purpose of doing the sort
    >>> of thing you want. "borderless" would work as well, as long as you also used
    >>> this name in your html ...

    >>
    >> Thanks. Please bear with me, I'm still trying to learn how it all
    >> hangs together. The tag:
    >> <img class="noborder" src="pic.gif" align="top">
    >>
    >> appears only once in my html, in place where I want the graphic to
    >> appear, and it does it's job quite well. Where else and how should I
    >> define the entity class="noborder"?
    >>

    >
    >You are doing much the right thing re the html, this is where you are using
    >the class. Your first post, if I recall right, showed that there was another
    >place where the noborder class style information was specified, see your
    >first post and your quoted.
    >
    >This may help:
    >
    >In html mark up there are associated instructions to style various things.
    >These instructions must be marked in the html. This you have done by telling
    >the img it is in the class of noborder. But what is the class of noborder?
    >It could be any name, you might recall from my last post, besides noborder,
    >eg.fredNurk. So the nature of this class must be specified somewhere. It is
    >specified in what is called CSS (Cascading Style Sheet) instructions. These
    >instructions can be found in at least one of three possible locations, 1.
    >Right there in the img mark up itself "inline" (see some of the suggestions
    >for the example in other posts in this thread) 2. In a block of style
    >instructions in the head of the html and 3. In a quite separate document
    >that is linked to the html page. The details of these three methods you
    >should look up.
    >
    >dorayme
    >
    >



    Ahhhh, now I get it. Your explanation was of great help. Thank you
    very much.

    BTW, The moment I saw your mention of fredNurk, I checked your email
    address to realise that we are from the same continent.
     
    Cogito, Jul 16, 2005
    #11
  12. Cogito

    dorayme Guest

    > From: Cogito <>
    >
    > Ahhhh, now I get it. Your explanation was of great help. Thank you
    > very much.
    >
    > BTW, The moment I saw your mention of fredNurk, I checked your email
    > address to realise that we are from the same continent.


    I must say, I have not heard of our Fred ever being spotted off the mainland
    or Tassie (where he has been spotted on the rare occasions important
    national cricket is on there)

    dorayme
     
    dorayme, Jul 17, 2005
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,264
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,351
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    702
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,533
    Adrienne Boswell
    Jul 30, 2006
  5. 50 SOMETHING GAL
    Replies:
    3
    Views:
    401
Loading...

Share This Page