53 users online (0 members and 53 guests)  


  Results 1 to 6 of 6

Related

  1. help with two drop down menus    Forum: Javascript Forum
    Replies: 3
  2. two drop down menus    Forum: Website Scripts Forum
    Replies: 10
  3. Drop Down Menus    Forum: HTML Forum
    Replies: 6
  4. drop down menus    Forum: HTML Forum
    Replies: 2
  1. #1
    MacGyver1968's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2013
    Posts
    4

    Help with mouseover drop down menus

    It's been 10 years since I coded a website, so I'm trying to shake off the rust, and learn a few things in the process. My sister is an art student, and as a part of her graduation requirements, she has to have a website to display her work. I volunteered to do the site...since It would be fun and I'd learn a few things in the process. I joined this forum, because I knew I would run into difficulties and hoped to seek advice from the experts here.

    The website is very new and most definitely a work in progress. All of the graphics are placeholders, as my sister will decide on the final look and content of the site...so please bear with me.

    Currently, I'm having some trouble with the mouseover drop down menus in the title frame. Each drop down menu should contain a very small thumbnail of the work, and the name of the work.

    URL="https://dl.dropbox.com/u/46946106/ArtGalleryWebsite/Websiteframeset.html"]https://dl.dropbox.com/u/46946106/ArtGalleryWebsite/Websiteframeset.html[/URL]

    Here's the title frame by itself: -https://dl.dropbox.com/u/46946106/ArtGalleryWebsite/TitleFrame.html

    I would like to center the whole set....right now it shows as left justified....and the drop down menus cut off....I'd like them to overlap onto the "Main View frame" beneath it. The code for the drop down menus is not my own...I just copy and pasted it, and edited it to meet my needs.



    Dang...I don't have enough posts to link. I tried to post the code but it wouldn't let me.

    Any help on centering the title frame links and getting them to overlap to the frame underneath would be most appreciated. Please...talk to me like I'm 10....I'm super rusty.
    Last edited by MacGyver1968; 04-05-2013 at 03:53 PM.

  2. #2
    MacGyver1968's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2013
    Posts
    4

    Re: Help with mouseover drop down menus

    Would the mods get mad if I rattled off 8 quick nonsense posts...so I can post the code of my site?

  3. #3
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: Help with mouseover drop down menus

    If you like you can post the code and I will edit the post to place the wrapper.

    Dave
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting

  4. #4
    MacGyver1968's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2013
    Posts
    4

    Re: Help with mouseover drop down menus

    Here's the code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>

    <head>


    <style type="text/css">

    body {
    font-family: arial, helvetica, serif;
    }

    #nav, #nav ul { /* all lists */
    padding: 10;
    margin: 0;
    list-style: none;
    line-height: 1;
    }

    #nav a {
    display: block;
    width: 15em;
    }

    #nav li { /* all list items */
    float: left;
    width: 15em; /* width needed or else Opera goes nuts */
    }

    #nav li ul { /* second-level lists */
    position: absolute;
    background: #B4AD91;
    width: 15em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    font-family: "Segoe UI Light", "MS Sans Serif";
    }

    #content {
    clear: left;
    color: Black;
    }

    </style>

    <script type="text/javascript"><!--//--><![CDATA[//><!--

    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    //--><!]]></script>


    </head>

    <body>

    <div align="center"><img src="Titleimage.jpg" alt="" width="1400" height="86" />
    </div>

    <ul id="nav">

    <li><a href="#"><img src="Paintings.jpg"></a>
    <ul>
    <li><a href="MainView01.html" target="MainView">Painting 1</a></li>
    <li><a href="#">Painting 2</a></li>
    <li><a href="#">Painting 3</a></li>
    <li><a href="#">Painting 4</a></li>

    </ul>
    </li>

    <li><a href="#"><img src="Sculptures.jpg"></a>
    <ul>
    <li><a href="#">Sculpture 1</a></li>
    <li><a href="#">Sculpture 2</a></li>
    <li><a href="#">Sculpture 3</a></li>
    <li><a href="#">Sculpture 4</a></li>
    <li><a href="#">Sculpture 5</a></li>

    </ul>
    </li>

    <li><a href="#"><img src="Installations.jpg"></a>
    <ul>
    <li><a href="#">Installation 1</a></li>
    <li><a href="#">Installation 2</a></li>
    <li><a href="#">Installation 3</a></li>

    </ul>
    </li>

    <li><a href="#"><img src="Drawings.jpg"></a>
    <ul>
    <li><a href="#">Drawing 1</a></li>
    <li><a href="#">Drawing 2</a></li>
    <li><a href="#">Drawing 3</a></li>
    <li><a href="#">Drawing 4</a></li>

    </ul>
    </li>
    </ul>






    </body>

    </html>
    And the lastest link: https://dl.dropbox.com/u/46946106/ArtGalleryWebsite/Websiteframeset.html
    Last edited by HTML; 04-06-2013 at 07:09 AM.

  5. #5
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: Help with mouseover drop down menus

    You cannot overlap a frame to another frame.
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Help with mouseover drop down menus

    Hi there MacGyver1968,

    and a warm welcome to these forums.

    It's been 10 years since I coded a website
    I guessed that, as using "framesets" for page layout is twentieth century methodology
    and should really be avoided like the plague.

    Check out the attachment to see a more modern approach to your problems.
    Attached Files Attached Files