Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Preventing a border around a graphic

Reply
Thread Tools

Preventing a border around a graphic

 
 
Cogito
Guest
Posts: n/a
 
      07-14-2005
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?


 
Reply With Quote
 
 
 
 
Travis Newbury
Guest
Posts: n/a
 
      07-14-2005
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=-

 
Reply With Quote
 
 
 
 
saz
Guest
Posts: n/a
 
      07-14-2005
In article <(E-Mail Removed)>,
http://www.velocityreviews.com/forums/(E-Mail Removed)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.
 
Reply With Quote
 
Cogito
Guest
Posts: n/a
 
      07-14-2005
On 14 Jul 2005 06:41:10 -0700, "Travis Newbury"
<(E-Mail Removed)> 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?

 
Reply With Quote
 
Emanuel Rumpf
Guest
Posts: n/a
 
      07-14-2005
> 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;">
 
Reply With Quote
 
Robert Frost-Bridges
Guest
Posts: n/a
 
      07-14-2005
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

 
Reply With Quote
 
Cogito
Guest
Posts: n/a
 
      07-15-2005
On Thu, 14 Jul 2005 20:02:40 +0200, Emanuel Rumpf <(E-Mail Removed)>
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?

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-15-2005
> From: Cogito <(E-Mail Removed)>

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

 
Reply With Quote
 
Cogito
Guest
Posts: n/a
 
      07-15-2005
On Fri, 15 Jul 2005 18:01:33 +1000, dorayme <(E-Mail Removed)>
wrote:

>> From: Cogito <(E-Mail Removed)>

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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-15-2005
> From: Cogito <(E-Mail Removed)>

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



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Is it possible to mouseover a GRAPHIC . . . that launches another (freestanding) GRAPHIC (ie. when flash is _not_ available)? 50 SOMETHING GAL HTML 3 12-10-2006 01:10 AM
border-color: #003366; border-width: 2px; =?UTF-8?B?TWFydGluIFDDtnBwaW5n?= HTML 64 07-30-2006 04:01 PM
Drop Down List Border Width vs Text Box Border Width Coder ASP .Net 1 06-24-2006 01:27 PM
row bottom border in inner table not matching up with row border in outer table phl HTML 1 06-08-2006 03:43 PM
Datagrid Border showing when I say no border tshad ASP .Net 0 01-31-2005 05:40 PM



Advertisments