28172 sujets

CSS et mise en forme, CSS3

Centrer les images et vignettes d'un diaporama dans une div

Bonjour,
j'avance sur mon projet de mini-site .... le proto est la :
http://otoboubou.free.fr/test/tumb1.html
(il n'y a pas les images)

il me reste 2 problèmes a régler :
1- centrer les images et la barre de vignettes dans la partie droite
en gros , je voudrais que les images grandes soient affichées au centre de la division a droite (contenu), et la meme chose pour les vignettes ....

2- est ce possible avec ce genre de vignette que la dernière grande image soit affiché en permanence et ne change que quand on survole une nouvelle vignette ..
(on peut le faire avec du javascript, mais j'aimerais le faire en pure css ....)

voici le code

body {
 background-color:black;
 color:white;
 height:500px;
 width:1080px;


 }



div#bandeau {
        float:left;
        width:200px;
	height:400px;
	background-color:#00CCFF;
	}
div#contenu
{               width:100%;
            	background-color:#00CCFF;
            	margin-left:220px;

	}

div#principal {
              width:1000px;
}

img {
 border:1px solid black;
 }

.thumb {
 position:relative;
 top:0;
 left:0;
 }

.thumb a {
 margin:0;
 text-decoration:none;
 }

.thumb a:hover {
 background-color:black;
 }

.thumb a .grand {
 display:block;
 position:absolute;
 width:0;
 }

.thumb a:hover .grand {
 position:absolute;
 top:80px;
 left:0px;
 width:500px;
 height:525px;
 }

 .image    {
 top:80px;
 left:0;
 width:500px;
 height:525px;
 }




<!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">
    <head>
   <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
   <meta http-equiv="Identifier-url" content="http://otobouboub.free.fr/test/tumb1.html/" />
             <meta name="language" content="fr" />
             <title>             Bienvenue sur Mon site         </title>
<link rel="stylesheet" type="text/css" href="tumb1.css">
</head>
<body>

<div id="principal">
<div id="bandeau">menu 1
<p><a href="test">test</a></p>
<p><a href="test_menu">test</a></p>

</div>

<div id="contenu">
<div class="thumb">
  <a href="#">
  <img src="100_i1.jpg" alt="image1" />
  <img src="300_i1.jpg" alt="image1" class="grand"/>
  </a>

  <a href="#">
  <img src="100_i2.jpg" alt="image2" />
  <img src="300_i2.jpg" alt="image2" class="grand"  />
  </a>

  <a href="#">
  <img src="100_i3.jpg" alt="image 3" />
  <img src="300_i3.jpg" alt="image 3" class="grand"  />
  </a>

</div>
</div>
</div>
</body>
</html>





Merci d'avance
Modifié par cyril06 (07 May 2010 - 13:50)
Sujet clos
Aller à