0 Replies Latest reply on Jun 1, 2010 7:42 AM by Alondra Espinal

    Light boxes in Dreamweaver using CSS and the Spry menu

    Alondra Espinal

      I wonder if anyone knows how to do this and I really would love to figure this out on my own but I can't. I want to use a light box to display another page without the user ever having to leave the homepage. I want to do it in css because it's the more efficient way to do it, but I really don't know how to link it to my Spry menu. Can anyone help me? Here is my code:

       

      <div class="container">

          <div class="sidebar1">

            <p> <img src="../OMHU_LOGO_smaller.gif" width="300" height="160" /></p>

            <!-- end .sidebar1 --></div>

          <div class="content">

            <h1></h1>

            <p>

            </p>

            <ul id="MenuBar1" class="MenuBarHorizontal">

              <li><a href="shop.html"><img src="../shop_button.jpg" width="259" height="154" longdesc="../shop_button.jpg" /></a></li>

              <li><a href="about.html"><img src="../about_button.jpg" width="258" height="154" longdesc="../about_button.jpg" /></a></li>

              <li><a href="http://www.omhublog.blogspot.com/"><img src="../blog_button.jpg" width="259" height="154" longdesc="../blog_button.jpg" /></a></li>

              <li><a href="contact.html"><img src="../contact_button.jpg" width="260" height="154" longdesc="../contact_button.jpg" /></a></li>

            </ul>

            </div>

       

          <div> 

            <ul id="lightboxes">

            <li id="lightbox-about">

                <div class="box">

                    <h3>About</h3>

                    <p> Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.</p>

       

                    <p>Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. </p>

                    <a href="#" class="close" title="close window">x</a>

                </div>

            </li>

            <li id="lightbox-more">

                <div class="box">

                    <h3>Contact</h3>

                    <p> Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. </p>

                    <a href="#" class="close" title="close window">x</a>

                </div>

            </li>

        </ul>