Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Floating Menu Bar

    My Website

    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:

    Code:
    /* 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;}

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    920
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.
    Last edited by LearningCoder; 01-04-2013 at 06:05 AM.

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah its working for me and i have IE9, and chrome 22. I think it is because of the 2 articles over each other

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    920
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Which articles are over each other? I don't see any?

    Regards,

    LC.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •