Here is my page HTML. Below is my CSS for the main navigation styles. IE7 does not display the padding, hover or drop down items. IE8 padding is good, hover works, but drop downs do not display. My code may be a big mess- probably a lot of unnecessary stuff. I've been working with all sorts of suggestions to no avail. So anyone willing to take the time and help me resolve my navigation issue? I will be so incredibly appreciative! I'm hoping there's something obvious here to someone who is much more knowledgeable than myself. Here is the live site. http://www.tortolasportsclub.com/ Also, my animation's down level poster image loads with scroll bars (Adobe Edge Animate). Not sure what's going on there. Have been unable to find a solution for that also.
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
</head>
<body id="home">
<div class="gridContainer clearfix">
<div id="header">
<div id="logo"><img src="images/logo.jpg"></div>
<div id="register">
<span class="button"></span>
</div>
</div>
<div id="nav">
<ul id="menu">
<li>Home </li>
<li>About
<ul>
<li>Committee Members</li>
</ul>
</li>
<li>Sports
<ul>
<li>Squash </li>
<li>Tennis</li>
<li>Gym</li>
<li>Multipurpose</li>
<li>Junior Programs</li>
</ul>
</li>
<li>Clubhouse
<ul>
<li>Restaurant Menu</li>
<li>Events</li>
<li>Staff</li>
</ul>
</li>
<li>News
<ul>
<li>Events</li>
<li>Submit News</li>
</ul>
</li>
<li>Sponsors
<ul>
<li>Become a Sponsor</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="figure"><object id="bannerframe" data="animation/tsc-index-banner.html" width="100%" height="100%"><embed href="tsc-index-banner.html" width="100%" height="100%"></embed></object>
<div id="blktxtbar"></div>
</div>
<div id="section">
<div id="article1"></div>
<div id="article3"></div>
</div>
<div id="footer-nav"></div>
<div id="footer-nav2"></div>
<div id="footer-co"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script>selectnav('menu'); </script>
<script type="text/javascript" language="javascript">
$(function() {
var resizeObject = function() {
var object = $('#bannerframe');
var width = object.width();
var ratio = 350.0 / 960.0;
var height = Math.floor(width * ratio) + 'px';
object.height(height);
};
$(window).resize(resizeObject);
resizeObject();
});
</script>
</body>
</html>
#nav {
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
background: #FFF;
display: block;
position: relative;
margin-top: 0px;
font: 1.1em Tahoma, Geneva, sans-serif;
}
#nav ul {
clear:left;
float:right;
list-style:none;
margin:0;
padding:0;
position:relative;
right: 50%;
text-align:center;
}
#nav ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
width: 6.5em;
cursor: pointer;
text-align: center;
white-space: nowrap;
font-size: 100%;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
background: #FFF;
}
#nav ul li a {
color: #FFF;
display:block;
right: 50%;
text-align: center;
text-decoration: none;
border:1px solid #224b09;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 1px;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
padding: 10px 5px;
}
#nav ul li.active a {
color: #FFFFFF;
background-color: #4ba614;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ba614), color-stop(100%, #030));
background-image: -webkit-linear-gradient(top, #4ba614, #030);
background-image: -moz-linear-gradient(top, #4ba614, #030);
background-image: -ms-linear-gradient(top, #4ba614, #030);
background-image: -o-linear-gradient(top, #4ba614, #030);
background-image: linear-gradient(top, #4ba614, #030);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#030);
display: block;
padding: 10px 5px;
}
#nav ul li:hover a, #nav ul li.hover a /* This line is required for IE 6 and below */{
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
}
#nav ul ul {
display: none;
position: absolute;
top: 3em;
left: 1;
padding-top: 0px;
opacity: 1;
right: auto;
font-size: .9em;
width: auto;
padding-top: 0px;
padding-bottom: 0px;
z-index: 1;
}
#nav ul ul li {
padding-top: 0px;
opacity: 0.9;
left: auto;
margin: 0;
clear: left;
width: 100%;
font-size: 0.9em;
padding-top: 0px;
padding-bottom: 0px;
}
#nav ul ul li a,
#nav ul li.active li a,
#nav ul li:hover ul li a,
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
text-align: left;
line-height:1.4em;
border-bottom:1px solid #000;
display: block;
}
#nav ul ul li a:hover,
#nav ul li.active ul li a:hover,
#nav ul li:hover ul li a:hover,
#nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
font-size:1em;
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
text-align: left;
display: block;
}
#nav ul ul.last {
left:auto;
right:0;
}
#nav ul li:hover ul,
#nav ul li.hover ul { /* This line is required for IE 6 and below */
display:block;
}
Related
I was trying to center the menu items in CSS. The bar takes up the whole width of the screen, which is a desired result. I want the menu items to get centered relative to the screen.
Here is the CSS that im using:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}
Also, here is the HTML code that im using along with it:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="menu_assets/styles.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url(); ?>menu_assets/styles.css" rel="stylesheet" type="text/css" />
<div id='cssmenu'>
<ul>
<li class='active'><a href='sample/home'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Upload Data</span></a>
<ul>
<li class='has-sub'><a href='sample/index'><span>Test Data</span></a>
<ul>
<li><a href='upload_form_att/index'><span>With Attachments</span></a></li>
<li class='last'><a href='sample/index'><span>Without Attachments</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Protocol</span></a>
<ul>
<li><a href='#'><span>With Attachments</span></a></li>
<li class='last'><a href='#'><span>Without Attachments</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Stability Data table</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Logout</span></a></li>
</ul>
</div>
</head>
Any help would be appreciated.
EDIT: After making the changes suggested, I ran into another issue now. When i hove over the "sub menu" item, the "sub-sub menu" item is displayed with a gap and thus making them unclickable. Is there anything else that i need to edit to fix this?
In section should be set - margin-left: 25%;:
#cssmenu ul {
list-style: none;
margin-left: 25%;
}
Independently play around with this value.
In your html code was a mistake:
no tag and the web site body is placed in tag
Your HTML code corrected:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="menu_assets/styles.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='sample/home'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Upload Data</span></a>
<ul>
<li class='has-sub'><a href='sample/index'><span>Test Data</span></a>
<ul>
<li><a href='upload_form_att/index'><span>With Attachments</span></a></li>
<li class='last'><a href='sample/index'><span>Without Attachments</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Protocol</span></a>
<ul>
<li><a href='#'><span>With Attachments</span></a></li>
<li class='last'><a href='#'><span>Without Attachments</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Stability Data table</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Logout</span></a></li>
</ul>
</div>
</body>
</html>
Add this to CSS file.
#cssmenu{
width:90%; //set according to you
margin:auto;
}
margin:auto automatically centers the element according to page and content width
I have a tabular navigation list (with the styles I choose for) in an external file contains the following code:
.tabs
{
position:relative;
text-align:left; /* This is only if you want the tab items at the center */
width: 90%;
padding: 0;
margin: 0;
/*border: 1px solid green;*/
}
.tabs ul.menu
{
list-style-type:none;
display:block; /* Change this to block or inline for non-center alignment */
width:570px;
/* min-width:570px;
max-width:800px;
vertical-align: bottom;
/*border: 1px solid red;*/
}
.tabs ul.menu > li
{
display:inline;
float:center;
vertical-align: bottom;
/** border: 1px solid yellow;*/
cursor:hand;
}
.tabs ul.menu li > a
{
color:#7a7883;
text-decoration:none;
display:inline-block;
text-align:center;
border:1px solid #f1f3f4;
padding:5px 10px 5px 10px;
width: 25%;
font-size:15px;
font-family:"Times New Roman", Times, serif;
border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
-moz-user-select:none;
cursor:hand;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#aeb8c0));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #aeb8c0, #fff);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #aeb8c0, #fff);
/* IE 10 */
background: -ms-linear-gradient(top, #aeb8c0, #fff);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #aeb8c0, #fff);
}
.tabs ul.menu li > a:hover
{
color: #fff;
cursor:hand;
}
.tabs ul.menu li > div
{
display:none;
position:absolute;
width:98%;
/* max-width:700px;*/
min-height:230px;
left:0;
margin: 0 15px 0 15px;
z-index:-1;
text-align:left;
padding:0;
}
.tabs ul.menu li > div > p
{
border:1px solid #f1f3f4;
background-color: #f5f9fc;
width: 99%;
padding:10px;
margin:0;
color: #65636e;
font-size:12px;
font-family:"Times New Roman", Times, serif;
text-decoration: none;
min-height:200px;
}
.tabs ul.menu li > a:focus
{
color: #f5f9fc;
}
.tabs ul.menu li:target > a
{
cursor:default;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#fff));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #fff, #f1f3f4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #fff, #f1f3f4);
/* IE 10 */
background: -ms-linear-gradient(top, #fff, #f1f3f4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #fff, #f1f3f4);
cursor:hand;
}
.tabs ul.menu li:target > div
{
display:block;
}
and in the web page I have this:
<!-- Side NAVIGATION -->
<!-- Wrapper 2-Content -->
<div class="wrapper" style="min-height: 200px;"">
<!-- content -->
<div class="content">
<div class="tabs">
<ul class="menu">
<li id="item-1">
Bla Bla 1
<div><p>Tab Content 1</p></div>
</li>
<li id="item-2">
Bla Bla 2
<div><p>Tab Content 2</p></div>
</li>
<li id="item-3">
Bla Bla 3
<div><p>Tab Content 3</p></div>
</li>
</ul>
</div>
</div>
<!-- content -->
<!-- end of Side NAVIGATION -->
All goes fine except that it displays the tabs only without the box where the content should appear. I want one of the contents to be visible as default. I just don't know how to activated it without using javaScript.
Thank you in advanced.
add display : block as style for the div which u want to display by default. For example see this fiddle I hv created for making item1 visible on run http://jsfiddle.net/X6Agf/
<div style="display:block"><p>Tab Content 1</p></div>
I for whatever reason cannot get rid of the gap between my header and the nav bar menu. I've tried every adjustment of padding/margins I can think of to either push it up or move the bar, but it just does funky stuff with the menu or pushes other content up. I need some help.
and the code
#header_wrap {
width:100%;
height:144px;
text-align: center;
}
#header {
width:980px;
margin:0 auto;
}
#preloadedImages
{
width: 0px;
height: 0px;
display: none;
background-image:url(Logo/logo14hover.gif);
}
.site_logo {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14.gif) no-repeat;
}
.site_logo:hover {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14hover.gif) no-repeat;
}
.headerpic {
float:left;
width:678px;
height:144px;
background:url(Images/headerpic.gif) no-repeat;
}
#menu_wrap {
position:relative;
z-index:2;
text-align:center;
width:100%;
padding: 0px 0px;
}
#menu {
position:relative;
z-index:2;
width:1000px;
text-align:center;
margin:0 auto;
height:61px;
padding: 0px 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
padding: 0px 0px;
list-style:none;
position: relative;
display:inline-table;
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
text-shadow: 1px 1px #000000;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #736e57;
background: linear-gradient(top, #BBB38F 0%, #6B6441 40%);
background: -moz-linear-gradient(top, #BBB38F4 0%, #6B64415 40%);
background: -webkit-linear-gradient(top, #BBB38F 0%,#6B6441 40%);
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover a {
color:#FFFFFF;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li a {
color:#FFFFFF;
display: block;
padding: 12px 42px;
text-decoration:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover > ul {
background: #303030;
text-decoration:none;
display: block;
}
nav ul ul {
background: #303030;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:14px;
text-decoration:none;
color:#000;
font-weight:light;
outline:none;
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity:0.95;
}
nav ul ul li {
text-decoration:none;
float: none;
position: relative;
}
nav ul ul li a {
text-decoration:none;
padding: 0px 0px;
color:#000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul li a:hover {
text-decoration:none;
background: #736e57;
text-shadow: 1px 1px #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul {
text-decoration:none;
padding: 0px;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
padding: 10px 40px 10px 15px;
color:#000;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
text-align: left;
}
nav ul ul li a:hover {
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
background: #6B6441;
text-align: left;
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul ul {
position: absolute;
left: 100%; top:0;
}
and the HTML
<div align="center" id="header_wrap">
<div id="header">
<div id="preloadedImages"></div><div class="site_logo"></div>
<div class="headerpic"></div>
</div>
</div>
<!-- START MENU NAV BAR CODE -->
<div id="menu_wrap">
<div id="menu">
<nav>
<ul>
<li>Company
<ul>
<li>Mission</li>
<li>Philosophy</li>
</ul>
</li>
<li>Solutions
<ul>
<li>Q Pipe Estimator
<ul>
<li>Advantage</li>
<li>Differentiator</li>
<li>Features</li>
<li>Screen Shots</li>
</ul>
</ul>
</li>
</li>
<li>Services
<ul>
<li>Technical Support</li>
<li>Training</li>
<li>Customization</li>
<li>FAQ's</li>
</ul>
</li>
<li>Industry
<ul>
<li>Focus</li>
<li>Customers</li>
</ul>
</li>
<li>Contact
<ul>
<li>Contact Information</li>
<li>Request Information</li>
</ul>
</li>
<li>Login
</li>
</ul>
</nav>
</div>
</div>
<!-- END MENU NAV BAR CODE -->
added fiddle link in comments
Simply remove the default margin for your main ul (the direct descendant of nav)
Select it using the following CSS, or giving that specific ul a class or id (this way you target only the ul causing you trouble).
nav > ul {margin: 0}
I stuck it into the top of your fiddle, and updated it here
I realise this has now been answered because I took way too long formatting this, but I'd just like to point out that it has nothing to do with the box-shadow which has no impact on positioning.
The ul default margin is responsible for this space. Try setting margin-top:0 to nav ul. Demo: http://jsfiddle.net/xtsAx/8/
for me the error was because i used dream weaver to edit my code.
this give me a hiccup by adding default headers.
when i removed those headers and just gave<html> <head>...<?php>....?> .... </html> it worked perfect.
always remove html tags and header by dream weaver.
**Update: I had the same error again in Firefox so i applied
*{
margin:0;
padding:0;
}
And hence got rid of it completely now.
**
I am working on a Joomla! template and I have my index and my template.css
When I leave all the design in css it appears to load only those parts concerning css classes and doesnt do anything else, so eventually I have to write everything else into de index.php which is silly because Im not supposed to.
For instance this is the code I want for my index.php
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/posgradostemplate/css/template.css" type="text/css" />
<jdoc:include type="head" />
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="mainmenu">
<jdoc:include type="modules" name="mainmenu" />
</div>
</div>
</div>
</body>
</html>
But wrapper and content do not behave as expected and no background is shown. This is my css file:
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* Opera */
background-image: -o-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E6E6E6), color-stop(1, #858585));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #E6E6E6 0%, #858585 100%);
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.mainmenu ul {
font-family: Arial, Verdana;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.mainmenu ul li {
display: block;
position: relative;
float: left;
}
.mainmenu li ul {
display: none;
}
.mainmenu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
.mainmenu li:hover li a:hover {
background: #FFFF00;
color: #FF0000;
}
.mainmenu ul li a:hover {
background: #000000;
color: #FFFF00;
}
.mainmenu li:hover ul {
display: block;
position: absolute;
}
.mainmenu li:hover li {
background: #FFFF00;
float: none;
font-size: 11px;
color : #000000;
}
.mainmenu li:hover a {
background: #FFFF00;
color : #000000;
}
#wrapper{
width: 100%;
text-align: center;
}
#content{
display: inline-block;
}
Everything other than mainmenu is not working as the css tells it to. I am thinking that it is not being loaded properly, I want it to be loaded eagerly, so that everything is had in mind. Right now it only works if I add the css code in the index and it should not be that way. Suggestions?
Try loading the CSS file using the following:
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::root() . "templates/posgradostemplate/css/template.css");
I am creating a master page for a website and attempting to use a CSS3 dropdown menu in a .NET Web App. The trouble I am having is that I cannot get the nav element to display a background color. I have implemented this several times before with no issues, but for some reason it will not work in this project.
The markup:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MirandasWebsite.SiteMaster" %>
<!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 id="Head1" runat="server">
<link href="Styles/Mir3.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type='text/javascript'></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<title></title>
</head>
<body runat="server">
<form id="form1" runat="server" method="post">
<div class="wrap">
<nav>
<ul class="menu">
<div id="HomePage" class="zoom" runat="server"><li class="menuitem">Home</li></div>
<li class="menuitem"><a id="aMedia" href="#" runat="server">Media</a>
<ul>
<div id="Photos" class="zoom" runat="server"><li class="menuitem">Photos</li></div>
<asp:HiddenField ID="hfPhotos" runat="server" Value="#" />
<div id="Videos" class="zoom" runat="server"><li class="menuitem">Videos</li></div>
<asp:HiddenField ID="hfVideos" runat="server" Value="#" />
<div id="Audio" class="zoom" runat="server"><li class="menuitem">Audio</li></div>
<asp:HiddenField ID="hfAudio" runat="server" Value="#" />
</ul>
</li>
<li class="menuitem"><a id="a1" href="#" runat="server">About Me</a>
<ul>
<div id="Biography" class="zoom" runat="server"><li class="menuitem">Biography</li></div>
<asp:HiddenField ID="hfBiography" runat="server" Value="#" />
<div id="Resume" class="zoom" runat="server"><li class="menuitem">Resume</li></div>
<asp:HiddenField ID="hfResume" runat="server" Value="#" />
</ul>
</li>
<div id="ContactMe" class="zoom" runat="server"><li class="menuitem"><a id="a2" href="#" runat="server">Contact Me</a></li></div>
</ul>
<div class="clearfix"></div>
</nav>
</div>
<div class="Contents">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The CSS:
/*------------Main Styles------------*/
html
{
height: 100%;
width: 100%;
}
body
{
position: relative;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
background: -webkit-radial-gradient(center, circle farthest-corner, #680000 0%, Black 100%); /* for Chrome and Safari*/
background: -moz-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%); /* for Firefoex */
background: -ms-radial-gradient(center, circle farthest-corner, #680000 0%, Black 95%); /* For IE10 */
background: -o-linear-gradient(top, #680000, Black); /* For Opera */
}
ul
{
list-style: none;
}
/*------------Drop Down Menu------------*/
.wrap
{
max-width: 100%;
margin: 4em auto;
}
nav
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
position: relative;
text-align: center;
}
.menu
{
text-align: center;
margin: auto%;
background-color: Silver;
}
.menu li
{
float: left;
position: relative;
padding: 0% 1%;
}
.menu li a
{
color: #cccccc;
display: block;
font-size: 110%;
line-height: 100%;
padding: 0% 0%;
margin: 0% 0%;
vertical-align: middle;
text-decoration: none;
}
.menu li a:hover
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
color: #222;
}
/* Dropdown styles */
.menu ul
{
position: absolute;
list-style: none;
opacity: 0;
-webkit-transition: opacity 1.5s ease;/*For Chrome and Safari */
-moz-transition: opacity 1.5s ease;/* For Firefox */
-o-transition: opacity 1.5s ease;/*For Opera */
min-width: 75%;
text-align: left;
}
.menu ul li
{
float: none;
}
.menu ul a
{
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul
{
background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc));
background: -moz-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%);
background: -o-linear-gradient(top, #999999, #cccccc); /* For Opera */
background: -ms-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%); /* For IE10 */
left: 5%;
opacity: .8;
text-align: center;
margin: auto;
min-width: 100%;
min-height: 100%;
}
/* Persistant Hover State */
.menu li:hover a
{
background: -webkit-gradient(linear, center top, center bottom, from(#999999), to(#cccccc));/* for Chrome and Safari */
background: -moz-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%);/* For Firefox */
background: -ms-radial-gradient(center, circle farthest-corner, #999999 0%, #cccccc 95%); /* For IE10 */
background: -o-linear-gradient(top, #999999, ##cccccc); /* For Opera */
color: Black;
}
.menu li:hover ul a
{
background: none;
border-radius: 0%;
box-shadow: none;
}
.menu li:hover ul li a:hover
{
color: #680000;
}
Thanks for helping.
your nav cant compute any width because all elements inside it doesnt have a width, thats why it cant show any background
just give the height property to your nav element :-
CSS
nav
{
background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#999999));
background: -moz-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%);
background: -ms-radial-gradient(center, circle farthest-corner, #cccccc 0%, #999999 95%); /* For IE10 */
background: -o-linear-gradient(top, #cccccc, #999999); /* For Opera */
position: relative;
text-align: center;
height:30px;
}
DEMO