28172 sujets

CSS et mise en forme, CSS3

Problème de centrage vertical d'image

Bonjour,

Je souhaite centrer les aperçu de mes photos verticalement (les petites vignettes en haut). Je n'y arrive pas, même après avoir consulté les Tuto sur le sujet...L'idée c'est que même avec la bordure de sélection, elle soit centrer verticalement dans mon div à la bordure noir.
Le deuxième problème concerne l'affichage de la photo en cours...je souhaite que la photo miniature actuellement visualisée soit encadrer. J'ai pour cela ajouté une bordure à la balise <a> active. Cependant, lors du lancement de l'album, aucune vignette d'aperçu n'est active et par conséquent, aucun aperçu n'est encadré alors qu'on visualise bien une image...y a t il une solution à ce problème? (ma question est elle claire?!je n'en suis pas sûr)

Voici mon code HTML (extrait):

<html>
<head>
<title>Test aperçu de vignettes</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="galerie.js"></script>
</head>
<body>
<div id="galerie">
	
	<ul id="galerie_mini">
		
		<li><a href="Image1.jpg" title="Aperçu"><img src="Image1m.jpg" alt="Test" /></a></li>
		<li><a href="Image2.jpg" title="Aperçu"><img src="Image2m.jpg" alt="Test" /></a></li>
		<li><a href="Image3.jpg" title="Aperçu"><img src="Image3m.jpg" alt="Test" /></a></li>
		<li><a href="Image4.jpg" title="Aperçu"><img src="Image4m.jpg" alt="Test" /></a></li>
		
	</ul>
		
	<dl id="photo">
		<dt>Aperçu</dt>
		<dd><img id="big_pict" src="Image1.jpg" alt="Test" /></dd>
	</dl>
</div>
</body>
</html>


Et mon code CSS: 


div#galerie
{
width: 630px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
border: 2px solid black;
height: 70px;
}

ul#galerie_mini li
{
float: left ;
}

ul#galerie_mini li a img
{
margin: 2px 1px ;
}

ul#galerie_mini li a:active img
{
border: 5px solid red;
}

dl#photo
{
clear: both ;
margin: 0 auto ;
}

dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

dl#photo dd
{
margin: 0 ;
}

a img {
border: none;
}


Enfin le code javascript:

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale

	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = displayPics;



Merci pour votre aide...[/i]
Sujet clos
Aller à