Pb d'opacité avec CSS sous Ff et ie

[lordbdp]

Je bloque pour gérer l'opacité. Je me retrouve avec tout le bloc en opaque :

Code : Tout sélectionner

/*===== Styles Colonne de Gauche =======*/
#xo-canvas-leftcolumn {
	border-right:					1px solid #efefef;
}
#xo-canvas-leftcolumn .xo-block {
	padding-top:					4px;
	margin-right:					11px;
	margin-bottom:					10px;
	background-color: 				#efefef;
	filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;

}
#xo-canvas-leftcolumn .xo-blocktitle {
	padding-left:					6px;
	padding-bottom:					5px;
	background-color: 				inherit;
	color:							#666;
	font-size:						1.2em;
	font-weight:					bold;
	text-align: 					center;
}
#xo-canvas-leftcolumn .xo-blockcontent {
	min-height:						60px;
	padding:						2px 8px 2px;
	background-color: 				inherit;
}
* html #xo-canvas-leftcolumn .xo-blockcontent { height: 110px;}
#xo-canvas-leftcolumn .xo-blockcontent a {}
#xo-canvas-leftcolumn .xo-blockcontent a:hover {
	text-decoration:				none;
	border-bottom: 					#999 1px dotted;
}
#xo-canvas-leftcolumn img {
	border: 						1px solid #999;
	padding: 						3px;
	margin: 						3px 3px 0 7px;
}
#xo-canvas-leftcolumn img:hover {border: 1px solid #333;}


#xo-canvas-leftcolumn form {
	background-color: 				transparent;
}

D'où vient l'erreur ?

Le pb est sous Firefox, sous Ie c'est d'autres erreurs d'affichage que je viens de voir (barre grise derrière le menu horizontal, logo de l'index ratatiné, logo no-ie aplati)...

J'ai beau vérifier le code je ne trouve pas...

--> Lien du site en développement <--

Merci d'avance.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Asumbaa]

Salut,

Ne donne pas de title à ta feuille de style (c'est pour les feuilles alternatives), ça génère des tas de problèmes bizarres

Code : Tout sélectionner

<link rel="stylesheet" type="text/css" media="all" title="Blue" href="http://www.talesofpirates.fr/top2/themes/top2/style.css" />

À remplacer par :

Code : Tout sélectionner

<link rel="stylesheet" type="text/css" media="all" href="http://www.talesofpirates.fr/top2/themes/top2/style.css" />

Pas sûr que ça résolve ton souci, mais ce sera déjà ça de fait. Vois aussi les 44 erreurs HTML avec le validateur (même si là n'est pas ton souci)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9) Gecko/2008061015 Firefox/3.0

[lordbdp]

C'est corrigé mais ça ne change en rien mon soucis...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Benoit]

Est-ce que tu l'as corrigé depuis ? En suivant le lien je vois bien le menu de gauche semi-transparent.

[lordbdp]

Oui tout est corrigé mais le soucis avec l'opacité est toujours là.

De plus maintenant j'ai mon menu horizontale qui démarre en décalé. Hors je souhaiterai que la barre s'arrête après "Plus" et qu'elle soit centrée, mais coté CSS je ne voit pas comment faire ça...

Aussi certaines images sont déformées comme "Bienvenue", le logo RSS en bas, et je n'arrive pas à afficher l'image pour la connection à sa taille normale.

Merci encore pour votre aide.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Benoit]

Oui tout est corrigé mais le soucis avec l'opacité est toujours là.

Je ne comprends vraiment pas de quoi il s'agit alors. Le bloc est semi-transparent de la même manière avec Firefox, Opera et Safari. Pourrais-tu mettre une capture de ce que tu vois et de ce que tu aimerais voir à la place ?

De plus maintenant j'ai mon menu horizontal qui démarre en décalé. Or je souhaiterais que la barre s'arrête après "Plus" et qu'elle soit centrée, mais coté CSS je ne voit pas comment faire ça...

Décalé par rapport à quoi ?
Pour la centrer, il faudrait ajouter un conteneur centré avec une largeur fixe, parce que pour l'instant tu fais flotter tes éléments de menu à gauche.

Aussi certaines images sont déformées comme "Bienvenue", le logo RSS en bas, et je n'arrive pas à afficher l'image pour la connection à sa taille normale.

Tes images sont affichés à la taille réelle qu'elles ont sur le serveur.

Sauf pour ton bouton de connexion où il faudrait simplement enlever ces règles (ligne 140) :

Code : Tout sélectionner

#xo-userbar button img {
   margin-top: 10px;
   width: 12px;
   height: 12px;
}

[lordbdp]

Merci j'avais loupé le bouton coté CSS...

Pour le reste le mieux en effet c'est de vous expliquer en image :


Coté Firefox :



J'ai donc derrière le menu horizontal une barre grise que l'on voit légèrement dépasser juste en dessous (a retirer).

Le menu de gauche est en effet opaque mais je voudrait que ce soit le fond du menu et non le fond + le contenu (texte).


Coté Internet Explorer :



Même soucis avec cette bande grise derrière le menu horizontal.

Le menu horizontal démarre en décalé coté gauche. Je souhaiterai que la barre noire s'arrête juste après "Plus" et que celle-ci (ainsi que le contenu du menu) soit centré sur la page.

Le menu vertical gauche est gris et l'opacité est inexistante.

L'image "Bienvenue" se retrouve toute ratatinée.



Avant c'était l'image de no-ie qui était déformé, donc j'ai modifié la CSS mais maintenant c'est l'image RSS qui se retrouve déformée.



Voilà donc, en esperant avoir été assez clair dans mes explications...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Benoit]

Le menu de gauche est en effet opaque mais je voudrait que ce soit le fond du menu et non le fond + le contenu (texte).

Opaque c'est le contraire de transparent. Le menu n'était donc pas opaque et c'est pour ça que je ne comprenais pas ton problème

Donc ce que tu voudrais en réalité c'est que le fond soit translucide, mais le texte opaque (tu as l'un dans Firefox et l'autre dans IE). Pour cela, tu peux utiliser une image de fond en PNG avec une transparence de 50%. C'est ce qu'on fait ici-même avec les menus déroulants si je ne me trompe pas.

Le menu horizontal démarre en décalé coté gauche. Je souhaiterai que la barre noire s'arrête juste après "Plus" et que celle-ci (ainsi que le contenu du menu) soit centré sur la page.

Comme je le disais plus haut, il faudrait alors ajouter un conteneur (div) de largeur fixe et centré autour de ton menu.

L'image "Bienvenue" se retrouve toute ratatinée.

Ah, mais uniquement sous Internet Explorer

Peut-être qu'il vaudrait mieux alors donner explicitement ses dimensions dans la balise img.

Avant c'était l'image de no-ie qui était déformé, donc j'ai modifié la CSS mais maintenant c'est l'image RSS qui se retrouve déformée.

D'après l'IE Web Developer Toolbar, la propriété width est calculée à partir du style #xo-canvas (width: 95%). Je ne vois pas le rapport mais bon... Essaie peut-être d'ajouter dans #xo-footer un width: auto; (sans garantie).

[chinon37]

Généralement, il est bien de réduire la taille des copies d'écran pour limiter au maximum la barre de défilement horizontale

[lordbdp]

Pour le menu vertical, au final j'ai fait comme ça :

Code : Tout sélectionner

#xo-canvas-leftcolumn .xo-block {
	padding-top:					4px;
	margin-right:					11px;
	margin-bottom:					10px;
	background-image :				url(img/block.png);
	width : 						95%;
	height: 						95%;
	background-repeat: 				no-repeat;
	filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;

}

En plus l'opacitée se fait niquelle sous FF et IE du fait de mettre
"width :" et "height :"
Pourtant il n'y a aucun rapport... Mais ça marche alors c'est le principal.

En revanche je n'arrive à ce que l'imagesur le longueur et la largeur du block.


Pour le menu horizontal je ne trouve pas où modifier donc je vous passe la partie de la CSS concernée :

Code : Tout sélectionner

.preload1 {background: url(three_0a.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:url(three_0.gif); background-position:; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.topmb {display:block; float:left;}
#nav li a.topmb_link {display:block; float:left; height:35px; line-height:33px; color:#fff; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.topmb_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.topmb_link span.down {float:left; display:block; padding:0 24px 0 0px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.topmb_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.topmb_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.topmb_link span.down {background:url(three_1a.gif) no-repeat right top; padding-bottom:3px;}

Merci encore pour votre aide.

En attendant je continu à chercher pour le logo qui se déforme en bas...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[lordbdp]

C'est bizarre je n'ai rien modifié est il arrive souvent que le logo en bas de page s'affiche correctement

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0