After I loaded the number image which contains some jquery, the whole site shifted down.
Could it be due to the position:relative I am using ? Ignore the 2px border I inserted for certain elements. I wanted to check the area that element encompasses.
Note:
The large image of food is related to the image slider – coin-slider.
The footer isn’t shown in the screenshot I took.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="coin-slider/coin-slider-styles.css" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script src="jqfloat/jqfloat.js"></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width:900, navigation: true, delay: 3000, hoverPause: true, effect: 'random' });
$('#numb1').hide().delay(800).fadeIn('normal');
});
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" width="" height="" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div id="navbar">
<ul>
<li class="OP" id="OPM1"><img src="images/order.png" /><a href="Orders.html">Orders</a></li>
<li class="OP" id="OPM"><img src="images/menupic3.png" /><a href="Menu.html">Menu</a></li>
<li class="OP"><img src="images/contact.png" /><a href="ContactUs.html">Contact</a></li>
<li class="OP"><img src="images/Pen.png" /><a href="AboutUs.html" target="_blank">About Us</a></li>
<li class="OP"><img src="images/pin.png" /><a href="Jobs.html">Jobs</a></li>
</ul>
</div>
<div id='coin-slider'>
<img src='images/slideshow1x.png' />
<span>
Description for img01
</span>
<img src='images/slideshow2x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow3x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow4x.jpg' />
<span>
Description for img01
</span>
</div>
<footer>
<figure id="footerBg">
<img src="images/BG_F_S3.png" alt="Footer Background" width="" height="" />
</figure>
<div id="ftex">
<ul>
<li> © 2012 Foodstant Delivery </li>
<li><a href="Sitemap.html">Sitemap</a> </li>
<li id="ss">Search Site </li>
</ul>
</div>
</footer>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding:0;
}
@font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
body {
background-image: url('images/BG-W1.png');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
height: 790px;
/*border: 2px solid blue;*/
#logo {
float:left;
}
#abtex {
float: left;
border:2px solid blue;
}
#navbar {
background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
position: relative;
top:-50px;
clear:left;
font-size: 26px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 20px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
li a:link {
color: #EF174A;
}
li a:visited {
color: #BF4100;
}
li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
#footerBg {
position: relative;
bottom:-63px;
left:-50px;
}
#footerBg img {
display: block;
}
#footertex {
position: relative;
top:-80px;
/*border:2px solid black;*/
}
#ftex {
position: relative;
}
#ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
#ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
#ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
#ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
#ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
#ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
#ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#numb1 {
position: relative;
/*border:10px solid red;*/
top:100px;
border:2px solid red;
right:-750px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}
It is not the jQuery that is causing the site to shift down, but your
numb1div.The
divelements takes up space on the page. Since by defaultdivhasdisplay: block, it takes up a whole “line” area at the top of the page, where you’ve put it. Settingposition: relativeallows you the change the position ofnumb1, but it still takes up the same space at its original position on the page (the same spot as before).One way of rectifying this is to use
position: absolute, which will removenumb1from the flow of the document.Edit:
Judging from your comments, I’m guessing you want to position the number relative to your logo and other figures without having the overlapping-on-different-screen-resolutions issue. One way of going about this is to put all your figures at the top of the page (including
numb1) in a singledivwithposition: relative. You can then givenumb1position: absolute. This will allow you to positionnumb1relative to the containingdiv. Since you only have figures in thediv, this will essentially allow you to positionnumb1relative to your figures.