X-Cart forums

[JeanB]

Hi Again, all!

Just trying to make a rollover for the speedbar!

I've managed to get this far:

http://i16.photobucket.com/albums/b49/BeanJardo/Work/speedbarscreenshot.jpg

But I can't work out how to get the last little bit to appear!


This is my CSS:

/* header tabs */
.tabs {
  position: absolute;
  top: 7px;
  right: 6px;
  margin: 0px;
  padding: 0px;
  height: 25px;
  width: 80%;
  text-align: right;
}
.tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.tabs li {
  float: right;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  background: transparent url("images/tab_right_roll.png") no-repeat right top;
  height: 25px;
  overflow: hidden;
}
.tabs a:link,
  .tabs a:visited,
  .tabs a:hover,
  .tabs a:active
{
  display: block;
  background: transparent url("images/tab_left_roll.png") no-repeat left top;
  margin: 0px 5px 0px 0px;
  padding: 5px 10px 5px 15px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #253161;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
  outline-style: none;
}
.tabs a:hover {
  color: #2863c2;
  background-position: 0 -25px;
}

Please don't tell me you can't have 2 background images on a css rollover...? lol


The two images are as below:



Any help greatly appreciated!

Thank you!!

[JeanB]

Monday Morning Bump!

[JeanB]

Another Monday morning Bump!?

[JeanB]

Anyone?

[gizmo]

I'll download the images, and try it out for you. (Least I can do Is try for ya)

But I am only using 4.3.0 and skin light and lucid. (Which is re-designed apart form tabs and other areas)

What skin are you using? could you pm me your site?

[gizmo]

Hmm strange In Light and lucid I have this:
}
.tabs li {
float: right;
margin: 0px 1px 0px 0px;
padding: 0px;
background: transparent url(images/tab_r.png) no-repeat right top; (Renamed that to find out what's happening)
height: 25px;
}
.tabs a:link,
.tabs a:visited,
.tabs a:hover,
.tabs a:active
{
display: block;
background: transparent url(images/tab_l.png) no-repeat left top; (Renamed that to find out what's happening)
margin: 0px 5px 0px 0px;
padding: 5px 10px 5px 15px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
color: #253161;
text-decoration: none;
font-weight: bold;
font-size: 11px;
height: 25px;
outline-style: none;

After doing that I still had an image appearing on right, went to images and took a look and theres another image > named "tab_r.gif" size 5x25 so I renamed and image gone, that's as far as I have got, but it looks like theres another image for you to modify, well there is in light and Lucid.. (Haven't started looking for css yet, but it's not in main within css) At a guess I bet it's in ie6/7.css as PNG issue

It's a starting point for you.
I was going to work on my custom tabs, and now it's given me a starting point.

Hope this helps in some way.

[Lock15]

This may help out those also learning .css. You may want to first correct the styles in your .css. The beginning is missing on two of the styles, an added comma was inserted (remove the comma), a class name is missing, and change the closing style for the two that had the opening missing.

/* header tabs */
.tabs {
position: absolute;
top: 7px;
right: 6px;
margin: 0px;
padding: 0px;
height: 25px;
width: 80%;
text-align: right;
}
.tabs ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.tabs li {
float: right;
margin: 0px 1px 0px 0px;
padding: 0px;
background: transparent url("images/tab_right_roll.png") no-repeat right top;
height: 25px;
overflow: hidden;
}
.tabs a:link, {
.tabs a:visited,
.tabs a:hover,
.tabs a:active
}
Class Name missing {
display: block;
background: transparent url("images/tab_left_roll.png") no-repeat left top;
margin: 0px 5px 0px 0px;
padding: 5px 10px 5px 15px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
color: #253161;
text-decoration: none;
font-weight: bold;
font-size: 11px;
height: 25px;
outline-style: none;
}
.tabs a:hover {
color: #2863c2;
background-position: 0 -25px;
}

[gizmo]

Lock15

Not sure where you going with this, what do you mean by "css learners" the code is wrong?

First I didn't paste all code, as I only posted some to illistrate to the user how the images are working, as this was the talking point. which I have now below (This is Light and Lucid For 4.3)

/* header tabs */
.tabs {
    position: absolute;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
    height: 25px;
  width: 80%;
  text-align: right;
}
.tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.tabs li {
  float: right;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  background: transparent url(images/tab_r.png) no-repeat right top;
  height: 25px;
}
.tabs a:link,
  .tabs a:visited,
  .tabs a:hover,
  .tabs a:active
{
  display: block;
  background: transparent url(images/tab_l.png) no-repeat left top;
  margin: 0px 5px 0px 0px;
  padding: 5px 10px 5px 15px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #253161;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
  outline-style: none;
}
.tabs a:hover {
  color: #2863c2;
}

The css is fully compliant with w3c You can try here http://jigsaw.w3.org/css-validator/#validate_by_input

By Pasting the css into the link above, I gather you may have assumed that was complete code within my post reply!

[JeanB]

Hi Both,

Thanks so much for your input, it's very much appreciated!

Gizmo - My huge apologies for not seeing this thread sooner, I've not been in the office (Very heavy snow in the UK!) Thanks for the input/help!

Lock15 - Thanks for your messages, it's certainly helped.


However,

I have a hard-copy of the original CSS here, which actually has those omitted, before I've even delved into the tabs section?

Also, looking at the "skin1_original" folder, the css is there and is as follows:

.tabs {
 position: absolute;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
 height: 25px;
  width: 80%;
  text-align: right;
}
.tabs ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.tabs li {
  float: right;
  margin: 0px 1px 0px 0px;
  padding: 0px;
  background: transparent url("images/tab_r.png") no-repeat right top;
  height: 25px;
}
.tabs a:link,
  .tabs a:visited,
  .tabs a:hover,
  .tabs a:active
{
  display: block;
  background: transparent url("images/tab_l.png") no-repeat left top;
  margin: 0px 5px 0px 0px;
  padding: 5px 10px 5px 15px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #253161;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 25px;
  outline-style: none;
}
.tabs a:hover {
  color: #2863c2;
}

Thanks again, Jean.

[gizmo]

Yep I'm UK as well, Near Gatwick, Still have lots of snow on the ground etc, and fed-up with it now, been non stop cold really for about a month, heat wave coming at weekend with daytime temps at 6' C instead of minus, lol....

Back on track Did you get it sorted then?