Preventing a border around a graphic

[Cogito]

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?

 

[Travis Newbury]

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?

 

[saz]

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.

 

[Cogito]

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?

 

[Emanuel Rumpf]

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;">

 

[Robert Frost-Bridges]

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;">

 

[Cogito]

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?

 

[dorayme]

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

 

[Cogito]

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"?

 

[dorayme]

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

 

[Cogito]

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.

 

[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.

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