Grow your CSS skills. Land your dream job.

Problem with Lavalamp menu

  • # July 7, 2009 at 5:41 am

    The problem is that it’s not working.. I just copied the code to my files and its stopped working for some reason. I made the nessesery changes so the HTML document would see where the js is.

    The Lavalamp menu in working form is here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

    The folder looks like this if it helps.
    [img]http://www.upload.ee/image/123698/kaust_src.jpg[/img]

    And the codes are the following :

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










    Ansmambel Gert
    Tantsutuur

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis fringilla leo tempor elementum. Morbi dui est, bibendum vitae ornare a, facilisis eu quam. Phasellus quis mauris vel massa porta faucibus. In at leo lectus, a auctor magna. Duis quis tortor felis, et mollis nisl. Fusce laoreet libero at elit interdum molestie. Nunc venenatis pharetra justo et ullamcorper. Pellentesque vitae lectus nisi, non interdum leo. Morbi aliquet hendrerit sollicitudin. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam pretium viverra tellus in facilisis.

    Teated

    • Lorem ipsum dolom sit amet elit Nulla
    • Lorem ipsum dolom sit amet elit Nulla
    • Lorem ipsum dolom sit amet elit Nulla
    • Lorem ipsum dolom sit amet elit Nulla
    • Lorem ipsum dolom sit amet elit Nulla


    Code:
    @charset “utf-8″;
    /*
    CSS Dokument
    Koostanud: Henri Jeret

    Märkmed:

    Punane: #d13b3c
    Hall: #e1e1e1
    Must(kast): #2f2f2f
    Must(taust): #161616
    Sinine(kast): #3a87d7
    Sinine(menüü): #2a76d8
    Hall(menüü): #e9e9e9
    */
    * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;

    }
    body {
    background: #161616 url(‘../pildid/bg.jpg’) repeat-x;
    }
    p {
    color: #161616;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    line-height: 22px;
    }

    /*
    Suuremad elemendid
    */

    #konteiner {
    background: url(‘../pildid/p2is_bg.jpg’) no-repeat;
    width: 950px;
    margin: auto;
    }
    #p2is {
    width: 950px;
    }
    #p2is_2 {
    width: 950px;
    height: 190px;
    }
    #sisu {
    width: 950px;
    background: #fff url(‘../pildid/sisubg.jpg’) no-repeat;
    }
    #clear {
    clear: both;
    }

    /*
    Logo ja menüü
    */

    #logo {
    background: url(‘../pildid/logo.jpg’) no-repeat;
    height: 90px;
    width: 191px;
    margin-left: 40px;
    float: left;
    display: inline;
    }
    #menuu {
    height: 60px;
    width: 640px;
    margin: 20px 40px 0 20px;
    float: right;
    display: inline;
    }
    /* Force the list to flow horizontally */
    .lavaLampWithImage {
    position: relative;
    height: 29px;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
    }
    .lavaLampWithImage li {
    float: left;
    list-style: none;
    }
    .lavaLampWithImage li.back {
    background: url(“../pildid/lava.gif”) no-repeat right -30px;
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
    }
    .lavaLampWithImage li.back .left {
    background: url(“../pildid/lava.gif”) no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
    }
    .lavaLampWithImage li a {
    font: normal 11px Verdana, Geneva, sans-serif;
    text-decoration: none;
    color: #161616;
    outline: none;
    text-align: center;
    top: 7px;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    overflow: hidden;
    margin: auto 10px;
    display: inline;
    }
    .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
    border: none;
    }

    /*
    Teine päis
    */

    #p2is_2_nupud {
    float: right;
    width: 306px;
    margin: 5px 0 0 0;
    }
    img.tantsutuur_nupp {
    margin-top: 4px;
    width: 306px;
    height: 87px;
    }
    img.ansambel_gert_nupp {
    width: 306px;
    height: 87px;
    }

    /*
    Sisu
    */

    #sisu_parem {
    float: right;
    }
    .umarkast {
    position: relative;
    background: #2f2f2f;
    width: 230px;
    margin: 30px 40px 30px 0;
    }
    .nurk {
    position: absolute;
    width: 7px;
    height: 7px;
    background: url(‘../pildid/kasti_nurgad_must.jpg’) no-repeat;
    font-size: 0%;
    }
    .umarkastsisu {
    padding: 0 10px 0 10px;
    color: #fff;
    font-size: 11px;
    text-align: center;
    }
    .umarkastsisu_pealkiri {
    padding: 15px 0 15px 0;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    }
    ul.umarkastsisu_sisu {
    list-style: none;
    padding-bottom: 15px;

    }
    ul.umarkastsisu_sisu li {
    margin-top: 10px;
    font-family: Tahoma, Geneva, sans-serif;
    }
    .uv {
    top: 0;
    left: 0;
    background-position: 0 0;
    }
    .up {
    top: 0;
    right: 0;
    background-position: -7px 0;
    }
    .av {
    bottom: 0;
    left: 0;
    background-position: 0 -7px;
    }
    .ap {
    bottom: 0;
    right: 0;
    background-position: -7px -7px;
    }

    #sisu_vasak {
    float: left;
    width: 600px;
    margin: 30px 0 30px 40px;
    display: inline;
    }
    #sisu_vasak p {
    text-align: justify;
    }

    /*
    Jalus
    */

    #jalus {
    background: url(../pildid/jalus.jpg);
    height: 56px;
    width: 950px;
    }

    I have a IE stylesheet too but it doesn’t affect the result of the menu. I didn’t know what to put in here si I just did inserted the whole package :D

    Also the js folder looks like this:
    [img]http://www.upload.ee/image/123710/js_src.jpg[/img]

    I hope someone can help me with this. I’m very new in js so I didn’t make any modifications in the js files.

    # July 7, 2009 at 6:42 am

    It would be much easier with a link, but it looks to me like the paths to your js files are wrong.
    Should look like this:

    Code:



    You should also be using the latest version of jQuery http://jquery.com/

    # July 7, 2009 at 7:30 am

    Well… that was easy :D :D

    Dont know why i wanted to put the …/ there…

    Thanks a lot :D

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".