gap at the top and move 3 small squares on top?! [Archive]

jarv

12-15-2010, 02:31 PM

hi,

on my site: http://www.jbiddulph.com/fab there is a gap at the top, I'm not sure why, something to do with the large image fade gallery, there is also 3 small squares to the top right, these are clickable but I can't seem to click on them?! I have put z-inex on them but can't get them on top of the #hd

here is my code

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>The Fabulous Experience Company</title>
<meta name="description" content="xxx" />
<meta name="keywords" content="xxx" />
<meta name="Content-Language" content="en-gb" />
<meta name="robots" content="FOLLOW,INDEX" />
<meta name="revisit-after" content="2 days" />
<meta name="distribution" content="Global" />
<meta name="resource-type" content="document" />
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/reset-style.css" />
<link rel="stylesheet" type="text/css" href="css/sitestyle.css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
</head>
<body>
<div id="slider">
<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="Giraffes" href="images/giraffes.jpg" title="Title #0">
<img src="images/square-blue.png" alt="Title #1" /> </a> </li>

<li>
<a class="thumb" name="Diver" href="images/diver.jpg" title="Title #1">
<img src="images/square-blue.png" alt="Title #1" /> </a> </li>

<li>
<a class="thumb" name="Egypy" href="images/egypt.jpg" title="Title #2">
<img src="images/square-blue.png" alt="Title #2" /> </a> </li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
<div id="doc">
<div id="hd">
<h1>The Fabulous Experience Company</h1>
<ul>
<li><a href="#" class="menuselected" title="HOME">HOME</a></li>
<li><a href="#" title="ABOUT US">ABOUT US</a></li>
<li><a href="#" title="HOLIDAY TYPE">HOLIDAY TYPE</a></li>
<li><a href="#" title="DESTINATIONS">DESTINATIONS</a></li>
<li><a href="#" title="TAILOR MADE">TAILOR MADE</a></li>
<li><a href="#" title="CONTACT US">CONTACT US</a></li>
</ul>
<span><a href="#" title="Travel Insurance">Travel Insurance</a> | <a href="#" title="Useful Links">Useful Links</a></span>
<h2>Not just a holiday...<br />
<strong>a fabulous experience.</strong></h2>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id="tabs" class="usual">
<ul>
<li><a class="selected" href="#tab1">MAP SEARCH</a></li>
<li><a href="#tab2">QUICK SEARCH</a></li>
</ul>
<div id="tab1">This is tab 1.</div>
<div id="tab2">More content in tab 2.</div>
</div>

<script type="text/javascript">
$("#tabs ul").idTabs();
</script>
</div>
</div>
<div class="yui-g">
<div class="topcontent"> hello my name is John</div>
<div id="leftcolumn" class="yui-u first">
<h2>Header 2</h2>
<p><a href="#" title="linky">Linky</a></p>
<p>Text</p>
</div>
<div class="yui-u" id="rightcol">
<h2>Right</h2>
<p>texty</p>
</div>
</div>
</div>
<div id="ft">
<p>All rights reserved © Copyright 2010 fab.com</p>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');

// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 6000,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '&lsaquo; Previous Photo',
nextLinkText: 'Next Photo &rsaquo;',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
</body>
</html>

CSS

html{
background-color:#000000;
}
p{
padding: 5px 0px 10px 0px;
line-height:20px;
}
body{
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;

}
a{
font-size: 12px;
color: #333333;
text-decoration: none;
}
a:hover {
}

h1 { background-image:url(../images/logo.png); width:246px; height:78px; overflow:hidden; text-indent:-600px; color:#FFFFFF; position:absolute; top:30px; left:28px; }

#slider{
position: relative;
top: 0;
left: 0;
z-index:1;
}
#doc{
width:960px;
color: #333;
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -475px;
z-index: 2;

}

/* HEADER */
#hd{ height:560px; position: relative; background-image:url(../images/header-bg.png); background-repeat:no-repeat; z-index:1; }
#hd ul{ position:absolute; top:78px; right:28px; }
#hd li{ display:inline; color:#FFFFFF; padding-left:26px; }
#hd li a{ color:#FFFFFF; }
#hd span { position:absolute; top:20px; right: 28px; color:#FFFFFF; font-size:10px; }
#hd span a{ font-size:10px; color:#FFFFFF; }
#hd h2 { font-family:Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:36px; position:absolute; top:400px; left:0px; color:#FFFFFF; font-weight:normal; }
#hd h2 strong { font-weight:bold; }
/* END HEADER */

/* TABS */
#tabs ul{ padding: 5px 0px 10px 0px; border-bottom:groove 3px #9a9a9a; }
#tabs li{ display:inline; font-family:Georgia, "Times New Roman", Times, serif; padding:10px 18px 10px 18px; border-right:groove 3px #9a9a9a; }
#tabs li a{ color:#9a9a9a; font-size:18px; }
#tabs .selected{ color:#25aae1; }
/* END TABS */
#bd{ }

.yui-g h2{
font-size:24px; }
.yui-b { background-color:#CCCCCC; -moz-border-radius: 8px 8px 0px 0px; }
#ft{
}
#ft p{
position:absolute; right:30px; font-size:10px; color:#cccccc;
}
.yui-g{
padding:0px;
}
.topcontent { background-color:#FF0000; }
#leftcolumn{
width:600px;
}
#leftcolumn h2{
font-size:24px;
margin-bottom:10px;
}
#rightcol{
width:274px;
position:relative;
}

div.slideshow-container {
clear: both;
height: 556px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 1280px;
height: 556px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
border:none;
margin:0px;
padding:0px;
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
border:none;
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
position:absolute;
top:200px;
right:300px;
z-index:2;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
z-index:2;
}
a.thumb {
padding: 2px;
display: block;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}