rev_ollie
10 Feb 2011, 02:26 PM
Hey,
I could do with a hand on a site I'm throwing together if someone can help me out.
Basically for once IE is the only browser behaving.
My hyperlinks and mouse overs don't seem to be working in Firefox or Chrome. Is there a control I've used thats not supported?
Also I have a gallery in the middle of the page. Its mean't to transition automatically between different images but up to now its randomly going through them badly.
Its not working locally - I also uploaded the files but didn't work then either.
Here is the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Innovate Photography - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" />
</div>
<div id="nav">
<ul id="nav_bar">
<li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="gallery.html">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="slideshow">
<img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" />
<img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/>
<img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/>
<img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/>
</div>
<!--Java image gallery - Index Page -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p>
<p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p>
<p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p>
</div>
</div>
</body>
</html>
CSS
/* Index Markup */
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #ffffff;
margin:0;
padding:0;
border:0;
min-width:700px;
font-size:100%;
}
#wrap {
width:750px;
margin:0 auto;
padding-top: 20px;
}
#header {width: 200px; padding-left: 0px;}
#nav {
margin:0 auto;
font:Palatino;
}
#nav_bar {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #fff;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
font:Palatino;
padding-left: 110px;}
#nav_bar li {
float: left; }
#nav_bar li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #fff;
font:Palatino; }
#nav_bar li a:hover {
color: #1e54ef;
background-color: #fff; }
h2 {
font:Palatino;
font-size:15px;
text-decoration: none;
}
/*** Slideshow positioning **/
#slideshow {
position:relative;
width: 570px;
height: 400px;
padding-bottom: 10px;
}
#slideshow IMG {
position:absolute;
top:55px;
right: -40px;
z-index:10;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#content {
position: relative;
width: 670px;
padding-top: 20px;
font:Palatino;
font-size:12px;
color: #1e54ef;
padding-bottom: 20px;
padding-left: 30px;
}
#photo {
}
Its a very plain work in progress but hopefully I can iron out these problems. I've pretty much forgotten everything I used to know so sorry if its something obvious!
I appreciate the gallery problem shouldn't be in this forum section...
I could do with a hand on a site I'm throwing together if someone can help me out.
Basically for once IE is the only browser behaving.
My hyperlinks and mouse overs don't seem to be working in Firefox or Chrome. Is there a control I've used thats not supported?
Also I have a gallery in the middle of the page. Its mean't to transition automatically between different images but up to now its randomly going through them badly.
Its not working locally - I also uploaded the files but didn't work then either.
Here is the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Innovate Photography - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" />
</div>
<div id="nav">
<ul id="nav_bar">
<li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="gallery.html">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="slideshow">
<img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" />
<img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/>
<img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/>
<img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/>
</div>
<!--Java image gallery - Index Page -->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p>
<p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p>
<p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p>
</div>
</div>
</body>
</html>
CSS
/* Index Markup */
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #ffffff;
margin:0;
padding:0;
border:0;
min-width:700px;
font-size:100%;
}
#wrap {
width:750px;
margin:0 auto;
padding-top: 20px;
}
#header {width: 200px; padding-left: 0px;}
#nav {
margin:0 auto;
font:Palatino;
}
#nav_bar {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #fff;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
font:Palatino;
padding-left: 110px;}
#nav_bar li {
float: left; }
#nav_bar li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #fff;
font:Palatino; }
#nav_bar li a:hover {
color: #1e54ef;
background-color: #fff; }
h2 {
font:Palatino;
font-size:15px;
text-decoration: none;
}
/*** Slideshow positioning **/
#slideshow {
position:relative;
width: 570px;
height: 400px;
padding-bottom: 10px;
}
#slideshow IMG {
position:absolute;
top:55px;
right: -40px;
z-index:10;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#content {
position: relative;
width: 670px;
padding-top: 20px;
font:Palatino;
font-size:12px;
color: #1e54ef;
padding-bottom: 20px;
padding-left: 30px;
}
#photo {
}
Its a very plain work in progress but hopefully I can iron out these problems. I've pretty much forgotten everything I used to know so sorry if its something obvious!
I appreciate the gallery problem shouldn't be in this forum section...