Login | Register | FAQ
Anonymous

Remove border around image link

+ Post a reply

3 posts Page 1 of 1


Remove border around image link

by lisaja » Tue Sep 21, 2010 1:34 pm

I am on lesson 7 in the HTML tutorial and have learned to turn a image into a link (example 4). But how do I remove the blue border around the image? It doesn't look nice!

Thank you,

Lisa
User avatar

lisaja

  • Posts: 6
  • Joined: Tue Sep 21, 2010 2:24 pm

Re: Remove border around image link

by HTML.net » Tue Sep 21, 2010 3:23 pm

lisaja wrote:..how do I remove the blue border around the image?


Hi Lisa,

This is best done with CSS which is next step after HTML. But here is a hint:

<a href="http://www.html.net"><img src="logo.png" style="border-style: none" /></a>

- Andreas, HTML.net
User avatar

HTML.net
Site Admin

  • Posts: 1194
  • Joined: Sat Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Remove border around image link

by Maujor » Tue Sep 21, 2010 3:29 pm

To get rid of the blue border you can use the border attribute for the img element like so:
HTML:
Code: Select all
<a href="#"><img src="path to image"  alt="" border="none"></a>

This isn't a good solution since it mixed up presentation with markup. So a better solution is using style rule. (Have you already read the HTML.net CSS tutorial at:http://html.net/tutorials/css/?
CSS:
Code: Select all
<style type="text/css">
a img {border:none;}
</style>

HTML:
Code: Select all
<a href="#"><img src="path to image"  alt=""></a>
User avatar

Maujor

  • Posts: 3
  • Joined: Tue Sep 21, 2010 3:05 pm
--
Maurício "Maujor" Samy Silva
http://maujor.com


+ Post a reply

Page 1 of 1