Images as linke Options

[stjepan]

Hello to everyone on forum!

I've been searching through some forum and sites devoted to CSS but it seems I can't find what I need. So, I'll try here.

Problem is simple: I want five images on my page to act as links and I want to do that in CSS. So i wrote something like this:

However, what to write in html? I can achieve a picture to be displayed, but how to act as a link? And, of course, I want different pictures to link to different sites.

Please see http://www.poandpo.com/histerius . The "redesign" is displayed but it is not a link.

Thank you,
Stjepan

This post has been edited by stjepan: Oct 15 2006, 08:02 AM

[Christian J]

I want five images on my page to act as links and I want to do that in CSS.

You can't make links with CSS alone, you must use at least an A element, preferrably combined with an IMG: http://htmlhelp.com/faq/html/images.html#linked-image

Why do you want to do it with CSS in the first place? If you simply want the same image links to be included on all pages, see http://htmlhelp.com/faq/html/design.html#include-file

[stjepan]

I wonder why "redesign" is not a link:

CSS:

.imageredesign {
position: relative;
left: 0px;
display: inline;
width: 90px;
height: 58px;
background: url(slike/hred.gif);
}

So, should html look like:

<a href="http://www.poandpo.com/unpublished.html"><img src="slike/hred.gif" class="imageredesign"/></a>

[Christian J]

I wonder why "redesign" is not a link:

Do you mean http://www.poandpo.com/histerius/slike/hred.gif ? It's just a background-image to a H1 element.

CSS:

.imageredesign {
position: relative;
left: 0px;
display: inline;
width: 90px;
height: 58px;
background: url(slike/hred.gif);
}


So, should html look like:

<a href="http://www.poandpo.com/unpublished.html"><img src="slike/hred.gif" class="imageredesign"/></a>

Yes that looks OK. But with an IMG element you don't need most of the CSS above.

[stjepan]

Thank you for replies.

Yes that looks OK. But with an IMG element you don't need most of the CSS above.

Well, that's my second site (www.poandpo.com is the first) and I've been reading about CSS and html and it seems that trend is toward the whole page in css. And second, I'd like to make hover effect without javascript. So I wanted to display image via css and define something as .image {hover: border-bottom: 2px; }. I know how to link using html's "a href", and it seems that I'll just give up from hovering because I don't want javascript just for that effect.

[Christian J]

I've been reading about CSS and html and it seems that trend is toward the whole page in css.

No, the idea is to use HTML for the semantic structure of the page and CSS for "presentation" (decorations, etc). Before people used tables to make layouts columns, BLOCKQUOTE for margin etc, that's better done with CSS.

And second, I'd like to make hover effect without javascript.

You don't need javascript for hover effects, in fact you already use CSS on your existing links.

Side-notes:

* Some XHTML syntax errors: http://www.htmlhelp.com/cgi-bin/validate.c....com/histerius/

* For some reason I get a 403 response when Opera tries to load your images.

[stjepan]

No, the idea is to use HTML for the semantic structure of the page and CSS for "presentation" (decorations, etc). Before people used tables to make layouts columns, BLOCKQUOTE for margin etc, that's better done with CSS.

Thanks for explanation.

You don't need javascript for hover effects, in fact you already use CSS on your existing links.

Yes, I have a question about this. If you hover, say, "Writing", there is line at the bottom (which is ok), but my gifs are not so deep. It seems that line appears few pixels below my images. If I use border-top I can't see it, it simply is not displayed. It seems that border (top, left, right and bottom) are moved few pixels down. Do you have an idea what my be the cause?

About errors, it is just playing with css and html and it certainly is not good. Will pass validation when I finish the site.

[pandy]

Buhu! I managed to delete my own post by mistake.

While I was doing that, Christian had time to say most of what I wanted to say. The HTML is the most important thing and should always work on its own without CSS or other enhancements. People sometimes (or often?) take it way to far, for example create data tables with nothing but DIVs or create the whole page with only DIVs and SPANs. *shudder*.

Also, image replacement can be wonky, especially the technique you use with the H1. I'm wary of image replacement at large, because I'm convinced they will always screw up for some people and that sort of contradicts its purpose. Nothing wrong with the alt text, I say. But that's my opinion.

[stjepan]

People sometimes (or often?) take it way to far, for example create data tables with nothing but DIVs or create the whole page with only DIVs and SPANs.

I'm beginner at this, however I had programming experience and when I'm reading CSSS vs. tables I often have feeling like I'm reading about religious wars. You know, like Apple is MUCH better than PC.

Thank you guys, I'll rewrite that little site and I reserve the right to come back for advice

Now, I must go figure that border problem...

[pandy]

Oh, I didn't mean it as a critique of you. Hope you didn't take it that way.

There are sites out there that others learn from that use this over-eager style, "if it can be made with CSS, it should". I meant it as a warning. It's easy to make the wrong choices since there are so many bad "tutorials". Just remember this, HTML first - CSS second.

CSS is what will cost you all the work and tears though.

[Darin McGrew]

Keep in mind that CSS is optional and you'll do okay. The HTML should have the content that everyone gets. The CSS is the presentation that most users will get, but that can be ignored by users with atypical browsing environments or special needs that you didn't anticipate.

[stjepan]

I received some very good advices here, people.

f it can be made with CSS, it should

That's exactly what I found on many sites and that get me confused. Now I started to work according to your advice and basic design is now up (http://www.poandpo.com/histerius), although I didn't solves that problem with orange underline that is too low.

However, I'm no longer in the dark Thank you.

This post has been edited by stjepan: Oct 16 2006, 06:57 AM

[pandy]

Good.

I think all the bad advice is because a lot of people who jumped on the CSS and web standards bandwagon didn't give a damn about standards before it became fashionable and cool. They never learnt HTML properly and saw no reason to now when they could just use styled DIVs... This is why you see questions like "How do I do this with a DIV" not "How do I do this with CSS" and also advice with about the same wording. Then came all the ugly hacks...

Sorry for the rant. Can't help myself.

[stjepan]

Well, after reading advices here I made a base for Histerius site. However, I notice a weird problem. If you go to ww.poandpo.com/histerius and clik on 'unpublished' you can see gray line below pictures. It turn orange when hover. If you clicked it'll lead you to another page. So far, it's ok.

If you press 'back' on my home computer and at work, when I go back those gray lines are still there (that's ok), but on my coleagues' PC the gray lines are gone! Same PC's (HP), same browser (Firefox), but different behaviour. On that computer the picture boxes are not displayed. Do you have any idea?

[Darin McGrew]

Well, after reading advices here I made a base for Histerius site. However, I notice a weird problem. If you go to ww.poandpo.com/histerius

404 Not Found

I think you meant http://www.poandpo.com/histerius/

and clik on 'unpublished' you can see gray line below pictures. It turn orange when hover. If you clicked it'll lead you to another page. So far, it's ok.

If you press 'back' on my home computer and at work, when I go back those gray lines are still there (that's ok), but on my coleagues' PC the gray lines are gone! Same PC's (HP), same browser (Firefox), but different behaviour. On that computer the picture boxes are not displayed. Do you have any idea?

I recommend that you fix the errors reported by the HTML validator.

Looking at your style sheet, you've specified a rule for a:link but not for a:visited

[stjepan]

I think you meant http://www.poandpo.com/histerius/

You're right, sorry.

I recommend that you fix the errors reported by the HTML validator

Fixed and it works now. Who'd say

Looking at your style sheet, you've specified a rule for a:link but not for a:visited

You're right again.
After all your advices now site is working ok, but only in Firefox. Now, I must fix it for Explorer (text below images, not on the right hand side as in Firefox).

However, I do have one more question: Wich Doctype should I use? I've been reading some articles on the net but I can't figure that out. Should I use XHTML or HTML?

[pandy]

Transitional or Strict depends on if you use deprecated elements and attributes or if you use frames. Judging from the page you posted, you could as well use Strict. The only thing in that page that stops you from validation as Strict is one target attribute. I say lose that and go hardcore.

XHTML or HTML is another matter. As long as you serve XHTML as HTML (you and almost everyone else do) browsers treat it as HTML. So what's the use? Not much IMO. I don't use XHTML if I can help it. But I think you should judge for yourself. Maybe a good advice is to say you shouldn't use XHTML until you are able to decide for yourself if you really want to.

[jimlongo]

Maybe a good advice is to say you shouldn't use XHTML until you are able to decide for yourself if you really want to.

My first boss was an ex-military, who used to say "if you can't explain it someone else, you really don't know how to use it".

This post has been edited by jimlongo: Oct 18 2006, 08:58 AM

[pandy]

But I do. I can place all those little slashes in the right places. It's just that it doesn't make me feel any leeter doing it.

Seriously, I meant what I said. The whole HTML/XHTML thing is a can of worms. I could post 10 links to pages saying don't use XHTML and 10 to pages saying XHTML is god-sent. I don't think one should go either way just because some guru says so. So, wait until you can form your own opinion, that really is my advice.

[jimlongo]

I certainly wasn't referring to you
I was amplifying what you said.