Héritage de la propriété opacité

Question

sebe

21 Jul 2006 à 13:22

Bonjour,

Il y a quelque temps, je me suis lancé dans la création d'un site internet pour mon club de course à pied (http://www.kain-bruyere.be). C'est un site fait grâce à un portail tout en main: Joomla !

Aujourd'hui, je dépasse ce stade ! Après avoir fait quelques-une de mes pages (en php), avoir fait la traduction de composants et de modules, je passe à transformation en profondeur de mon template et je rencontre un gros problème que je ne sais pas réglé moi-même ... dû au manque de formation Smiley langue

En faite, j'ai voulu que les parties vides de mon template soit translucide. Le problème est que toutes les zones font l'héritage de la propriété opacité = à 90% !

Bon je sais, parce que l'on me l'a dit, que le coupable est .outline. La solution, revoir l'index pour qu'outline ne soit pas parent des autres cellules, car il y a héritage de la propriété opacité. J'ai bien fait des recherches sur google mais à part la façon de faire mon opacité sur tous les naviguateurs (http://www.babylon-design.com/site/index.php/2005/01/01/55-transparence-opacity-images-navigateurs), je ne trouve pas!

Voici mon fichier index .php


<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
	<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/scripts/prototype.lite.js"></script>
	<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/scripts/moo.fx.js"></script>
	<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/scripts/moo.fx.pack.js"></script>
	<script type="text/javascript">
	window.onload = function() {
		fadesize = new fx.FadeSize('left_outer', {duration: 500});
	}
	</script>
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
	initEditor();
}

?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="908" align="center">
<tr>
<td class="outline">
<table width="902" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td> 
	<div id="buttons_outer"> 
		<div id="buttons_inner"> 
			<div id="buttons"> 
			<?php mosLoadModules ( 'user3', -1); ?>
			</div>
		</div>
	</div>
	<div id="search_outer"> 
		<div id="search_inner"> 
		<?php mosLoadModules ( 'user4', -1 ); ?>
		</div>
	</div>
	</td>
  </tr>
  <tr>
	<td>
		<div id="header_outer">
			<div id="header">
				<div id="pathway_text">
					<a href="#" onclick="opacity.toggle();"></a>
	<a href="#" onclick="fadesize.toggle('width');"><img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/showhide.png" id="showhide" border="0"></a><?php mosPathWay(); ?>
				</div>
			</div>
			<div id="top_outer">
				<div id="top_inner">
				<?php
				if ( mosCountModules( 'top' ) ) {
					mosLoadModules ( 'top', -2 );
				} else {
					?>
					<span class="error">Top Module Empty</span>
					<?php
				}
				?>
			    </div>
			</div>
		</div>
	</td>
  </tr>
  <tr> 
    <td id="main_area">
		<table width="902" cellpadding="0" cellspacing="0">
              <tr> 
			  <td id="left_side">
				<div id="left_outer"> 
				  <div id="left_inner">
					<?php mosLoadModules ( 'left', -2 ); ?>
				  </div>
				</div>
			</td>
		  <td id="main_body">
			<?php
			if ( mosCountModules ('banner') ) {
			?>
				<div id="banner_inner">
					<?php mosLoadModules( 'banner', -1 ); ?>
				</div><?php } ?>	

<?php if (mosCountModules('user1') || mosCountModules('user2')) { ?>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td width="50%">
		<div class="user1_inner">
			<?php mosLoadModules ( 'user1', -2 ); ?>
		</div>
	</td>
    <td width="50%">
		<div class="user2_inner">
			<?php mosLoadModules ( 'user2', -2 ); ?>
		</div>
	</td>
  </tr>
</table>
<?php } ?>	
			<div id="body_outer">
				<?php mosMainBody(); ?>
				<div class="clr"></div>
			</div>
		  </td>
		  <?php if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) { ?>
		  <td id="right_side">
			<div id="right_outer"> 
			  <div id="right_inner"> 
				<?php mosLoadModules ( 'right', -2 ); ?>
			  </div>
			</div>
		  </td>
		  <?php } ?>
		</tr>
		</table>
	  </td>
  </tr>
</table>
    </td>
  </tr>
</table>
<div align="center" class="dd">
  <p>Kain Bruy&egrave;re Athl&eacute;tisme - <a href="mailto:comite@kain-bruyere.be">Contactez-nous</a><br />
    <a href="http://www.joomla.org/">Joomla</a> (CMS Open Source) est le portail utlis&eacute; pour la conception du site ! </p>
</div>
<br />
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>

et le fichier template_css.css

/* CSS Document */
iframe {float: right;}
html {
	height: 100%;
}

body {
	height: 100%;
	margin-bottom: 1px;
}

#main {
	padding:2px;	border: 1px solid #282828
;
width: 802px;
	margin-left: auto;
	margin-right: auto;
	
}
.clr {
	clear: both;
}

.outline { border: 1px solid #282828;
background:white;
filter:alpha(opacity=90);
-moz-opacity:0.90;
padding: 2px;
}


#buttons_outer {
width: 735px;
  margin-bottom: 2px;
margin-right: 2px;
float: left;
background:white;
filter:alpha(opacity=100);
-moz-opacity:1
}


#buttons_inner {	border: 1px solid #282828
;
height: 21px;
}

#pathway_text {
	position: absolute;
	bottom: 2px;
	left: 2px;
  overflow: hidden;
	display: block;
	height: 25px;
	width: 628px;
	line-height: 25px !important;
	line-height: 22px;
	color: white;
	padding-left: 4px;
}

#pathway_text img {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 0px;
}

#pathway_text a{
	color:  white;
}

#pathway_text a:hover {
	color: #C22512;
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	font-size: 11px;
	line-height: 21px;
	white-space: nowrap;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333333;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #000066;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #fff;
	background-color: #383838;
}


#search_outer {
	float: left;
	width: 165px;
	background: white;
	filter:alpha(opacity=100);
-moz-opacity:1;
}

#search_inner {	border: 1px solid #282828
;
padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #990000;
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
	background: white;
	filter:alpha(opacity=100);
-moz-opacity:1;
}

#header {
	position: relative;
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 735px;
	height: 200px;
	background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
	background:white;
	filter:alpha(opacity=100);
-moz-opacity:1;
}

#top_inner {
	border: 1px solid #282828;
	padding: 2px;
  height: 194px !important;
  height: 200px;
  overflow: hidden;
  float: none !important;
  float: center;
  horizontal-align:middle;
}
#top_inner .moduletable {
	color: #990000;
}
#left_side {
	vertical-align: top;
}

#left_outer {
width: 165px;
float: left;
background:white;
filter:alpha(opacity=100);
-moz-opacity:1;
}


#left_inner {	border: 1px solid #282828
;
padding: 2px;
	float: none !important;
	float: left;
}

#main_area {
	padding-top: 2px;
}

#main_body {
	vertical-align: top;
	padding-left: 2px;
	width: 100%;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/**	border: 1px solid #282828
;
**/
	float: left;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	padding: 0px;
	text-align: center;
	margin: 0px;
	margin-bottom: 2px !important;
	margin-bottom: 0px;
}

#poweredby_inner {
	float: right;
	padding-left: 1px;
	margin-left: 0px;
	height: 70px;
}

#right_side {
	vertical-align: top;
	padding-left: 2px;
}

#right_outer {
margin-left: 0px;
width: 165px;
background:white;
filter:alpha(opacity=100);
-moz-opacity:1;
}


#right_inner {	border: 1px solid #282828
;
padding: 2px;
}

#user1_user2 {
}

.user1_inner {	border: 1px solid #282828
;
float: none !important;
  float: left;
	margin: 0px;
	margin-right: 2px;
	padding: 2px;
}

.user2_inner {	border: 1px solid #282828
;
float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

#body_outer {
background:white;
float: left;
padding: 2px;
margin-top: 2px; border: 1px solid #282828;
}


#active_menu {
	color:#fff;
}

a#active_menu:hover {
	color: #C22512;
}

.maintitle {
	color: #000000;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #000066;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: left;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	width: auto;
	line-height: 20px;
	margin: 1px;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;
	background-image: url(../images/sechdr1bg.png);
	background-repeat: repeat-x;
	border: 1px outset #333333;
}

.pagenav {
    color: #ffffff;
	float: left;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	border: 1px double #3B3B3B;
	width: auto;
	line-height: 20px;
	margin: 1px;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;
	background-image: url(../images/nav_button.png);
	background-repeat: repeat-x;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/bullet2.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	text-align: left;
	font-size: 11px;
}



body {
	margin: 15px;
	height: 100%;
	padding: 0px;
	font-family: Arial, Helvetica, "Sans Serif";
	line-height: 120%;
	font-size: 11px;
	color: #000066;
	background: url(../images/texture.jpg) fixed;
}

/* Joomla core stuff */
a:link, a:visited {
	color: #C22512; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #77150B;
	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
    width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpaneopen td {
}

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	width: auto;
	line-height: 20px;
	margin: 1px;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 3px;
	padding-left: 8px;
	background-image: url(../images/button.png);
	
	color: #ffffff;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #990000;
	border-right-color: #660000;
	border-bottom-color: #710000;
	border-left-color: #990000;
}

.inputbox {
	padding: 2px;
	border:1px solid #990000;
	background-color: #ffffff;
	color: #000066;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #CE2415;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;
	color: #990000;
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;

}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #999999;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
	color: #ffffff;
              font-weight: bold;
	padding: 4px;
	background-color: #070dfb;
	background-image: url(../images/tete_table.png);
	background-repeat: repeat-x;
	height: 23px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	border-top-color: #000066;
	border-bottom-color: #000066;
	border-left-color: #000066;
	border-right-color: #000066;
	background-position: top;
}

.sectiontablefooter {
}

.sectiontableentry1 {
	background-color : #dcdcdc;
	font-size: 11px;
	color: #000066;
	height: 23px;
	background-image: url(../images/table.png);
	background-repeat: repeat-x;
	background-position: left top;
}

.sectiontableentry2 {
	background-color : #dcdcdc;
	font-size: 11px;
	color: #000066;
	height: 23px;
	background-image: url(../images/table.png);
	background-repeat: repeat-x;
	background-position: left top;
}

.small {
	color: #999999;
	font-size: 11px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #999999;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #999999;
	font-size: 11px;
}

table.contenttoc {	border: 1px solid #282828
;
padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #CE2415;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 12px;
	height: 20px !important;
	height: 25px;
	text-decoration: none;
	font-weight: normal;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
	font-weight: normal;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
		color: #CCCCCC;
	text-align: left;
}

a.sublevel:hover {
	color: #990000;
	text-decoration: none;
}
.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {	border: 1px solid #282828
;
margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  text-transform: normal;
  font-size: 10px;
  border-top: 1px solid #ffffff;
}
#showhide {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
	position: relative;
	top: 5px;
}

.dd { }

/*ligne sous titre alphacontent */
fieldset table{
width:540px;
border-bottom:1px solid #000066;}

Désolé de vous balancer du code ainsi mais j'espère trouver une bonne âme pouvant me dire quoi, comment et pourquoi opèrer les modifications

Merci
Modifié par sebe (21 Jul 2006 - 13:24)

sebe

24 Jul 2006 à 15:17

Hum, moi qui aurait pensé inspirer quelqu'un ... je vais pouvoir revenir ! ? !

Merci pour ceux qui m'ont lu et qui y ont réfléchit ... si je trouve, je vous informerais!

krull

3 Aug 2006 à 22:46

Même question pour moi, comment supprimer l'heritage de l'opacité au elements enfant ?
Pour IE ok suffit de passer le div enfant en relatif mais pour Firefox quelle est la solution ?????

Sujet clos