473,324 Members | 2,541 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

CSS help with gallery

I know very little about HTML and CSS but I've been able to decipher most of what I've needed to know based on trial and error. I had a friend coding me a website long ago and he abandoned the project but gave me what he had finished. I modified it to fit my needs, but now I'm at a stop. I have these sliding gallery tabs that I need to be able to click and they will open the galleries below them. I know I need to add in some sort of CSS container or something that changes based on which one is clicked. I have googled and read and tried things for over a month now and I just cant figure it out. I can find all sorts of things on making CSS galleries and what not but I'm a photographer and have multiple galleries. I just need it to be able to change.

Here's what I have

Expand|Select|Wrap|Line Numbers
  1. <title>adamlane imaging</title>
  2. <LINK REL="SHORTCUT ICON"
  3.        HREF="ali.ico">
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html class="hasFlash" xmlns="http://www.w3.org/1999/xhtml"><head>
  6.  
  7.  
  8. <script type="text/javascript" language="JavaScript" src="js/mootools.js"></script>
  9. <script type="text/javascript" language="JavaScript" src="js/imageMenu.js"></script>
  10.  
  11. <link href="css/master.css" rel="stylesheet" type="text/css">
  12.  
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14. <body>
  15.  
  16.  
  17.  
  18. <div id="container">
  19.     <span class="banner"><span>adamlane imaging</span></span>
  20.  
  21.     <div id="menu-border">
  22.         <div id="kwick">
  23.             <ul class="kwicks">
  24.                 <li style="width: 132px;" class="kwick opt1" onclick="go('#');"><span>music</span></li>
  25.                 <li style="width: 132px;" class="kwick opt2" onclick="go('#');"><span>landscapes</span></li>
  26.                 <li style="width: 132px;" class="kwick opt3" onclick="go('#');"><span>misc</span></li>
  27.                 <li style="width: 132px;" class="kwick opt4" onclick="go('#');"><span>weddings</span></li>
  28.                 <li style="width: 132px;" class="kwick opt5" onclick="go('#');"><span>children</span></li>
  29.                 <li style="width: 132px;" class="kwick opt6" onclick="go('#');"><span>fashion</span></li>
  30.             </ul>
  31.         </div>
  32.     </div>
  33.  
  34.     <div id="footer">
  35.         <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/us/" class="left">creative commons</a>
  36.         <a href="mailto:dusty.lane@adamlaneimaging.com" class="right">dusty.lane@adamlaneimaging.com</a>    
  37. <BR>
  38.         <a href="mailto:chris.adam@adamlaneimaging.com" class="right">chris.adam@adamlaneimaging.com</a>    
  39. <BR>
  40. <BR>
  41. <BR>
  42. <font size="+2">UNDER CONSTRUCTION</font>
  43. ©2009 adamlane imaging LLC. All rights reserved.    
  44.  
  45. </div>
  46. </div>
  47. <script type="text/javascript" language="JavaScript" src="js/url.js"></script>
  48. <script type="text/javascript" language="JavaScript" src="js/imageMenu-fx.js"></script>
  49.  
  50. <script type="text/javascript">
  51. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  52. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  53. </script>
  54. <script type="text/javascript">
  55. try {
  56. var pageTracker = _gat._getTracker("UA-10818239-1");
  57. pageTracker._trackPageview();
  58. } catch(err) {}</script>
  59.  
  60. </body>
  61. </html>
and then the CSS stylesheet:
Expand|Select|Wrap|Line Numbers
  1. body,td,th {
  2.     color: #FFFFFF;
  3.     font-family: Verdana, Arial, Helvetica, sans-serif;
  4.     font-size: 10px;
  5. }
  6. body {
  7.     background-image: url();
  8.     background-repeat: no-repeat;
  9.     background-color: #000000;
  10.     text-align:center;
  11. }
  12. a:link {
  13.     color: #FFFFFF;
  14.     text-decoration: none;
  15. }
  16. a:visited {
  17.     text-decoration: none;
  18.     color: #FFFFFF;
  19. }
  20. a:hover {
  21.     text-decoration: none;
  22.     color: #FFFFFF;
  23. }
  24. a:active {
  25.     text-decoration: none;
  26.     color: #FFFFFF;
  27. }
  28. #container {
  29.     position: relative;
  30.     /*z-index: 1000;*/
  31.     width: 800px;
  32.     /*border-right: 1px solid #1c1c1c;*/
  33.     background: #000;
  34.     margin: auto;
  35.     text-align: left;
  36. }
  37.  
  38. .left {
  39.     float: left;
  40. }
  41.  
  42. .right {
  43.     float: right;
  44. }
  45.  
  46. #menu-border{
  47.     padding-bottom: 5px;
  48.     padding-top: 5px;
  49.     border-color:#FFFFFF;
  50.     border-width: 1px;
  51.     border-bottom: solid;
  52.     border-top: solid;
  53. }
  54.  
  55. span.banner {
  56.   display:block;
  57.   width:800px;
  58.   height:40px;
  59.   margin-top: 25px;
  60.   background-image:url(../images/adamlane.jpg);
  61.   background-repeat:no-repeat;
  62.   }
  63. span.banner span {display:none;}
  64.  
  65. #footer {
  66.     width: 800px;
  67.     padding: 10px 0px;
  68.     text-align: right;
  69. }
  70.  
  71. /*big menu*/
  72.  
  73. #kwick {
  74. text-align:left;
  75. }
  76.  
  77. #kwick .kwicks {
  78.     display: block;
  79.     height: 200px;
  80.     margin: 0;
  81.     padding: 0;
  82. }
  83.  
  84. #kwick li {
  85.     float: left;
  86.     padding: 0;
  87. }
  88.  
  89. #kwick .kwick {
  90.     display: block;
  91.     cursor: pointer;
  92.     overflow: hidden;
  93.     height: 200px;
  94.     width: 59px;
  95.     padding: 0;
  96.     background: #fff;
  97.     border-right: 1px solid #fff;
  98. }
  99.  
  100. #kwick .kwick span {
  101.     display: none;
  102. }
  103.  
  104. #kwick .opt1 {
  105.     background: #fff url(../images/music.jpg) ;
  106. }
  107.  
  108. #kwick .opt2 {
  109.     background: #fff url(../images/landscapes.jpg) ;
  110. }
  111.  
  112. #kwick .opt3 {
  113.     background: #fff url(../images/misc.jpg) ;
  114. }
  115.  
  116. #kwick .opt4 {
  117.     background: #fff url(../images/weddings.jpg) ;
  118. }
  119.  
  120. #kwick .opt5 {
  121.     background: #fff url(../images/children.jpg) ;
  122. }
  123.  
  124. #kwick .opt6 {
  125.     background: #fff url(../images/fashion.jpg) ;
  126. }
  127.  
I'm not even certain if this is the right place for this question, but I've been searching for help for so long and am tired of the frustration of printing 100s of pages of code out and sitting with a highlighter, attempting to figure out what I need. If anyone can help me or point me in a direction it would be ever so appreciated.
Nov 11 '09 #1
1 2466
TheServant
1,168 Expert 1GB
CSS cannot deal with a click event. How you can get that effect is onClick. You can set up a html parameter called onClick which will run a javascript script if the user clicks on that. You then need to write a th javascript to change the class of the target so that it can be fully CSS controlled. Have a look at this tutorial which si a simple example of how it works.
Nov 11 '09 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Nick Rees | last post by:
Hi, I've got a strange query that I can't figure out. I've got a new installation of Apache 1.3.28 and PHP 4.3.3 on my laptop, but it doesn't appear to be processing URLs correctly. I've tried...
6
by: nick | last post by:
After spending many hours trying to find a simple looking, fast,dynamic php photo-gallery for my digital pictures, I decided to code a my own. Once installed, all you have to do is drop a new...
10
by: Captain Ranger McCoy | last post by:
Hello! Suppose I have ten servers at ten ips: x.x.x.1 x.x.x.2 x.x.x.3 x.x.x.4 and so on Each server hosts 100+ photo galleries, all under a single domain name,
1
by: Chris Shipley | last post by:
I am trying to present a list of links on a page (Form) where each link opens a different picture gallery. I have the Form page which contains the links, a Gallery page, and several include files....
7
by: Eric Lindsay | last post by:
I would like to do a photo gallery with a liquid layout. I wanted to center a caption below each photo (or above each photo). I can do that easily with tables, but then I don't have a liquid...
4
by: RE Kochanski | last post by:
I have attempted to use the CSS techniques from two or three sites to create a CSS only image gallery. I am muddling the affair by placing the thumbnails in one float, the page text in another...
1
by: gescom | last post by:
My goal is to create essentially two galleries on a single page, in which the first gallery determines what the second gallery displays. For instance, the first gallery refers to the contents of the...
5
by: dabhand | last post by:
Hi This page http://www.dabhand.co.nz/ayupdev/gallery-riders.html works great in IE but not in Firefox... any help would be appreciated. It refers to an external javascript file which I have...
9
by: boycey | last post by:
Hi I have tried to embed a simpleviewer gallery (which works fine as a standalone web page) into a table on an existing web page inorder to show it as a gallery window. The gallery loads but there...
2
anfetienne
by: anfetienne | last post by:
hi, i've got a flash gallery which i've paid for. Im using swf object to import vars to the gallery....the var being imported is a html address to specify the location of files and folders. The...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.