CSS - Survol image [Pb de naviguateur]

par **Invité** » 07 mars 2006, 13:22

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 =)

par **charabia** » 07 mars 2006, 13:12

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.

par **Invité** » 07 mars 2006, 12:41

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;
}

par **charabia** » 07 mars 2006, 12:27

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

par **Invité** » 07 mars 2006, 12:07

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 -___-

par **charabia** » 07 mars 2006, 11:49

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

par **Aller j'ai presque fini !** » 07 mars 2006, 11:44

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? =))

par **charabia** » 07 mars 2006, 11:25

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...

par **C'est encore moi =)** » 07 mars 2006, 11:10

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 :

par **charabia** » 07 mars 2006, 11:01

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
}

par **Problème woman** » 07 mars 2006, 10:38

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 =)

CSS - Survol image [Pb de naviguateur]

Répondre

Étendre la vue Revue du sujet : CSS - Survol image [Pb de naviguateur]

CSS - Survol image [Pb de naviguateur]