Help - Search - Members - Calendar
Full Version: Problem With Layout For Gallery.
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
k.digennaro
So im trying to create an image gallery on my band page. Right now im having a couple problems. First off my CSS creates it so that on my home page there are several different boxes. Home Page. Now For my gallery I dont necesarily want it to be the same 6 box layout as the home page. I want to use lightbox to create image sets. Heres the layout i want.

Each box would be an image set. Now heres where my problem comes. Below is my html Ill refer to that. First off lightbox doesnt always work. And when it does work it gives me a text link instead of a thumbnail. I think something is wrong with my code but im not sure what. hopefully you understand what im trying to say. if not please ask for me to specify.
Thanks,
Kevin



CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.nascentdescent.zxq.net/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="http://www.nascentdescent.zxq.net/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.nascentdescent.zxq.net/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="http://www.nascentdescent.zxq.net/lightbox/css/lightbox.css" type="text/css" media="screen" />
    <title>Nascent Descent Band</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="wrapper">
      <div id="inner">
          <div id="header">
              <h1><img src="images/logo.gif" width="450" height="61" alt="Online Movie Store" /></h1>
              <div id="nav">
                  <a href="http://www.nascentdescent.zxq.net">Home</a> | <a href="contact.html">Contact Us</a> | <a href="legal.html">Legal</a>
              </div><!-- end nav -->
              <a href="aboutus.html"><img src="images/header_1.gif" width="744" height="145" alt="Nascent Descent" /></a>
              <a href="http://www.reverbnation.com/nascentdescent"><img src="images/header_2.gif" width="745" height="48" alt="" /></a>
          </div><!-- end header -->
          <dl id="browse">
              <dt>Nascent Descent</dt>
              <dd class="first"><a href="index.html">Home</a></dd>
              <dd><a href="discography.html">Discography</a></dd>
              <dd><a href="band.html">About The Band</a></dd>
              <dd><a href="street.html">The Street Team</a></dd>
              <dd><a href="gallery.html">Gallery</a></dd>
              <dd><a href="store.html">ND Merchendise</a></dd>
              <dd><a href="http://www.reverbnation.com/nascentdescent">ND &amp; Reverb Nation</a></dd>
              <dd><a href="facebook.html">ND on Facebook</a></dd>
              <dd><a href="myspace.html">ND on Myspace</a></dd>
              <dd><a href="http://www.Ursession.com/nascentdescent">ND on Ursession</a></dd>
              <dd><a href="http://www.reverbnation.com/nascentdescent"></a></dd>
              <dd><a href="http://www.reverbnation.com/nascentdescent"></a></dd>
              <dd class="last"><a href="http://www.reverbnation.com/nascentdescent"></a></dd>
              
              <dt>Search ND</dt>
              <dd class="searchform">
                <form action="?" method="get">
                    <div><select name="cat">
                        <option value="-" selected="selected">Select One</option>
                        <option value="-">Home</option>
                        <option value="-">Discography</option>
                    </select></div>
                    <div><input name="q" type="text" value="Search" class="text" /></div>
                    <div class="softright"><input type="image" src="images/btn_search.gif" /></div>
                </form>
              </dd>
          </dl>
          
          <div id="body">
              <div class="inner">
                  
                  <div class="leftbox">
                      <h3>About The Band</h3>
                      <img src="bandphotos/Untitled-1.jpg" rel="lightbox[Band Practice]">image #1</>
                      <a href="bandphotos/Untitled-2.jpg" rel="lightbox[Band Practice]">image #2</a>
                      <a href="bandphotos/Untitled-3.jpg" rel="lightbox[Band Practice]">image #3</a>
                      <a href="bandphotos/Untitled-4.jpg" rel="lightbox[Band Practice]">image #4</a>
                      <a href="bandphotos/Untitled-5.jpg" rel="lightbox[Band Practice]">image #5</a>
                      <a href="bandphotos/Untitled-6.jpg" rel="lightbox[Band Practice cont.]">image #6</a>
                      <a href="bandphotos/Untitled-7.jpg" rel="lightbox[Band Practice cont.]">image #7</a>
                      <a href="bandphotos/Untitled-8.jpg" rel="lightbox[Band Practice cont.]">image #8</a>
                      <a href="bandphotos/Untitled-9.jpg" rel="lightbox[Band Practice cont.]">image #9</a>
                      <a href="bandphotos/Untitled-10.jpg" rel="lightbox[Band Practice cont.]">image #10</a>
                      <a href="bandphotos/Untitled-11.jpg" rel="lightbox[Band Practice cont...]">image #11</a>
                      <a href="bandphotos/Untitled-12.jpg" rel="lightbox[Band Practice cont...]">image #12</a>
                      <a href="bandphotos/Untitled-13.jpg" rel="lightbox[Band Practice cont...]">image #13</a>
                      <a href="bandphotos/Untitled-14.jpg" rel="lightbox[Band Practice cont...]">image #14</a>
                      <a href="bandphotos/Untitled-15.jpg" rel="lightbox[Band Practice cont...]">image #15</a>
                      <p><b>Hey</b> <b>this is Grant</b> from the band Nascent Descent. I started writing songs and playing guitar around April 2007.</p>
                      Once I had some good material, I asked my friend Andrew, who had been playing drums for a while already, if he wanted to start a band
                      with me. A year and a singer/bass player later* I used some money I had saved up to put a small recording studio in my basement and
                      named it Shower Stall Studios (most of the equipment is in an old bathroom, one vocal booth is in a now carpeted shower stall. A
                      little while later I got my long time friend Kevin to start playing guitar again and be in the band........
                      </p>
                      <p class="readmore"><a href="band.html">Read <b>More</b></a></p>
                      <div class="clear"></div>
                  </div><!-- end .leftbox -->
                  <div class="rightbox">
                      <h3>Discography</h3>
                      <img src="images/photo_4.jpg" width="107" height="91" alt="photo 4" class="left" />
                      <p><b>Album:</b> <b>Standing Tall</b> Soon to come the release of our first album, "Standing Tall". Most of the songs on this album are about life and how it's always dragging people down with it. We've all had these experiences and all you can do is fight through them. I've always fought through them with my music and my sports. This album features about 11 tracks including: Scars, Paranoide, Sunny Days, and Rescheduled. All these songs speak strongly towards life and the goods and the bads of it. Just remember, Stay strong, Stand Tall.
                      </p>
                      <p class="readmore"><a href="index.html">Read <b>More</b></a></p>
                      <div class="clear"></div>
                  </div><!-- end .rightbox -->
                  
                  <div class="clear br"></div>

                  <div class="leftbox">
                      <h3>The Street Team  </h3>
                      <img src="images/photo_2.jpg" width="93" height="101" alt="photo 2" class="left" />
                      <a href="images/photo_2.jpg" width="93" height="101" rel="lightbox" title="Fan for Life!!">image #1</a>
                      <p><b>Join Today!</b> <b>About the team:</b> our street team is a very dedicated group of fans. Fans that have supported us and continue to support us. Street team members provide things such as photos or videos of concerts or practices, pass out flyers or advertise for shows. As a street team member you don't have to do anything unless you want to, but if you help us out you may get special seats at concerts, or free merchandise. To join the street team email us at nascentdescentband@gmail.com. Tell us why you want to join the team.
                      </p>
                      <p class="readmore"><a href="index.html">Read <b>more</b></a></p>
                      <div class="clear"></div>
                  </div><!-- end .leftbox -->
                  <div class="rightbox">
                      <h3>Custom Nascent Descent Merchendise</h3>
                      <img src="images/photo_5.jpg" width="90" height="103" alt="photo 5" class="left" />
                      <p><b>Price:</b> <b>$1</b> Custom Guitar Picks for sale, used by the Nascent Descent Band. <b>Currently out of stock, shipment coming in 3 weeks. (Early June)</b></p>
                      </p>
                      <p class="readmore"><a href="buy.html">BUY <b>NOW</b></a></p>
                      <div class="clear"></div>
                  </div><!-- end .rightbox -->

                  <div class="clear br"></div>

                  <div class="leftbox">
                      <h3>Fan of the Month</h3>
                      <a href="images/photo_3.jpg" width="106" height="100" alt="photo 3" class="left" rel="lightbox" title="Test">image #1</a>
                      <p><b>DAWN DAWN!!!!</b> <b>WE LOVE YOU!!!</b> Thanks for all the support babe, we all really are thankful for it. You are just as much a part of this band as any one else.</p>
                      </p>
                      <p class="readmore"><a href="index.html">Read <b>More</b></a></p>
                      <div class="clear"></div>
                  </div><!-- end .leftbox -->
                  <div class="rightbox">
                      <h3></h3>
                      <img src="images/photo_6.jpg" width="91" height="99" alt="photo 6" class="left" />
                      <p><b></b> <b></b>
                      </p>
                      <p class="readmore"><a href="index.html">Read <b>More</b></a></p>
                      <div class="clear"></div>
                  </div><!-- end .rightbox -->

                  <div class="clear"></div>
                  
              </div><!-- end .inner -->
          </div><!-- end body -->
          
          <div class="clear"></div>
          <div id="footer">
              Copy right of <a href="index.html">DiGennaroDesigns</a> all rights reserved.
              
              &nbsp;
              <div id="footnav">
                  <a href="legal.html">Legal</a> | <a href="index.html">Home</a>
              </div><!-- end footnav -->
              
          </div><!-- end footer -->
      </div><!-- end inner -->
  </div><!-- end wrapper -->
</body>
</html>
Valency
Does anything actually work for you? biggrin.gif
k.digennaro
QUOTE(Valency @ May 19 2008, 04:05 PM) *
Does anything actually work for you? biggrin.gif

lol if it did i wouldnt be here so often tongue.gif

although props for me for getting this webpage and the forum going tongue.gif laugh.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.