Image Replacement

Get Started
1

Hi all

I have set up a list of images with a rollover and have used the Gilder/Levin image replacement technique. Now that I have done that I want to position the price next to it (in line horizontally and about the same distance from the right border that the image is from the left border) I can’t work out how best to do it. Can somebody give me some guidance, should I have set the images up in a different way to a list.

Any help would as always be much appreciated.

oh yeah link to the page is http://www.anna-b.co.uk/price.html

2

Let me see if i understand you right. Do want the price there permanent or just on :hover ?

3

Permanent. I know it is probably quite a basic solution and wonder if I would have been better setting it up differently to start with. I just can’t get my head around what to do next.

4

I would like a screenshot/mockup of what you are going for. I can’t “see” what you mean.

5

Ill put something up later as I am at work at the moment so can’t knock anything up just yet (might get into trouble)

6

Here is a mock up of what I want to create, I am sure it is pretty straight forward but I am unsure how to add to the html that I already have and then how to position it with the css.

Thanks again let me know if it is still not clear what I am trying to do and what the problem is.

7

This is probably not the best solution, but can’t you make a second list with the prices and make both lists floating?

Off Topic:

You don’t need the extra div around the list. The ul can hold the id

8

Since this needs to make sense without help of CSS, and if you are going to keep the ul setup (not a bad one, but it could be changed), then you’ll want the prices to be within the same li as the text such as “Cut”.


..within "pricelist"...
<ul>
  <li class="cut"><a href="services.html"><span></span>Cut</a> <span>£ 19.00</span></li>
  <li class="style"><a href="services.html"><span></span>Cut and Style</a> <span>£ 25.00</span></li>
  <li class="blow"><a href="services.html"><span></span>Blow Dry</a> <span>£ 25.00</span></li>
  <li class="shampoo"><a href="services.html"><span></span>Shampoo and Set</a> <span>£ 25.00</span></li>
  <li class="colour"><a href="services.html"><span></span>Full Head Colour</a> <span>£ 25.00</span></li>
  <li class="half"><a href="services.html"><span></span>Half Head Colour</a> <span>£ 25.00</span></li>
  <li class="straight"><a href="services.html"><span></span>Straightening</a> <span>£ 25.00</span></li>
  <li class="perm"><a href="services.html"><span></span>Perm</a> <span>£ 25.00</span></li>
</ul>

This will give you a logical and useable list:

Cut £19.00
Cut and Style £25.00
etc…

Now since you are targeting the span using .liclassname span, you may want to avoid needing more classes (and since :first-child doesn’t work in IE6) by changing the empty image-replacement span to some other element. The semantics aren’t an issue as it is an empty element. It holds no content.


..within "pricelist"...
<ul>
  <li class="cut"><a href="services.html">[b]<b></b>[/b]Cut</a> <span>£ 19.00</span></li>
  <li class="style"><a href="services.html">[b]<b></b>[/b]Cut and Style</a> <span>£ 25.00</span></li>
  <li class="blow"><a href="services.html">[b]<b></b>[/b]Blow Dry</a> <span>£ 25.00</span></li>
  <li class="shampoo"><a href="services.html">[b]<b></b>[/b]Shampoo and Set</a> <span>£ 25.00</span></li>
  <li class="colour"><a href="services.html">[b]<b></b>[/b]Full Head Colour</a> <span>£ 25.00</span></li>
  <li class="half"><a href="services.html">[b]<b></b>[/b]Half Head Colour</a> <span>£ 25.00</span></li>
  <li class="straight"><a href="services.html">[b]<b></b>[/b]Straightening</a> <span>£ 25.00</span></li>
  <li class="perm"><a href="services.html">[b]<b></b>[/b]Perm</a> <span>£ 25.00</span></li>
</ul>

You would then change your .liclassname span to .liclassname b.

Your li’s would need to change… it’s probably easiest if they just stretch 100% of the page width (or their container width) and give the left margins to the anchor. You could either use margins to position the new span, or vertical-align might work (since the span is inline) and text-align: right (if you make use of text-align: right then you’d have your li’s only be as wide as to the right side of your prices… there are many ways to do this).

If those are unstable, you could probably be safe setting the li’s to position: relative and abso-poing the spans. This should be a last resort since if you’re going to let your page width adjust then the prices will get out of whack.

Oh and ditto to donboe’s comment about the wrapping div. Unless that div is doing something else I don’t see? The ul is a block and can be a regular block container.

9

Thanks for the response and sorry for taking so long to come back. I have changed the html as suggested and it works a treat but I still can’t seem to position the newly created span how I want to. Could anybody suggest what CSS I should use as I have tried a few different ideas but can’t get it to work.

Thanks

10

Happy New year to everyone. I know now is probably not the best time but is anybody around who can give me some direction regarding this problem. The link has been updated by the way with Stomme Poes suggestion. Thanks

11

Did you try to give the span property block and give it a left margin?

12

Yeah, currently I don’t see any styles for the span. Which is fine, except one tricky thing about image replacement is that it can be easy to “lose” your elements: you don’t know where they are : )

While I got started with image replacement without developer tools, you can use them today to “see” where your starting point is.

As donboe said, see what you get when you make the span a block and give it a nice large left margin. Once you can see that span onscreen, you can see how your CSS affects it. It’s ok to use trial-and-error when positioning stuff and using image replacement: even I still trial-and-error. As time goes on and you do it more, you just do less and less trial : )

13

Thanks again for the help from both of you, I have got it how I want it and updated the link. Just a couple of questions, if I wanted to change it into two columns for the pictures/price rather than the one column it is in now any ideas how I would do it.

Also you mention the div not being needed am I right in assuming that you mean the <div id=“pricelist”> and are you saying my ul could actually be written <ul id=“pricelist”> instead. If so what benefit does this give me?

Thanks again

14

Also you mention the div not being needed am I right in assuming that you mean the <div id=“pricelist”> and are you saying my ul could actually be written <ul id=“pricelist”> instead. If so what benefit does this give me?

Less markup. The goal on average is to use as little markup as necessary to do what you want. There’s also the related code-to-content ratio, but here I just mean, why bloat up if you don’t need it?

Thanks again for the help from both of you, I have got it how I want it and updated the link. Just a couple of questions, if I wanted to change it into two columns for the pictures/price rather than the one column it is in now any ideas how I would do it.

Two lists, possibly floated, each half the width of your current one. Meaning your pricelist id may become two pricelist classes…

Now, just having two lists side-by-side doesn’t mean it’s not really a single price list. A shortfall of HTML and CSS (CSS3 columns was one solution they’ve tried). So a header stating “these are the prices” can mean all lists underneath are all price lists.

Or
lessee, you can keep it one list and have floated li’s. However this means the second list item will look like the first list item of the right/second list.

item 1 item 2
item 3 item 4
item 5 item 6

15

Thanks again for all the help, I have a had a go doing what you have suggested and have got it working on my laptop. I have had to play about quite a bit with the code and am worried that I have really butchered it, if anybody gets the chance could they take a look and just see if there is anything fundamentally wrong with it.

Thanks again