probleme d 'alignement

programmeur400 · 06/01/2012, 14h30

salut, ici http://aerialbordeaux.com/essai.html je voudrais que My Way soit aligné avec la ligne verticale gauche de l'affichage de la peinture qui est au dessus.Comment faire?
voici les codes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
        <title>Jo Deyris-Peintures</title> 
       <META NAME="description" lang="fr" content="">
       <META NAME="keywords" lang="fr"content=""> 
       <link rel="stylesheet" href="css1.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
  <title></title>
 
 
<script type="text/javascript">
<!--
var ChangeImage = function ChangeImage(Url)
{
document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
var ChangeImagebis = function ChangeImagebis(Url)
{
document.getElementById('titre').innerHTML = '<p>'+Url+'</p>';
}
-->
</script>
  </head>
<body>
 
<div class="conteneur-galerie-image">
 
<div class="gauche-galerie-image">
<ul class="miniature-galerie-image">
  <li><img src="1.jpg" alt="Chrysantheme" onmouseover="ChangeImage('1.jpg'),ChangeImagebis('My Way');"/></li>
  <li><img src="12.jpg" alt="Desert" onmouseover="ChangeImage('12.jpg'),ChangeImagebis('Encanto');"/></li>
  <li><img src="15.jpg" alt="Hydrangeas" onmouseover="ChangeImage('15.jpg'),ChangeImagebis('Quien eres');"/></li>
   <li><img src="34.jpg" alt="Hydrangeas" onmouseover="ChangeImage('34.jpg'),ChangeImagebis('Silencio');"/></li>
   <li><img src="785.jpg" alt="Hydrangeas" onmouseover="ChangeImage('785.jpg'),ChangeImagebis('Olvidados');"/></li>
</ul>
</div>
 
<div class="droite-galerie-image">
<div id="affiche-image"><img src="1.jpg" alt="Chrysantheme"/></div>
</div>
 
 
<div id="titre"><p>My Way</p></div>
 
 
</div>
 
 
 
  </body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.conteneur-galerie-image{
margin:0 auto;
width:670px;
/*height:auto;
overflow:auto;
padding:5px;*/
}
.gauche-galerie-image{
width:100px;
height:auto;
float:left;
margin-top:292px;
}
.droite-galerie-image{
width:550px;
height:auto;
float:right;
margin-top:100px;
}
.droite-galerie-image img{
/*width:490px;
height:400px;*/
/*background:#D5F4FF;*/
/*padding:5px;*/
}
.miniature-galerie-image{
list-style-type:none;
/*padding:0;*/
}
.miniature-galerie-image li{
display:inline;
}
.miniature-galerie-image li img{
width:40px;
height:40px;
/*background:#EEE;*/
/*padding:5px;*/
margin:1px;*/
}
.titre
{
margin-left:50px;
clear:right;
}
p{
color:black;
font-family:"Arial Black", Arial, Verdana, serif;
font-size:20px;
}

merci à vous

NoSmoking · 06/01/2012, 14h50

Bonjour,
place la DIV titre dans la DIV droite-galerie-image.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="droite-galerie-image">
  <div id="affiche-image">
    <img src="1.jpg" alt="Chrysantheme"/>
  </div>
  <div id="titre"></div>
</div>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email