28172 sujets

CSS et mise en forme, CSS3

Bug comportement souris sous IE et FF : survol du logo avec balise H1

Bonjour Smiley smile


Tout d'abord, le lifting qu'a subi le site est une réussite : très agréable visuellement, le style graphique aqua, toujours aussi clean, pro et attrayant. Je ne m'en lasse pas Smiley smile


Mon souci concerne le survol de la souris au-dessus du logo (traditionnellement en haut à gauche).

J'ai fait appel la méthode de masquage de la balise H1 (avec la propriété TEXT-INDENT: -5000px) et création d'un bloc délimitant la zone de survol de souris (DISPLAY: BLOCK, WIDTH, HEIGHT).

Sous FF, même si cela est superflu, en appliquant la propriété VISIBILITY: HIDDEN sur le sélecteur H1, l'état de survol n'est pas actif (le curseur ne se transforme pas en curseur main). En debuggant avec Firebug, la zone de survol existe pourtant, mais j'ai l'impression qu'elle s'est retrouvée sous la DIV.
À l'inverse, en supprimant cette propriété, l'état de survol devient actif.

Sous IE, pour les deux cas (ajout/suppression de la propriété VISIBILITY: HIDDEN), l'état de survol n'est pas actif.

Il faut préciser que j'ai adopté le découpage par tranches de Photoshop pour réaliser un site de quelques pages.

Aussi, j'ai conservé la mise en forme CSS générée automatiquement par PHOTOSHOP : les éléments graphiques sont contenus dans des DIV positionnés en ABSOLUTE.

Dès lors, l'ajout de nouveau contenu (en l'occurrence du texte) implique l'attribution d'un Z-INDEX: 1 (combiné avec la propriété POSITION et la valeur autre que STATIC) afin que ce dernier puisse s'afficher en premier plan.


Mon problème est de réaliser un survol souris du logo autant pour FF et IE (tant qu'à faire) en tenant compte de la mise en forme CSS de Photoshop (pas du tout flexible, je vous l'accorde). Ceci afin de m'éviter de tout remonter dans un montage traditionnel pur HTML/CSS.



<!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">
<head>
<title>My website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (photo_281_20080826.jpg) -->
<style type="text/css">
<!--

* {
	margin: 0;
	padding: 0;
}

#Tableau_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:640px;
	height:425px;
}

/*---------- DEBUT : CSS concernant le texte ----------*/
div#niveau_index_1 {
	position: relative;
	z-index: 1;
}

/*DEBUT : Cette technique, pour masquer H1 et créer une zone de survol souris, ne fonctionne pas sous IE*/
div#niveau_index_1 h1 {
	text-indent: -5000px;
	/*visibility: hidden;	Bug sous FF : l'état de survol souris disparait. Sûrement dû à la propriété Z-INDEX: 1. Car la zone de clic existe mais se retrouve sous la DIV PHOTO-01_ lorsque la propriété VISIBILITY: HIDDEN est activée*/ 
}

div#niveau_index_1 h1 a {
	position: absolute;
	top: 0;
	left: 0;
	width: 275px;
	height: 75px;
}
/*FIN : Cette technique pour masquer H1 et créer une zone de survol souris ne fonctionne pas sous IE*/

div#niveau_index_1 p {
	font-family: arial, verdana, sans-serif;
	font-size: .7em;
	color: white;
	position: absolute;
	top: 230px;
	right: 25px;
	width: 265px;
	height: 170px;
	padding-right: 10px;
	overflow: auto;
}
/*---------- FIN : CSS concernant le texte ----------*/

#photo-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:320px;
	height:213px;
}

#photo-02_ {
	position:absolute;
	left:320px;
	top:0px;
	width:320px;
	height:425px;
}

#photo-03_ {
	position:absolute;
	left:0px;
	top:213px;
	width:320px;
	height:212px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (photo_281_20080826.jpg) -->
<div id="Tableau_01">

	<div id="niveau_index_1">
		<h1><a href="#">monSuperLogo</a></h1>
		<p>Nulla aliquet orci ac augue. Aliquam erat volutpat. Aliquam vehicula arcu sit amet dolor. In volutpat adipiscing nisl. Phasellus tristique risus in purus. Duis ultricies nunc gravida est ultricies vehicula. Nullam condimentum tincidunt metus? Praesent hendrerit pede in felis. Nunc accumsan faucibus magna. Curabitur sagittis; nulla sit amet eleifend euismod, orci libero rhoncus magna; vitae cursus magna justo at sapien. Ut lacus diam, hendrerit ac, pharetra viverra, interdum eget, eros. Sed arcu. Sed magna purus, adipiscing sit amet, auctor quis, interdum et, ligula? Nunc aliquet. Nunc odio enim, aliquam vel, tristique ut, tincidunt quis, libero? Vestibulum laoreet lobortis neque. Mauris vel quam. Mauris iaculis quam at diam. Nulla facilisi.</p>
	</div>

	<div id="photo-01_">
		<img id="photo_01" src="images/photo_01.jpg" width="320" height="213" alt="" />
	</div>
	<div id="photo-02_">
		<img id="photo_02" src="images/photo_02.jpg" width="320" height="425" alt="" />
	</div>
	<div id="photo-03_">
		<img id="photo_03" src="images/photo_03.jpg" width="320" height="212" alt="" />
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>


Merci pour votre aide Smiley smile upload/15172-littlewebs.jpg
Salut,

Si tu mets ton lien sur ton texte et que tu dégage ton texte à -5000px, normal que ta zone de click ne soit pas là.

Met ton h1 hors du lien et ton a sera en place Smiley cligne , sinon google n'aime pas trop les text-indent:-xpx, enfin il aime pas que ce qui est html ne soit pas ce que l'utilisateur voit vraiment ^^.
Sujet clos
Aller à