When I moved the nav bar up by adding -bottom: 220px; to nav ul{} it now does not displays my nested lists correctly. They are white or not there until you hover. I'm sure it's something simple but I can't seem to figure it out. I appreciate the help! If you remove the -bottom: 220px; it should display correctly.
#charset "UTF-8";
/* CSS Document */
/* START NAVIGATION BAR */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #656565;
background: linear-gradient(top, #bbbbbb 0%, #656565 100%);
background: -moz-linear-gradient(top, #bbbbbb 0%, #656565 100%);
background: -webkit-linear-gradient(top, #bbbbbb 0%, #656565 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
bottom: 220px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
/* END NAVIGATION BAR */
/* START Social Media Icons */
#socialIcon1 {
position:relative;
left: 390px;
bottom: 280px;
}
#socialIcon2 {
position:relative;
left: 170px;
bottom: 220px;
}
/* END Social Media Icons */
/* HEADER */
#contactInfo {
position:relative;
bottom: 140px;
left: 40px;
}
#logo {
position:relative;
right: 220px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Southern Oregon Gymnastics Academy</title>
<link href="SOGAnavBar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align= center>
<img src="../Images/sogaLogo.png" alt="Southern Oregon Gymnastics Academy" name="logo" width="329" height="143" id="logo" longdesc="http://soga-gym.com/" />
<h2 id= "contactInfo">3001 Samike Dr. <br />Suite 112, <br />Medford, OR 97501 <br /> 541-245-9379</h2>
<img src="../Images/twitter.png" alt="Fallow SOGA on Twitter" name="twitter" width="217" height="61" id="socialIcon1" />
<img src="../Images/facebook.png" alt="Like SOGA on Facebook" name="socialIcon2" width="217" height="61" id="socialIcon2" longdesc="https://www.facebook.com/Southern.Oregon.Gymnastics.Academy" />
<nav>
<ul>
<li>Home</li>
<li>Our Classes
<ul>
<li>Birthday Parties</li>
</ul>
</li>
<li>Our Team</li>
<li>About Us
<ul>
<li>Birthday Parties</li>
<li>Field Trips</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
You're using a lot of relative positioned elements and that is causing the extra space to exist. Rather than trying to position everything manually, let it happen automatically like this:
a, h2 {
display: inline-block;
}
Get rid of the bottom:220px you added and all of your CSS below /* END NAVIGATION BAR */. This will allow the elements in your header to flow next to each other.
http://jsfiddle.net/dsPNJ/
Just use nav > ul instead of nav ul on line 13.
Related
I am trying to get my dropdown menu to work, but for some reason, it doesn't appear in the browser.
I already checked the other questions and couldn't find a reason for my problem. I already removed overflow:hidden from my parent list, even though the gradient I had in the navbar disappeared because of that and I don't know how to fix that either.
I used w3school for help (although they didn't use a list, which is a requirement) and a template from one of my friends that I even copypasted into my css and it still didn't work.
Okay, so for your reference, here you have my CSS and HTML:
body {font-family: "Century Gothic", "Trebuchet MS";
width: 780px;
margin: auto;
background-color: #555555}
#site {background-color: white;
padding: 10px;}
/** My Friend's CSS that didn't work either
.main li {list-style-type: none;
float: left;
width: 150px;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
text-align: center;}
.main li:hover {color: white;}
.main2 li {display: none;
background-color: lightgrey;
color: black;}
.main2 li:hover {background-color: grey;
color: white;}
.main li:hover .main2 li {display: block;}**/
.main {list-style-type: none;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
width: 100%}
.main li {display: block;
float: left;
position: relative}
.main li a {display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;}
.main a {text-decoration: none;
color: black;}
.main2 li {position: absolute;
display: none;
width: 100%
}
.main li a:hover .main2 li {display: block;}
.main2 li a {color: black;
text-decoration: none;
display: block;}
<body>
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>Blog</li>
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
<li>Forum</li>
<li>Kontakt</li>
<li>Links</li>
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</ul>
</nav>
also, here's a screenshot of how the website looks like at the moment (I only included the important parts of the HTML because I actually haven't formatted the rest of the site in CSS
screenshot
Thank you so much for your help!
I assume you want the .main2 menu displayed only when parent link is covered.
2 changes:
1) make a child ul tag part of the li (nest it)
2) change the display logic of :hover to act on child element (.main li:hover > ul)
Result:
.main {
list-style-type: none;
background-image: linear-gradient( rgba(240,240,240,1), rgba(240,240,240,0) );
width: 100%;
display:flex;
}
.main li {
display: block;
float: left;
position: relative;
}
.main li a {
display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;
}
.main a {
text-decoration: none;
color: black;
}
.main2 {
width: 100%;
display:none;
position: absolute;
padding:0;
}
.main2 li {
width: 100%;
}
.main li:hover > ul {
display: block;
}
.main2 li a {
color: black;
text-decoration: none;
display: block;
}
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>Blog
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Forum</li>
<li>Kontakt</li>
<li>Links
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</nav>
If you are thinking about optimizing the styling, here is my version with less selectors:
https://codepen.io/VsevolodTS/pen/KRxeRL
Here is a solution, I commented the changed code.
The problem is that your <ul class="main2"> is in the same level as the other li which is not valid.
I olso changed this line of css
.main li a:hover .main2 li {display: block;}
to
.main li:hover .main2 li {display: block;}
Edit
For the gradient problem use display: inline-block; on main
body {font-family: "Century Gothic", "Trebuchet MS";
width: 780px;
margin: auto;
background-color: #555555}
#site {background-color: white;
padding: 10px;}
.main {list-style-type: none;
background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(204,204,204,1) 100%);
display: inline-block; // <-- here
width: 100%}
.main li {display: block;
float: left;
position: relative}
.main li a {display: block;
position: relative;
padding: 6px 12px 5px 10px;
font-weight: 900;
font-size: 14px;
height: 20px;
text-align: center;}
.main a {text-decoration: none;
color: black;}
.main2 li {position: absolute;
display: none;
width: 100%
}
/*Changed this part*/
.main li:hover .main2 li {display: block;}
.main2 li a {color: black;
text-decoration: none;
display: block;}
<div id="site">
<nav>
<ul class="main">
<li>Home</li>
<li>Über mich</li>
<li>
Blog
<!-- Move this inside li -->
<ul class="main2">
<li>2015</li>
<li>2016</li>
<li>2017</li>
</ul>
</li>
<li>Forum</li>
<li>Kontakt</li>
<li>
Links
<!-- Move this inside li -->
<ul class="main2">
<li>facebook</li>
<li>Insta</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</nav>
</div>
so below is all the code that makes the picture you see at the bottom. I'm trying my best to make this site responsive, but the main problem right now is that the menu bar is not centered (vertically) with the logo to the left. How can I get it to be centered there? I tried setting the top to 50% and it stayed where it is. Now the background color red is only containing the menu bar for some reason even though the logo should be inside of it. Thanks for any help.
HTML:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bond Solutions | Home</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="menubar.css" />
<script type="text/javascript">
var video;
window.onload = function () {
window.video = document.getElementById("video");
window.video.addEventListener('ended',myHandler,false);
window.video.volume=0.5;
}
function myHandler() {
window.video.currentTime = 7;
window.video.volume=0;
window.video.play();
}
</script>
</head>
<body>
<center>
<div id="site">
<div id="header">
<img class="logo" src="images/logo.svg" />
<div id="menu">
<ul id="menu-bar">
<li class="active">Home</li>
<li>Products
<ul>
<li>Stock Photos</li>
<li>Stock Videos</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Computer Repair</li>
<li>Computer Cleaning</li>
<li>Custom Computers</li>
<li>Retro Console Refurbishing</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</center>
</body>
</html>
CSS:
body {
background-color: #000;
}
#site {
background-color:#0F0;
width:75%;
}
#header {
position:relative;
background-color:red;
height:50%;
width:100%;
}
.logo {
width:auto;
max-width:100%;
height:auto;
float:left;
}
#menu {
top:50%;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul{
background: #AC2828;
background: linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -moz-linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -webkit-linear-gradient(top, #AC2828 0%,#A31010 100%);
box-shadow: 0px 0px 8px #A31010;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#menu ul li {
float: left;
border-right:1px solid #8A0000;
}
#menu ul li:last-child{
border-right:none;
}
#menu ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #811919 0%,#680000 40%);
}
#menu ul li:hover a {
color: #fff;
}
#menu ul li a {
font-family: 'Pathway Gothic One', sans-serif;
font-size:14px;
display: block;
padding: 14px 40px;
color: #fff; text-decoration: none;
}
#menu ul ul {
background: #811919; border-radius: 0px; padding: 0;
position: absolute;
}
#menu ul ul li {
float: none;
border-top: 1px solid #680000;
border-bottom: 1px solid #8F3333;
position: relative;
}
#menu ul ul li a {
padding: 14px 40px;
color: #fff;
}
#menu ul ul li a:hover {
background: #AC2828;
}
Picture:
To make the logo fit in the header properly, you need to add clearfix to the header.
<div style="clear:both;"></div>
Add it just before the ending </div> of header.
Then to make it align at middle:
#header {
position:relative;
background-color:red;
height:50%;
display: table;
width:100%;
}
#menu {
display: table-cell;
vertical-align: middle;
}
DEMO
I keep having this issue where my CSS dropdown menu is hiding behind my content on my page. I have looked around and tried using Z-Index in order to specify where it needs to go, and I cannot figure it out. All of my content is in the div class ".wrapper" which is what the navigation line is hiding behind. Here is the CSS:
nav {
margin: -75px 100px 20px 100px;
text-align: right;
position: relative;
z-index: 1000;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
z-index: 1000;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #D22525 0%, #5F1414 100%);
background: -moz-linear-gradient(top, #D22525 0%, #5F1414 100%);
background: -webkit-linear-gradient(top, #D22525 0%,#5F1414 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #FFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;z-index: 1000;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
z-index: 1000;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
.wrapper
{
overflow: hidden;
padding: 0em 0em 5em 0em;
background: #FFF;
top: 150px;
position: absolute;
z-index: 0;
}
After that Here is my HTML:
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1></span>HHS E3</h1>
</div>
<nav>
<ul>
<li><img src="/media/home.png" height="14px" /></li>
<li><a>Media</a>
<ul>
<li>Videos</li>
<li>Pictures</li>
<li>Music</li>
</ul>
<li><a>Bullying</a>
<ul>
<li>Harrassment</li>
<li>Abuse</li>
<li>Mental Illness</li>
<li>Dissability</li>
<li>For Fun</li>
</ul>
</li>
<li><a>About E3</a>
<ul>
<li>Our Videos & Stories</li>
<li>Our Presentations</li>
</ul>
</li>
<li><a>About the Founders</a>
<ul>
<li>Raider Radio</li>
<li>Video</li>
<li>Info</li>
<?php
if(empty($_SESSION['logged_in']))
{
} else {
echo "<li><a href='#'>User</a><ul><li><a href='/upload'>Upload</a></li><li><a href='/logout.php'>Logout</a></li></ul></li>";
}
?>
</ul>
</nav>
</div>
</div>
</div>
<div class="wrapper">
<div id="three-column" class="container">
If anyone has any thoughts on what I need to fix, I would greatly appreciate it. Overall, the drop down menus work, but only the first row is displayed and the rest are hidden behind the wrapper. Do I maybe need to do anything to the id="three-column" or class="container" Thanks!
PS: jsfiddle
Here's a fiddle!
I did three things:
Removed the margin from the Nav (The margins + the background was covering your logo)
Added display: inline-block to both the Nav and #logo. This allowed them to display next to each other correctly.
Added float:left and float:right to the #logo and Nav respectively. Which would push them to the left and right.
nav{
text-align: right;
position: relative;
z-index: 1000;
float:right;
display: inline-block;
float: right;
}
#logo{
display: inline-block;
float: left;
}
Try this fiddle
I used your html and css and made the below changes:
Added position:relative to nav ul li
Changed top value to 70px in nav ul ul
Hope this helps you.
I would like to say thank you to everyone for starters. I have read every comment and answer on here. However, there was one thing I caught by putting essentially all of your answers together. I had forgotten to place the div id "header-wrapper" in my code shown above. In it, like one user had stated, it had Overflow: Hidden The nav was contained in there. After setting Overflow: Visible my issue has been resolved. Thank you again everyone.
I'm trying to highlight the "Personal Training" link and any other drop down links when a child link is hovered.
For example: The user hovers the "Personal training" link then the dropdown menu shows. Then while he down the list, "Personal Training" is still highlighted.
HTML:
<ul id="nav">
<li>Home</li>
<li>Personal Training
<ul>
<li>Sign Up</li>
<li>Meet The Trainers</li>
</ul>
</li>
</ul>
CSS:
#header a {
margin: 0px;
padding: 10px;
display: block;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #000;
}
#nav a:hover {
margin: 0px;
padding: 10px;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F));
}
#nav li ul {
width: auto;
position: absolute;
display: none;
background-color: #0F0;
background-image: none;
}
#nav ul li:hover {
width: auto;
position: absolute;
background-color: #00F;
background-image: none;
}
#nav ul a:hover {
background-color: #00F;
background-image: none;
}
#nav li a:hover + a {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #FFF), color-stop(1, #00F));
}
#nav li:hover ul {
display: block;
}
I the code that shows the dropdown menu works and it highlights any single item that is hovered all I need is how to highlight a dropdown link and its parent link.
Thanks in advance, Slulego
Since the submenu is a ul contained in your menu header li, you should be applying the :hover styling to the li, and not the a. See it in action in this JSFiddle.
I changed the CSS selector #nav a:hover to #nav > li:hover.
And, though it needn't be said, the aesthetics of that JSFiddle is far from optimal; I just hacked it together to show what I'm talking about :)
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" />Orders</li>
<li class="OP" id="OPM"><img src="images/menupic3.png" />Menu</li>
<li class="OP"><img src="images/contact.png" />Contact</li>
<li class="OP"><img src="images/Pen.png" />About Us</li>
<li class="OP"><img src="images/pin.png" />Jobs</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>Sitemap </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 numb1 div.
The div elements takes up space on the page. Since by default div has display: block, it takes up a whole "line" area at the top of the page, where you've put it. Setting position: relative allows you the change the position of numb1, 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 remove numb1 from 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 single div with position: relative. You can then give numb1 position: absolute. This will allow you to position numb1 relative to the containing div. Since you only have figures in the div, this will essentially allow you to position numb1 relative to your figures.