cadre autour d'une image

**awalter1** · 17/03/2012, 23h32

Bonjour,
J'ai pas mal avancé sur la construction de mon site (voir http://peindreamargency.perso.sfr.fr/index.php). J'ai une interrogation para rapport à des images sur lesquels je dessine en css un cadre gris tout autour. Selon les images, il y a des marges différentes en haut ou en bas. Ce n'est pas systématique sur toutes les images alors que les traitements sont générique, je comprendrais mieux si ça le faisait partout.
J'affiche mes images via un pg php, avec une boucle sur mes images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo '<td><a href="',$tableau[$i],'" class="preview"><img src="',$tableaumin[$i] , '" alt="Image" height="100" /></a></td>';

avec en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
}

J'ai vérifié, cela ne vient pas des images, ni de leurs miniatures.
Je ne comprends pas.
Merci de votre aide

**Sam31000** · 18/03/2012, 08h35

Salut à toi

Peux-tu expliqué ton problème ? Que se passe-t-il ? Le cadre ne s'affiche pas ? Il s'affiche mal ?

Penches toi de plus prêt sur ton code, tu utilise une "class" dans l'HTML et une "id" dans ton CSS

Pour utiliser une "class" dans ton CSS tu devrais plutôt faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
}

Avec un "." (pour renseigner une "class") au début et non un "#" (pour renseigner une "id").

Invité · 18/03/2012, 08h53

Bonjour,
as-tu eu la curiosité de regarder le code généré de tes pages ?

Voici celui de la page "Galerie 2" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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" lang="fr" xml:lang="fr"><head>    <title>Peindre à Margency</title>	<!-- utf-8 est l'encodage unicode qui permet de prendre en compte tous les caractères existants, il est compatible de tous les navigateurs -->    <meta http-equiv="content-type" content="text/html; charset=utf-8" />	<link href='http://fonts.googleapis.com/css?family=Alex+Brush' rel='stylesheet' type='text/css'>    <link rel="stylesheet" href="StyleDefault.css" type="text/css">	<script type="text/javascript" src="common.js"></script>	<script language="JavaScript" type="text/javascript">		var navi=detnav();		var navigateur=navi[0]; version=navi[1];	</script></head><body link="#00FFFF" onload="makeopt(-10,imgtest1);makevisible()"    onunload="clearTimeout(vitessedefil)" ><div id="header">   <p>Peindre à Margency</p> </div><div id="separator"	style="top:89px;"></div><div id="menu">   <div>      <ul>        <li>          <a class="bouton_menu" onclick="self.location.href='index.php'">Accueil</a>          <a class="bouton_menu" onclick="self.location.href='PageImages.php?dir=Images/ImagesPeintres/ImagesWalter/'">Gallerie Peintre1</a>          <a class="bouton_menu" onclick="self.location.href='PageImages.php?dir=Images/ImagesPeintres/ImagesPerroud/'">Gallerie Peintre2</a>          <a class="bouton_menu" onclick="self.location.href='PageImages.php?dir=Images/ImagesPeintres/ImagesMotti/'">Gallerie Peintre3</a>          <a class="bouton_menu" onclick="self.location.href='PageLiens.php">Liens divers</a>        </li>      </ul>    </div></div><div id="musique">    <!-- <a href='PageDiaporama.php'><img src="Images/ImagesWeb/magnetoscope.gif" alt="magnetoscope non trouvé !" width="100"></a> -->    <a href='PageDiaporama.php'>Diaporama</a>	<!-- Player1 - Musique -->	<p>		<object type="application/x-shockwave-flash" data="son/zplayer.swf?mp3=son/Fergie.mp3&c1=7f1016&c2=ffffff&c3=ffffff&vol=75" width="166" height="18"/>		<param name="movie" value="son/zplayer.swf?mp3=son/Fergie.mp3" /></object>	</p>	<!-- Fin du code du Lecteur de musique --></div><div id="visite">	<!-- Livre d'or -->		<a href="PageLivredor.php"> <img src="Images/ImagesWeb/livre_dor.gif" alt="mail non trouvé !"> </a>				<!-- Fin Livre d'or -->	<!-- DEBUT CODE compteur --> 	<table>		<tr>			<TH>				<table>
	<tr>
		<td><img src="Images/ImagesWeb/imagesc/deb.gif" WIDTH="'9" HEIGHT="30"></td>
 
 
<td><img src="Images/ImagesWeb/imagesc/0.gif" WIDTH="19" HEIGHT="30"></td>
 
<td><img src="Images/ImagesWeb/imagesc/2.gif" WIDTH="19" HEIGHT="30"></td>
 
<td><img src="Images/ImagesWeb/imagesc/7.gif" WIDTH="19" HEIGHT="30"></td>
 
<td><img src="Images/ImagesWeb/imagesc/5.gif" WIDTH="19" HEIGHT="30"></td>
		<td><img src="Images/ImagesWeb/imagesc/fin.gif" WIDTH="'9" HEIGHT="30"></td>
 
	</tr>
</table> 			</TH>		</tr>	</table>		<!-- FIN CODE compteur  -->        </div><div id="content"> 	<html>
<head>
	<script src="Outils/jquery-1.7.1.js"></script>
	<script src="PopupMain.js" type="text/javascript"></script>
    <link rel="stylesheet" href="StyleDefault.css" type="text/css">
</head>
<pre>
<pre>
</pre><pre>
</html><div id="content"> <table><tr><td><a href="Images/ImagesPeintres/ImagesPerroud/Grandes/alain.jpg" class="preview"><img src="Images/ImagesPeintres/ImagesPerroud/Miniatures/mini-alain.jpg" alt="Image" height="100" /></a></td></table></div></div><div id="right"></div><!-- bas gauche : type de navigateur --><div id="footergauche">    <p>		<script language="JavaScript" type="text/javascript">			document.write(navigateur);			document.write(version);		</script>	</p></div><div id="footer">    <p>		<script language="JavaScript" type="text/javascript">document.write(madate());</script>	</p></div><div id="separator"	style="bottom:19px;"></div></body></html>

- tu as des balises <head>, <html>, <body>,... EN TROP !
- tu as une <table> AVANT la première balise <head>,
- on trouve même des TH, WIDTH, HEIGHT,... (en majuscule), alors que le reste est en minuscule,
- ...
Pas étonnant que tu aies un affichage à la "one again bistoufly" !
Bref : Commence par remettre en ordre TOUT ton code !

Pour info, quand on met un fichier en include(...) : on NE met PAS de balises <head>, <html>, <body> dedans.

**awalter1** · 18/03/2012, 10h25

Envoyé par jreaux62

affichage à la "one again bistoufly" !

Ca fait longtemps que je l'avais pas entendu celle là

C'est bon d'avoir un œil nouveau sur ce que l'on fait. C'est une bonne idée de voir aussi le code de la page, je vais prendre cette habitude, je suis débutant.
J'ai corrigé l'existence des balises en trop, le mix des majuscules/minuscules, bien que les deux soient comprises, la balise <th> ne sers pas.
Pour "preview" qui est à la fois une classe et un id, c'est compliqué à expliquer : c'est un code que j'ai récupéré qui gère le popup des images au survol des miniatures par la souris, je mets le code ici pour info

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
this.imagePreview = function(){	
	/* CONFIG */
		xOffset = 10;
		yOffset = 10;
 
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' width='600px' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};
// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

Corrections faites, le comportement que j'avais signalé perdure. Pour Sam31000, si tu vas sur le site, puis à la Gallerie 2, on voit que les miniatures ont des cadres qui dépassent en bas et à gauche des images, si tu choisis le diaporama, on a aussi ce dépassement sur les grandes images.
C'est étrange. Pour les miniatures, je me demande si ce n'est pas du au fait qu'elle s'adapte en hauteur et largeur aux images voisines comme si elles étaient dans un tableau (d'ailleurs elles le sont).
Merci

PS : Qu'est qui gère le retour ligne dans le code source ? Les lignes sont excessivement longues, alors que je n'ai pas ça lorsque je regarde le code source sur localhost (via mon serveur apache).

**awalter1** · 18/03/2012, 10h28

Pour Sam3100, il fallait lire Gallerie 1 ...

Invité · 18/03/2012, 11h13

Envoyé par awalter1

PS : Qu'est qui gère le retour ligne dans le code source ?

Si tu utilises beaucoup les echo "..." en php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php 
echo "..........."."\n"; // retour à la ligne : \n
echo '...........'."\n"; // (ou)
...
?>

Une autre (bonne) idée est de "sortir" le code html du code php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php 
// ici, que du php (traitement,...)
?>
Ici, du html (avec une belle indentation !)
<table>
	<tr>
		<td><?php echo $bout_de_php; ?></td>
		<td><?php echo $autre_bout_de_php; ?></td>
	</tr>
</table>
...

Dans ton code, il manque une balise <td> après :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!-- DEBUT CODE compteur --><table><tr>

à fermer par une </td> avant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

</tr></table><!-- FIN CODE compteur  -->

Et des balises <pre> (à la fin) à supprimer, je suppose

Invité · 18/03/2012, 11h25

Entre nous, ton script de galerie date du siècle dernier.

Tu trouveras de belles galerie-photos jquery simples à installer et à utiliser, sur gogole : "galerie jquery"
Par exemple :
- Galleriffic (démo)
- galleria
- Pikachoose
- ...

**awalter1** · 18/03/2012, 17h44

Merci pour les conseils, j'ai mis mon code d'équerre.
Pour la gestion du retour ligne, ce que je ne comprends pas c'est que : en test sur localhost:80, j'ai mon code source à raison d'une instruction html par ligne alors que sur le site opérationnel, le code source est très différent : beaucoup d'instructions html par ligne. D'ou cela vient t'il ?
Merci
Je vais regarder les autres exemples de gallerie photos (ceci dit, pas facile pour moi de savoir si c'est périme ou ancien ?

).
Merci

Invité · 18/03/2012, 19h45

Passe tes pages au validateur : http://validator.w3.org/
Ton "équerre" est en mousse ? Prépare ton mouchoir, tu va pleurer...

- index : 28 Errors, 13 warning(s)
- galerie 1/galerie 2 : 37 Errors, 13 warning(s)
Surtout en "transitional", ca fait mal...

Heureusement, beaucoup peuvent être facilement corrigées.

Je t'invite aussi à revoir ta mise en page :
les <div>

, les <table>

! -> Div et CSS : une mise en page rapide et facile
Les <table> ne doivent servir qu'à l'affichage de données tabulaires.

**awalter1** · 27/03/2012, 00h25

oui, t'as raison, je pleures avec ce site de vérification! J'ai passé 3 heures pour comprendre qu'il fallait un vrai espace entre <?php xxxxxxx; ?> lorsqu'il est écrit comme suit on y penses pas:
<?php
xxxxxxxxxx;
?>

Par contre, le check ne se fait pas avec des lettres accentuées (même dans les commentaires), alors que mes pages s'affichent bien. C'est génant. Y a t'il un palliatif ?
Merci

cadre autour d'une image

CSS

Discussions similaires

Partager

Partager