Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts

    insert css photo gallery code into my divs

    Hello Friends, thank you in advance for your help. I am a CSS novice.

    Basically, I have a layout with a standard <wrapper> blah

    I want to insert a gallery and found the one I wanted, along with the code at this link

    http://www.cssplay.co.uk/menu/lightbox.html

    however, when I copy the code..basically it overlays (ontop) of all my divs and my layout..as if it did not exist

    see photo:

    below is the code, I am assuming i have to transfer some of this code into my css files, as I already have one running...how would i do this, thanks for your help.

    Code:
    <style type="text/css">
    
    
    
    a {color:#000;}
    a:hover {text-decoration:none;}
    a:visited {color:#000;}
    
    /* slides styling */
    
    .photo {width:635px; text-align:left; position:relative; margin:0 auto;}
    
    .photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}
    
    .photo ul.topic li {display:block; width:125px; height:31px; float:left;}
    .photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
    
    .photo ul.topic li a ul, 
    .photo ul.topic li ul 
    {display:none;}
    
    .photo ul.topic li.active a
    {color:#000; background:#bbb;}
    
    .photo ul.topic li a:hover,
    .photo ul.topic li:hover a
    {color:#fff; background:#aaa;}
    
    .photo ul.topic li.active ul
    {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
    
    .photo ul.topic li a:hover ul, 
    .photo ul.topic li:hover ul
    {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
    
    .photo ul.topic li ul li
    {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
    
    .photo ul.topic li ul li a
    {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
    
    .photo ul.topic li ul li a img
    {display:block; width:100px; height:75px; border:5px solid #eee;}
    
    .photo ul.topic li a:hover ul li a:hover, 
    .photo ul.topic li:hover ul li a:hover 
    {white-space:normal; position:relative;}
    
    .photo ul.topic li a:hover ul li a:hover img, 
    .photo ul.topic li:hover ul li a:hover img 
    {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
    </style>
    
    
    </head>
    
    <body>
    
    <div class="photo">
    <ul class="topic">
    	<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    
    	<li class="active"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
    			<li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a class="set" href="#Flowers">Flowers<!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower2"><img src="lbox/flower2.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower3"><img src="lbox/flower3.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower4"><img src="lbox/flower4.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower5"><img src="lbox/flower5.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower6"><img src="lbox/flower6.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower7"><img src="lbox/flower7.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower8"><img src="lbox/flower8.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower9"><img src="lbox/flower9.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower10"><img src="lbox/flower10.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower11"><img src="lbox/flower11.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower12"><img src="lbox/flower12.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower13"><img src="lbox/flower13.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower14"><img src="lbox/flower14.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower15"><img src="lbox/flower15.jpg" alt="" title="" /></a></li>
    			<li><a href="#flower16"><img src="lbox/flower16.jpg" alt="" title="" /></a></li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    
    	</li>
    	<li><a class="set" href="#Trees">Trees<!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree2.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree3.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree4.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree5.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree6.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree7.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree8.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree9.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree10.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree11.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree12.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree13.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree14.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree15.jpg" alt="" title="" /></a></li>
    			<li><a href="#tree1"><img src="lbox/tree16.jpg" alt="" title="" /></a></li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    
    		<ul>
    			<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li>
    			<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li>
    		</ul>
    
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    </ul>
    <br class="clear" />
    </div>

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Not sure exactly what you're asking. The code you posted is the exact code from the zip file that you downloaded (minus part of the head tag). His zip file works perfectly, so what is it you need to know?

    The style tag's contents can be transferred to your CSS sheet, and everything else is contained within a single div that you'd paste into your page.

    On a side note, I would hope that the fact you posted his code MINUS the copyright comment isn't suggesting that you're not going to honor it.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Fisher, I am going to honor his code, I just pasted here for simplicity.

    I copyed the css part to the my css sytles sheet

    and copied the html part in the body of html file

    however i still ger the same problem, the code overlays as seen in the picture

    do u want me to display all my code??

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Are you saying you want the background to show through and only the images displayed?
    Perhaps just a slight problem with your html:

    Here's the code added into a wrapper for example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Stu Nicholls | CSSplay | Cross Browser Multi Page Photograph Gallery</title>
    <meta name="Author" content="Stu Nicholls" />
    <style type="text/css">
    html, body {
    	height: 100%;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #container {
    	width: 800px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -40px;
    	background: #CC6;
    	border-left:1px solid;
    	border-right:1px solid;
    }
    #header {
    	background:#C3C;
    	width:800px;
    	height:150px;
    	color:#000;
    	text-align:center;
    }
    #nav {
    	width:800px;
    	height:25px;
    	text-align:center;
    }
    #nav ul, #nav li {
    	display:inline;
    	list-style-type:none;
    }
    #nav a {
    	font-family:Verdana, sans-serif;
    	font-weight:bold;
    	font-size:11px;
    	background:#790000;
    	color:#fff;
    	float:left;
    	width:160px;
    	height:25px;
    	line-height:25px;
    	text-decoration:none;
    }
    #nav a:hover {
    	background: #C10000;
    	color:#FF3;
    }
    /* slides styling */
    
    .photo {
    	width:635px;
    	text-align:left;
    	margin:0 auto;
    }
    .photo ul.topic {
    	padding:0;
    	margin:0;
    	list-style:none;
    	width:635px;
    	height:auto;
    	position:relative;
    	z-index:10;
    }
    .photo ul.topic li {
    	display:block;
    	width:125px;
    	height:31px;
    	float:left;
    }
    .photo ul.topic li a.set {
    	display:block;
    	font-size:11px;
    	width:124px;
    	height:30px;
    	text-align:center;
    	line-height:30px;
    	color:#000;
    	text-decoration:none;
    	border:1px solid #fff;
    	border-width:1px 1px 0 0;
    	background:#ccc;
    	font-family:verdana, arial, sans-serif;
    }
    .photo ul.topic li a ul, .photo ul.topic li ul {
    	display:none;
    }
    .photo ul.topic li.active a {
    	color:#000;
    	background:#bbb;
    }
    .photo ul.topic li a:hover, .photo ul.topic li:hover a {
    	color:#fff;
    	background:#aaa;
    }
    .photo ul.topic li.active ul {
    	display:block;
    	position:absolute;
    	left:0;
    	top:31px;
    	list-style:none;
    	padding:0;
    	margin:0;
    	height:375px;
    	background:#ddd;
    	width:464px;
    	padding:40px 60px;
    	border:20px solid #bbb;
    	z-index:1;
    }
    .photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {
    	display:block;
    	position:absolute;
    	left:0;
    	top:31px;
    	list-style:none;
    	padding:0;
    	margin:0;
    	height:375px;
    	background:#ddd;
    	width:464px;
    	padding:40px 60px;
    	border:20px solid #aaa;
    	z-index:100;
    }
    .photo ul.topic li ul li {
    	display:inline;
    	width:112px;
    	height:87px;
    	float:left;
    	border:1px solid #fff;
    	margin:1px;
    }
    .photo ul.topic li ul li a {
    	display:block;
    	width:110px;
    	height:85px;
    	cursor:default;
    	float:left;
    	text-decoration:none;
    	background:#444;
    	border:1px solid #888;
    }
    .photo ul.topic li ul li a img {
    	display:block;
    	width:100px;
    	height:75px;
    	border:5px solid #eee;
    }
    .photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {
    	white-space:normal;
    	position:relative;
    }
    .photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {
    	position:absolute;
    	left:-50px;
    	top:-32px;
    	width:200px;
    	height:150px;
    	border-color:#fff;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="header">
        <h1>My Heading</h1>
      </div>
      <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html">Home</a></li>
      </ul>
      <div class="photo">
        <ul class="topic">
          <li><a class="set" href="#Portraits">Portraits
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li class="active"><a class="set" href="#Landscapes">Landscapes
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
              <li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a class="set" href="#Flowers">Flowers
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a></li>
              <li><a href="#flower2"><img src="lbox/flower2.jpg" alt="" title="" /></a></li>
              <li><a href="#flower3"><img src="lbox/flower3.jpg" alt="" title="" /></a></li>
              <li><a href="#flower4"><img src="lbox/flower4.jpg" alt="" title="" /></a></li>
              <li><a href="#flower5"><img src="lbox/flower5.jpg" alt="" title="" /></a></li>
              <li><a href="#flower6"><img src="lbox/flower6.jpg" alt="" title="" /></a></li>
              <li><a href="#flower7"><img src="lbox/flower7.jpg" alt="" title="" /></a></li>
              <li><a href="#flower8"><img src="lbox/flower8.jpg" alt="" title="" /></a></li>
              <li><a href="#flower9"><img src="lbox/flower9.jpg" alt="" title="" /></a></li>
              <li><a href="#flower10"><img src="lbox/flower10.jpg" alt="" title="" /></a></li>
              <li><a href="#flower11"><img src="lbox/flower11.jpg" alt="" title="" /></a></li>
              <li><a href="#flower12"><img src="lbox/flower12.jpg" alt="" title="" /></a></li>
              <li><a href="#flower13"><img src="lbox/flower13.jpg" alt="" title="" /></a></li>
              <li><a href="#flower14"><img src="lbox/flower14.jpg" alt="" title="" /></a></li>
              <li><a href="#flower15"><img src="lbox/flower15.jpg" alt="" title="" /></a></li>
              <li><a href="#flower16"><img src="lbox/flower16.jpg" alt="" title="" /></a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a class="set" href="#Trees">Trees
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree2.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree3.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree4.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree5.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree6.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree7.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree8.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree9.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree10.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree11.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree12.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree13.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree14.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree15.jpg" alt="" title="" /></a></li>
              <li><a href="#tree1"><img src="lbox/tree16.jpg" alt="" title="" /></a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
          <li><a class="set" href="#Birds">Birds
            <!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
              <li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
              <li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
              <li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
              <li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li>
              <li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li>
              <li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li>
              <li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li>
              <li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li>
              <li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li>
              <li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li>
              <li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li>
              <li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li>
              <li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li>
              <li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li>
              <li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
          </li>
        </ul>
        <br class="clear" />
      </div>
    </div>
    </body>
    </html>
    Edit: I included a header and a nav bar, so this should be enough to fix it.
    Last edited by Fisher; 06-17-2009 at 05:12 AM.


  •  

    Posting Permissions

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