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?
Full Version: Preventing a border around a graphic
Cogito wrote:
| QUOTE |
| 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=-
In article <[Email Removed]>,
[Email Removed] says...
[Email Removed] says...
| QUOTE |
| 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.
On 14 Jul 2005 06:41:10 -0700, "Travis Newbury"
<[Email Removed]> wrote:
<[Email Removed]> wrote:
| QUOTE |
| 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?
| QUOTE |
| Basically, what I'm asking is: can you please show me an example how to code this? |
change
| QUOTE |
| <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 wrote:
[...]
[...]
| QUOTE |
| <img src="pic.gif" align="top" style="border:0px solid black;" |
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.