...

View Full Version : Floating Menu Bar



logepoge1
01-04-2013, 05:25 AM
My Website (https://dl.dropbox.com/u/61313987/New%20folder/index.html)

On my google chrome the menu floats over the youtube videos but on others' browsers and my other browsers in goes under the videos but over the articles. Any fix on this?

I figured all you need is the CSS:


/* Screen CSS */

body
{
background-image: url('wallpaper.jpg');
background-repeat: no-repeat;
background-attachment: fixed;

}

#ticker { width: 100%; left: 10px; top: 10px; color: white; }

#thanksarticle
{
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
float: left;
margin-top: 2px;
}

#thanks { text-decoration: none;}

#title {background-color: grey;
border-radius: 20px;
text-align: center;
margin-right: 40%;
margin-left: 40%;
font-size: 50px;}

#main
{
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
width: 45%;
float: left;
}

#vid { float:right;
background-color: grey;
width: 560px;
padding: 1em;
border-radius: 20px;
margin-top: 10px;
}

div.floating-menu
{
position:fixed;
top: 20px;
right: 50px;
background:grey;
width:150px;
z-index:100;
text-align:right;
border-radius: 20px;
}

div.floating-menu a, div.floating-menu h3
{
display:block;
margin:0 0.5em;
text-decoration:none;
}

#artright
{
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
width: 45%;
float: right;
}

#article2
{
clear: both;
float: left;
background-color: grey;
border-radius: 20px;
padding-left: 1%;
padding-right: 1%;
margin-top: 1%;
margin-bottom: 10px;
width: 45%;

}

a
{
color: black;
text-decoration: none;
}

a:hover
{
color:#00A0C6;
text-decoration:none;
cursor:pointer;
}

footer {background-color:grey;
border-radius: 20px;
text-align: center;
margin-top: 20px;
clear: both;}

LearningCoder
01-04-2013, 06:02 AM
It's appears all the same for me and I've just checked in FF, IE and GC. The menu stays above all the content when you scroll down, in all those browsers.

It sounds like a z-index issue to me. You've only declared z-index on one element. I'm not sure maybe try explicitly declaring z-indexes for the elements you are having issues with, but make sure the z-index is less than the value of the menu's z-index.

Regards,

LC.

logepoge1
01-04-2013, 06:05 AM
Yeah its working for me and i have IE9, and chrome 22. I think it is because of the 2 articles over each other

LearningCoder
01-04-2013, 06:07 AM
Which articles are over each other? I don't see any?

Regards,

LC.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum