Page 1 sur 1
CSS - Survol image [Pb de naviguateur]
Posté : 07 mars 2006, 10:38
par Problème woman
J'ai voulu appliquer pour ma galerie photo ce principe :
http://mammouthland.free.fr/cours/css/a ... rs8_2.html
Jusque la tout va bien, sauf que ...
en laisant le code css sur toutes mes pages cela fonctionne correctement sous tout les naviguateurs...mais en utilisant une page css pour regrouper ce code et en l'appelant dans les pages ou j'en ai besoin, je me retrouve avec le survol qui ne fonctionne pas sous mozilla firefox, comment puis je remédier à ceci sans remettre le code css sur toutes mes pages?
Merci d'avance de vos reponses =)
Posté : 07 mars 2006, 11:01
par charabia
J'ai testé de mettre les styles dans une feuille externe
Code : Tout sélectionner
<link rel="stylesheet" type="text/css" href="test_fichiers/style.css">
Sou IE et FF ça marche bien de mon côté.
Feuille de style :
Code : Tout sélectionner
BODY {
COLOR: white; HEIGHT: 500px; BACKGROUND-COLOR: black
}
IMG {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid
}
.thumb {
LEFT: 0px; POSITION: relative; TOP: 0px
}
.thumb A {
MARGIN: 0px; TEXT-DECORATION: none
}
.thumb A:hover {
BACKGROUND-COLOR: black
}
.thumb A .grand {
DISPLAY: block; WIDTH: 0px; POSITION: absolute
}
.thumb A:hover .grand {
LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 80px; HEIGHT: 225px
}
Posté : 07 mars 2006, 11:10
par C'est encore moi =)
J'ai du texte au dessus ... alors il me le met bien sous ie, mais sous firefox, il me le colle tout en haut a gauche
Mon code :
Code : Tout sélectionner
<link rel="stylesheet" type="text/css" href="Includes/tournée_photos.css">
Code : Tout sélectionner
<style type="text/css">
<!--
.thumb {
position:relative;
top:0;
left:0;
}
.thumb a {
margin:0;
text-decoration:none;
}
.thumb a:hover {
background-color:white; /*indispensable, sinon, pas de zoom */
}
.thumb a .grand {
display:block;
position:absolute;
width:0px;
}
.thumb a:hover .grand {
position:absolute;
top:100px; /*espacement */
left:0px;
width:300px;
height:225px;
}
-->
</style>
Et mes pages :
Sous IE
Sous firefox :
Posté : 07 mars 2006, 11:25
par charabia
Moi aussi j'ai mis du texte comme sur le lien que tu nous a donné, c'est nickel sous FF aussi.
Utilises tu des pseudo frames ou frames ?
Essaies de remplacer tes styles par les miens, avec les "px" en plus on ne sait jamais...
Posté : 07 mars 2006, 11:44
par Aller j'ai presque fini !
Non pas de frames (je fixe tout avec le css (du moins j'essaye =p)
Bizarre.... ton code marche...alors que le mien non... pourtant on a la même chose oO c'est pas normal ça ...
Tu dois avoir de bonnes ondes
Autre petit soucis de naviguateur, une image fixée marche sous Firefox mais pas sous IE, ça s'arrange facilement? =))
Posté : 07 mars 2006, 11:49
par charabia
Bizarre.... ton code marche...alors que le mien non... pourtant on a la même chose oO c'est pas normal ça ...
Pas tout à fait, regardes bien ce n'est pas identique
Autre petit soucis de naviguateur, une image fixée marche sous Firefox mais pas sous IE, ça s'arrange facilement? =))
Fixée ? une petite précision serait bienvenue
Posté : 07 mars 2006, 12:07
par Invité
Bizarre.... ton code marche...alors que le mien non... pourtant on a la même chose oO c'est pas normal ça ...
Pas tout à fait, regardes bien ce n'est pas identique
Ah oui...px =p
Autre petit soucis de naviguateur, une image fixée marche sous Firefox mais pas sous IE, ça s'arrange facilement? =))
Fixée ? une petite précision serait bienvenue
Oui désolé je ne suis pas très clair, je reprends.
Mon menu (haut de la page et gauche) sont fixé, et il n'y a que le conteu de mes pages qui bouge suivant la longueur du contenu
J'ai donc fais ( c'est le premier site ou j'inclue du css alors je me trome peut être dans le procédé à suivre)
Mon css
Code : Tout sélectionner
.gauche {
background-repeat: no-repeat ;
background-attachment: fixed ;
background-image: url(../Images/gauche.jpg);
background-position: top left;
margin:0;
width: 290px;
height: 800px;
}
ensuite j'ai fais un tableau avec a gauche (sur deux colonne) mon menu, et la banière haut dans une case et en dessous le contenu
en clair , et en gros
Code : Tout sélectionner
<table>
<tr>
<td rowspan="2"> MENU GAUCHE</td>
<td> BANNI7RE HAUT </td>
</tr>
<tr>
<td> CONTENU </td>
</tr>
</table>
Sauf que mon menu de gauche se fixe parfaitement sous Firefox, et lorsque je le teste sous IE non -___-
Posté : 07 mars 2006, 12:27
par charabia
Tu peux me donner le code complet de la page ? Avec ces tits morceaux pas évident de voir l'erreur (ou incompatibilté navigateurs). Le style .gauche que tu m'as donné je ne le vois appelé nulle part ça ne m'aide pas :p
Posté : 07 mars 2006, 12:41
par Invité
C'est sur je suis pas super doué pour les explications, mais j'me comprends (et c'est deja pas mal!)
Donc mon code : ('tention c'est l'bordel =))
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> - Titre- </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<? include "Includes/base.php"; ?>
<div align="justify">
<font face="verdana" size="-1" align="justify">
<link href="Includes/gauche.css" rel="stylesheet" type="text/css">
<link href="Includes/menu.css" rel="stylesheet" type="text/css">
<table bgcolor="#FFFFFF" height="100%" width="100%" align="center" valign="top">
<tr>
<td width=291 rowspan="4" align="letf" valign="top" background="Images/gauche.jpg" class="gauche">
PAGES EN COURS DE TRAVAIL <br><br>
<a href="agri_def.htm">Definition </a>
</td></td>
<td width="71%" height="81" align="center" valign="top" background="Images/haut_coccinnelle.jpg">
<!------------ MENU ----------------->
<div align="center">
<ul class="menu">
<li><a href="actu.php">Menu</a></li>
<li><a href="actu.php">Menu</a></li>
<li><a href="actu.php">Menu</a></li>
<li><a href="actu.php">Menu</a></li>
</ul>
</div> </td>
</tr>
<tr>
<td height="594" valign="top"><br>
<!------------ CONTENU DE LA PAGE----------------->
<p align="center"><img src="Images/Logos/actualite.jpg"></p>
<?
$req="select titre, texte, photo from actu";
$requet=mysql_query($req);
$i=0;
while($i<mysql_num_rows($requet))
{
$i++;
}
$titre = mysql_result($requet,$i-1,"titre");
$texte = mysql_result($requet,$i-1,"texte");
$photo = mysql_result($requet,$i-1,"photo");
echo"<font color='#B9D041' ><b>".$titre."</b></font>";
echo"<br><br>";
echo "<table background-position: center><tr>";
echo "<td widht='70%' align='justify' valign='top'>".$texte."<br></td>";
echo "<td valign='middle'><img src=".$photo." width='220' height='220'></td>";
echo "</tr></table>";
?>
<br><br>
<div align="center"><a href="archives.php">Visualiser les archives</a></div>
</td>
</tr>
<tr>
<td height="45" valign="bottom"><img src="Images/barre_bas.jpg"></td>
</tr>
<tr>
<td height="38" align="left" valign="bottom" widht="15%">
<table width="478" height="36" border="0">
<tr>
<td width="80"><img src="Images/plan_bas.jpg" ></td>
<td valign="middle"><font color="#B9D041">></font><a href="actu_bio.php">Le bio</a> > Actualité</td>
</tr>
</table>
</td>
</tr>
</table>
</font>
</div>
</body>
</html>
mon css :
Code : Tout sélectionner
.gauche {
background-repeat: no-repeat ;
background-attachment: fixed ;
background-image: url(../Images/gauche.jpg);
background-position: top left;
margin:0;
width: 290px;
height: 800px;
}
Posté : 07 mars 2006, 13:12
par charabia
Apparemment IE n'aime pas trop le background-attachment: fixed ; dans un <td>...il l'accepte très bien en <body> par contre.
Sinon il faut essayer sans tableaux.
Posté : 07 mars 2006, 13:22
par Invité
Ce qui va être chaud vu mon niveau, mais je vais tenter ça
Merci de ton aide, et du temps que tu as pris pour m'aider.
Je repars me battre avec mes pages =)