28173 sujets

CSS et mise en forme, CSS3

[PNG] Désactivation du contenu sous IE

Bonjour,

Premier post sur ce forum, qui m'a permis plusieurs fois de m'aider sur certains problèmes.

Aujourd'hui, je viens poster, pour demander un éclaircissement, sur un problème que je rencontre.

Le concept est donc d'afficher une image PNG en background afin de pouvoir écrire dessus, mais le problème lors de l'application du filtre DXImageTransform.Microsoft.AlphaImageLoader, est que le contenu du cadre devient inactif, ce qui est fort embetant.

Exemple illustré simplement:

http://acoutut.free.fr/css/

On voit très nettement que l'on ne peut cliquer sur les liens présents dans le cadre.

Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>.:Test :.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
		<!--
		function main()
		{
		if(document.all && window.ActiveXObject)
		  {
			document.getElementById("main").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizing='crop');";
			document.getElementById("main").style.backgroundImage="none";
		  }
		}
		
		window.onload=main;
		-->
		</script>
	</head>
<body>

<div id="main">

	CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.

HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.

Ainsi, les avantages des feuilles de style sont multiples :

    <a href="">* La structure du document et la présentation sont gérés dans des fichiers séparés.</a>
    * La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
    * Dans le cas d'un site Internet, la présentation est uniformisée : Les documents (pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un "relookage" rapide.
    * Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à un choix de feuilles de style.
    * Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.

	<a href="">Cliquer ICI</a>
</div>
</body>
</html>


Style:

html 
{
margin: 0px;
padding: 0px;
}

body
{
margin: 0px;
padding: 0px;
font : 13px Arial, Helvetica, sans-serif;
color: #000000;
background-color:#669933;
}

#main
{
margin-top:30px;
margin-left:auto;
margin-right:auto;
width:650px;
height:382px;
background-image: url('fond.png');
background-repeat: no-repeat;
background-position:0% 0%;
}


Je m'en remets donc à vous, attendant patiemment, vos idées et solutions.

Merci d'avance
Modifié par Rayniac (09 Jul 2006 - 18:27)
Sujet clos
Aller à