créer un site


Héritage de la propriété opacité

Poster un nouveau sujet sur css   Répondre au sujet à css:Héritage de la propriété opacité    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Sebe
dreamweaver mioche
dreamweaver mioche
MessageHéritage de la propriété opacité , Posté le: 24-07-2006 14:16

Bonjour,

Il y a quelque temps, je me suis lancé dans la création d'un site internet pour mon club de course à pied Kainet [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

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
Code:

<?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&re Athl&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& pour la conception du site ! </p>
</div>
<br />
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>

et le fichier template_css.css
Code:
/* 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
declique
frontpage mioche
frontpage mioche
MessageHéritage de la propriété opacité , Posté le: 31-07-2006 11:28

Bonjour,

J'avoue ne pas avoir lu ton code qui est un peu long Wink

tu trouveras des exemples et des explications ici:

http://stylescss.free.fr/opacity.html [http://stylescss.free.fr/opacity.html]
http://stylescss.free.fr/filter.html [http://stylescss.free.fr/filter.html]


Bon courage !
Sebe
dreamweaver mioche
dreamweaver mioche
MessageHéritage de la propriété opacité , Posté le: 31-07-2006 12:42

Salut,

Merci pour ta réponse mais je dois dire qu'au niveau de l'opacité, j'ai compris. Le problème est que j'aimerai que celle-ci se fasse sur certaines zones et pas toutes:
Citation:
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é.


Merci
Antoine Cailliau
frontpage mioche
frontpage mioche
MessageHéritage de la propriété opacité , Posté le: 31-08-2006 11:12

Je ne comprends pas ce que tu ne comprends pas. Les propriétés d'opacités se transmette de parents à enfants. Ce qui est, somme tout, assez logique, comment un élément translucide à 80% pourrait avoir un enfant qui ne l'est pas Wink

Tu dois donc faire en sorte que ton élément que tu veux non-translucide ne soit pas dans un parent qui l'est. Par contre, pour conserver le fait que cette balise soit au dessus des autres, tu dois jouer avec la propriété z-index.

Wink
albedo0
supermioche
supermioche
MessageHéritage de la propriété opacité , Posté le: 31-08-2006 14:26

Les styles se transmettent effectivement de parent à enfant mais l'enfant peut renier cet héritage en utilisant des paramètres opposés !

il ne suffirait pas de mettre l'attribut opacité à 100% pour les enfants ?
Antoine Cailliau
frontpage mioche
frontpage mioche
MessageHéritage de la propriété opacité , Posté le: 31-08-2006 21:43

Non, car l'opacité ne marche pas comme ça. Il faudrait mettre une opacité supérieure à 100% ce qui est bien évidement impossible.

Une opacité de 1 dans une balise de 0.36 est une opacité de 0.36. Il « suffit » de multiplier les opacités Smile
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Héritage de la propriété opacité    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales