Member Avatar for davy_yg

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
  • 186 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by MartinRinehart
Member Avatar for MartinRinehart

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.