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.
Related
I'm trying to create this site using a wrapper tag but it's not working and I have no idea why. Dreamweaver is saying somehow it's invalid but I have no idea how. Like if you look at this site: http://web.toolwire.com/croganm-1003/UserInterfaceDesign/Templates/WWVS.dwt
You can see that when you adjust the window size, the columns don't adjust height. That's fine, because I have a min-height on the wrapper. However, If I have text in the maincontent box, it just runs off the page. I want to avoid the use of overflow-y:auto and make it so the right column is always the same height but stays in the middle of the navbar and footer even though the footer will expand downward if text overflows maincontent and causes the box to expand (Which is what I'm trying to do) Here's my code:
HTML:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Module 10/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header" style="background-image:url(../Module%2010/website_design_dpk.png); height:300px; background-size:100% 100%;">
</div>
<nav>
<ul>
<!-- TemplateBeginEditable name="Nav Bar" -->
<li>Home Page</li>
<li>Introduction</li>
<li>Lesson</li>
<li>Final</li>
<!-- TemplateEndEditable -->
</ul>
</nav>
<!-- TemplateBeginEditable name="Main Content" -->
<div id="wrapper">
<div id="maincontent">
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>
</div>
<!-- TemplateEndEditable -->
<div id="footer">
Thank you for visitng WWVS! Please remember to check your pace schedule and remember if work is not submitted every 2 weeks, you will be removed from your course!
</div>
</body>
</html>
and here's my CSS:
/* CSS Document */
#header { /*Creates a div with a background image (created banner) and has the same
height and width as the image. The margins create a center aligned affect
while making sure there is a 10px gap between the top of the page and
the header as well as a 10px gap below the header*/
background-image: url(WWVS-Index-Header.png);
height: 320px;
width: 850px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
max-width: 100%;
background-size:100% 100%;
}
nav { /*Defines the navigation links. Left/Right auto margins make it center aligned,
text align makes all nav links centered in their box and min width makes it so
that when the page shrinks, the nav bar won't change shape and the nav div covers
the entirity of the nav bar*/
margin: 20px auto 50px auto;
min-width:500px;
text-align: center;
width:600px;;
}
#index {
margin:20px auto 150px auto;
}
#index:hover
{
margin: 20px auto 150px auto;
}
nav ul ul { /*Used to hide submenus*/
display: none;
}
nav ul li:hover > ul { /*Used to show submenus when you hover over a nav link*/
display: block;
}
nav ul { /*Creates the nav bar layout and design. Default background in case CSS3 is not
accepted. Gradient background if it is. Also have a box shadow for depth, padding
to help the list have an equal amount of room in the box, and list-style and inline
table and position help layout the table in a compact, clean fashion, and helps the
nav bar realize we want this to display as a table*/
background: #F6F6F6;
background: linear-gradient(top, #F6F6F6 0%, #A0A0A0 100%);
background: -moz-linear-gradient(top, #F6F6F6 0%, #A0A0A0 100%);
background: -webkit-linear-gradient(top, #F6F6F6 0%,#A0A0A0 100%);
box-shadow: 10px 10px 9px 3px #666;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li {/*Horizontal table, not vertical*/
float: left;
clear:right;
position:relative;
}
nav ul li:hover {/* Changes color when you hover over list*/
background: #78818C;
background: linear-gradient(top, #78818C 60%, #5f6975 100%);
background: -moz-linear-gradient(top, #78818C 60%, #5f6975 100%);
background: -webkit-linear-gradient(top, #78818C 60%,#5f6975 100%);
}
nav ul li:hover a {/*Changes text color to white to match the dark background when you
hover over the list*/
color: #fff;
}
nav ul li a {/*Formats text. The first 2 help with spacing and layout. The last two
affect color and the removes the underline from the link*/
display: block;
padding: 25px 40px;
color: #000;
text-decoration: none;
}
nav ul ul { /*Formats sublists. Affects color as well as box shape (square). no padding
to make boxes same size as other boxes. Top and position are used to keep
the submenu right below the main menu*/
background: #5f6975;
border-radius: 0px;
padding: 0px;
position: absolute;
top: 100%;
width:100%;
}
nav ul ul li {/*Affects the actual list of words of the submenus. Keeps boxes formated and
and adds a border to submenu boxes to help readers designate those as
a subpage*/
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {/*Affects sublist links. Makes text white and give words some padding */
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {/*Changes backgrond color of sublist when you hover over it */
background: #4b545f;
}
#wrapper {
height:auto;
width:auto;
position:relative;
margin-top:20px;
margin-bottom:30px;
min-height:450px;
min-width:500px;
}
#maincontent { /*Affects the main content div. Gradient background color, box shadow,
affects size of border radius to create rounded corners, padding (fluid),
top margin to give the box room and right and bottom margin to give the box
room. Font is sans-serrif, overflow is to keep the box at a set height and
float left is to help the box stay to the left side of the page. Font
attributes to change font apperance. Width is 44% (Fluid).*/
background: #FFF;
background: linear-gradient(top, #FFF 0%, #DDD 60%);
background: -moz-linear-gradient(top, #FFF 0%, #DDD 60%);
background: -webkit-linear-gradient(top, #FFF 0%,#DDD 60%);
box-shadow: 8px 8px 15px 2px #666;
border-radius: 15px;
padding: 1% 1% 0px 1%;
margin-right: 8%;
margin-left: 3%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
text-align: center;
position: absolute;
width: 42%;
height:100%;
float:left;
clear:left;
}
#image { /*Affects image. Nearly same as main content, however there is no granite background and the float:left, clear:right makes the image appear in the same row as the
main content. */
width:42%;
height:450px;
position:absolute;
float:left;
clear:right;
margin:auto;
box-shadow: 8px 8px 15px 2px #666;
border-radius: 15px;
margin-left:0%;
padding: 1% 1% 0px 1%;
background-size: 100% 100% !important;
right: 3%;
vertical-align:middle;
}
#footer {/*Affects footer. Gradient bakcground, bold font, black text, center-aligned text,
and aligned towards the bottom. Padding gives text room while the position,
float and clear get box below images and maincontent */
background: #FFF;
background: linear-gradient(top, #EEE 0%, #CCC 100%);
background: -moz-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -webkit-linear-gradient(top, #EEE 0%,#CCC 100%);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
color: #000;
text-align: center;
vertical-align: bottom;
height: auto;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
min-height:70px;
float:left;
clear:left;
}
#footer a{ /*makes mailto: link and phone number underlined*/
text-decoration:underline;
}
Any help would be much appreciated!
Please add overflow:auto to #maincontent id in css. Also do the same for the #footer id in css.
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
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.
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 searched this and toyed with the Z-Axis stuff, but to no avail.
Basically, my nav bar has submenus that appear underneath the div below it. That div has an opacity thing going on, which must have something to do with it. I need these to display above the div!!
JS Fiddle: http://jsfiddle.net/Peege151/7gGJp/1/
I'd ask to expand your browser so the nav bar is all on one line.
Here is my HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" type="text/css" rel="stylesheet" />
<title></title>
</head>
<body style="overflow-x: hidden;scrolling:no;">
<div id="header">
<div id="searchcontainer">
<div id="searchlinks">
<p>Full Suite of Services | Contact Us</p>
</div>
<div id="searchform">
<form action ="##">
Search Site: <input type="search" style="border-radius: 10px;">
<input type="image" src="images/search.png" style="height:20px; width:20px; position:relative;top:5px;">
</form>
<br>
</div>
</div>
<div id="navbar">
<ul id="nav">
<li> Home </li>
<li>Services
<ul>
<li> Full Suite of Services </li>
</ul>
</li>
<li> Case Studies
<ul>
<li> Thing1 </li>
<li>Thing2 </li>
<li> Thing3 </li>
</ul>
</li>
<li>Partners
<ul>
<li> Guy1</li>
<li> TOP HALF OF NAME!!! OMG </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="division"></div>
<div id="intro" class="overlay">
</div>
<div id="biocontactwrap">
<div id="biotext"></div>
<div id="contact_pat"> </div>
</div>
<div id="quote">
</div>
<?php
// put your code here
?>
</body>
</html>
Here is my CSS:
/*
Document : style
Created on : Nov 12, 2013, 11:51:06 AM
Author : ShiftedRec
Description:
Purpose of the stylesheet follows.
*/
body {
background-image: url(images/wall1.gif);
width:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
root {
display: block;
}
#header {
height:150px;
width:100%;
clear:both;
overflow:hidden;
}
#searchcontainer{
width:305px;
height:60px;
float:right;
position:relative;bottom:20px;
}
#searchlinks {
clear:right;
float:right;
width:300px;
position:relative;top: 10px; left:80px;
font-size:50%;
}
#searchlinks a{
font-size:50%;
}
#searchform {
float:right;
clear:left;
width:300px;
clear:left;
}
.clear{
clear:both;
}
#navbar {
float:right;
margin-right:10%;
width:50%;
text-align: right;
clear:right;
}
#navbar ul{
padding: 0 10px;
list-style: none;
position: relative;
display: inline-table;
overflow:visible;
}
#navbar ul li {
position:relative;
display: inline-block
}
#navbar ul ul{
display:none;
position:absolute;
top:1em;
left:0
}
#navbar ul > li:hover ul {
display:inline-table;
margin:0;
overflow:visible;
z-index: 4;
}
#navbar 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%);
}
#navbar ul li ul li {
display:block;
}
#navbar li {
display: inline-block;
margin: 10px;
white-space: nowrap;
}
#division {
height:15px;
background-color:#9E0000;
overflow:visible;
}
#intro{
height:200px;
width:100%;
z-index: 1;
}
#biocontactwrap {
width:100%;
height: 600px;
margin-bottom: 10px
}
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: relative;top:300px;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .1); /*can be anything, of course*/
box-shadow: 0px 9px 9px rgba(0,0,0.9,0.95);
}
#biotext {
margin-left:15%;
width:40%;
height:100%;
padding:0px;
border: solid blue;
float:left;
}
#contact_pat{
width:25%;
height:100%;
border: solid yellow;
float: right;
margin-right:15%
}
#quote {
width:100%;
background-color:blue;
height: 300px;
}
Thanks so much guys! Please be nice. I'm a noobie!
EDIT
One problem causes another!
The reason I had done overflow in the header was because even though I had width:100% there was a scrollbar at the bottom of the page (horiz) that would allow me to scroll over to empty space.
When I had overflow:hidden; in the header, that solved that problem but then hid my nav bar submenus.
I tried to do overflow-x:hidden; overflow-y:visible, but having the Y-visible combined with the X-hidden I guess is bugged and it just reads as "auto!"
Anyway to have both NO X scroll and NO hidden Y submenu's?
Thanks guys..
It happens because of the overflow: hidden; in the #header. Remove it and the navigation will be displayed.