Issues with displaying background images besides each other.

Hey guys, I'm new here and just getting into web design.

While I can't do any javascript myself yet, I found a neat bit of script that lets you change alternate stylesheets within a page and remember the selected stylesheet with a cookie. This has let me make different themes and layouts without actually owning the server I'm uploading to (I'm taking a first year course so I upload to one of my uni's servers).

So I have a global.css (stylesheet) and styleA.css, styleB.css, etc (alternate stylesheets).

Anyways it's worked like a charm so far, but I've been having some problems changing images using this. Basically the problem is I of course can't specify different html information with just a change in CS. I can choose how to display it, or if I want to display it, but I can't find a way to point it in another direction. Or more concisely there doesn't seem to be a way to specify the source of image tags within my css files.

The only way to specify the source of an image in css I have found so far is to use the background-image property. That worked for example on my banner (I know it should be consistent regardless of style but I'm playing with ideas here) but doesn't seem to work on images side by side.

This is an issue because my navigation links are images that only go with one theme (I have a set for each theme). The simple solution would be to just use background colors for my buttons, but I like how they've turned out. The less simple solution would be to have 4 navigation bars in each page and have the alternate stylesheet have display:none on all but one of them. That is very wasteful though.

In the end I gave each nav button an id and am now trying to configure them so they will show whatever background images the alternate stylesheet specifies should be applied to each id. THIS IS NOT WORKING.

I have tried everything: unordered lists, divs in divs, paragraphs in divs, tables with each td corresponding to a button, etc. Nothing works and it is getting frustrating.

Firefox seems to be ignoring any height and width I specify for the elements containing background images unless writing exists within it. I think this is occurring with inline elements. However I can't set them to display:block because the nav bar is horizontal. I haven't found anyway to get these background images to display at their proper size next to each other, centered on the page without using img tags in the HTML.

Basically I need either
a) a way to specify the actual img tag source from a css file
b) an alternative way to specify any kind of image source to an element (other than background-image)
or
c) an HTML format in which I can get multiple background images to display at their correct sizes and next to each other and link to other pages (I've tried a lot on this one). Preferably using a list or, if I can avoid it, at least not using a table.

Sorry for being horrendously long-winded, I'm rather a poor summarizer. Thanks to anyone who takes the time to try and help.
---
A man chooses, a slave obeys.

You say you have given each link an id so simply add a background image to the link (ie the image you want there).

In CSS
li#idname {background-image: url(src/images/pic); background-repeat:no-repeat; that is if I understand you correctly.

Re-size your images so that they fit the width height of the list item.

Re-size your images so that they fit the width height of the list item.

The default widths/heights of my list items seems to be 0 and 0.

I had tried a lot, but I had not tried that, though I had gotten a similar outcome with divs inside a div.


<div class="nav">
<ul id="topnav">
<a id="bttnhome" href="index.html"><li></li></a>
<a id="bttnabout" href="about.html"><li></li></a>
<a id="bttnarchives" href="archives.html"><li></li></a>
...
</ul>
</div>

---

.nav li {
display:inline;
}

.nav a {
background-repeat:no-repeat;
text-decoration:none
}

#topnav li {
width:120px;
height:19px
}

#bttnhome {
background-image:url('../images/a/bttn_home.png');
}

#bttnabout {
background-image:url('../images/a/bttn_about.png')
}

#bttnarchives {
background-image:url('../images/a/bttn_archives.png')
}


It seems that it applies to as much as I occupy of the space (a result of display:inline no doubt). But I don't want to have to include 40 &nbsp in each list item. There has to be a better way. I was hoping that


#topnav li {
width:120px;
height:19px
}


would make sure the list items were large enough for the full button to show without content inside it, but it doesn't seem like specifying the width and height of #topnav li is having any effect at all.

Still looking for a clean solution... I've come up with a couple, but as you can see so far they've all seemed a little long-winded. My proff isn't fond of long-winded. Thanks for the suggestions so far!

I made a mistake myself, am not really sure what you want to acheive. Try this link for horizontal navigation with images. http://www.bernskiold.com/2011/02/16/coding-a-big-button-horizontal-navigation/

I made a mistake myself, am not really sure what you want to acheive. Try this link for horizontal navigation with images. http://www.bernskiold.com/2011/02/16/coding-a-big-button-horizontal-navigation/

No images are using in the navbar made in/for that tutorial.

Like I said, I have 4 sets of really nice buttons (images) that I wanted to use for my navigation. Each set would correspond to a particular css stylesheet. A Javascript file allows users to change and remember their preferred stylesheet choice. Everything else works fine so far, all the text and background colours change, and the banner changes correctly as well.

However as the HTML file is staying the same, the only way I can have different images be displayed depending on which css file is used (to my knowledge) is to use the background-image property, and give the ids for each button a different value in each of the alternate stylesheets.

This works in that the right images are used, however I'm having trouble making them fully display side by side. In the above code I gave (the one you suggested but aren't sure about now) the desired result is achieved, but only if 30 or so &nbsp are used in between each list item.

I'm trying to get this to work without having 4 navigation bars in each of my 10 html files (very wasteful) or using 150+ &nbsp (very unprofessional).

I understand if that's impossible, though I'd be surprised if some elegant way of coding this didn't exist. I just wish applying width/height to the list items made some difference, I'm guessing it's not because display:inline applies to them, but I need display:inline to keep the navbar horizontal.

I'm not sure where to go from here. If I want to use buttons, it looks like I might need 3 unused navbars in each html page. Oh, and something like "don't use images for the navbar" or "forget about the different styles" wouldn't be helpful. Not saying you did/would give advice like that, just making it clear I want to retain the original design and functionality.

Have you tried giving a margin for each button id?
#button { margin-left: 40px;} or a padding, if I understand you correctly, better than &nspb;
In the code you gave before the last comment, your list items did not sit right. You would need to get that right first
<ul>
<li><a id="button" a href="#"></a></li>
<li><a id="button2" a href="#"></a></li>
<li><a id="button3" a href="#"></a></li>
</ul>
If it did not work on the a tag, make the margin/padding on the <li>tag.

Have you tried giving a margin for each button id?
#button { margin-left: 40px;} or a padding, if I understand you correctly, better than &nspb;
In the code you gave before the last comment, your list items did not sit right. You would need to get that right first
<ul>
<li><a id="button" a href="#"></a></li>
<li><a id="button2" a href="#"></a></li>
<li><a id="button3" a href="#"></a></li>
</ul>
If it did not work on the a tag, make the margin/padding on the <li>tag.

That's what I thought about the <ul><a><li> but I'm no expert.

Margin only created space between the links, but padding of image width forced the link to occupy at least that much space.

It worked perfectly, thanks so much for your help.