Credits

Gaming images in backgrounds are trademarks of their respective holders.
Museo Sans font by Jos Buivenga (exljbris) : http://www.exljbris.nl

Forum PAO LaLogotheque.com: Tutoriel Html Et Css : La Galerie D'image - Forum PAO LaLogotheque.com

Aller au contenu

Hide message Show message

Bienvenue sur le Forum d'entraide à l'infographie de Lalogotheque.com !!!





  • (2 Pages)
  • +
  • 1
  • 2
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Tutoriel Html Et Css : La Galerie D'image ... ou comment snober JavaScript

#1 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 21 août 2007 - 23:38

Hello tout le monde !
Aujourd'hui au menu :
comment réaliser une galerie d'image simple en HTML/CSS et sans JavaScript.
Tout d'abord, ce tuto n'est peut-être pas une nouveauté pour certains et est le fruit de l'extrapolation d'un autre tutoriel.
Celui-ci est entièrement créé et inspiré du dît tutoriel et n'est en aucun cas une copie ou quoique ce soit.
Important : voici le lien vers le tutoriel sans lequel ce topic n'aurait certainement pas existé :
http://www.peutetreu...le-6614978.html
Un grand merci à Guillaume alias PêUR (Peut-être Une Réponse) ;)

Le principe de base est simple :
faire apparaître un élément (bloc, donc conteneur) au survol de la souris sur un lien.
Dans le tutoriel de PêUR, celà permet donc d'afficher des infobulles personnalisées et beaucoup plus esthétiques.
Dans ce tutoriel, cette technique aura pour but d'afficher une image taille réelle au survol d'une vignette.
Cette idée m'est simplement venu en trifouillant les explications de PêUR et en incluant une image dans les infobulles réalisées.

Petite différence encore, alors que l'infobulle du tutoriel de PêUR s'affiche dans une position relative au lien, l'image taille réelle s'affichera, comme vous pourrez le constater, toujours au même endroit (un cadre prévu à cet effet) quelque soit la vignette survolée.
Nous noterons au passage que l'exemple donné est compatible IE6, IE7 et Firefox (à vous de me dire pour Opéra, Safari ou autre ;)).
Il passe le validateur w3c (même si les plus férus d'entre vous noterons quelques choix ... limites :D).

Ce tutoriel nécessite de connaître les bases en HTML et CSS pour être pleinement compris dans son fonctionnement.
Le temps de réalisation est court, et il n'y a rien de vraiment tordu.

Ce que vous devez obtenir à la fin du tuto.

Commençont par le commencement, le squelette HTML :
<!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" lang="fr">
	<head>
		<title>galerie photo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<style type="text/css">
			@import url(galerie.css);
		</style>
	</head>
	<body>
		<div id="page">
			<div id="galerie">
			</div>
		</div>
	</body>
</html>

Voici selon moi, un squelette HTML 'propre' sans fioriture, paré pour recevoir la galerie d'image et prêt à braver le validateur XHTML 1.0 Strict ^_^

De la même façon préparons notre feuille CSS ('galerie.css') :
body{
font-family: verdana;
background-color: #333;
}

#galerie {
position: relative;
width: 700px;
margin: auto;
}

Nous définissons ici quelques paramètres globaux tels que la police, la couleur de fond et la taille.
Plus important, nous apportons au bloc d'ID 'galerie' la valeur position: relative qui lui permettra d'être l'élément référent de la zone d'apparition des images (et là vous me dîtes que c'est pas très clair tout ça et vous avez raison ... mais attendez ;))
Bon, à ce stade là, on a à l'écran une magnifique page grise ... c'est mieux que rien.

Continuons gaiement :
Nous allons, pour agrémenter cette page, rajouter une rangée de vignettes d'image.
Nous la stockerons dans un petit tableau à une ligne que nous désignerons par la classe "vignette" (vu qu'il contiendra ces vignettes), soit le html suivant :
<!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" lang="fr">
	<head>
		<title>galerie photo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<style type="text/css">
			@import url(galerie.css);
		</style>
	</head>
	<body>
		<div id="page">
			<div id="galerie">
				<table class="vignette">
					<tr>
						<td><a href=""><img src="images/image1_mini.jpg" alt="Unreal Tournament" /></a></td>
						<td><a href=""><img src="images/image2_mini.jpg" alt="Lanfeust de Troy : Hebus" /></a></td>
						<td><a href=""><img src="images/image3_mini.jpg" alt="Décor héroïc fantasy" /></a></td>
						<td><a href=""><img src="images/image4_mini.jpg" alt="Les simpsons : le film" /></a></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

Je rappelle que c'est sur un passement de souris sur les vignettes que l'image taille réelle apparaîtra, c'est pour celà que les vignettes (qui sont des images et donc des balises <img>) sont encapsulées dans un lien <a> (qui passera en élément bloc afin de devenir le conteneur de ces images ... ah bah j'avais prévenu, faut avoir un minimum de connaissances de base) afin de bénéficier de l'évènement hover (passage de la souris).

Un petit peu de CSS pour enjoliver tout ça :
body{
font-family: verdana;
background-color: #333;
}

#galerie {
position: relative;
width: 700px;
margin: auto;
}

.vignette {
margin: auto;
}

.vignette a {
display: block;
width: 145px;
height: 112px;
border: solid 3px #999;
}

.vignette a img {
width: 145px;
height: 112px;
border: 0;
}

.vignette a:hover {
border-color: #ccc;
}

Qu'avons nous fait là ?
Rien de bien sorcier, on a centré le tableau, fait en sorte que les liens <a> contiennent bien les vignettes <img>, rajouter un cadre autours de ces liens et un effet hover de changement de couleur de ce cadre ... à oui, et au passage donné une taille au <a> et <img> correspondant à la taille de vignette voulue.

On a nos vignettes ! Yes !

Ajoutons maintenant le cadre de destination de l'image agrandie :
<!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" lang="fr">
	<head>
		<title>galerie photo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<style type="text/css">
			@import url(boui.css);
		</style>
	</head>
	<body>
		<div id="page">
			<div id="galerie">
				<table class="vignette">
					<tr>
						<td><a href=""><img src="images/image1_mini.jpg" alt="Unreal Tournament" /></a></td>
						<td><a href=""><img src="images/image2_mini.jpg" alt="Lanfeust de Troy : Hebus" /></a></td>
						<td><a href=""><img src="images/image3_mini.jpg" alt="Décor héroïc fantasy" /></a></td>
						<td><a href=""><img src="images/image4_mini.jpg" alt="Les simpsons : le film" /></a></td>
					</tr>
				</table>
				<div id="fond">Passez votre souris sur les vignettes pour agrandir les images dans ce cadre</div>
			</div>
		</div>
	</body>
</html>

Vous remarquerez qu'à chaque fois je reprends le code depuis le début, ce qui est un choix (peut-être pas judicieux) effectué afin de faciliter la compréhension.

Donnons-lui la taille, le contour et la couleur de texte voulu grâce au CSS :
body{
font-family: verdana;
background-color: #333;
}

#galerie {
position: relative;
width: 700px;
margin: auto;
}

.vignette {
margin: auto;
}

.vignette a {
display: block;
width: 145px;
height: 112px;
border: solid 3px #999;
}

.vignette a img {
width: 145px;
height: 112px;
border: 0;
}

.vignette a:hover {
border-color: #ccc;
}

#fond{
width: 600px;
height: 250px;
margin: auto;
margin-top: 20px;
padding-top: 200px;
text-align: center;
color: #f60;
border: solid 3px #999;
}


Bon et bien plus qu'à accueillir chaleureusement les images de grandes tailles afin de les afficher royalement au survol des vignettes :D

Voici le HTML :
<!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" lang="fr">
	<head>
		<title>galerie photo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<style type="text/css">
			@import url(boui.css);
		</style>
	</head>
	<body>
		<div id="page">
			<div id="galerie">
				<table class="vignette">
					<tr>
						<td><a href=""><img src="images/image1_mini.jpg" alt="Unreal Tournament" /><span class="hide"><img src="images/image1.jpg" alt="Unreal Tournament" /><br /><br />Unreal Tournament</span></a></td>
						<td><a href=""><img src="images/image2_mini.jpg" alt="Lanfeust de Troy : Hebus" /><span class="hide"><img src="images/image2.jpg" alt="Lanfeust de Troy : Hebus" /><br /><br />Lanfeust de Troy : Hebus</span></a></td>
						<td><a href=""><img src="images/image3_mini.jpg" alt="Décor héroïc fantasy" /><span class="hide"><img src="images/image3.jpg" alt="Décor héroïc fantasy" /><br /><br />Décor héroïc fantasy</span></a></td>
						<td><a href=""><img src="images/image4_mini.jpg" alt="Les simpsons : le film" /><span class="hide"><img src="images/image4.jpg" alt="Les simpsons : le film" /><br /><br />Les simpsons : le film</span></a></td>
					</tr>
				</table>
				<div id="fond">Passez votre souris sur les vignettes pour agrandir les images dans ce cadre</div>
			</div>
		</div>
	</body>
</html>


et son CSS :
body{
font-family: verdana;
background-color: #333;
}

#galerie {
position: relative;
width: 700px;
margin: auto;
}

.vignette {
margin: auto;
}

.vignette a {
display: block;
width: 145px;
height: 112px;
border: solid 3px #999;
}

.vignette a img {
width: 145px;
height: 112px;
border: 0;
}

.vignette a:hover {
border-color: #ccc;
}

#fond{
width: 600px;
height: 250px;
margin: auto;
margin-top: 20px;
padding-top: 200px;
text-align: center;
color: #f60;
border: solid 3px #999;
}

.hide{
display: none;
text-align: center;
}

.vignette a span img {
width: 600px;
height: 450px;
border: 0;
}

.vignette a:hover span.hide{
position: absolute;
display: block;
width: 600px;
height: 450px;
left: 50px;
top: 147px;
}

Ne vous inquiétez pas, je ne vais pas vous laisser avec ce pavé sans explication (c'est pas mon genre voyons ... :-)
Allez au revoir et à la prochaine !!!



... héhéhé ...hum ... pardons.
allons-y progressivement :
le but étant de rendre visible une image qui à la base a été masquée.
<span class="hide"><img src="..." /></span> la voici, et nous la cachons grâce à la propriété display:none.
C'est donc au survol de la vignette que cette apparition s'effectuera, donc sur l'évènement hover de ces vignettes soit : .vignette a:hover span.hide
où l'on passe la propriété display:block qui les fera apparaître.
Notez la propriété position:absolute afin de positionner toutes les images par rapport au bloc référent #galerie.
Le reste sert uniquement à positionner ces images bien pile poil dans le cadre et à donner la taille voulue à cette image.
Au passage rajoutons les lignes suivantes :
color: #f60;
text-decoration: none;

dans le CSS et dans l'élément .vignette a{} (vers la 20ème ligne grossomodo si recopié tel quel), afin de donner une couleur au commentaire d'image plus lisible que ce satané violet tout pas bô et d'enlever le soulignement (sous IE).

Sauf erreur de ma part, à ce niveau du tutoriel, nous avons fini notre galerie. Champagne !
Allez juste pour faire durer le plaisir, nous allons nous rajouter une ligne de vignettes en dessous du cadre, soit le HTML suivant :
<!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" lang="fr">
	<head>
		<title>galerie photo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<style type="text/css">
			@import url(boui.css);
		</style>
	</head>
	<body>
		<div id="page">
			<div id="galerie">
				<table class="vignette">
					<tr>
						<td><a href=""><img src="images/image1_mini.jpg" alt="Unreal Tournament" /><span class="hide"><img src="images/image1.jpg" alt="Unreal Tournament" /><br /><br />Unreal Tournament</span></a></td>
						<td><a href=""><img src="images/image2_mini.jpg" alt="Lanfeust de Troy : Hebus" /><span class="hide"><img src="images/image2.jpg" alt="Lanfeust de Troy : Hebus" /><br /><br />Lanfeust de Troy : Hebus</span></a></td>
						<td><a href=""><img src="images/image3_mini.jpg" alt="Décor héroïc fantasy" /><span class="hide"><img src="images/image3.jpg" alt="Décor héroïc fantasy" /><br /><br />Décor héroïc fantasy</span></a></td>
						<td><a href=""><img src="images/image4_mini.jpg" alt="Les simpsons : le film" /><span class="hide"><img src="images/image4.jpg" alt="Les simpsons : le film" /><br /><br />Les simpsons : le film</span></a></td>
					</tr>
				</table>
				<div id="fond">Passez votre souris sur les vignettes pour agrandir les images dans ce cadre</div>
				<table class="vignette">
					<tr>
						<td><a href=""><img src="images/image5_mini.jpg" alt="Alien attack" /><span class="hide"><img src="images/image5.jpg" alt="Alien attack" /><br /><br />Alien attack</span></a></td>
						<td><a href=""><img src="images/image6_mini.jpg" alt="Le chat d'American Mc Gee's Alice" /><span class="hide"><img src="images/image6.jpg" alt="Le chat d'American Mc Gee's Alice" /><br /><br />Le chat d'American Mc Gee's Alice</span></a></td>
						<td><a href=""><img src="images/image7_mini.jpg" alt="Gaston Lagaffe et sa meute de tortues enragées" /><span class="hide"><img src="images/image7.jpg" alt="Gaston Lagaffe et sa meute de tortues enragées" /><br /><br />Gaston Lagaffe et sa meute de tortues enragées</span></a></td>
						<td><a href=""><img src="images/image8_mini.jpg" alt="Iron Maiden :" /><span class="hide"><img src="images/image8.jpg" alt="Iron Maiden :" /><br /><br />Iron Maiden : A Real Live One</span></a></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

plus une ligne à rajouter dans le CSS afin que le texte des grandes images ne chevauchent pas les vignettes du bas :
dans l'élément #fond{} rajoutez la ligne :
margin-bottom: 40px;
et voilou !!!
Pour que vous puissiez faire le tuto sans avoir à créer vos vignettes et images, je vous les mets en vrac ci-dessous et avec le nom correspondant au tuto (sauf pour les vignettes qui héritent d'un nom de post imbuvable :P) :
Fichier joint  image1_mini.jpg (49,32 Ko)
Nombre de téléchargements : 3Fichier joint  image2_mini.jpg (53,82 Ko)
Nombre de téléchargements : 2
Fichier joint  image3_mini.jpg (39,64 Ko)
Nombre de téléchargements : 2Fichier joint  image4_mini.jpg (34,55 Ko)
Nombre de téléchargements : 2
Fichier joint  image5_mini.jpg (36,25 Ko)
Nombre de téléchargements : 2Fichier joint  image6_mini.jpg (41,03 Ko)
Nombre de téléchargements : 2
Fichier joint  image7_mini.jpg (37,01 Ko)
Nombre de téléchargements : 2Fichier joint  image8_mini.jpg (46,15 Ko)
Nombre de téléchargements : 2
Fichier joint  image1.jpg (273,78 Ko)
Nombre de téléchargements : 22
Fichier joint  image2.jpg (363,85 Ko)
Nombre de téléchargements : 8
Fichier joint  image3.jpg (257,69 Ko)
Nombre de téléchargements : 9
Fichier joint  image4.jpg (117,38 Ko)
Nombre de téléchargements : 9
Fichier joint  image5.jpg (179,88 Ko)
Nombre de téléchargements : 7
Fichier joint  image6.jpg (194,52 Ko)
Nombre de téléchargements : 10
Fichier joint  image7.jpg (147,66 Ko)
Nombre de téléchargements : 9
Fichier joint  image8.jpg (260,3 Ko)
Nombre de téléchargements : 10
Toutes ces images sont tirées du site Hebus et sont donc diffusées légalement.
Notez que vous n'avez pas besoin obligatoirement de créer des vignettes et vous servir des grandes images qui seront retaillées par le CSS, mais je le fais dans un souci de qualité visuelle.
Pour un souci de lisibilité, je vous conseille de recopier le code dans un éditeur adapté à coloration syntaxique (notepad++ pour windows et linux ou Smultron pour Mac ferons bien l'affaire).
Les éléments en bleu sont du code CSS
Les éléments en vert sont du code HTML

Petite mise à jour over discrète :
pour ceux qui ont eut le courage d'aller jusqu'au bout du tuto en bonus track une version un peu plus esthétique de cette galerie avec 2 habillages CSS pour un même code HTML.

Ce message a été modifié par RaGe - 03 novembre 2008 - 18:49 .

Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#2 L'utilisateur est hors-ligne   l'Orél...aïe 

  • et une cagouille.... une....
  • Voir la galerie
  • Groupe : Membre++
  • Messages : 2 337
  • Inscrit(e) : 04-mai 06

Posté 22 août 2007 - 00:42

encore du beau boulot RaGe......... :drink1:
Pom'DAMOUR
Il n'y a qu'une seule réussite… parvenir à vivre sa vie comme on l'entend (Christopher Morley)
0

#3 Guest_Natas_*

  • Groupe : Guests

Posté 22 août 2007 - 04:17

Super tuto Rage, je lui donne coup d'épingle ;)
0

#4 L'utilisateur est hors-ligne   ded 

  • Admin Adjoint en rodage
  • Groupe : Admin Adjoint
  • Messages : 4 354
  • Inscrit(e) : 09-août 06

Posté 22 août 2007 - 10:25

Bonjour à tous,

RaGe tu es au top !!! :drink1:
Merci pour le tuto.
GLOP is not Ded ! ©
• Pour la Créa, c'est par !,
• Le Hokuto Shinken n'est pas mort, la légende continue...
Glop shmup, site.

T_T
0

#5 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 22 août 2007 - 19:24

Merci à vous :arrow2:
J'espère seulement que ce tuto n'est pas trop imcompréhensible et ce malgrès sa simplicité (faut dire que les encarts de code de l'IP.Board n'aide pas).
Je referrai peut-être le code sous balises 'quote' afin d'y apporter une coloration syntaxique et mettre en évidence ce qui change à chaque fois.
Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#6 L'utilisateur est hors-ligne   leKteur 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 84
  • Inscrit(e) : 11-août 07

  Posté 11 septembre 2007 - 19:46

Excelent tuto ! Déjà à l'oeuvre sur mon site (WIP - coming soon), il m'a été plus qu'utile !
0

#7 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 12 septembre 2007 - 16:51

Ravi que celà puisse servir ^_^
Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#8 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 14 septembre 2007 - 17:57

salut à tous

Bien trouvé pour cette galerie.
Je l'ai donc utilisée mais voilà le souci.

En resolution 1024 et avec IE lorsque je passe la souris sur les miniatures, j ai ma fenetre IE qui saute, voire un menu deroulant horizontal qui s affiche sur cette fameuse fenetre.

Par contre une resolution au dessus jen ai aucun probleme.

Sur firefox en 1024 et plus lorsque je passe sur les miniatures les images ne s affichent pas toujours instantanemment, parfois il faut y revenir pour la voir en taille reelle.

Christine
0

#9 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 14 septembre 2007 - 18:23

Hello Christine !
Ma galerie est testée et approuvée, même sous IE6, et ce quelque soit la résoluton.
Tu dois avoir un problème d'adaptation.
Serait-il possible d'avoir un lien vers ta galerie ou même le code ?
Je pourrais p'tet bien te dépanner ;)
Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#10 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 14 septembre 2007 - 18:39

Salut Rage

je te donne donc le lien : www.magneville.net/christine

Merci
Christine
0

#11 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 14 septembre 2007 - 18:42

j ai oublie de te dire le site n est pas termine comme tu as pu le voir.
Je te donne le lien : photos->mariage

Merci
Christine
0

#12 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 14 septembre 2007 - 18:48

Le code CSS je te donne juste la partie droite qui correspond à la boitedroit.
Tu me dis si tu veux le reste


#boitedroite{
float:right;
width:640px;
margin-top:5px;
height:380px;
margin-right:0px;
background-image: url(essai/BOITEDROITE.png);
background-repeat: no-repeat;

}


.vignette {
margin:auto;

}

.vignette a {
display: block;
width: 40px;
height: 50px;
border: solid 3px #999;

}

.vignette a img {
width: 40px;
height: 50px;
border: 0;



}

.vignette a:hover {
border-color: #ccc;
}

#fond{
width: 302px;
height: 350px;
margin-top: 8px;
color: #FCDE77;
border: solid 3px #999;
float:right;
margin-right:10px;

}

.hide{
display: none;
text-align: center;
}

.vignette a span img {
width: 301px;
height:348px;
border: 0;
}

.vignette a:hover span.hide{

display: block;
width: 603px;
height: 350px;
left:434px;
top: 126px;
position: absolute;

}

#boitevignette
{

margin-top:20px;
width:130px;
height:300px;
float:left;

margin-left:10px;

}



le code html :

<div id="boitedroite">
			
			
			<div id="boitevignette">
                <table class="vignette">
                    <tr>
<td><a href="#"><img src="pics/cdeco-compo-070[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-070[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-072[1].jpg"alt="image" /><span class="hide"><img src="pics/cdeco-compo-072[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-074[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-074[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-075[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-075[1].jpg" alt="image" /></span></a></td>

</tr>

					
<tr>
<td><a href="#"><img src="pics/cdeco-compo-081[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-081[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-082[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-082[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-083[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-083[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-084[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-084[1].jpg" alt="image" /></span></a></td>


</tr>



<tr>
<td><a href="#"><img src="pics/cdeco-compo-112[1].jpg"alt="image" /><span class="hide"><img src="pics/cdeco-compo-112[1].jpg"  alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-113[1].jpg"alt="image" /><span class="hide"><img src="pics/cdeco-compo-113[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-098[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-098[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-096[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-096[1].jpg" alt="image" /></span></a></td>
</tr>

<tr>
<td><a href="#"><img src="pics/cdeco-compo-047[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-047[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-043[1].jpg"alt="image" /><span class="hide"><img src="pics/cdeco-compo-043[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-098[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-098[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-096[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-096[1].jpg" alt="image" /></span></a></td>
</tr> 
                </table>
				</div>
				
				        <div id="fond">      
                <img src="pics/cdeco-compo-096[1].jpg" alt="image"  width="302" height="348"  /></div> 
	
				
			</div>

Ce message a été modifié par Djoule - 15 septembre 2007 - 14:20 .
Raison de l'édition : une petite code box pour plus de clareté ;)

0

#13 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 14 septembre 2007 - 19:27

.vignette a:hover span.hide{

display: block;
	width: 603px;
	height: 350px;
	left:434px;
	top: 126px;
	position: absolute;


par contre sur cette classe si je mets le left à 345 px ça fonctionne sur IE mais pas au delà du 350.
Mais par contre lorsque l image est trop rapprochee des miniatures je ne peux plus les visualiser avec firefox.
Losque je passe la souris dessus il ne m affiche aucune images reelles , avec Firefox.

Christine

Ce message a été modifié par Djoule - 15 septembre 2007 - 14:21 .
Raison de l'édition : pareil ;)

0

#14 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 14 septembre 2007 - 23:20

Ah oui ... le décalage IE, Firefox ... il faut jouer au niveau de la posotion de .vignette a:hover span.hide
tente plutôt un right: xpx; plutôt qu'un left: xpx; dans ton cas.
De plus, vu la position de ton image, ce sera plus cohérent.
Tu pars d'un right: 0px; et tu augmente au fur et à mesure.

De plus, il semble que tu n'as pas définie de <div> référente.

Donc je te conseille de passer ta div "boitedroite" en position relative et de caler la span de classe hide avec un right plutôt qu'un left (même si un left devrait fonctionner sans trop de problème).

Dis moi si c'est ok ;)

Ce message a été modifié par RaGe - 14 septembre 2007 - 23:33 .

Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#15 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 14 septembre 2007 - 23:51

ok je vais essayer.

je te remercie beacoup car ta methode est pas mal.
Pourrais je dans les prochains jours te demander quelque chose?
Tu as vu mon site et je tente de faire une galerie avec scroll, donc j ai repris tes methodes, pas mal d' ailleurs , mais souci avec firefox.
l image s affiche dans le scroll et avec IE j ai reussi.
Je pense que ça vient de moi.
Interessant tout ça vraiment.
Donc je vais faire ce que tu m as dit meme si javais dejà tenter de faire une boitevignette position relative. mais il est vrai que je n ai jongle qu avec le left et top.
je te donne des nouvelles et si tu me le permets si je trouve la solution avec scroll( et pourquoi pas avec toi sourire car tu es l auteur tout de même de ce code à la base , oui tu nous inspires sourire).

Merci encore Rage
0

#16 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 15 septembre 2007 - 00:10

re
idem avec le right . Des qu il sort de la boite boitevignette ça saute.
Donc je te dis ce que j ai fait j ai mis la boitevignette en position relative telle que:
#boitevignette
{

	margin-top:20px;
	width:130px;
	height:300px;
	float:left;
	
	margin-left:10px;
	position:relative;
	
}

et j ai joue sur le right 

.vignette a:hover span.hide{

display: block;
	width: 603px;
	height: 350px;
	right:-600px;
	top: 136px;
	position: absolute;
	
}

Ce message a été modifié par Djoule - 15 septembre 2007 - 14:22 .
Raison de l'édition : codebox

0

#17 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 15 septembre 2007 - 00:18

en fait la boitevignette relative ou pas ça ne change rien. Sauf qu effectivement la boite absolute où doit s afficher l image reelle est decalee .
Disons qu avec relatif elle est plus à droite et sans elle est plus à gauche mais si j essaye de cibler sa position le probleme persiste
0

#18 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 15 septembre 2007 - 01:57

olaaaa au temps pour moi ('autant pour moi' pour pas fâcher Wuam :P), je m'a suis gourationner ... c'est ta div boitedroite qu'il faudrait passer en relative afin que la span en absolute se réfère à celle-ci.
Ta div boitevignette ne contient pas le cadre de destination elle, donc elle n'est pas l'élément à chosir comme référent.

En fait, je ne saurais te l'expliquer avec assurance, mais quand tu passes un élément conteneur en position relative, il semblerait que les éléments en absolute, contenu dans celui-ci, se réfèrent à lui en priorité (probablement car sa position est définie explicitement).

j'ai testé rapidos avec mon p'tit css edit pour firefox et ça roule ;... par contre je peux pas tester les modifs en direct sous IE :huh:

Alors nouvelle recommandation, passe ta div boitedroite en relative et teste la 'vignette a:hover span.hide' avec un left (avec un left:175px; et un top:12px ça m'a l'air de coller).

Quand j'aurais plus de temps, je ferai un backup de ton site pour tester sous IE si jamais le problème persiste.

Voir le messagech.christine, le 15 Sep 2007, 00:57, dit :

Pourrais je dans les prochains jours te demander quelque chose?

Bah no problemo ;)
Il faudra juste que tu me précises un peu ce que tu entends par 'faire une galerie avec scroll' parce que je ne visualise pas très bien ... et p'tet aussi pask'il se fait tard :P

Arf et au passage, si tu veux un affichage de tes photos le plus optimisé possible, je te conseille de les redimensionner à la taille de ton cadre, ce qui leur fera perdre pas mal de ko je pense ;)
Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#19 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 15 septembre 2007 - 14:23

Salut Rage.

Bon voilà ce que j ai fait.
J 'ai mis ma boitevignette en "relative" et width à 200px.
Dans cette boite il n y a donc que mes vignettes.

donc voilà un bout de code je ne vais pas mettre toutes les images hein:
  <div id="boitedroite">
			
			
			<div id="boitevignette">
                <table class="vignette">
                    <tr>
<td><a href="#"><img src="pics/cdeco-compo-070[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-070[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-072[1].jpg"alt="image" /><span class="hide"><img src="pics/cdeco-compo-072[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-074[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-074[1].jpg" alt="image" /></span></a></td>
<td><a href="#"><img src="pics/cdeco-compo-075[1].jpg" alt="image" /><span class="hide"><img src="pics/cdeco-compo-075[1].jpg" alt="image" /></span></a></td>
</tr>
</div>


et dans la boite droite j ai donc insere la boite "fond"

<div id="fond></div>
</div>

Donc sur IE j'ai réussi à resoudre le probleme.
Il a fallu que je jongle avec le width et le left au pixel près.

Ce qui donne

.vignette a:hover span.hide{

display: block;
	width:872px;
	height: 350px;
	left:300px;
	top: 137px;
	position: absolute;
}


Là avec IE impeccable.
Mais , mais , mais il etait evident que je n allais pas m en sortir comme ça.
Avec Mozilla au passage de la souris plus rien

Donc donc donc pour resoudre le probleme j ai dû jongler cette fois avec le Height et le top.

ce qui donnait :

vignette a:hover span.hide{

display: block;
	width:872px;
	height: 32px;
	left:300px;
	top: 137px;
	position: absolute;
}


Là tout refonctionne aussi sur Mozilla.

Mais mais mais lol retour sur IE retour sur le même probleme qu auparavant.
Donc j ai retente de rejongler avec le width et le left mais plus rien à faire.
Mais par contre en rejonglant avec ces deux proprietes firefox ne bougeait plus, apparemment à height: 32 px et top: 137px il est bien calé ce "bigre" lol.

Donc est ce que c est un probleme de dimension concernant ma page centrale ou ma boite droite ou bien la boite vignette etc.....
ma boite droite fait de largeur 640 px et de hauteur 380 px avec une marge haut de 5 px.
Après reflexion c est peut être elle que je devrais mettre en position relative non?
Je vais tenter le coup.
Par contre je ne peux pas avoir les memes width et heigt que toi etant donne que j ai un menu sur le cote et le logo au dessus donc ma boite droite est positionnee differemment par rapport à toi (si tu fais des essais).
Car quand je prends ma boite seule je dois tout rechanger.

Donc à voir aussi si il faut diminuer l image reelle ou la rapprocher de la galerie miniature.

Concernant mes photos oui comme tu disais il faut que je les redimensionne, mais je pense faire un script PHP mes miniatures.

Pour la galerie en scroll , c est un menu deroulant horizontal ou tu inseres toutes tes photos.
Si tu veux voir à quoi cela ressemble je te donne le code pour l'aperçu du menu.

#galerie_mini{  
     background: url(./images/fond_vignettes.png) ;
	 left: 0px;
	 top: 50%;
	 float: bottom;
	 border-width: thin;
	 border-style: solid; 
	 border-color: #666600;
	 border-size: 1px;
                 overflow:auto;
	 white-space:nowrap;
	 width:20%; 
	 height:75px;
	 margin: 0 ;
	 padding: 2px ;
	 }


Mais bon avant de me lancer dans celui là il faut que j arrive tout de même à resoudre mon probleme.




Merci encore
Christine

Ce message a été modifié par Djoule - 15 septembre 2007 - 14:26 .

0

#20 L'utilisateur est hors-ligne   Djoule 

  • Une Goudale sinon 2 !!!
  • Voir la galerie
  • Groupe : Membre++
  • Messages : 1 168
  • Inscrit(e) : 12-mai 06

Posté 15 septembre 2007 - 14:34

Salut christine.

Juste un petit apparté pourte montrer comment on insere le code dans la boite ;)
Lors de l'ecriture de ton message, avant ton code CS ou HTML, tape codebox entre 2 crochets []. Et pour la fermer c'est la même chose avec /codebox.

Bonne journée à toi et pou courage pour ta galerie ;)
Il est préférable de savoir tout chercher que de chercher à tout savoir.
Si le suffixe "-icule" signifie "petit", comment doit on appeller un petit test ?
0

#21 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 15 septembre 2007 - 14:54

Voir le messagech.christine, le 15 Sep 2007, 15:29, dit :

ma boite droite fait de largeur 640 px et de hauteur 380 px avec une marge haut de 5 px.
Après reflexion c est peut être elle que je devrais mettre en position relative non?

Bah oui christine ! c'est bien ce que je t'ai dit dans mon dernier message ^_^ :

Voir le messageRaGe, le 15 Sep 2007, 03:03, dit :

Alors nouvelle recommandation, passe ta div boitedroite en relative et teste la 'vignette a:hover span.hide' avec un left (avec un left:175px; et un top:12px ça m'a l'air de coller).

alors comme ça on me lit pas attentivement ? :P
Il faut effectivement que ta div référente (celle que tu placeras en position relative) englobe le tout : tes vignettes et ton cadre de destination.

Voir le messagech.christine, le 15 Sep 2007, 15:29, dit :

Concernant mes photos oui comme tu disais il faut que je les redimensionne, mais je pense faire un script PHP mes miniatures.

Oui, très bonne idée surtout que les fonctions PHP de traîtement d'image donnent d'excellents résultats.
Il faudrait retailler tes vignettes mais aussi l'image "taille réelle" qui semble quand même plus petite que l'image source.

Pour ta galerie scroll, je saisi le principe.
ça peut être sympa en effet.
Corrigeons d'abord ton problème et après, je pourrai t'aider si tu en as besoin ;)
Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#22 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 15 septembre 2007 - 18:28

RE Rage

Heureuse de te dire que j'ai réussi.
j ai donc mis ma boitedroite "la principale" en position:relative.
Avec le left ça ne fonctionnait toujours pas et donc effectivement comme tu me l avais précisé dans un de tes messages , j ai utilisé le right.
Les tailles sont effectivement dejà moins grandes (et je pense et même sûre que c'est ça qui créait ce bug) et comme tu disais vu mon shéma il était plus logique de partir par la droite donc voici le code css.

.vignette a:hover span.hide{
display: block;	
width: 303px;	
height: 350px;	
right:13px;	
top: 12px;	
position: absolute;

}


Comme je te disais je compte faire les miniatures via php.
Par contre pour les images reelles , je vais surement oui les redimensionner.Photoshop suffit?
Il m avait semble le faire mais si je me rappelle je perdais tout de même de la qualite.

Sinon je vais tenter de faire deux autres galeries photos celle avec scroll et une autre vu sur ce site : http://www.cssplay.co.uk/menu/lightbox qui va être plus difficile.Sur ce site il y a pas mal d exemples de galleries sympathiques.

Merci Rage et merci aussi à Djoule pour son conseil, c'est vrai que présenté ainsi c 'est mieux.

Ce message a été modifié par Djoule - 15 septembre 2007 - 18:31 .
Raison de l'édition : code en double, mais ça vient lol

0

#23 L'utilisateur est hors-ligne   Djoule 

  • Une Goudale sinon 2 !!!
  • Voir la galerie
  • Groupe : Membre++
  • Messages : 1 168
  • Inscrit(e) : 12-mai 06

Posté 15 septembre 2007 - 18:30

;)
Il est préférable de savoir tout chercher que de chercher à tout savoir.
Si le suffixe "-icule" signifie "petit", comment doit on appeller un petit test ?
0

#24 L'utilisateur est hors-ligne   RaGe 

  • M'enfin ?!
  • Groupe : Admin Adjoint
  • Messages : 2 755
  • Inscrit(e) : 04-octobre 06

Posté 15 septembre 2007 - 21:05

Bon ben nickel !
Pour la dernière galerie, j'ai regardé, et tu peux reprendre ma technique tel quelle, sauf que tu enlèves le position relative et que tu passes les 'vignette a:hover span.hide' sur left:0; et top:0; ;)
Chuck Norris sait parler le braille.
La Rage de vaincre !
Il a peut être un nom ridicule, mais allez donc lui dire en face
Contrôle fiscal ou Alcootest ? A vous de choisir ;)
0

#25 L'utilisateur est hors-ligne   ch.christine 

  • Logoteur de Fer
  • Groupe : Membre
  • Messages : 62
  • Inscrit(e) : 14-septembre 07

Posté 15 septembre 2007 - 23:01

Re

Dejà pour le moment je vais garder celle ci.
Juste à voir pour les photos et en rajouter biensûr car mon menu présente le choix sur les thèmes (à voir plus tard)déjà donc je vais rester sur cette config.
Mais pour moi personnellement je vais essayer d autre gallerie car j ai reellement trouve ça interessant.
Apparemment j aime bien le CSS sourire sans javascript.
Pas parce qu il est plus facile mais je pense que l on peut faire des choses tres interessantes et bien avec.
Car il est loin d être facile sourire.
Je pense que l on peut creer des effets avec et sans javascript , et le javascript j evite. Tant il y a des problemes avec Css en dessous de IE7 mais bon......
Au fait Rage tu es prof sourire? car tu as le don ... Cette patience,et de vouloir communiquer ton savoir qui est tres interessant.VI vi je connais.

Merci encore.
Je donnerai des nouvelles je pense sur cette gallerie en scroll sourire.


Voir le messageRaGe, le 15 Sep 2007, 22:11, dit :

Bon ben nickel !
Pour la dernière galerie, j'ai regardé, et tu peux reprendre ma technique tel quelle, sauf que tu enlèves le position relative et que tu passes les 'vignette a:hover span.hide' sur left:0; et top:0; ;)

0

Partager ce sujet :


  • (2 Pages)
  • +
  • 1
  • 2
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet



Enter your sign in name and password


Sign in options
  Or sign in with these services