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
and then the CSS stylesheet:
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.
Here's what I have
Code:
<title>adamlane imaging</title>
<LINK REL="SHORTCUT ICON"
HREF="ali.ico">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="hasFlash" xmlns="http://www.w3.org/1999/xhtml"><head>
<script type="text/javascript" language="JavaScript" src="js/mootools.js"></script>
<script type="text/javascript" language="JavaScript" src="js/imageMenu.js"></script>
<link href="css/master.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>
<div id="container">
<span class="banner"><span>adamlane imaging</span></span>
<div id="menu-border">
<div id="kwick">
<ul class="kwicks">
<li style="width: 132px;" class="kwick opt1" onclick="go('#');"><span>music</span></li>
<li style="width: 132px;" class="kwick opt2" onclick="go('#');"><span>landscapes</span></li>
<li style="width: 132px;" class="kwick opt3" onclick="go('#');"><span>misc</span></li>
<li style="width: 132px;" class="kwick opt4" onclick="go('#');"><span>weddings</span></li>
<li style="width: 132px;" class="kwick opt5" onclick="go('#');"><span>children</span></li>
<li style="width: 132px;" class="kwick opt6" onclick="go('#');"><span>fashion</span></li>
</ul>
</div>
</div>
<div id="footer">
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/us/" class="left">creative commons</a>
<a href="mailto:dusty.lane@adamlaneimaging.com" class="right">dusty.lane@adamlaneimaging.com</a>
<BR>
<a href="mailto:chris.adam@adamlaneimaging.com" class="right">chris.adam@adamlaneimaging.com</a>
<BR>
<BR>
<BR>
<font size="+2">UNDER CONSTRUCTION</font>
©2009 adamlane imaging LLC. All rights reserved.
</div>
</div>
<script type="text/javascript" language="JavaScript" src="js/url.js"></script>
<script type="text/javascript" language="JavaScript" src="js/imageMenu-fx.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10818239-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Code:
body,td,th {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
background-image: url();
background-repeat: no-repeat;
background-color: #000000;
text-align:center;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#container {
position: relative;
/*z-index: 1000;*/
width: 800px;
/*border-right: 1px solid #1c1c1c;*/
background: #000;
margin: auto;
text-align: left;
}
.left {
float: left;
}
.right {
float: right;
}
#menu-border{
padding-bottom: 5px;
padding-top: 5px;
border-color:#FFFFFF;
border-width: 1px;
border-bottom: solid;
border-top: solid;
}
span.banner {
display:block;
width:800px;
height:40px;
margin-top: 25px;
background-image:url(../images/adamlane.jpg);
background-repeat:no-repeat;
}
span.banner span {display:none;}
#footer {
width: 800px;
padding: 10px 0px;
text-align: right;
}
/*big menu*/
#kwick {
text-align:left;
}
#kwick .kwicks {
display: block;
height: 200px;
margin: 0;
padding: 0;
}
#kwick li {
float: left;
padding: 0;
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 59px;
padding: 0;
background: #fff;
border-right: 1px solid #fff;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
background: #fff url(../images/music.jpg) ;
}
#kwick .opt2 {
background: #fff url(../images/landscapes.jpg) ;
}
#kwick .opt3 {
background: #fff url(../images/misc.jpg) ;
}
#kwick .opt4 {
background: #fff url(../images/weddings.jpg) ;
}
#kwick .opt5 {
background: #fff url(../images/children.jpg) ;
}
#kwick .opt6 {
background: #fff url(../images/fashion.jpg) ;
}
Comment