473,672 Members | 2,725 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS help with gallery

1 New Member
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 2488
TheServant
1,168 Recognized Expert Top Contributor
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
1918
Problem with Apache 1.3.28/PHP 4.3.3 on XP
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 to do a direct copy of my config on my desktop (which is Apache 1.3.27 and PHP 4.3.1, I think), but I don't have access to it any more to check the config files. Apache works fine, I installed it first and tested it with several
PHP
6
5214
PHP Photo Gallery
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 folder of images on the server. Dynamic thumbnails, slideshow are built in.
PHP
10
2271
Apache/Gallery Question: Setting Up 10+ Servers With One Domain Name
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,
PHP
1
1790
Trouble retrieving value with request.form
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. Each include file displays a different gallery. Clicking on a link submits a value identifying the chosen gallery to the Gallery page. The Gallery page accepts the value from the Form page and uses it to call the appropriate include file. The...
ASP / Active Server Pages
7
3253
Photo Gallery with centered photos and text
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 layout. Besides, I wanted to try to do it with CSS. I can do centered captions with text-align. This works provided the element containing each photo is floated left. I have found several examples of how to do this. However I didn't want the...
HTML / CSS
4
1794
Image Gallery Link Problem with IE 6
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 float, then using absolute positioning (and z-index) to display the image over the second float. The CSS for the thumbnails is from "Web Accessibility At C-net.us" by K Chayka (http://accessat.c-net.us/test/gallery2.html). The CSS to display the...
HTML / CSS
1
2304
Hierarchical Image Gallery
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 main image folder. The second gallery would be a folder inside the main image folder. Depending on which image is displayed, the first gallery's image would trigger the second gallery's contents. I suppose this is sort of a hierarchal gallery...
Javascript
5
2112
Image gallery works great in IE but not Firefox
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 included the code to below: The file name is imgriders.js - as referred to in source of the html file above. if (document.images) { image1 = new Image; image2 = new Image; image3 = new Image;
Javascript
9
11112
Embedding swf and xml in HTML to create flash gallery
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 are no images? The working page is at http://www.widbrookgrange.co.uk/widbrookgallery/widgallery.html The non functioning page is at http://www.widbrookgrange.co.uk/galleryembed.htm All the simpleviwer files are in widbrookgallery folder...
HTML / CSS
2
2309
anfetienne
gallery glitch
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 problem is that the gallery detects the thumbnails and loads the 1st image but once i click on another image it wont load, i don't know why it it doing this and as it loads the thumbnails which are in the same location it shouldn't have a problem...
Flash / Actionscript
0
8504
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
General
0
8946
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
C / C++
0
8849
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
Online Marketing
0
8697
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
General
0
7477
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
Career Advice
1
6260
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
Microsoft Access / VBA
0
4243
Trying to create a lan-to-lan vpn between two differents networks
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
Networking - Hardware / Configuration
0
4441
Windows Forms - .Net 8.0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
Visual Basic .NET
2
2094
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us