SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS vertical menu traslucent instead of opaque

    I am using these three CSS files as shown below and my vertical menu instead of being opaque is displayed as translucent i.e. the text behind the menu is displayed as well ,
    i made a change to the page so that i could use the tables in css, instead of having them in the page with Tr and td’s but obviously i screwed something that is causing this
    please refer to my image if i am not clear

    Images
    now
    now.gif


    Before

    before.gif

    I cannnot figure out why this is happening, any help would be wonderful

    This is the vertical menu

    Code:
    /* Displays the side headings as a block*/
    
    
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
    
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;
    background:inherit}
    
     /*
    Provides the color and background to subheadings like -d1 team
    */
    
    ul.sidenav li a:hover {
    	background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
    	border-top: 1px solid #1a4c76;
    	
    	ul.sidenav li span{	display: none; }
    	
    	
    	ul.sidenav li a:hover span {
    	display: inline;
    	font-size: 0.8em;
    	padding: 10px 0;
    }
    horizontal menu

    Code:
    /*
    horizontal  menu coding 
     */
     
    #nav {
    	float: left;
    	margin: 0 0 1em 0;
    	padding: 0;
    	list-style: none;
    	
    	
    	}
    #nav li {
    	float: left; }
    #nav li a {
    	display:block;
    	padding: 7px 23.9px;
    	text-decoration: none;
    	font-family:"Arial";
    	color: white;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px  dashed #ccc;
    	font-size: 14px;
    	background-color: #3f6fb7; }
    	
    	
    }
    #nav li a:hover {
    	color: #3f6fb7;
    	background-color: #d1cf9f; } 
    	
    	
    #nav li.current-pageHorizontal a 
      {
        background:#d1cf9f;
        color: white;
    
       }	
    /*
    Print  menu coding 
    */
    and a table CSS as

    Code:
    .ts-1 {
    	border: none;
    	height: 1186px;
    	position: relative;
    	text-align: left;
    	width: 850px;
    }
    
    .ts-1-1 {
    	border: none;
    	height: 1px;
    	left: 0px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 109px;
    }
    
    .ts-1-2 {
    	border: none;
    	height: 1px;
    	left: 109px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 32px;
    }
    
    .ts-1-3 {
    	border: none;
    	height: 1px;
    	left: 141px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 188px;
    }
    
    .ts-1-4 {
    	border: none;
    	height: 1px;
    	left: 329px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 105px;
    }
    
    .ts-1-5 {
    	border: none;
    	height: 1px;
    	left: 434px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 106px;
    }
    
    .ts-1-6 {
    	border: none;
    	height: 1px;
    	left: 541px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 104px;
    }
    
    .ts-1-7 {
    	border: none;
    	height: 1px;
    	left: 645px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 93px;
    }
    
    .ts-1-8 {
    	border: none;
    	height: 1px;
    	left: 738px;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 111px;
    }
    
    .ts-1-9 {
    	border: none;
    	height: 1px;
    	left: 849px;
    	overflow: hidden;
    	padding: 0px;
    	position: absolute;
    	top: 0px;
    	width: 1px;
    }
    
    .ts-1-10 {
    	border: none;
    	height: 74px;
    	left: 0px;
    	padding: 0px;
    	position: absolute;
    	top: 1px;
    	width: 844px;
    }
    
    .ts-1-11 {
    	border: none;
    	height: 74px;
    	left: 849px;
    	padding: 0px;
    	position: absolute;
    	top: 1px;
    	width: 1px;
    }
    
    .ts-1-12 {
    	background-color: #3f6fb7;
    	border: none;
    	height: 68px;
    	left: 0px;
    	overflow: hidden;
    	padding: 0px;
    	position: absolute;
    	text-align: left;
    	top: 82px;
    	width: 110px;
    }
    
    .ts-1-13 {
    	border: none;
    	height: 81px;
    	left: 108px;
    	padding: 0px;
    	position: absolute;
    	top: 82px;
    	width: 749px;
    }
    
    .ts-1-14 {
    	background-color: #d1d09f;
    	border: none;
    	height: 1043px;
    	left: 0px;
    	padding: 0px;
    	position: absolute;
    	top: 143px;
    	width: 109px;
    }
    
    
    
    .ts-1-15 {
    	border: none;
    	height: 1043px;
    	left: 109px;
    	padding: 0px;
    	position: absolute;
    	top: 143px;
    	width: 32px;
    }
    
    .ts-1-16 {
    	border: none;
    	height: 1042px;
    	left: 141px;
    	padding: 0px;
    	position: absolute;
    	top: 144px;
    	width: 709px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi welcome to Sitepoint

    We'd really need to see a working demo with css and html to supply a full solution but it looks like a z-index issue to me.

    Try adding the following css:

    Code:
    #nav{
    position:relative;
    z-index:99;
    }
    If that doesn't resolve it you may need to add the same two rules to the main parent of that nav (i.e. the column itself).

    If that doesn;t work we'll need a link or at least a working example codewise to debug further

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked it was the z index that was doin it


Bookmarks

Posting Permissions

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