I have two boxes that need to be locked on this webpage but when I try to lock them it changes the size and the body scrolls over it.
I need the header to show over everything and be locked.
The code is here:
http://jsfiddle.net/dwhs/gtehep16/
HTML
<body>
<!--==============================header=================================-->
<header>
<div class="head-box1">
<div class="main">
<h1><a class="logo" href="index.html">pro web hosting</a></h1>
<nav>
<div style="text-align:right;"> <span class="link2">Account Manager | Cart | Register | Questions?</span></span><span class="phone"><br>
Call us: <strong>(213)984-HOST 24/7 Support</strong></span><span class="nothing"><br>
</span> </div>
</nav>
</div>
<div class="clear"></div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='/'><span>Home</span></a></li>
<li><span>Web Hosting</span></li>
<li><span>Reseller</span></li>
<li><span>Dedicated</span></li>
<li><span>Support</span></li>
<li><a href='/affiliates/index.htm'><span>Affiliates</span></a></li>
<li class='last'><a href='/why-us.html'><span>Why us</span></a></li>
</ul>
</div>
CSS
header {
width:100%;
position:relative;
z-index:2;
}
.logo {
display:block;
width:300px;
height:75px;
text-indent:-5000px;
background:url(/images/logo.png) 0 0 no-repeat;
}
.nothing {
color: #ffffff;
font-size:20px;
text-decoration:none;
padding: 10px 0px 0px 0px;
}
.head-box1 {
padding-bottom:10px;
background-color: #F4F3F3;
}
.main {
width:960px;
padding:0;
margin:0 auto;
}
body{
color:#333;
position:relative;
min-width:980px;
font-family: Open Sans, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
text-transform: none;
background-color: #F4F3F3;
background-repeat: no-repeat;
background-position: center 0;
}
html,body{height:100%;}
p{padding-bottom:18px;}
a{
color:#333;
outline:none;
cursor:pointer;
text-decoration:none;
}
/*** MENU ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 5;
list-style: none;
}
nav {
float:right;
margin-right:10px;
padding-top:25px;
width:500px;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu li {
float: right;
position: relative;
margin-left:20px;
}
.sf-menu a {
display: block;
position: relative;
color:#CCCCCC;
text-transform:capitalize;
font-size:12px;
line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
color:#FFFFFF;
text-decoration:none;
}
.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
color:#1f4460;
}
.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
color:#58a5c4;
}
.sf-menu ul {
position: absolute;
top: -999em;
background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
width: 160px; /* left offset of submenus need to match (see below) */
padding-top: 19px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 0;
}
.sf-menu ul:after {
display:block;
position:absolute;
width:11px;
height:6px;
background:url(../images/marker1.png) no-repeat 0 0;
top:-6px;
left:14px;
content:' ';
}
.sf-menu ul ul:after {
display:block;
position:absolute;
width:5px;
height:9px;
background:url(../images/marker2.png) no-repeat 0 0;
top:13px;
left:-5px;
content:' ';
}
.sf-menu ul ul {
position: absolute;
top: -999em;
padding:10px 0 6px;
background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
width: 140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
margin:0 25 30px;
padding:20px 0 0px;
text-align:center;
}
.sf-menu ul a {
font-size:12px;
color:#fff;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: -17px;
top: 32px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 151px;
top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
The page is here http://dwhswebsite.com Trying to lock everything from the menu and above. So everything scrolls under it.
Thanks!
Your HTML markup is wrong. Your <header> includes much of your body content. Make the following changes.
Updated Header HTML, everything else should go below </header>
<header>
<div class="head-box1">
<div class="main">
<h1><a class="logo" href="index.html">pro web hosting</a></h1>
<nav>
<div style="text-align:right;"> <span class="link2">Account Manager | Cart | Register | Questions?</span><span class="phone"><br>
Call us: <strong>(213)984-HOST 24/7 Support</strong></span><span class="nothing"><br>
</span> </div>
</nav>
</div>
<div class="clear"></div>
</div>
<div id="cssmenu">
<ul>
<li class="active"><span>Home</span></li>
<li><span>Web Hosting</span></li>
<li><span>Reseller</span></li>
<li><span>Dedicated</span></li>
<li><span>Support</span></li>
<li><span>Affiliates</span></li>
<li class="last"><span>Why us</span></li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
position: fixed;
z-index: 2;
}
body {
top: 150px;
}
Related
I have been asked to look at this site http://www.edowa.org.au/ but can't find the problem.
The second level menu items are aligned correctly in IE10.0.5 and FF35.0.1 but not in Chrome (latest version). In Chrome the second level menu items are pushed to the right.
Here is the CSS
/* MAIN NAVIGATION - TABS
----------------------------------------- */
#nav {
clear:both;
width: 900px;
height: 29px;
margin: 0 auto;
padding:5px 20px 0 20px;
}
#nav ul {
width: 900px;
display: inline-table;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
}
*:first-child+html #nav li {
float: left;
}
*html #nav li {
float: left;
}
#nav li a {
border: 0;
display: block;
font-weight: bold;
font-size: 14px;
line-height: 29px;
color: #59523f;
text-decoration: none;
}
*:first-child+html #nav li a {
padding:0 33px;
}
#nav li a.current,
#nav li a:hover {
color: #FFFFFF;
background: url(../images/li-bg-hover.jpg) repeat-x;
}
/*_________second level menu__________*/
#nav li ul {
position: absolute;
z-index: 20;
width: 175px;
height: auto;
margin: 0;
padding: 0;
left: -999em;
}
#nav li ul li {
margin: 0;
padding: 0;
width: 175px;
min-height: 31px;
display:block;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: auto;
}
*:first-child+html #nav li:hover,
*:first-child+html #nav li li:hover,
*:first-child+html #nav li.sfhover,
*:first-child+html #nav li li.sfhover {
left: auto;
position: static;
}
#nav li ul li a {
padding: 0 10px;
display: block;
width: 175px !important;
line-height: 31px;
height:auto;
font-weight: normal;
font-size: 12px;
text-align: left;
color:#d6d4af;
background: url(../images/li-li-bg.png) repeat-x;
}
#nav li ul li a:hover {
color: #FFFFFF;
background: url(../images/li-li-bg-hover.png) repeat-x;
}
Here is the html
<div id="nav">
<ul>
<li><a href="/" class="current" >Home</a></li>
<li><a href="/meet-the-edo/" class="link" >Who We Are</a></li>
<li><a href="/services/" class="link" >What We Do</a>
<ul>
<li><a href="/services/legal-advice-2/" >Legal Advice</a></li>
</ul>
</li>
<li><a href="/discover/" class="link" >Discover</a>
<ul>
<li><a href="/discover/publications/" >Publications</a></li>
<li><a href="/discover/factsheets/" >Factsheets</a></li>
<li><a href="/discover/newsletters/" >Newsletters</a></li>
<li><a href="/discover/archive/" >Archive</a></li>
<li><a href="/discover/e-bulletins/" >E-Bulletins</a></li>
<li><a href="/discover/community-legal-education/" >Community Legal Education</a></li>
</ul>
</li>
<li><a href="/participate/" class="link" >Participate</a>
<ul>
<li><a href="/participate/join/" >Join</a></li>
<li><a href="/participate/donate/" >Donate</a></li>
<li><a href="/participate/volunteer/" >Volunteer</a></li>
<li><a href="/participate/jobs/" >Jobs</a></li>
</ul>
</li>
<li><a href="/links/" class="link" >Links</a></li>
<li><a href="/contact/" class="link" >Contact</a></li>
Any advice much appreciated.
Try changing your li left: auto; to left: 0; and add position: relative; to #nav li. Like this:
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
position: relative; /*Added*/
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0; /*Added*/
}
I've created a fiddle here (added colors for testing purposes).
I think it is a little mess within absolute positioning and "auto" value.
Please, try changing the following:
#nav li {
list-style: none;
display: table-cell;
text-align: center;
margin: 0;
padding: 0;
position: relative; /* new line */
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0; /* changed value */
}
It should do it on all major browsers.
#nav{
float : right;
/* or float = left */
}
I have created a dropdown list using css. The drop down list works perfect, opening the menu to down. How can I modified in order to open the menu to up (opposite direction)? make something like drop up list.
This is my html code.
<div id="menu">
<ul>
<li> <?php echo $user_data['name']; ?>
<ul>
<li>Logout</li>
<li>Change Password<li>
<li>Settings<li>
</ul>
</li>
<li> Profile
<ul>
<li>Edit Profile</li>
<li>View Profile</li>
</ul>
</li>
<li> Home </li>
</ul>
</div>
and this is my css.
#menu ul{
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li {
float:left;
}
#menu ul li a:hover{
background:#fff;
color:#333;
}
#menu ul li ul{
position:absolute;
height:0px;
overflow:hidden;
}
#menu ul li ul li{
float:none;
}
#menu ul li:hover ul{
overflow:visible;
}
#menu ul li:hover ul li a{
padding:10px;
}
#menu ul li ul li a{
-webkit-transition:0.3s;
-moz-transition:0.3s;
padding: 0px 10px;
}
http://codepen.io/bjornmeansbear/pen/MwGYZL
The following CSS should help you — it incorporates the "drop-up" and also cleans up a few other things...
#menu {
margin-top: 100px;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu > ul > li {
float: left;
margin: 10px;
position: relative;
}
#menu a { display: block;}
#menu a:hover {
background: #fff;
color: #333;
}
#menu ul li ul {
position: absolute;
height: 0px;
width: 250%;
overflow: hidden;
}
#menu ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
#menu li li a {
padding: 5px 10px;
}
#menu a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
padding: 0px 10px;
}
Basically, if you position the <li> that houses the child <ul> relatively, you can use the absolute position of the <ul> to position it anywhere based directly on its the parent... does that make sense?
I have horizontal menu with 2 sub level. When i move down i would like to keep the Top level menu in hover state.
I have create jsfiddle. link to the JsFiddle
Html Code is :
<div>
<ul id="nav">
<li>Home</li>
<li>Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
And Css code is
> body {
}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
opacity:1;
}
/* Targeting the first level menu */
#nav {
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
Can somebody guide me how to do that?
Thanks.
Change the selector from
#nav > li > a:hover
to
#nav > li:hover > a
And
#nav li ul li a:hover
to
#nav li ul li:hover > a
I have a problem with a vertical css menu with 3-level submenus.The last submenu isn't aligned as it should be and I don't know where's the problem.
Here's a demo http://jsfiddle.net/pPckk/1/
And if You can't open jsfiddle, here's the code:
<div id="global-nav">
<ul class='parent'>
<li class="smt">cat1</li>
<li class="c1">
<ul class='child child1'>
<li class="smt">cat1.1</li>
<li class="smt">cat1.2</li>
<li class="c1">
<ul class='child child2'>
<li class="smt">cat1.2.1</li>
<li class="c1">
<ul class='child child3'>
<li class="smt">cat1.2.1.1</li>
</ul>
</li>
</ul>
</li>
<li class="smt">cat1.3</li>
<li class="smt">cat1.4</li>
</ul>
</li>
<li class="smt">cat2</li>
<li class="c1">
<ul class='child child1'>
<li class="smt">cat2.1</li>
</ul>
</li>
</ul>
</div>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
Just add
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
and you are done...
Below is what I have and it is working perfect... Yipee!!! I did it first time and worked!!!
<html>
<head>
<style>
#nav, #nav ul {
line-height: 1.5em;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav a:link, #nav a:active, #nav a:visited {
background-color: #333333;
border: 1px solid #333333;
color: #FFFFFF;
display: block;
padding: 0 5px;
text-decoration: none;
}
#nav a:hover {
background-color: #FFFFFF;
color: #333333;
}
#nav li {
position: relative;
width: 100px;
}
#nav ul {
display: none;
left: 100px;
position: absolute;
width: 192px;
top:0;
}
#nav li ul a {
float: left;
width: 192px;
}
#nav ul ul {
top:0;
}
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
#nav li ul ul ul {
left: 192px;
top:0px;
margin: 0 0 0 13px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li>cat1<ul class="jaccordion">
<li>cat1.1<ul class="jaccordion"></ul></li>
<li>cat1.2<ul class="jaccordion">
<li>cat1.2.1<ul class="jaccordion">
<li>cat1.2.1.1<ul class="jaccordion"></ul></li></ul></li></ul></li>
<li>cat1.3<ul class="jaccordion"></ul></li>
</ul></li>
<li>cat2<ul class="jaccordion">
<li>cat2.1<ul class="jaccordion"></ul></li></ul></li>
</ul>
</body>
</html>
The problem is the following rule:
#nav li ul ul {
left: 192px;
top:25px;
margin: 0 0 0 13px;
}
since it not only applies to the second, but also to the third level.
Add a rule for your third level ul to correct that.
I suggest using classes on the uls in such menus: <ul class="first-level">...
This allows more precise styling and shortens the selectors.
I put in a lot of relative and z-index because it seems like that's what I need to do but I'm confused.
the HTML is:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body id="body">
<div id="wrap" class="opaque">
<!-- header n menu area -->
<div id="header">
<div id="logo">
<img src="images/logo.jpg" width="918" height="142" /> </div>
<div id="menu" >
<ul id="nav">
<li>HOME
<li>DOORS
<ul id="dropm">
<li><a href="pivot.html"> PIVOT </li>
<li> <a href="entry.html">ENTRY </li>
<li> <a href="bifold.html">BIFOLD </li>
<li> <a href="internal.html">INTERNAL </li>
</ul>
</li>
<li >WINDOWS</li>
<li > TIMBER FLOORING </li>
<li>STAIRCASES</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
#wrap {
background-color:#FFF;
width: 960px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/*header area*/
#logo {
width:940px;
padding-top: 20px;
padding-left: 20px;
}
#menu {
background-color: #990000;
height:40px;
margin-bottom:200px;
margin-bottom-color:none;
margin-left:auto;
margin-right:auto;
z-index:1;
position:relative;
}
* html #menu {
z-index:2;
height:35px;
}
#nav {
margin-left: 30px;
position:relative;
}
#nav li{
display: inline;
list-style: none;
color: #FFF;
margin-right: 10px;
padding-right:3px;
font-weight:bold;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li { /* all list items */
float: left;
position: relative;
}
#menu li {
display: inline;
list-style-type: none;
margin-right: 10px;
padding-right: 50px;
color: #ffffff;
padding: 10px 15px 8px 15px;
/* background-color:#2C5463;*/
position:relative;
float:left;
white-space: nowrap;
}
li ul {
display:none;
position: absolute;
top: 1.5em;
left: 0.2em;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
margin-top: -40px;
margin-left: -7px;
}
ul li a:hover, ul li a.hover {
background:#FF6600;
}
li:hover ul, li.hover ul {
display: block;
position:absolute;
font-size: 11px;
margin-top:20px;
margin-left:-5px;
text-align:left;
width: 40px;
}
* html li:hover ul, li.hover ul {
display: block;
position:absolute;
font-size: 11px;
margin-top:17px;
text-align:left;
width: 40px;
}
#nav li:hover li, #nav li.hover li {
float: left;
}
#nav li:hover, #nav li.hover {background:#CC6600; position:relative;}
#dropm { z-index:1000;}
#dropm li {
width:60px;
background:#990000;
}
#dropm li{
display:block;
list-style-type: none;
width:58px;
color: #FFF;
border-top: 1px solid #fffff;
color: #ffffff;
padding: 10px 15px 10px 15px;
background: #990000;
white-space: nowrap;
}
* html ul li { float: left; }
* html ul li a { height: 1%; }
Found it,
have to change the wmode to transparent