SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Ottawa, Ontario
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with div and spry

    I built a web page with 6 div sections using Dreamweaver CS4: the container that everything fits into, and then it's divided into a header, a left side bar, a right side bar, and main content and a footer.

    The header just has an image in it. The right side bar has 4 images in it, and the footer some text.

    The left side bar has a menu: a vertical spry menu. All but one of them are just single items, the other opens up into 6 more options.

    The main content panel has spry tabs in them, If I delete these tabs or remove just one section of the tabs, there is a problem with my vertical spry menu: I can't access the second level of the menu: it's like it's no longer there. When I look at the code, everything is just fine. I compared the two codes (before and after I did the edit), and there is nothing changed.

    Here is the original page: http://www.fixit2sellit.com/test-ind...0conetent.html
    And here it is with one section of the spry tabs removed: http://fixit2sellit.com/new-look-index.html

    Now I know there are tons of things wrong with these two pages, but I only want to get this vertical menu fixed.

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Limoges_designer,

    The CSS code is different for your two pages.

    On the page where the menu bar works, you have this:


    Code:
    ul.MenuBarVertical ul {
    border: 1px solid #CCC;
    background-color: #FFF;
    width: auto;
    }
    Code:
    ul.MenuBarVertical ul {
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
    background-color: #FFF;
    }
    And on the page where it doesn’t work you have this,

    Code:
    ul.MenuBarVertical {
    border: 1px solid #CCC;
    background-color: #FFF;
    width: 14.8em;
    }
    Code:
    ul.MenuBarVertical {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 75%;
    cursor: default;
    width: 14.8em;
    background-color: #FFF;
    }
    Notice the missing ul (among many other differences) in the code for the page where the menu doesn’t work. I would suspect that this is your issue.

    Hope that helps,

    Shawn

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Ottawa, Ontario
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I decided to take a different approach: I started kind of from scratch, and the problem went away.
    so now it looks good - at least it works the way I want it to:

    fixit2sellit.com

    I was wondering if anyone knew where I could find some good slideshow javascripts where I could have images changing in a box on my sidebar: I want to have a database of pictures that get poured into a box. Any ideas?

  4. #4
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Limoges,

    There are lots of scripts around the web that will do this for you. You just have to add your own images.

    Here is an example,

    http://www.barelyfitz.com/projects/slideshow/

    and another,

    http://wowslider.com/javascript-slid...tate-demo.html

    Hope that helps,

    Shawn


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •