homepage Welcome to WebmasterWorld Guest from 54.166.108.167
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
text-decoration question
dealing with linked graphics
annej




msg:1202047
 5:18 am on Apr 7, 2003 (gmt 0)

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




msg:1202048
 6:44 am on Apr 7, 2003 (gmt 0)

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




msg:1202049
 8:04 am on Apr 7, 2003 (gmt 0)

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




msg:1202050
 1:35 pm on Apr 7, 2003 (gmt 0)

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




msg:1202051
 7:21 pm on Apr 7, 2003 (gmt 0)

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




msg:1202052
 7:27 pm on Apr 7, 2003 (gmt 0)

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

Filipe




msg:1202053
 12:34 am on Apr 8, 2003 (gmt 0)

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




msg:1202054
 12:58 am on Apr 27, 2003 (gmt 0)

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




msg:1202055
 3:19 am on Apr 27, 2003 (gmt 0)

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




msg:1202056
 4:51 am on Apr 27, 2003 (gmt 0)

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




msg:1202057
 7:19 pm on Apr 27, 2003 (gmt 0)

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




msg:1202058
 8:58 pm on Apr 27, 2003 (gmt 0)

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

grahamstewart




msg:1202059
 11:30 pm on Apr 27, 2003 (gmt 0)

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




msg:1202060
 12:05 am on Apr 28, 2003 (gmt 0)

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




msg:1202061
 12:09 am on Apr 28, 2003 (gmt 0)

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

Oaf357




msg:1202062
 1:30 am on Apr 28, 2003 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved