Submenu with z-index doesn't want to go over content - html

For some unknown reason z-index doesn't seem to work. I try to make the submenu. i.e. the 2nd bar. To go over the #content which it fails to do....
http://jsfiddle.net/PaD2v/
HTML
<html>
<head>
<title>Мэрия Skrillax-RP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="master.css" />
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="master.js"></script>
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="http://i.imgur.com/f2EWgQP.png?1"><p id="banner text"></div>
<ul id="navigation">
<li>Главная Страница</li>
<li>Задачи
<ul class="submenu">
<li>Охрана</li>
<li>Министерство Обороны</li>
<li>Министерство Юстиций</li>
<li>Министерство Культуры</li>
<li>Министрество</li>
</ul>
</li>
<li>Список Сотрудников
<ul class="submenu">
<li>Hello</li>
<li>Hello2</li>
</ul>
</li>
<li>Вакансии</li>
<li>Авторизация</li>
</ul>
<div id="content">
<p>Hello! Welcome to the www.mayor.freeiz.com!<br><br> Currently I am working on adding different types of information</p>
</div>
</div>
<div id="footer">Hello</div>
</body>
</html>
CSS
html {
height:;
}
body {
background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
background-attachment: fixed;
background-size: 100% 100%;
height:100%;
}
#wrapper {
width:1024px;
min-height: 100%;
margin:0 auto;
}
#banner {
height:216px;
}
#navigation {
position:relative;
list-style-type:none;
font-size: 18px;
background-color: orange;
font-family: 'EB Garamond', serif;
opacity:0.8;
z-index: 15000001;
}
#navigation>li {
float:left;
}
#navigation a {
display:block;
padding:10px 10px;
color:white;
font-weight: bold;
width:183.81px;
height:40px;
text-align: center;
background-color: blue;
border-left:1px solid black;
text-decoration:none;
}
#navigation a:hover {
background-color:white;
color:blue;
border-top:3px solid red;
opacity:0.9999;
margin-bottom: -3px;
}
#banner h1 {
font-size: 20px;
text-align: center;
position: relative;
top: 1024px;
}
#content {
position:relative;
height:500px;
background-color:white;
opacity:0.9;
clear: both;
z-index:1;
}
#content p{
position:relative;
top:6px;
font-size: 30px;
z-index:1;
}
#footer {
vertical-align: bottom;
background-color: orange;
width:1024px;
height:50px;
margin:0 auto;
}
.submenu {
display:none;
position:relative;
}
.submenu li {
border-top: 2px solid black;
}
#navigation li:hover .submenu {
display:block;
z-index:99999999999999999999999999999999999999;
}

instead of relative position in your .submenu use absolute position
css
.submenu {
display:none;
position:absolute;
}
working demo

Relative positioning doesn't take the element out of the normal document flow. Consequently, when it appears it takes up space like a normal div and pushes everything beneath it down.
To remove it from the normal document flow so that it just sits on top of everything, use position: absolute. In this case, the thing we want to sit on top of everything is the submenu, so apply it to .submenu.

Related

Background image of div wont show up

I have a div that I would like to fill with an image. It won't show up though.
Here is html:
<div id=services>
<p1>Services</p1>
<div id="test"></div>
</div>
Here is CSS:
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
This is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
body {
background: linear-gradient(#fff 30%, #CCFFFF );
margin-top:10px ;
margin-right:75px;
margin-left:75px;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#services {
height:450px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
h4 {
text-align:center;
margin: 60px;
font-weight:;
float:center;
}
#end {
height:200px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
There are a couple of ways to solve this issue.
You can specify both horizontal and vertical values for background size: property in your css. Try playing around with those values.
You can also try property values like auto and length.
Here's some code. Here I have set the width to auto and height to 100% so that the aspect ratio is maintained and the background scales automatically with the size of the div. Check it out.
#test {
background-image: url(https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
height:200px;
width:200px;
background-color: red;
}
<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
In your css file the url image must be enclosed in double quotes. Like this:
#test {
background-image: url("pics/chart.png"); /* <-- */
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}

Why it doesn't appear

Before 1 min I started in developing a website.
At first I started in making the position of the header fixed then I made the wrapper div that called "all" but this div didn't appear please give me a solution.
body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}
#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}
.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}
#logo {
float: left;
font-size: 40px;
color: white;
}
#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}
#all {
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>
Display your .all div with position: relative; and set a top value equals to the height of the header.
This is because if you do not set position: relative; it is being displayed taking as reference the parent(the webpage) so it is the reason why your .all div is displayed in the top-left corner of your webpage.
The header is displayed above of your .all div because it is fixed, and fixed elements goes out of the normal flow.
body {
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-family: Haettenschweiler;
}
#header {
height: 60px;
background: #363333;
position: fixed;
width: 100%;
}
.header {
margin-left: auto;
margin-right: auto;
width: 70%;
}
#logo {
float: left;
font-size: 40px;
color: white;
}
#menu {
float: right;
margin-right: 200px;
}
.menu{
list-style-type:none;
}
.menu li{
float:right;
font-size:24px;
display:block;
min-width:125px;
text-align:center;
margin-left:5px;
}
.menu li a{
min-width:125px;
display:block;
color:white;
text-decoration:none;
}
#all {
position: relative;
top: 60px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family: Gloucester MT;
}
#left{
float:left;
background:yellow;
width:13%;
}
#right{
float:right;
background:yellow;
width:13%;
}
#center{
margin-left:auto;
margin-right:auto;
background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div class="header">
<div id="logo">1111</div>
<div id="menu">
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div id="all">
<div id="left">sadf</div>
<div id="right">sasadf</div>
<div id="center">sadf</div>
</div>
</body>
</html>
The #all div is sitting behind the #header div.
It's concealed by the height of this div because when you set an element's position to absolute or fixed you're taking it out of the flow of the document.
Declaring a padding-top rule, equal to, or great than the height of #header will push #all down far enough into view.
Example:
#all {
padding-top: 60px;
}
In-browser Developing & Troubleshooting Tip
If you inspect these elements through your browser's developer tool you can see how they stack in relation to each other. For example, chrome will highlight the element on your screen when you hover over the mark-up of said element in the developer tool console/IDE.
Because your #header div has position:fixed it will not affect the positioning of other elements (i.e #all div). So the divs get rendered on top of each others. Try removing position:fixed from header if there's no need for it. Otherwise you have to manually move the #all div downwards a bit.

Removing the top margin on a page

I can't seem to remove this bit of space at the top of my page, I've tried a number of things and read around. The only thing that seems to work is *{margin:0}, but I don't really want to do that. Anyone have some insight on what the problem is here?
You can view the page in question here: http://www.ryanlaurence.com/new/
HTML
<!DOCTYPE html>
<html>
<head>
<link href="Style.css" rel="stylesheet">
</head>
<body>
<div id = "Banner">
<p>Banner</p>
</div>
<div id = "Nav">
<div id="stripe"></div>
<ul>
<li> Link - </li>
<li> Link - </li>
<li> Link - </li>
<li> Link </li>
</ul>
</div>
<div class="Content">
<div></div>
</div>
<div id="Footer">
</div>
</body>
</html>
CSS
body, html{
background-color: #404040;
margin: 0;
padding: 0;
}
#Banner{
background-color: #333333;
height:200px;
top:0px;
}
#stripe{
height: 10px;
top: -14px;
position:relative;
background-color: #262626
}
#Nav{
width:100%;
height: 60px;
background-color: #262626;
}
#Nav ul{
margin: 0;
color: gray;
position: relative;
text-align: center;
}
#Nav ul li{
display: inline;
}
#Nav ul a{
color: gray;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
font-size: 25px;
font-family: "Orator Std", verdana;
text-align: center;
}
#Nav ul li a:hover{
color: white;
}
.Content{
background-color: #333333;
/*height: 800px;*/
position: relative;
top: 5px;
}
.Content div{
height:800px;
}
#Footer{
background-color:#57B4CC;
height:150px;
}
Add the CSS:
#Banner p {margin:0}
The paragraph in your banner div has a default margin that you want to get rid of.
I tried to give margin-top: -7px. It worked. But not sure why its has some space over there.
Some elements and browsers has some default styles that you need to overwrite to meet your needs.
I suggest you to use CSS reset script by Eric Meyer.
This is not only fix your problem but also help you to prevent and save a lot of time from dealing with cross browser compatibility problems in the future.
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:none
}
table {
border-collapse:collapse;
border-spacing: 0
}
Fiddle Demo

how to get page to stop vertical scroll?

I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do.
This is the page source:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>
<script type="text/javascript">
/** var images = [
"/content/images/bghome.jpg",
"/content/images/background.jpg"
];
var index = 0;
$.backstretch(images[index], { speed: 500 });
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>
<div class="menu-link">
<ul>
<li>
home
</li>
<li>
profile
</li>
<li>
portfolio
</li>
<li>
news
</li>
<li>
current projects
</li>
<li class="on">
awards
</li>
<li>
contact
</li>
</ul> </div>
<div id="left-sidebar">
<div id ="logo">
<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p>
</div>
<div id ="foot">
<ul>
<li>
Privacy
</li>
<li>
Sitemap
</li>
<li class="last">
Terms & Conditions
</li>
</ul>
© 2012 SH Structures. All rights reserved. <image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p>
<br><br>
</div>
</div>
</div>
</html>
Css:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
/* IE6 Fix */
* html div#body {
overflow: visible;
}
div#container {
height: 100%;
height: auto !important;
background: url("left-sidebar-back.gif") repeat-y top left;
}
div#main {
overflow: auto;
padding-bottom: 100px;
}
div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}
div#body {
overflow: hidden;
height: 100%;
}
div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;
height:100%;
color:White;
}
div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;
color:White;
}
div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}
div#footer {
background: #ba6f19;
border-top: 1px solid #000;
position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}
div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%;
margin-left:auto;
margin-right:auto;
background:black;
}
.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}
.menu-link ul {
padding:0px 0px 0px 20px;
}
.menu-link ul li
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}
.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block;
text-align:center;
}
.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer;
}
.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}
/** Side Menu **/
.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.sideMenu h4{
display:none;
}
/** Footer **/
#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}
#foot li a
{
padding: 10px 0px 10px 0px;
color:#fff;
text-decoration:none;
}
Am i missing something obvious? thanks
It's hard to tell exactly what you're asking, but if all you want to do is disable scrolling the page, you first need to add a <body> tag and give it the following style properties:
<body style="overflow:hidden;">
<!-- Page contents -->
</body>
$('body').on('touchmove', function (event) {
event.preventDefault();
});
this might work

Center a ul within a div (within a div) which itself is centered on the page

I'm attempting to center my CSS menu but I'm having issues, basically I'd like it to be in the center of my content div. Currently it's displaying from the left. Does anyone know what I would have to add to achieve what I want? Below is my code.
My index.html
<head>
<meta content="en-ie" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain">
<div id="header">
<p><img alt="" height="67" src="header.png" width="431" /><br />
</p>
</div>
<div id="tabs">
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer" style="width: 93px; height: 12px">
</div>
</body>
</html>
My style.css
body{
background-color: #292929;
}
p{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
}
h2{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
}
a:link {
COLOR: #00CCFF;
}
a:visited {
COLOR: #00CCFF;
}
a:hover {
COLOR: #00CCFF;
}
a:active {
COLOR: #00CCFF;
}
/* DIV's */
#contain {
background-color:#444343;
width: 700px;
margin-left: auto ;
margin-right: auto ;
opacity: .5;
}
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#content {
float: left;
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#footer {
color: white;
font-size:10px;
width: 11px;
margin-left: auto ;
margin-right: auto ;
}
#tabs {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #292929;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
you can set a fixed width for the #tabs ul (for example width:200px; ) and then you change the margin:0; to margin:0 auto; for #tabs ul
If I got it right, you need horizontal centering of block of unknown width. I see two approaches:
Simple one: you will omit all the fancy markup of your tabs and preserve just inline links in inline LIs and add display: block; to your #tabs ul rule. No floating, no blocks within menu, just plain inline text. This will work, but will no be much 'styllable'. pastebin.me/58fe73dd82496444fd7e129fc5830b4b
Complex one: add extra wrap around your ul, so you'll got #tabs #tabs-in ul li …
#tabs {
float:left;
width:100%;
position: relative;
}
#tabs-in {
position: relative;
float: left;
left: 50%;
}
#tabs ul {
margin:0;
padding:0;
list-style:none;
text-align: center;
display: block;
overflow: hidden;
float: left;
position: relative;
left: -50%;
}
#tabs li {
display:block;
float: left;
margin:0;
padding:0;
}
http://pastebin.me/23c1b8a60657962f1d8c8baef2700473 This old "move it half parents width right and then it move half its own width left" trick works quite well. But good luck styling it further and keeping it cross-browser compatible :]