How to change logo color on scroll and on hover - colors

Need to change the logo color on hover, than change it on scroll.
I got it to change on hover, but having trouble changing it on scroll. Can someone please look at my JSFiddle and help?
Maybe it's just the classes that are clashing or my JS logic, maybe I need to step off and let my brain refresh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.newROInav {
padding: 40px;
width: 100%;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
.newROInav:hover {
background-color: white;
}
.light {
display: block;
}
.dark {
display: none;
}
.newROInav:hover div[class="dark"] {
display: block;
}
.newROInav:hover div[class="light"] {
display: none;
}
$color-darkgreen: #006072;
html,
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
width: 100vw;
height: 1000vw;
}
body p {
padding: 40px;
}
.sticky-top {
position: sticky;
top: 0px;
z-index: 1020;
}
ul,
li {
padding: 0;
margin: 0;
}
main {
transition: background-color 0.3s ease;
background-color: $color-darkgreen;
margin: 0;
padding: 0;
position: fixed;
text-align: center;
top: 0;
width: 100vw;
ul {
width: 100%;
height: 100%;
position: relative;
padding: 30px;
li {
display: inline;
top: 50%;
padding: 2rem;
a {
color: #fff;
}
}
}
&.inverted {
background-color: #fff;
box-shadow: 0 3px 5px 0.3px rgba(0, 0, 0, 0.1);
a {
color: $color-darkgreen;
}
}
}
</style>
<main class="newROInav sticky-top">
<div class="test">
<div class="dark">
<ul>
<li><img src="http://newnavstg.wpengine.com/wp-content/uploads/logo-dark.svg" /></li>
</ul>
</div>
<div class="light">
<ul>
<li><img src="http://newnavstg.wpengine.com/wp-content/uploads/logo.svg" /></li>
</ul>
</div>
</div>
</main>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa reiciendis quas, optio ullam debitis adipisci et
voluptates tenetur? Dolor ea optio aspernatur? Aspernatur, omnis ea consequuntur cum quod asperiores veniam.
</p>
<script>
var className = "inverted";
var scrollTrigger = 60;
window.onscroll = function() {
// We add pageYOffset for compatibility with IE.
if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
document.getElementsByTagName("main")[0].classList.add(className);
} else {
document.getElementsByTagName("main")[0].classList.remove(className);
}
};
</script>

Related

Hambuger Menu (Responsive) does not open on mobile safari (of iPhone 6)

i tested the following responsive menu and it does not open with an iPhone 6 Safari:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Hamburger-Menü Test</title>
<style>
*,::before,::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
body {
margin: 0;
font-size:100%;
background: #f6f8f9;
}
nav {
display: flex;
height: 80px;
width: 100%;
background: #1c3464;
align-items: center;
padding: 0 50px 0 50px;
flex-wrap: wrap;
overflow: hidden;
position: fixed;
top: 0;
z-index:200000;
border-bottom: 4px solid #9acd32;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
position:absolute;
right:20px;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.1em;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
nav ul li a.active{
color: #111;
background: #fff;
}
nav ul li a:hover {
background:#526788;
}
nav .menu-btn img{
color: #fff;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
#media (max-width: 1200px) {
nav{
padding: 0px 10px 0px 20px;
}
.menu-btn {
position:absolute;
right:20px;
}
nav .menu-btn img{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #173460;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
z-index:200000;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 1.3em;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: cyan;
}
}
</style>
</head>
<body>
<nav >
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII=">
</label>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
Hello world!
</body>
</html>
I tested also with a few my Samsung (Android) devices (Chrome)
Also with Windows (different browsers) and it works on all of them.
Any idea, what i can add so that safari will also work?
Please help ;-(
Best wishes
Daniel

z-index is not working even though position absolute is mentioned?

I'm trying to put overlay on top of showcase image and putting back texts on image on top of overlay using z-index, but z-index: 1 is not working. Position absolute is added and then z-index:1 to create overlay effect but nothing is happening. Can someone check, what's going on here?
I have set position absolute and given its top ,left position for overlay
<!DOCTYPE html>
<html>
<head>
<title>My website2</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h2 > <span class="coral">Acme</span> Web Design</h2>
<nav>
<ul class="my-list">
<li >
<a class="coral" href="#"> HOME</a>
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h2>Lorem ipsum dolor sit amet consectetur
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
</p>
</div>
</section>
</body>
</html>
.container{
width:80%;
margin: auto;
overflow: hidden;
}
header{
background-color: #35424a;
color: #fff;
min-height: 45px;
padding-top: 20px;
border-bottom: 3px solid coral;
}
header ul{
margin:0;
padding:0;
}
header li{
display: inline;
list-style: none;
padding:0 15px 0 15px ;
}
header h2{
float: left;
}
header nav{
float:right;
}
header h2{
margin: 0;
}
.coral{
color:coral;
}
#showcase{
background-image: url("images/showcase2.jpg");
background-position: center right;
min-height: 300px;
text-align: center;
color: #fff;
}
#showcase::after {
content: "";
position: absolute;
top:68px;
left:0;
width: 100%;
min-height:300px;
background-color: rgba(78, 89, 107, 0.6);
}
#showcase {
z-index:1;
}

It got solved now. Z-index need to be added on container class which contains h2 and p tags.
#showcase{
position: relative;
background-image:url("images/showcase.jpg") ;
background-size:cover;
background-repeat: no-repeat;
background-position: center right;
min-height: 300px;
text-align: center;
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
#showcase::after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
min-height:300px;
background-color: rgba(78, 89, 107, 0.8);
}
.container{
z-index: 10;
}

Subitems in main menu uncentered

for some reason the subitems are not in the middle, looks like they have a margin left for some reason. Can you tell me what is wrong and how to fix it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Menu Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS-1.css">
</head>
<body>
<ul class="egmenu">
<li>Home</li>
<li>
Products
<ul>
<li>Computers</li>
<li>Phones</li>
<li>Tablets</li>
<li>Other</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
And here is the CSS:
body {
margin: 0;
padding: 0;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
}
ul.egmenu > li {
float: left;
position: relative;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu ul li {
text-align: center;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
width: 100%;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
}
ul.egmenu li { list-style: none; }
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
P.S. It would also be nice if you tell me where can i find some lessons or anything to fix my understanding of CSS, as it appears that codecademy is not enough.

You have missed some of the important attributes, i recreated your navbar
Here's the JSFiddle:https://jsfiddle.net/y2641f0w/3/
HTML
<body>
<ul class="egmenu">
<li>Home</li>
<li>
Products
<ul>
<li>Computers</li>
<li>Phones</li>
<li>Tablets</li>
<li>Other</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
CSS
body {
margin: 0;
padding: 0;
}
ul.egmenu{
background: #333;
height: 30px;
width: 100%;
}
ul.egmenu ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
ul.egmenu li {
font-size: 25px;
line-height: 30px;
text-align: left;
}
ul.egmenu a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
ul.egmenu a:hover {
background-color: #555;
}
ul.egmenu a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
ul.egmenu li li {
font-size: 15px;
}
#media screen and (min-width: 650px) {
ul.egmenu li {
width: 130px;
border-bottom: none;
height: 30px;
line-height: 30px;
font-size: 15px;
display: inline-block;
margin-right: -4px;
}
ul.egmenu a {
border-bottom: none;
}
ul.egmenu > ul > li {
text-align: center;
}
ul.egmenu > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
ul.egmenu li ul {
position: absolute;
display: none;
width: inherit;
}
ul.egmenu li:hover ul {
display: block;
}
ul.egmenu li ul li {
display: block;
}
}
You can refer to followings to get more knowledge about NavBars
w3Schools
CSS Menumaker

Why is my node.js etcd client getting html

My etcd instance is running locally and I can perform get and set using the cli
// set
etcdctl set /services/myservice "{\"hostname\": \"127.0.0.1\", \"port\": 3000}"
//get
etcdctl get services/myservice
// results in -> {"hostname": "127.0.0.1", "port": 3000}
but when I use the node-etc module
var Etcd = require('node-etcd');
var etcd = new Etcd(['http://localhost:2379', 'http://localhost:4001']);
etc.get('services/myservice', { wait: true}, function (err, value){
console.log(err, value);
});
I get value is HTML (see below) instead of the same result as the cli. This was working a few weeks ago so I am not sure if I have
I also find that when I don't include hosts and just use new Etcd() I get an internal HTML page with references to proxy issues: "The requested website is blocked by [insert company name] Proxy due to potential malicious activity or other security reasons."
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-adblockkey="MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKrfIMFkSaoTSqKmC+BrghK0CpDHc0MuVzmMHin8LIORhpXbped+iYhSnZurWnEO0zcKcVIrzp026LVc5pMB9bUCAwEAAQ==_mHzvOc3GBNo9sxVki+5Fe+E9GsbiT2+mBIEtU+yAIW6jw6Uds6VUD5RSkqMfuUSrcw4AYCrFOWaaWSRGDzU8pw==">
<head>
<script type="text/javascript">
var abp;
</script>
<script type="text/javascript" src="http://www.http.com/px.js?ch=1"></script>
<script type="text/javascript" src="http://www.http.com/px.js?ch=2"></script>
<script type="text/javascript">
function handleABPDetect() {
try {
var imglog = document.createElement("img");
imglog.src = "http://www.http.com/rg-logabpstatus.php?a=WVpqOEdZZldDTWo4VWF0M0pNa1pBek0xQnE1WVlqR2VaQ0Frd0V4TUxmcDAvOFN2WnhHYS8weFFEeTZTRHlleTM0UFk3UDhzemxqSWFRdXlFdXpIUGc9PQ==&b=" + abp;
document.body.appendChild(imglog);
} catch (err) {}
}
try {
window.onload = handleABPDetect();
} catch (err) {}
</script>
<title>http.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable = no">
<style type="text/css">
* {
margin: 0;
padding: 0
}
a {
text-decoration: none;
outline: none
}
a:hover {
text-indent: 0;
cursor: pointer
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0
}
* html .clearfix {
zoom: 1
}
*:first-child+html .clearfix {
zoom: 1
}
body {
font-family: Arial, Helvetica, sans-serif;
background: url(http://c.rmgserving.com/rmgpsc/7867/body-bg.gif) 0 0 repeat #000
}
/*.arrows{background:url(http://b.rmgserving.com/rmgpsc/7867/arrows.jpg)}*/
#main-wrap {
background: url(http://a.rmgserving.com/rmgpsc/7867/header-bg.jpg) top center no-repeat;
background-size: 100% 100px
}
.container {
width: 960px;
margin: 0 auto
}
.header {
height: 100px
}
/*commented for new design */
/*.leftblk{float:left; overflow:hidden}
.leftblk img{float: left; margin-top: 23px; padding-right: 15px;}*/
/*.domain_name{float:left; line-height:100px; font-size:26px; font-weight:normal; color:#fff}*/
.searchbox {
float: right;
width: 410px;
* width: 420px;
_width: 420px;
height: 28px !important;
padding-top: 2px;
margin-top: 35px;
/*padding-left:33px;background:url(http://d.rmgserving.com/rmgpsc/7868/srch-bg-caf2.gif) 0 0 no-repeat*/
}
.content {
padding-bottom: 10px;
background: #202020
}
/**RESPOSIVE CHANGES MADE HERE**/
.domain_name {
line-height: normal;
font-size: 26px;
font-weight: normal;
color: #fff;
margin-top: 35px
}
.leftblk {
float: left;
width: 39%;
word-wrap: break-word;
background: url(http://c.rmgserving.com/rmgpsc/7867/logo1.png) no-repeat center left;
padding-left: 70px;
height: 100px;
overflow: hidden;
}
.frt_arr {
float: left;
width: 30%;
height: 425px;
background: url(http://d.rmgserving.com/rmgpsc/7983/frst_arr.jpg);
background-position: 10px 70px;
background-repeat: no-repeat;
background-size: 90%
}
.lst_arr {
float: left;
width: 30%;
height: 425px;
background: url(http://b.rmgserving.com/rmgpsc/7983/last_arr.jpg);
background-position: 0px 70px;
background-repeat: no-repeat;
background-size: 90%
}
.kwd_bloack {
float: left;
width: 40%;
margin-top: 74px
}
/**RESPOSIVE CHANGES END HERE**/
.bottom_bg {
height: 44px;
/*background:#181818; */
margin-top: 34px
}
.bottom_rs {
width: 960px;
height: 44px;
overflow: hidden;
margin: 0 auto;
position: relative
}
#bot_rs {
padding-top: 9px
}
.separator {
position: absolute;
top: 0;
left: 156px;
width: 5px;
height: 44px;
border-left: 2px solid #282828;
background: url(http://a.rmgserving.com/rmgpsc/7867/sep-arw.gif) center center no-repeat
}
.footer-nav {
width: 100%;
height: 74px;
text-align: center;
color: #c0c0c0;
}
.footer-nav a {
font-size: 12px;
line-height: 74px;
color: #c0c0c0;
padding: 0 5px;
text-decoration: underline
}
.footer-nav a:hover {
text-decoration: none
}
.inquire {
text-align: right;
padding-top: 10px;
color: #fff
}
.inquire a {
font-size: 12px;
font-weight: normal;
color: #fff
}
.sale-msg {
background: #fff;
color: #4b4b4b;
text-align: center;
font-size: 14px;
width: 100%;
top: 0;
left: 0
}
.sale-msg a {
text-decoration: none;
color: #079ce9;
font-size: 14px;
}
.sale-msg a:hover,
.bottom_rs ul li a:hover,
.mid_rs ul li a:hover,
.inquire a:hover {
text-decoration: underline
}
#media not all and (min-width: 970px) {
.container {
width: 95%
}
.bottom_bg {
display: none
}
.footer-nav a {
line-height: 45px
}
}
#media not all and (min-width: 840px) {
.frt_arr {
display: none
}
.lst_arr {
display: none
}
.kwd_bloack {
float: none;
width: 95%;
margin: 0 auto;
padding-top: 10px
}
.leftblk {
float: none;
height: 50px;
background-size: 35px;
padding-left: 50px;
width: auto
}
.domain_name {
line-height: normal;
font-size: 20px;
margin-top: 0;
padding-top: 15px
}
.searchbox {
float: none;
margin-top: 10px;
padding-top: 0;
width: auto;
}
}
</style>
<script type="text/javascript" src="http://www.google.com/adsense/domains/caf.js"></script>
</head>
<body onload="" onunload="" onBeforeUnload="">
<noscript>
<meta http-equiv="refresh" content="0;url=http://www.http.com/rg-erdr.php?_rpo=t ntZzFFI&_rdm=9f1NJXf43BJvmfNf4.JvV&p=J1c4gcvmfN9ffFGoFgXoYVa%7C%40%7CbzGzTE%2C5f95zbT%2C5f95Et%7C%40%7CX55g.JvV%7C%40%7C%7C%40%7C%7C%40%7CZzbHzEZHE%7C%40%7CzHZZFTH%7C%40%7CK-%7C%40%7C19c4NW4cGFHzTEtTEGZGzTbT%7C%40%7Ct+nh8llbj%7C%40%7Ct+7zFZKFH&ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO&t=gnojs" />
<center>
<p style="padding:1em; font-size:1.5em;">For search results please CLICK HERE.</p>
</center>
</noscript>
<script type="text/javascript" language="javascript">
function __gpup(url, height, width, name) {
sw = window.open(url, name, 'height=' + height + ',width=' + width + ',location=no,toolbar=0,resizable=1,scrollbars=1');
if (window.focus) {
sw.focus()
};
return false;
};
</script>
<script text="text/javascript">
var design = {
'pageOptions': {
'pubId': '',
'resultsPageBaseUrl': '',
'fontFamily': 'arial',
'hl': 'en',
'maxTermLength': 29,
'adtest': 'on',
'clicktrackUrl': '',
'fontFamilyAttribution': 'arial',
'type': 'pageoptions',
'pageLoadedCallback': function(requestAccepted, status) {
document.body.style.visibility = 'visible';
if (!requestAccepted) {}
}
},
'searchboxBlock': {
'container': 'searchbox',
'type': 'searchbox',
'fontSizeSearchInput': 16,
'fontSizeSearchButton': 13,
'widthSearchInput': 215,
'colorSearchButton': '#e2e2e2',
'hideSearchInputBorder': false,
'hideSearchButtonBorder': false
},
'mainrs': {
'container': 'main_rs',
'type': 'relatedsearch',
'colorBackground': 'transparent',
'number': 6,
'fontSizeTitle': 19,
'titleBold': true,
'colorTitleLink': '#079ce9',
'noTitleUnderline': false,
'lineHeightTitle': 30,
'fontFamily': 'arial',
'horizontalAlignment': 'center',
'fontSizeAttribution': 13,
'colorAttribution': '#ababab',
'attributionBold': true,
'attributionUppercase': false,
'attributionSpacingBelow': 36,
'rolloverLinkUnderline': false,
'rolloverLinkColor': '#00c800',
'colorAdSeparator': '#202020'
}
};
</script>
<div id="main-wrap" class="clearfix">
<div class="container clearfix">
<div class="header clearfix">
<div class="leftblk">
<!-- <img src="http://c.rmgserving.com/rmgpsc/7867/logo1.png" /> -->
<h3 class="domain_name">http.com</h3>
</div>
<div class="searchbox clearfix" id="searchbox"></div>
</div>
<div class="content clearfix">
<div class="arrows frt_arr"></div>
<div class="kwd_bloack clearfix" id="main_rs"></div>
<div class="arrows lst_arr"></div>
</div>
</div>
<div class="bottom_bg clearfix">
<div class="bottom_rs clearfix">
<!--<span class="separator"></span>-->
</div>
</div>
<div class="footer-nav">
Privacy Policy </div>
</div>
<script type="text/javascript" language="javascript">
window._debug = false;
window._dumpdata = false;
var _cflp = true;
var pgld = true;
var totRS = -1;
var cntRS = 0;
var _cfstc = false;
var _cfblocker = true;
var _cfrg = true;
var _cfHelp = _cfHelp || {};
_cfHelp.design = design || {};
_cfHelp.servVars = {
"webadfl": "webads.php",
"_clhdl": "http:\/\/www.http.com\/rg-cltrack.php?&gr=%5B%7Crdr_url%7C%5D&gm=1WHI0lwrG0Sxkx4PsD8qyCOUd1dkaI2X1l8SGG1fMSd7bfeWMBF%2FyegsqR%2BZliS%2FkmMLg273bT8VsQ1oofKDtwu2BLulOOE9e9f%2FGbKVB3y9mwzTRLUiokCVqtb5Zk84C2EVcNaF2G3r9Bp3RsH1xfXrZC%2BE8YGoveyKL4ONQKcLbTlODzh%2BgHyFxmaFdMqH&gc=11101851242258318844884&gi=XYb9MaQozttVcq86LfylD8RNPuvlew8QArHjQzucy26g%2BlAY%2F2uHYh%2BA6ff50kcc1PxTBiLUWCU4jHCv3wduaWHfl%2Fk8mkRKtWu8EB0jglLzw7eeSqi3ynxhbG7655Fy%2FLKMke6nBiTt%2FuiCvqlrvF1W%2F0MGzePy07JWvEsPuPqNBujvQaw3gGby3VkjIxfm2atlkRoPbyOyKYholPIgVyyBcIBJQvM3kSCiRXOyaMpxjTprto%2B0LbFQmRT0%2Bv05GchdCqw0KwcBJr1GshmWISk5vXG28qmhuRBFtwmFZTdpEHObgOZuOhjtcRKzp6QcLHJxeH43ucmzlzBBC8rUhA%3D%3D",
"kchst": "http:\/\/www.http.com\/",
"kcpg": "render",
"kcprm": "ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO&gqsg=4OVo54jg6Fc8v4dgaRWvLlUoQfiT9l0g4KypdpyKIkp3XttitvahDJPyd8JV8AMP&maxads=0&gerf=NIVtBZ66fMb06L%2FzgSYcSUpDtBcVFLddp21rUKg8Zvs%3D&wait=true",
"jtchdl": "0",
"lkwtkn": null,
"qry": null,
"cntry": "IE",
"prvid": 1566375,
"lgky": "VFJIcUJEQUZtMGQ3dVY0amZaMmFIVi8vL2g2WUVmRkQxNVp6eEJRcSs1WFl3K3cvZFFISS9aN1Y4NE1KamNIUi95TW04Q3p6ek9RejR1N1pRemlJS1hORjIzNEF2Z3d3TGkyUGhGNkJxREdyRDJLNzZoWVMraXd0cFZGK1hiWTY5aGNYRTlmOHlDa3E5bmpLTHRtelJ3PT0%3D",
"_aftrprss": "",
"wclhdl": "http:\/\/www.http.com\/webclk?&gr=%5B%7Crdr_url%7C%5D&gm=N3DjGjxerDa%2B8Ln3%2B884CDaIWdGzXLcE6PGovrvm8cwEqFKj9%2FsSAw13RemOENdu59z53RIAX7qKedB%2BbC7k6lI6gFbOxQR7qkhujpZqsJMhUo0JnsgwBv6eY8R4QxT34RDgzTHG7pSdzqCdYGLMkjkrWeoByyf1I3drNmqLJoXF8CRTdNMoZwb5HxP8G2KL&gc=11101851242258318844501&gi=3asGzSvNXUezIegH6SkVMB9oHMTe%2BRtyB0XjQzqrg%2BegxXIIXBBR%2FNpmg%2FEpOC3SbbpbaUmlcSRdngRk3viiaUqqjkydC5SRcNAQIHAVCSz4CcvOsJgD4kJKepiaVN2MkCXSlbZfRbnV4Lj3QWLNCEpoUpJaD8GoKU2ZiKd%2B2wDKToaj236za8yEZZnAejv7CqvZi7bAnoT7LFHAT4YfVQYDvpwbpObRothY86AABfVVWr%2BDuudu2Z1HgnO7kRUJx945jHKd%2BHgj7szCxsb6xBb7wBlUblacTda5uwQKPLtiF5n7ChXCCJTf%2BYsC%2FDDegcmi71Z8FBC6SLSZ%2FYvsJQ%3D%3D",
"is_webad_enabled": 0,
"loaderimage": "http:\/\/c.rmgserving.com\/rmgisc\/loader.gif",
"_afdad": 1,
"noredir": 0,
"erpub": "oversee11_3ph_adult_xml",
"erch": "372",
"erpubcln": "ca-dp-oversee11_3ph_xml",
"erchcln": "000307",
"ghu": "http:\/\/www.http.com\/rg-erdr.php?_rpo=t ntZzFFI&_rdm=9f1NJXf43BJvmfNf4.JvV&p=J1c4gcvmfN9ffFGoFgXoYVa%7C%40%7CbzGzTE%2C5f95zbT%2C5f95Et%7C%40%7CX55g.JvV%7C%40%7C%7C%40%7C%7C%40%7CZzbHzEZHE%7C%40%7CzHZZFTH%7C%40%7CK-%7C%40%7C19c4NW4cGFHzTEtTEGZGzTbT%7C%40%7Ct+nh8llbj%7C%40%7Ct+7zFZKFH&ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO"
};
_cfHelp.newOpts = {
"pageoptions": {
"kw": "http",
"pubId": "dp-oversee32_3ph_xml",
"channel": "012174,test107,test49",
"hl": "",
"adtest": "off",
"resultsPageBaseUrl": "http:\/\/www.http.com\/?ga=5rKI1sSSBwFmmNY4RDXg%2BB7VS0yzNgnQ9JpHpsLHSsvFu0NyshpFxWu0exObFAo5IdFZQrTZujcZjrXONxp3PxtPV7ezER14zh7kWG69e5lf08niAgSfUKiyBSByBIQgw92X314XjQy5h09a65wi7JIhzrLV0PReUb%2F7SMvquCNLeg70qvVfr7kkYTx9Z4NO&gqsg=4OVo54jg6Fc8v4dgaRWvLlUoQfiT9l0g4KypdpyKIkp3XttitvahDJPyd8JV8AMP&maxads=0&gerf=1NwSv6zgpkznlToCcC1LUPxAge73x0kzNUyoFwPpLQw%3D&wait=true",
"clicktrackUrl": "http:\/\/www.http.com\/rg-cltrack.php?&gr=http%3A%2F%2Fgoogle.com%2F%3FRMGcaf%261437578625&gm=lCHzRGQVmF5GbI%2FoJNvHO9F0H1pK6b4imVg4sD83gr0zwhCg7kUY7A5JisFIua0ovWZYB4g4CbZlK6DDWhXlYS%2FoGwafEe2w6vLAAhtarOqSrags%2FXIb7w%2BHM0BEJgeyKmMXhVQya9xYRoVUupKo7SfWKOP26QW4BeaSRA7pvaleohDknqEJ8irgK41FOPBr&gc=11101851242258318844252&gi=dqJeJ2LIBm6EoVjrQxF%2FslKeVO2MMfAIGz5LwKTbfKTDn9L7haFS7W3vKNwbjSGhC5JthqkexETQM8mEun%2F4M5TCzM0Vphb237zGYUpoBtB1%2BdaJoSRcYUFKnr9lF6i32soKngUvevO7DHx9BHSz7sCMXYPLkJicrRb7WxfYNRWz0plNCCbrW8HYaPbhclR9gVbhSwIUdzpMjwGFrNyh%2B9iqRYF%2BX0wFzLunKbgTnLdmXJuP0Vm%2BjkU%2BC4rprcocV7pcHhlR0%2FKP2vHSKAlWTPcuCA9P04LbPqttMcdlol%2Fpm%2BAeIg79dx%2Bb28yVLKBEpMifhq6%2BT%2B2LndQdLFX%2FCoMvHjee%2BMfVwkRgY8%2F9hqFI%2B9UvBLgcgjCtTYSruCn7",
"domainRegistrant": "as-drid-2351749742621707",
"optimizeTerms": false,
"terms": "[\"Domain Registration\",\"Network Monitoring\",\"Email Hosting\",\"Website Hosting\",\"Network Monitoring Software\",\"High Speed internet\",\"Cable Internet\",\"Broadband Internet\",\"Web Security\",\"Dial-Up Internet\",\"Wireless Internet Providers\",\"Unlimited Broadband\",\"Internet Speed Check\",\"Compare Broadband\",\"Cheap Internet Service\",\"Best Broadband Deals\",\"Internet Solutions\",\"Internet Music\",\"Internet Help\",\"Internet Telephony\",\"Business Internet Providers\",\"Broadband Availability\",\"Prepaid Wireless Internet\",\"Internet Florists\",\"Mobile Wireless Internet\"]",
"uiOptimize": false,
"domainName": "http.com"
},
"relatedsearch": {
"adLoadedCallback": function(cnm, ld) {
if (pgld && !ld && _cfrg && !_cfstc && _cflp) {
cntRS++;
if (cntRS >= totRS && totRS != -1) {
window.location = "http://www.http.com/?_stc_=1"
}
}
}
},
"textads": {
"adLoadedCallback": function(cnm, ld) {}
},
"imagead": {
"adLoadedCallback": function(cnm, ld) {}
},
"ads": {
"adLoadedCallback": function(cnm, ld) {}
}
};
_cfHelp.newOpts.pageoptions["pageLoadedCallback"] = function(requestAccepted, status) {
this.onPageLoad(requestAccepted, status);
_cfblocker = false
};
try {
if (abp) {
_cfHelp.newOpts.pageoptions['channel'] = _cfHelp.newOpts.pageoptions['channel'] + ',test101'
}
} catch (e) {}
</script>
<script type="text/javascript" src="http://a.rmgserving.com/rmgdsc/newcafv2.js?1.1"></script>
</body>
</html>

Problems with z-index,positions and float

I have a problem with 2 pictures staying one aboce the other. I am trying to make the plane stay above the cloud. But, even if I have set the position and z-index, they stil stay one near the other.
How can I make the plane stay above the cloud?
Thank you!
HTML:
<html>
<body>
<div id="main">
<div id="header">
<img id="logo" src="images/logo.png" />
<ul>
<li>Home</li>
<li>Oferte Turism</li>
<li>Despre noi</li>
<li>Contact</li>
</ul>
</div>
<div id="body">
<div id="leftup">
<img id="cloud" src="images/cloud.png" />
<img id="plane" src="images/plane.png" />
</div>
<div id="form"></div>
<div id="offers"></div>
</div>
<div id="body2"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
body {margin:0;
padding:0;
}
#body {height: 900px;
background-image: url('images/headerbg.png');
}
#main {width: 960px;
margin: 0px auto;
}
#header {height: 80px;
background-image: url('images/hd.png');
background-repeat: no-repeat;
}
ul { list-style-type: none;
font-family: Verdana;
font-size: 14px;
}
li { display: inline;
padding:20px;
float:left;
margin-left: 35px;
}
li a { text-decoration:none;
color:white;
font-style:bold; <!-- NO BOLD -->
}
li a:hover { text-decoration:underline;
}
#logo {margin-left: 30px;
float:left;
}
#leftup {clear:both;
float:left;
margin-top:50px;
}
#cloud {width:250px;
position:relative;
z-index:1;
}
#plane {width:250px;
position:relative;
z-index:10;
}
#form {float:right;
border: solid 1px blue;
height:200px;
width: 100px;
margin-right:30px;
}
#offers {border: solid 1px yellow;
clear:both;
margin: 100px auto;
height: 300px;
width: 500px;}![enter image description here][2]
#body2 { height:600px;
background-image: url('images/bodybg.png');
}
#footer {height: 100px;
background-image: url('images/footerbg.png');
}

Resources