...

View Full Version : gap at the top and move 3 small squares on top?!



jarv
12-15-2010, 03: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>
<!-- We only want the thunbnails to display when javascript is disabled -->
<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 &copy; 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;
}

jarv
12-15-2010, 08:18 PM
please help???

jarv
12-16-2010, 08:28 PM
HELP???! please

teedoff
12-16-2010, 08:56 PM
Sorry I'm not seeing a gap and I'm not seeing three small squares like you are saying. Perhaps if you are more specific and descriptive in what your issues are. Maybe take a screen shot of it and upload here.

jarv
12-16-2010, 09:39 PM
ok, there are more than 3 squares now but there is still a 10px or so gap at the very top! I am viewing in FireFox on Mac

Excavator
12-16-2010, 09:50 PM
Hello jarv,
I see the 11 small squares in the upper right that are the slide indicators for your slide show.
They are in your absolutely positioned ul.thumbs

I'm not seeing the 3 boxes you describe.

Not seeing any gap at the top either.

Is http://www.jbiddulph.com/fab/ your most current version?

teedoff
12-16-2010, 11:05 PM
Hello jarv,
I see the 11 small squares in the upper right that are the slide indicators for your slide show.
They are in your absolutely positioned ul.thumbs

I'm not seeing the 3 boxes you describe.

Not seeing any gap at the top either.

Is http://www.jbiddulph.com/fab/ your most current version?

Thats exactly how I've been seeing it. 11 squares with NO space above your page whatsoever in IE8 and FF 3.6.

Again, take a screenshot of what you are seeing and post it.

Also as Excavator said, make sure you are viewing the most recent version of this page. Refresh your browser and upload the lastest file to your server.

jarv
12-16-2010, 11:36 PM
http://www.jbiddulph.com/fab/images/top.gif

here is a screenie from my Mac Firefox 3.6.2 and is the same in Chrome!

Excavator
12-17-2010, 12:09 AM
Your description was not very clear. I see more than 3 clickable because i'm a different resolution than you and your ul moves relative to something other than your slideshow.
Like I said though, your boxes are in an absolute positioned ul. If they are unclickable, you just have the wrong z-index on them. They your layers are stacked now, the ul is under #hd.

Try this instead -

ul.thumbs {
clear: both;
margin: 0;
padding: 0;
position:absolute;
top:140px;
right:200px;
z-index:10;
}

Still no gap at the top here. Usually that is a top margin on body but who knows what a mac sees. Try adding this bit in red -

html{color:#000;background:#FFF;margin:0;}body,div,dl,dt,dd

jarv
12-17-2010, 12:29 AM
yay thanks! sorted the clickable squares!

still a gap at the top though! oh well

thanks for your help!

Excavator
12-17-2010, 12:52 AM
Even when you set margin:0; on html? I ask because your reset is only directed at body - it left html out and like I said, I don't know that mac might need that.

There is no gap at the top in FF4 or IE8



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum