Slider : superposition div, tailles d'images différentes, centrage.

Bonjours à tous,

Je suis actuellement sur un projet avec mon beau frère pour créer le portfolio d'un ami architecte a lui. C'est mon premier projet et déjà confronter a un problème avec le slider et des questions. Je vous expose la chose.

Tout d'abord le site : www.julien-angelick.fr
(J’apprécie les critiques bonnes ou mauvais au niveau du code et de la conception pour mieux voir les pratiques a adopter dans le développement d'un site web)

Comme vous pourrez le voir il est en phase de construction mais ça commence a durée avec cette histoire de slider.

Mon beau frère a fait le design du site :
http://img4.hostingpics.net/thumbs/mini_957324julien2projets06.jpg

Voila ce a quoi devrai ressembler la slider.

Pour le réaliser je suis parti sur la base d'un slider simple en CSS3 et HTML mais j'ai vite rencontrer des problèmes.

1. Déjà pour faire passer le menu au dessus de l'image. J'ai beau changer la place des div l'un dans l'autre cela ne fonctionne pas. (Je sais qu'il y a une erreur de ma par mais je ne trouve pas quoi)
2. Ensuite les images n'ont pas la même tailles et quand je met une image en :first-child; si le prochaine est plus petite on voit la première en dessous.
3. Puis c'est pour centrer le tout horizontalement et verticalement que je rencontre un problème, les margin-left et margin-right : auto; ne fonctionnent pas et puis je vous en parle pas pour le verticale.

Je pense que le tout ne fait pas un bon mélange, un menu qu'il faut retrouver a chaque fois que l'image change de taille faire suivre le tout...

Je me dit alors qu'il faudrait mieu opter pour un bouton précédent et suivant avec une transition entre chaque images pour les mettre au bon format et le tout centrer. Seulement je ne sais pas si il faut mieu utiliser du javascripte dont je ne suis pas très a l'aise encor avec ou si je peux le faire en css.

Merci pour la lecture et j'essayerais de faire plus compacte le prochaine fois. Je vous met les codes correspondants si-dessous.

<div id="conteneur">
			<div id="contenu">
				<div id="images">
					<img id="image" src="" />
  					<img id="image1" src="photoArchi (1).jpg" />
  					<img id="image2" src="photoArchi (2).jpg" />
  					<img id="image3" src="photoArchi (3).jpg" />
  					<img id="image4" src="photoArchi (4).jpg" />
  					<img id="image5" src="photoArchi (5).jpg" />
  					<img id="image6" src="photoArchi (6).jpg" />
  					<img id="image7" src="photoArchi (7).jpg" />
  					<img id="image8" src="photoArchi (8).jpg" />
  					<img id="image9" src="photoArchi (9).jpg" />
  					<img id="image10" src="photoArchi (10).jpg" />
  					<img id="image11" src="photoArchi (11).jpg" />
  					<img id="image12" src="photoArchi (12).jpg" />
  					<img id="image13" src="photoArchi (13).jpg" />
  					<img id="image14" src="photoArchi (14).jpg" />
  					<img id="image15" src="photoArchi (15).jpg" />
  					<img id="image16" src="photoArchi (16).jpg" />
  					<img id="image17" src="photoArchi (17).jpg" />	
				</div>
				<div id="slider">
					<ul>
  						<li><a href="#image1">1</a></li>
 						<li><a href="#image2">2</a></li>
  						<li><a href="#image3">3</a></li>
  						<li><a href="#image4">4</a></li>
  						<li><a href="#image5">5</a></li>
  						<li><a href="#image6">6</a></li>
  						<li><a href="#image7">7</a></li>
  						<li><a href="#image8">8</a></li>
  						<li><a href="#image9">9</a></li>
  						<li><a href="#image10">10</a></li>
  						<li><a href="#image11">11</a></li>
  						<li><a href="#image12">12</a></li>
  						<li><a href="#image13">13</a></li>
  						<li><a href="#image14">14</a></li>
  						<li><a href="#image15">15</a></li>
  						<li><a href="#image16">16</a></li>
  						<li><a href="#image17">17</a></li>
  					</ul>
				</div>
			</div>
		</div>

/* PAGES */
    	
    	#conteneur{
    		width: auto;
    		height: 582px;
    		background-color: #363434;
    	}
    	
    	#contenu{
    		position: relative;
    		margin-left: auto;
  			margin-right: auto;
    		max-width: 1600px;
    		height: 582px;
    		background-color: #363434;
    	}

 /* contenuSlider */
		#images {
  			width: 1069px;
  			height: 454px;
  			overflow: hidden;
  			position: relative;
  			margin: auto;
		}
		
		#images img {
			vertical-align:middle;
  			
  			position: absolute;
  			top: 0;
  			left: -400px;
  			z-index: 1;
  			opacity: 0;
		}
		
		#images img:target {
  			left: 0;
  			z-index: 9;
 			opacity: 1;
		}
		
		#images img:first-child {
  			left: 0;
  			opacity: 1;
		}
		
		#slider{
			position: relative;
			text-decoration: none;
			list-style: none;
		}
		
		#slider li{
			border: white 2px;	
			display: inline-block;
		}
		
		#slider a {
			
		}
		
		#slider a:hover {
  			background: #C6E4F2;
		}

Merci d'avance!
Modifié par Ironfeet (15 Apr 2013 - 19:18)

Je pense tu as mi beaucoup trop de id="". Essaie plus le sélecteur class="" et dans ton css au lieu d'avoir #nom tu met .nom. Essaie et reviens nous dire si sa a changer quelque chose.

Le ID ne s'utilise qu'une seule fois dans le code pour par exemple faire en sorte que tout le site n'ai pas de marge. CLASS quand a lui s'utilise à l'infini.
Modifié par Philigane (17 Apr 2013 - 09:09)

Bha un id peut être utiliser qu'une seul fois par page ce qui est le cas ici. Donc ça ne devrais pas poser de problèmes.
Mais je pense que je vais finalement reprendre un slider en javascript qui fait une transition si l'image est de taille différente seulement avec des boutons suivant et précédent.
Mais merci quand même, après il ce peut que je me trompe mais je pense pas.
Je vous tien au courant et et si des personnes ont des solution pour faire de cette façon je suis à leur écoute.

PS : J'ai laisser un poste sur un autre forum et on m'as conseiller de jouer avec le z-index.

Bonjour,

Je pense qu'il aurait été plus judicieux de faire glisser tes li.

Puis, pour viser tes li:
Avec <li id="X"> tu peux utiliser :target
Avec <li tabindex="0"> tu peut utilier :focus
avec <li id="X" tabindex="0"> tu peut cumuler les deux sélecteurs :target, :focus {/*style*/} et naviguer de li en li avec la touche TAB.

En te basant sur <li> tu peut mettre un fond (on ne verra pas ce qu'il y a dessous ), ajouter une légende , ...

++

Ironfeet a écrit :
Bha un id peut être utiliser qu'une seul fois par page ce qui est le cas ici. Donc ça ne devrais pas poser de problèmes.
Mais je pense que je vais finalement reprendre un slider en javascript qui fait une transition si l'image est de taille différente seulement avec des boutons suivant et précédent.
Mais merci quand même, après il ce peut que je me trompe mais je pense pas.
Je vous tien au courant et et si des personnes ont des solution pour faire de cette façon je suis à leur écoute.

PS : J'ai laisser un poste sur un autre forum et on m'as conseiller de jouer avec le z-index.

ID : conteneur, contenu, image, slider. Pour moi il y a 4 id différent.

Après je peux me tromper teste avec 1 seul ID et 3 class on sait jamais, j'ai eu un problème du même genre.

Le z-index gère le fait qu'une image se situe au premier ou au second plan comme ceci :
http://fr.html.net/tutorials/css/figure020.gif

En ce qui concerne le margin:auto je crois qu'il faut lui attribuer une position comme position :fixed ou relative ou absolute ou un autre que j'ai oublié.
Modifié par Philigane (17 Apr 2013 - 14:07)