Héritage de la propriété opacité |
|
Voir le sujet précédent :: Voir le sujet suivant |
Auteur |
Message |
Sebe dreamweaver mioche
|
Hé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
|
Hé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
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
|
Hé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
|
Hé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
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.
|
|
|
albedo0 supermioche
|
Hé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
|
Hé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 |
|
|
|
|
Accueil Forum
-> css |
Toutes les heures sont au format GMT + 1 Heure
|
Page 1 sur 1 |
|
S'enregistrer
Profil
Se connecter pour vérifier ses messages privés
Rechercher
Membres
FAQ
Connexion
|