text-decoration question

dealing with linked graphics

[annej]

I've got text-decoration:none; for my text links. I'd like to do the same with the border around a linked graphic. Is this possible? For that matter is there a css way to set a color for a border around graphics both linked and not linked. I have certain graphics that I want to have a thin border.

Anne

[grahamstewart]

Borders are controlled via the

border-style, border-color, border-width

rules or via the shorthand rule

border

So you are looking for something like this..

[pre]
/* Give all images a blue ridged border */
img {
 border: 2px ridge #0000ff;
}
/* Give images with class="framed" a thin black border */
img.framed {
 border: 1px solid #000000;
}
/* Images inside <a> tags should have no border */
a img {
 border: none;
}
[/pre]

You can also set each line of the border differently using border-bottom-style, border-top-style, border-left-width etc etc

Hope that helps. For more information see [w3.org...]

[annej]

I just spent the last hour trying out the possibilities you just gave me grahamstewart. Thanks!

Now could I give a color to borders in just one area, for example within

.indexspace {
background-color: #FFFFCC;
text-align: center
}

Also is it possible to use hover with images?

Anne

[grahamstewart]

Sure.

To put a border around indexspace itself you would use something like..

[pre]
.indexspace {
 border: 1px solid black;
}
[/pre]

..or to put a border around all the images that appear within indexspace you could use...

[pre]
.indexspace img {
 border: 1px solid black;
}
[/pre]

As for hover, the answer is yes and no. Most browsers only support the :hover rule for <a> tags. But if your image is inside an <a> tag then that can be enough.

If your HTML looks like..

[pre]
<a class="button" href="link.html"><img src="button.gif"></a>
[/pre]

then you can use this CSS..

[pre]
a.button {
 border: none;
 margin: 3px;
}
a.button:hover {
 border: 3px outset;
 margin: 0;
}
[/pre]

to make your buttons appear to rise up as you hover over them (like the buttons on IE toolbar).

If you want to actually change the image as you hover over it then read the recent thread [webmasterworld.com...] for some good info.

[annej]

Here I am after hours of hovering. :) Thanks again for the fantastic help.

to make your buttons appear to rise up as you hover over them

This is exactly what I want. The pictures are book covers from my affiliate so I want to encourage people to click.

When I do
<a class="button" A HREF=" [booklink"...] target="_blank">
<IMG SRC="heros.jpg" ALT="find at booklink.com" hspace=10></A>

It works great but I need to have it on the left with the text wrapping around it.

When I do

<IMG ALIGN="left" SRC="heros.jpg" ALT="find at booklink.com" hspace=10>

or

<IMG SRC="heros.jpg" ALIGN="left" ALT="find at booklink.com" hspace=10>

I lose the 'hover' ability.

Is there a fix for this?

Anne

[DrDoc]

Set float:left on the <a> tag for the image...

[Filipe]

Just as a heads up:

I never recommend NOT having underlines under links because it's a basic design principle for websites. This is for web business mainly, because for personal sites, blogs, or sites that are really trying for an arty or unique look often benefit from going against the norm.

If you're trying to run a business though, I recommend making things as easy as possible. Use the "KISS" principle (Keep It Simple and Stupid). If you want to make browsing your website as easy and intuitive as possible, stick to text-decoration: underline.

[annej]

Here I am again weeks later. I was getting so frustrated I had to take a CSS break. Thanks for all the help.

The float:left works great for IE but is a disaster in Netscape. Even if I also add align=left in the HTML the text does not wrap like it should. In Netscape 6 it just covers up the image with the words. In NN it makes a huge space between the image and words. I don't care if the hover doesn't work in Netscape as by far the majority of my visitors come in on IE. But I'd like to find a way that it isn't a completer mess on Netscape.

Thanks for any thoughts.

Anne

[pageoneresults]

annej, in this code example you provided...

<IMG ALIGN="left" SRC="heros.jpg" ALT="find at booklink.com" hspace=10>

...it looks like you are using FrontPage. Get rid of the hspace=10 as it does cause problems with some browsers, particularly Netscape. You also are missing the quotes around the attribute.

hspace="10"

If you are using FP, do this...

Ctrl + /

That is the Reveal Tags command. There is a sequence to do things in FP so the tags do not break or are out of order. To do what you wish to do, start from a clean slate.

Insert your image where you want it to appear. Go ahead and apply your left align which will now force the image to the left. Then apply your hyperlink.

Now you've got the hspace to worry about. Well, there are two ways to do this. One would be to bring the image into your graphics editor and add canvas to the side that the text will wrap around, maybe 10, 15 or 20px.

The other way would be to do this through css. You can add an image class called...

img.left{padding:0px 15px 0px 0px;}

...and then...

<img class="left" src="file-name.jpg">

This will apply 15px of padding to the right side of the image and create the gap between image and text. I'm sure there are other ways to do this too and one of the more knowledgable css people should chime in and provide a more elegant solution.

[Oaf357]

Good call, Filipe. I too would recommend the exact same thing. Businesses should underline links and at the extreme edge do a hover text-decoration:none

While non-money makers should go for the edge of the envelope.

[annej]

I don't use front page but I do use old shareware to put most of my code in. Other times I just type it in. I don't like WYSIWYG software.

With everyones help I now have great results in IE and Netscape 6. Thanks tons!

It's still a mess in NN4.72 but it's readable. Only about 3% of my visitors come in on it anyway.

Anne

[Oaf357]

3% wow... that's a pretty decent size compared to the rest of the Internet.

[grahamstewart]

If you want to make browsing your website as easy and intuitive as possible, stick to text-decoration: underline.

This advice was definitely true when the web was in its infancy, but I feel it's getting a little dated now.

These days many, if not most big sites don't use underlines on all their links, so users are much more accustomed to it. (See BBC [news.bbc.co.uk], MSN.com [msn.com] and even AOL [aol.com])

The thing to avoid is using a link style that cannot be distinguished from normal text, especially if you use 'proper' inline links (rather than the prevalent 'Click Here' variety). How you actually achieve this is up to you.

[annej]

3% wow... that's a pretty decent size compared to the rest of the Internet.

Interestingly I have more visitors come in on the older Netscape browsers than on newer. The site is on a topic of interest to women. Maybe it's the women who have older computers. Doesn't mom get stuck with the oldest computer in the house? ;)

I wouldn't do it on my big site but I'm going to have fun getting modern on this little site. They'll just have to get with the 21st century.

Anne

[grahamstewart]

Sounds like its time to educate those Moms and explain the advantages of upgrading their browsers. :)

[Oaf357]

Actually in my house the women have the more powerful PC.