CSS Image swap issue

[Accurax]

Hi chaps / chappettes

I'm hoping you guys can help me as im not entirley sure how to go about this.

For reference, the website in question is http://cbmgroup.co.uk

As you will probably notice i have a javascript based navigation system....... i dont like this for two reasons .... 1) its messy & 2) it takes ages to make any significant changes to.

I could f course put it into an external javascript file.... but..... i dont want to

I want to change the navigation bar so that it uses a css image swap instead of javascript.

Ive dont this before for navigation systems, but in this cas i need to swap a different immage for each link .... do u therefor need to cretae a whole set of css rules for each button.... ??

Also, i'd like to use text instead of "graphical text" on the links, and have the immages swap in the background ......... but, when i try this the immages get distorted and squished as though they cant fit in the space the text allows.......... any idea's?

[moojoo]

Use a single image for both button states for each button. Use CSS background positioning.

For example say you have an image button 25px x 25px. You would make a single graphic that was 25px wide by 50px tall with both states in one image file.

#foobutton a {
width:25px;
height:25px;
display:block;
text-decoration:none;
background:#fff url("foo.jpg") 0px 0px no-repeat;
}

#foobutton a:hover {
background:#fff url("foo.jpg") 0px -50px no-repeat;
}

[Accurax]

Im not sure i understand what your saying?

Is there anyway you could explain this more clearly please?



Thanks

[moojoo]

Every button would be a single graphic with both normal and hover states. You obtain the desired effect by positining the graphic based on normal link state and link hover state. So in effect you get the same result as two images but with a single image load. Cuts the amount of files in half, increases load times, elimintaes IE flicker bug.

[Accurax]

Hang on !! ........ your talking about a film strip effect

All the css does is tells the immage to reposition itself upwards by 25 pixels right??

Isnt there a problem with the rest of the immage showing where you dont want it to??

[moojoo]

No, you define the width and height of the image box to hide the overflow. You could also use overflow:hidden; I will whip up an example for you. But yes sort of like a film strip using CSS to switch between frames.

[Accurax]

ok sounds good to me.......... id also like to find a way to get rid of this silly table that im using to controll the layout of the navbar .......
is there a way of acheiving the same using css? ...

Do i need a seperate div for each image to do what your suggesting?

[moojoo]

Here is an example.

http://www.newbeginningsdesign.com/s...ton/index.html

[moojoo]

By defining the width of the navigation area you could use an unordered list. By setting the li a's to the correct dimensions, margins etc they will wrap throughout the nav div 2 per row. That is how I would do it.

Originally Posted by Accurax

ok sounds good to me.......... id also like to find a way to get rid of this silly table that im using to controll the layout of the navbar .......
is there a way of acheiving the same using css? ...

Do i need a seperate div for each image to do what your suggesting?

[Ryan Fait]

Just a little tid-bit. If you're using multiple rollovers with different sizes, you can access them all with one class instead of defining different pixel heights:

Code: Select all

a.flip:hover {
    background-position: 0 100%;
}

[Accurax]

Thanks for that,

However, im having a slightly annoying problem that i could do with another brain to suggest a reason fo if u dont mind.

I've removed those rollover immages from the navbar for the moment, and, i have added a <ul>....</ul> ... the problem is that no matter what i try, poke, fiddle or mess with i cant get the items in the list to line up with the left hand edge of the <div> ....... probably something silly.... but id appreciate you thoughts as allways.

[moojoo]

Would help if we could see what you are doing but...

#foo { padding:0; margin:0;}

#foo ul { padding:0; margin:0;}

#foo li { list-style-type:none; }

#foo li a {}

#foo li a:hover {}

<ul id="foo">
<li>Links here</li>
</ul>

[Accurax]

Thats what i have

heres the code for the acual list :

Code: Select all

  <div id="divLeft">
    <ul id="ulmainnav">
      <li>Accounting Services & Hosted Software</li>
      <li>Payroll Services</li>
      <li>Credit Controll</li>
      <li>Archiving Solutions</li>
      <li>Cost Down Programs</li>
      <li>Quality Systems</li>
      <li>Business Planning</li>
      <li>Search & Selection</li>
      <li>Marketing Solutions</li>
      <li>VOIP Solutions</li>
      </ul>
  </div>

heres the CSS for the Li items in the list, i havnt even started turning them into links yet you see:

Code: Select all

#ulmainnav li {
    list-style-type: none;
    text-align: left;
    padding:0;
    margin:0;
    width: 120px;
}

And heres the CSS for the Div its all contained in:

Code: Select all

#divLeft {
    float: left;
    width: 120px;
    background-color: #C4D0E7;
    line-height: normal;
    clear: right;
}

Thanks again

[moojoo]

try adding

#ulmainnav ul {
padding:0;
margin:0;
}

[Accurax]

nope

This is starting to gte to me, i'm looking at the site, and i have to admit that compared to how it was this morning, its infinatly better..... i jsut wish everything would click into place now.

Anything else that could be causeing this?

[ukgeoff]

I've been having a good look at you code. Could you clarify for me just exactly what you want to line-up where?

[Accurax]

I'll try geoff

on the left hand side of my page i have a <div> which is 120px wide and #C4D0E7 , the left hand edge of this <div> (as marked by the edge of the colour) is nicly in line with the left hand edge of my footer, and the left hand edge of my header.

However, when i add a <ul> inside the <div> the individual <li> items do not justify themselves along the left hand edge...... instead the "left justify in the middle"

I'm not sure if there are rules against posting screenshots here, so heres a direct link to an image of the problem... not sure if it will help, but at least u will understand what im prattleing on about.

[img=http://img100.imageshack.us/img100/7515/divproblemqp3.th.jpg]

The above image is just of the <div> that has the problem


thx

[ukgeoff]

Put the page somewhere I can see it so I can see the code in action and play with it.

[Ryan Fait]

Here's a different method using just one image for all the links:

http://superfluousbanter.org/archive...trix-reloaded/