Lavalamp ( JQUERY ), CSS issue with li.back graphic, not displaying round/flat on one side

[nigeldunkley]

Hiya,

I’ve just finished a rebuild of my site and have integrated Jquery.

In order to insert the lavalamp link bar I was forced to edit the margin in ‘.lavaLampWithImage li a’ from 10 to 31 in order to widen the link space in between one another.

This made the floating hover graphic, in this case, the “/lava/lava.gif” extend to the right, still in line with the left side of the link, but extended to the point of almost reaching the second link, and the second link the 3rd, etc..

So to compensate for this, I adjusted the margin right in the ‘.lavaLampWithImage li.back {‘ section from 7 to 30. This brought it back to centre on the current hover or current link, but has flattened it on the respective right side.

Here is the site so you can see: http://www.nigeldunkley.com

and the CSS below:

Hopefully, someones got a clue, its been chomping at me for the whole day…

Cheers, Happy New Year

.lavaLampWithImage {

position: absolute;

height: 29px;

width: 968.5px;

background:url("../images/lava/bg.gif") no-repeat top;

padding: 15px;

margin: 10px 0;

overflow: hidden;

background-image: url(../images/lava/bg.gif);

}

.lavaLampWithImage li {

float: left;

list-style: none;

}

.lavaLampWithImage li.back {

background:url("../images/lava/bg.gif") no-repeat right -30;

width: 9px; height: 30px;

z-index: 8; margin-left:15px;

position: absolute;

}

.lavaLampWithImage li.back .left {

background:url("../images/lava/lava.gif"); no-repeat top left;

height: 30px;

margin-right: 30px; /* 7px is the width of the rounded shape */ ---/* CHANGED FROM 7 TO 30) */

}

.lavaLampWithImage li a {

font: 14px "Courier New", Courier, monospace;

text-decoration: none;

color: #fff;

outline: none;

text-align: center;

top: 7px;

letter-spacing: 20;

z-index: 30;

display: block;

float: left;

height: 30px;

position: relative;

overflow: hidden;

margin: auto 31px;   /* CHANGED FROM 10 TO 31) */

}

.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {

border: none;

}

[clokey2k]

I think I’ve spotted it:

.lavaLampWithImage li.back {

background:url("../images/lava/bg.gif") no-repeat right -30;

width: 9px; height: 30px;

z-index: 8; margin-left:15px;

position: absolute;

}

Is wrong, somewhere along the line the wrong image is being called and the position units missing (px); Try:

.lavaLampWithImage li.back {

background:url("../images/lava/lava.gif") no-repeat right -30px;

width: 9px; height: 30px;

z-index: 8; margin-left:15px;

position: absolute;

}

You may have to alter the right margin on ‘.lavaLampWithImage li.back .left’ back to 7px but at least it puts it back to some normality!

[nigeldunkley]

Hey,
I appreciate you having a peak.

I tried what you said, and in fact, you caught missing code. However, when I insert it, it gets worse than prior. For some reason, the GIF seems to overlap itself, and won’t find the round end.

I can probably accept the flat side, as it doesn’t look terrible, but you know how it is when you get to trying to fix something…OCD

Cheers for the effort.

ps, Id attach a screenshot, but I cant find a photo attachment button!!

[clokey2k]

All I did was play with the values ‘live’ using chromes inspector tool. I corrected the background ‘url()’ then tweaked the ‘.left’ right margin. It may be some of the JS values that I edited.

after changing:

.lavaLampWithImage li.back{

background: url("../images/lava/lava.gif") no-repeat right -30px;

}

I get: http://dl.dropbox.com/u/17771836/screen1.jpg

after changing:

.lavaLampWithImage li.back .left {

margin-right: 9px;

}

I get: http://dl.dropbox.com/u/17771836/screen2.jpg

[nigeldunkley]

@clokey2k,
Thanks a lot for having a look. I changed what you wrote and I got exactly what you posted.

I hate to look a gifthorse in the mouth but………now, how do I shrink the li.back to the text size? I’ve tried every damn combo in the css, and nothing will do it. Either it chops the gif, or if I put it relative it dives off the charts.

It looks nice, and better I might add as it is, but it’d be nice for the future if nothing else to know how the hell the lava is adjustable.
cheers.
n

see: http://www.nigeldunkley.com for the updated version as you noted! Thanks!

[nigeldunkley]

@CricketLaChica,

Thanks a lot for having a gander at the css. I implemented the changed you made and THEY WORK!

Wicked.

Out of curiosity, is it normal that the lavalamp would appear in different sizes in FF and SAF? When I use safari, the margin between the end of the BG.GIF and the LAVA.GIF seems to be 10-15px larger?!

I’ve gone the middle road and found a margin that doesn’t make it look too far off in Safari or FF, but there is a def noticeable difference.

Cheers again for the correction, I spent hours trying to figure out those damn numbers!

[clokey2k]

Glad you got it working, thanks to @CricketLaChica for finding the CSS for centering the text.

I had a look, but I was too tired and grumpy (thats what my girlfriend said anyways). I posted what I had.

[nigeldunkley]

thanks mate, you did get me on one of the many issues! The prob was I tried every combo of numbers I could think of trying to get the damn thing right and had no luck. I guess it takes having used the lava before.

Cheers for the help.

[Author]

Posts