Different Images & CSS

[SouthernMunk]

I'm wanting to use different images on my website depending on what style the user has selected. For example, the default and sabretoothe styles used on OCAU use different images.

I was wondering how this could be done with CSS. At the moment I'm using:

XHTML:
<div class="ca"></div>

CSS:
div.ca
    {
    width:100px;height:100px;
    background-image:url('image.gif');
    background-position:center center;
    background-repeat:no-repeat;
    }

I know there'll be a better way to do this than using empty divisions, but I don't know how. I was thinking perhaps reading the image list from a text file, e.g.:

arrow:<img src="images/arrow.gif" alt="Arrow" />
msg_unread:<img src="msg_unread.gif" alt="Read Message" />

Should I use empty divisions, read values from a file, or use something else? Thanks.

[GreenBeret]

CSS doesn't support conditional statements so it can't be purely CSS. You should either look at a template system (most preferable) or use a style switcher: http://www.alistapart.com/articles/n4switch/

[Shinglor]

Originally posted by SouthernMunk
I'm wanting to use different images on my website depending on what style the user has selected. For example, the default and sabretoothe styles used on OCAU use different images.

Should I use empty divisions, read values from a file, or use something else? Thanks.

If you're using a server-side scripting language I suggest putting your CSS theme and images in the same directory eg.

<link rel="stylesheet" src="themes/$theme/style.css" media="screen, projection" />
<img src="themes/$theme/arrow.gif" alt="" />
<img src="themes/$theme/msg_unread.gif" alt="There are unread messages" />

Note the alt text, arrow is not a useful fallback. I just guessed on the other one. The CSS method you are using is acceptable (it's called Farner Image Replacement) although it's usually a span instead of a div. Just make sure you provide alternate text within the span or div.

This forum uses non-standard inaccessable presentational HTML, it hardly uses CSS at all. Not a good place to look for best practices.

[SouthernMunk]

Thanks, Shinglor. You're replies are always helpful.

However, I've come across a new problem. In some styles I only want to use images as the main navigational links. In others I want to use images and text, and in others I want only text.

I know I can implement the image and text solution with the :before and :after pseudo-elements (or are they pseudo-classes?), but this is currently not supported by some browsers, inc. IE. What should I do in this case?

[Shinglor]

Originally posted by SouthernMunk
However, I've come across a new problem. In some styles I only want to use images as the main navigational links. In others I want to use images and text, and in others I want only text.

Here's an example navigation list

<ul id="nav">
 <li id="home"><a href="index.php"><span>Home</span></a></li>
 <li id="help"><a href="help.php"><span>Help</span></a></li>
 <li id="about"><a href="about.php"><span>About</span></a></li>
</ul>

CSS
If you want to replace the "Home" text with home.png you could do this

li#home span {
  visibility: hidden;
  width: 100px;
  height: 30px;
}
li#home a {
  background: url('home.png') no-repeat;
  width: 100px;
  height: 30px;
}

Or if you want the text below home.png you could do this.

li#home a {
  background: url('home.png') no-repeat top;
  padding-top: 30px;
  width: 100px;
}

Is that what you meant?

EDIT: Whoops, forgot to include the image in the anchor.

[SouthernMunk]

Tis exactly what I meant, thankyou Shinglor.

LI are block elements are they not? It's just that my navigation links are not necessarily going to be vertical, so I thought I could add the image through the anchor element's class.

Could it work like this:

CSS:
a.nav_home span{visibility:hidden}
a.nav_home {background:url('home.gif') no-repeat}

XHTML:
<a class="nav_home" href="home.php"><span>Home</span></a>

EDIT: Code -> Like you said I was unnecessarily complicating the issue.

[Shinglor]

Originally posted by SouthernMunk
Tis exactly what I meant, thankyou Shinglor.

LI are block elements are they not? It's just that my navigation links are not necessarily going to be vertical, so I thought I could add the image through the anchor element's class.

Could it work like this:

CSS:
a.nav_home span.nav_home {visibility:hidden}
a.nav_home {background:url('home.gif') no-repeat}

XHTML:
<a class="nav_home" href="home.php"><span class="nav_home">Home</span></a>

You just need to add the height and width of the image to your a element. If you want a horizontal menu you can float the list items to the left.

Also you don't need to set a class on the span, using inheritance (a.nav_home span) will do the same thing. I've updated my code to make the image a part of the link so it's clickable. I haven't tested it though so there could be some mistakes.

Generally if something is going to be unique use an id instead of a class.

EDIT: I just figured out that you don't like the idea of using an unordered list for a list of links. A list is better for mobile devices, screen-readers and text browsers. Show me how you have it currently and I'll try and style it as a list.

[SouthernMunk]

The width and height properties of anchors and spans cannot be set (at least, not with the browsers I am using). Because of this, the background image doesn't display correctly.

This seems to work for me, but I don't know how 'correct' it is:

CSS:
li#home {
    width:100px;height:100px;
    background-image:url('image.gif');
    background-position:center center;
    background-repeat:no-repeat;
    }
li#home span {
    visibility:hidden;
    }

XHTML:
<ul>
<a href="home.php"><li id="home"><span>Home</span></li></a>
</ul>

Because the <li> is part of the anchor, I can set the dimensions and background image properly.

EDIT: I just figured out that you don't like the idea of using an unordered list for a list of links. A list is better for mobile devices, screen-readers and text browsers. Show me how you have it currently and I'll try and style it as a list.

What I have currently is something like this:

<a href="home.php">Home</a>
<a href="search.php">Search</a>
<a href="members.php">Members</a>
... ... ...

As you can see, I simply used whitespace (the newline character) because I wanted them on the same line. If I was going to use an unordered list, how could I make them fit on the same line without absolute positioning? (or should I use absolute positioning?)

[Shinglor]

Originally posted by SouthernMunk
The width and height properties of anchors and spans cannot be set (at least, not with the browsers I am using). Because of this, the background image doesn't display correctly.

Sorry, I forgot to set it to display: block.

Originally posted by SouthernMunk

What I have currently is something like this:

<a href="home.php">Home</a>
<a href="search.php">Search</a>
<a href="members.php">Members</a>
... ... ...

As you can see, I simply used whitespace (the newline character) because I wanted them on the same line. If I was going to use an unordered list, how could I make them fit on the same line without absolute positioning? (or should I use absolute positioning?)

ul#nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul#nav li {
  display: block
  float: left;
}

I'm going to make a test page now and make sure it works.

EDIT: http://members.optusnet.com.au/shing...zontalnav.html

I used display: none instead of visibility: hidden because the text can sometimes cause the box to expand. There was a reason I used visibility: hidden but I can't remember what it was.

[SouthernMunk]

I've ended up with this - it seems to work OK, except that in IE6 the screen jumps around (I think this is the JavaScript functions).

CSS: 
span.n_home {
    background-image:url('n_home.gif');
    background-position:center left;
    background-repeat:no-repeat;
    text-indent:25px;
    }

span.n_home span {
    display:none;
    visibility:hidden;
    }

XHTML: 
<a href="home.php"><span class="n_home"><span>Home</span></span></a>

Generally if something is going to be unique use an id instead of a class.

I'm using the xhtml class attribute in conjunction with the id attribute because the selected style changes with the use of onmouseover and onmouseout. I'm using id to identify the element and class to change the element's className attribute.

I don't know if there is any other way to do this.