cococomics
New Member
Okay where to start... First off I hope this is in the right spot.
I am trying to make a webpage with a centered body, logo above the drop down menu I've figured out, and then next to that a simple image gallery. I want to use this one:
http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails
But I'd also like to position the thumbnails below the main image (that's not of HIGH importance)
My problem is that I can't get the gallery to implement correctly. I see no images whatsoever once I've put in all the code. So I guess there must be something going on with my previous code. If anyone cares to take a look and figure this mess out for me I would GREATLY appreciate it!!
-Be warned I am not very good at organizing code, so there are little reminders and spaces I left for one reason or another.
Thanks for any help!
I am trying to make a webpage with a centered body, logo above the drop down menu I've figured out, and then next to that a simple image gallery. I want to use this one:
http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails
But I'd also like to position the thumbnails below the main image (that's not of HIGH importance)
My problem is that I can't get the gallery to implement correctly. I see no images whatsoever once I've put in all the code. So I guess there must be something going on with my previous code. If anyone cares to take a look and figure this mess out for me I would GREATLY appreciate it!!
-Be warned I am not very good at organizing code, so there are little reminders and spaces I left for one reason or another.
Thanks for any help!
Code:
<html>
<head>
<style>
ul {
padding: 0px;
margin-left: 10%;
margin-right: auto;
list-style: none;
background-color: #ffffff;
width: 225px;
}
li ul {
display: none;
background-color: #ffffff;
}
li.active ul {
display: block;
}
body {font-family: Verdana, Arial, Helvetica, sans-
serif; }
a:focus {
outline: none;
}
</style>
<style type="text/css">
A:link {text-decoration: none; color: #000000;}
A:visited {text-decoration: none; color: #000000;}
A:active {text-decoration: none; color: #000000;}
A:hover {text-decoration: none; color: #FF0000;}
</style>
<script language="JavaScript">
function hideAll() {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.className = node.className.replace(new
RegExp("\s?active", "i"), "");
}
}
}
window.onload = function () {
var navList = document.getElementById("nav");
for (var i=0; i<navList.childNodes.length; i++) {
var node = navList.childNodes[i];
if (node.tagName == "LI") {
node.onclick = function() {
hideAll();
this.className += " active";
}
}
}
}
var links = document.getElementById
('nav').getElementsByTagName('a');
for ( var i = 0; i < links.length; i++ ) {
links[i].onmousedown = function () {
this.blur();
return false;
}
links[i].onclick = function() {
this.blur();
}
if ( /msie/i.test(navigator.userAgent) &&
!/opera/i.test(navigator.userAgent) ) {
links[i].onfocus = function() {
this.blur();
}
}
}
</script>
</head>
<!-- BEGIN BODY --!>
<body>
<br><br>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="logo.jpg"></td></tr><tr>
<td valign="top" width="150">
<!-- MENU --!>
<br>
<ul id="nav">
<li><a href="#">+ FASHION</a>
<ul>
<li><img src="rice.jpg"><a href="">book
one</a></li>
<li><img src="rice.jpg"><a href="">book
two</a></li>
</ul>
</li>
<br>
<li><a href="#">+ RUNWAY</a>
<ul>
<li><img src="rice.jpg"><a href="">future of
fashion '10</a></li>
<li><img src="rice.jpg"><a href="">nexington
'10</a></li>
</ul>
</li>
<br>
<li><a href="#">+ TRAVEL</a>
<ul>
<li><img src="rice.jpg"><a
href="">china</a></li>
</ul>
</li>
<br>
<li><a href="">+ BIO</a>
</li><br>
<li><a href="">+ CONTACT</a>
</li><br>
<li><a href="">+ PRICING</a>
</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<!-- HERE IS WHERE I WANT THE GALLERY --!>
</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>