18041 sujets

Questions générales et questions de débutants

Menu+galerie [RESOLU]

Bonjour,
J'ai un site qui fonctionne très bien un menu vertical avec Hover...

J'ai voulu y ajouter une div de galerie photo avec votre tutoriel (css+javascipt) et cette galerie fonctionne mal, il doit y avoir un mélange dans les paramètrages css. J'ai cherché dans le bouquin et je suis un peu sec.
En fait je n'arrive pas a voir les petites images (numéro des photos) la sélection se fait en vertical dans la galerie ald horizontalement.
Pouvez-vous m'aider ?
Merci de votre réponse.
Régis
Ci-joint le code, c'est pas très propre je sais, mais c'est en cours de mise au point.

<html>
<head>
  <title>pierre - galerie</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">
<!--
body { padding-top: 300px; background-color: #ffffff;
} ul {
list-style-type: none;
}
ul a {
text-decoration: none;
display: block;
width: 256px;
text-indent: -5000px;
}
a#accueil{
background-image: url(bout_accueil_bl.gif);
height: 77px;
}
a#accueil:hover{
background-image: url(bout_accueil_bl_2.gif); }
a#portrait{
background-image: url(bout_portrait_bl.gif); height: 77px;
}
a#portrait:hover{
background-image: url(bout_portrait_bl_2.gif);
}
a#galerie{
background-image: url(bout_galerie_bl.gif); height: 77px;
}
a#galerie:hover{
background-image: url(bout_galerie_bl_2.gif);
}
a#contact{
background-image: url(bout_contact_bl.gif); height: 77px;
}
a#contact:hover{
background-image: url(bout_contact_bl_2.gif);
}
/* contenu */
div#content {
font-family: verdana, arial, sans-serif;
position: absolute;
top : 350px;
left : 500px;
width: 300px;
height: 200px;
margin: 0em;
padding: 0.5em;
background: #FFFFFFF;
line-height: 1.1;
font-size: 1.2em;
}
/* mentions et copyright */
div#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
top : 800px;
left : 800px;
width: 220px;
height: 25px;
margin: 0em;
padding: 0.5em;
background: #FFFFFFF;
-moz-border-radius:10px;
border-radius:10px;
line-height: 1.1;
font-size: 0.9em;
}
div#mentions a {
text-decoration: none;
color: #222;
}
div#mentions a:hover {
text-decoration: underline;
color: black;
}
-->
div#galerie
{
position: absolute;
top : 300px;
left : 400px;
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
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 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
  </style>
  <script type="text/javascript" src="script.js">
  </script>
</head>
<body>
<img
 style="position: absolute; left: 100px; top: 30px; width: 906px; height: 220px;"
 alt="" src="banniere2.gif">
<ul>
  <li><a id="accueil" href="sculpture.html">lien1</a></li>
  <li><a id="portrait" href="portrait.html">lien2</a></li>
  <li><a id="galerie" href="galerie.html">lien3</a></li>
  <li><a id="contact" href="contact.html">lien4</a></li>
</ul>
<div id="galerie">
<ul id="galerie_mini">
  <li><a href="galerie/croco.jpg" title="Croco"><img
 src="galerie/minis/m_photo1.png" alt="photo1"></a></li>
  <li><a href="galerie/lampe.jpg" title="Lampe"><img
 src="galerie/minis/m_photo2.png" alt="photo 2"></a></li>
  <li><a href="galerie/support.jpg" title="Support"><img
 src="galerie/minis/m_photo3.png" alt="photo 3"></a></li>
  <li><a href="galerie/photo4.png"
 title="Titre de la photo 4"><img
 src="galerie/minis/m_photo4.png" alt="photo 4"></a></li>
  <li><a href="galerie/photo5.png"
 title="Titre de la photo 5"><img
 src="galerie/minis/m_photo5.png" alt="photo 5"></a></li>
  <li><a href="galerie/photo6.png"
 title="Titre de la photo 6"><img
 src="galerie/minis/m_photo6.png" alt="photo 6"></a></li>
  <li><a href="galerie/photo7.png"
 title="Titre de la photo 7"><img
 src="galerie/minis/m_photo7.png" alt="photo 7"></a></li>
  <li><a href="galerie/photo8.png"
 title="Titre de la photo 8"><img
 src="galerie/minis/m_photo8.png" alt="photo 8"></a></li>
  <li><a href="galerie/photo9.png"
 title="Titre de la photo 9"><img
 src="galerie/minis/m_photo9.png" alt="photo 9"></a></li>
</ul>
<dl id="photo">
  <dt>Photos galerie Pierre</dt>
  <dd><img id="big_pict" src="essaifond1.jpg"
 alt="Photo depart galerie"></dd>
</dl>
</div>
<div id="mentions">
<p style="width: 288px;">copyright Pierre Bissuel 2007</p>
</div>
</body>
</html>

Modifié par rdidier (02 Apr 2007 - 22:20)
Sujet clos
Aller à