0

Hi I have a bar which dropdownbox so transparant, in a way that I could hardly read its text because its overlap my content text and pictures.

But its order superseed the side bar box. I could clearly read its text on the side but hardly read its text on the middle.

I am using jquery which I copy from a tutorial video.

What might be the problem? I would like the text could be clearly read in the navigation bar in order word it suppose to be above the content text when I open the navigation drop down box.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Masterlink International</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="includes/navstyle.css" />
<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="includes/superfish.js"></script>
<script type="text/javascript">
jQuery(function(){
	jQuery('ul.menu').superfish({
		animation: {opacity:'show',height:'show'},
		speed: 'slow', 
		autoArrows: true
	});
});
</script>
     
<style type="text/css">
<!--
.style1 {font-size: 12px}
-->
</style>
</head>

<body>
    <?php include("includes/header.php"); ?>

<div id="login">
      
      <form action="proseslogin.php" method="post" name="login" target="_self" id="login" style="style.css" title="login"><br />
        user    
          :  
          <input type="text" name="username" id="username" />
          <label>password:          </label>
          <input type="text" name="password" id="password" />
          <label>
          <input type="submit" name="Login" id="Login" value="Login" />
        </label>
      </form> 		
		
    </div>

<div id="menu">
            
 	<?php include ("includes/navigation.php"); ?>
        
</div>
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by MartinRinehart
0

You are the second person this week being whacked by this CSS blunder. If an element is transparent, everything attached to the element will be transparent. You want opaque text on a transparent background. The only way to do this is to have two elements.

The first element will be transparent, letting the background show (but not too much). The second element, exactly fitted over the first, will be opaque but have no background of its own. When the browser draws it, the browser will just draw its text, which will be opaque.

This is not hard in JavaScript, but doing it with a library will take some effort.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.