Position d'éléments avec CSS

Bonjour à tous,

Je suis (très) grande débutante dans Dreamweaver (mais je me soigne ;p), et j’ai un problème que je n’arrive pas à résoudre. Je vais tenter d’être la plus claire possible :

J’ai créé un élément galerie photo en swf (avec vignettes et agrandissements…) avec le logiciel JAlbum. Je veux donc l’intégrer à une page existante de mon site.

Les pages de mon site sont structurées avec des tableaux, que j’ai « habillé » avec des propriétés CSS.

Je suis donc partie de la page générée avec JAlbum, et je suis allée dans le code pour coller tous mes tableaux qui constituent ma page, autour de mon objet swf (qui lui est dans une balise « div » si je ne dis pas d’énormités).

J’ai donc réussi à faire cohabiter mon modèle de page avec mon module photo. Cool.

Le problème, c’est que le module photo ne se place pas là où je voudrais. Moi, je le voudrais dans la partie du tableau prévue à cet effet (partie centrale, à droite de ma barre de navigation, dans laquelle je met habituellement le contenu de mon site, texte et photos).

Or, je sais que le module est relié à une feuille CSS qui permet d’en modifier la disposition. J’ai beau tâtonner et essayer de jouer sur les marges, etc…, je n’arrive pas à coordonner les deux.

Si quelqu’un pouvait me tuyauter, je lui serais vraiment reconnaissante !

Je ne sais pas si je suis très claire, et je ne sais pas si cela peut aider, alors voici le code html de ma page ainsi que le code des feuilles de style qui lui sont rattachées :

(soyez indulgents, je me doute qu’il y a des choses pas très « clean »)

CODE HTML

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Sun, Dec 31 1970 12:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache">
<title>BananAlbum</title>
<script type="text/javascript" src="res/scripts.js"></script>
<script type="text/javascript" src="res/swfobject.js"></script>
<link rel="stylesheet" href="res/styles.css" type="text/css" charset="utf-8"></link>
<link href="../../../../feuille_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
        background-image: url(../../../structure/cadre_general/morceaux_rayures_vertes.jpg);
}
-->
</style></head>
<body bgcolor="#3e4307">
<body onload="MM_preloadImages('file:///Macintosh HD/Users/Elodie/Desktop/Galerie_tofs/images/contenu/galerie_photo/module_gallerie/images/01_jpg.jpg')">
<table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="320" rowspan="2" class="rect_1">&nbsp;</td>
    <td colspan="2" class="rect_2">&nbsp;</td>
  </tr>
  <tr>
    <td width="765"><img src="file:///Macintosh HD/Users/Elodie/Desktop/Galerie_tofs/images/structure/images_bandeaux/bandeau_galerie.jpg" width="765" height="150" /></td>
    <td width="15" class="ombre_droite">&nbsp;</td>
  </tr>
 
  <tr>
    <td>&nbsp;</td>
    <td colspan="2" class="ombre_bas">&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="165" height="14">&nbsp;</td>
    <td width="915" height="14" class="fond_beige_haut">&nbsp;</td>
    <td width="20" height="14">&nbsp;</td>
  </tr>
  <tr>
    <td class="coin_vert_1">&nbsp;</td>
    <td class="fond_beige_milieu">&nbsp;</td>
    <td class="coin_vert_2">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="fond_vert"><a href="../index.html" class="navigation">Home page</a> <a href="accueil_resto_FR.html" class="navigation">Accueil &amp; Restauration</a> <a href="camping_FR.html" class="navigation">Camping</a> <a href="locations_FR.html" class="navigation">Locations</a> <a href="piscine_FR.html" class="navigation">Piscine</a> <a href="lac_FR.html" class="navigation">Lac</a> <a href="peche_FR.html" class="navigation">Pêche</a> <a href="animations_FR.html" class="navigation">Animations</a> <a href="curiosites_FR.html" class="navigation">Curiosités</a> <a href="reservation_FR.html" class="navigation">Réservation</a> <a href="tarifs_FR.html" class="navigation">Tarifs</a> <a href="galerie_FR.html" class="navigation">Galerie photo</a> <a href="contact_FR.html" class="navigation">Contact</a> <a href="quisommesnous_FR.html" class="navigation">Qui sommes nous</a> <a href="liens_FR.html" class="navigation">Liens</a></td>
<td background="../images/structure/cadre_general/fond_beige_milieu.gif"><blockquote>
      <p align="justify">&nbsp;</p>
      </blockquote>
    </td>
    <td class="fond_vert">&nbsp;</td>
  </tr>
 
  <tr>
    <td class="coin_vert_3">&nbsp;</td>
    <td class="fond_beige_milieu">&nbsp;</td>
    <td class="coin_vert_4">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="fond_beige_bas">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<!-- Rudin Swagerman -->
<!-- thegreatesthits.net -->
<!-- 2007 -->
<!-- BananAlbum.net -->
	<div id="flashcontent">
	<noscript>
	<a href="http://www.bananalbum.com/go/enablejavascript/"><img src="res/PleaseEnableJavascript.gif"/></a>
	</noscript>
	<script type="text/javascript">
                document.write("<a href=\"http://www.bananalbum.com/go/getflash/\"><img src=\"res/PleaseUpdateFlashPlayer.gif\"/></a>");
        </script>
	</div>
 
	<script type="text/javascript">
                // <![CDATA[
                
        document.title = "images_de_base";
        bgcolor = "#3e4307";
        imgcolor = "#ffffff";
        linecolor = "#9ea36a";
        txtcolor = "#9ea36a";
                respath = "res/";
                var so = new SWFObject("res/BananAlbum.swf", "BananAlbum", "100%", "100%", "8", "#3e4307");
                so.addVariable("jalbum", "true");
                so.addVariable("bgcolor", bgcolor.replace("#","0x"));
                so.addVariable("imgcolor", imgcolor.replace("#","0x"));
                so.addVariable("linecolor", linecolor.replace("#","0x"));
                so.addVariable("txtcolor", txtcolor.replace("#","0x"));
                so.addParam("allowFullScreen", "true");
                so.write("flashcontent");
                
                // ]]>
        </script>
</body>
</html>

CSS DU MODELE DE PAGE

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
@charset "UTF-8";
/* CSS Document */
p{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #330000;
	line-height: 18px;
	padding: 3px;
}
.gras {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #330000;
}
.navigation {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFCC;
	font-style: normal;
	font-weight: normal;
	text-decoration: underline;
	background-color: #333805;
	display: block;
	padding: 8px;
	width: auto;
}
.fond_vert {
	background-color: #333805;
}
.rect_1 {
	background-image: url(images/structure/cadre_general/1_320x165logo.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.rect_2 {
	background-image: url(images/structure/cadre_general/2_780x15.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.ombre_bas {
	background-image: url(images/structure/cadre_general/3bis.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.ombre_droite {
	background-image: url(images/structure/cadre_general/4bis.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
.fond_beige_haut {
	background-image: url(images/structure/cadre_general/fond_beige_haut.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}
.fond_beige_milieu {
	background-image: url(images/structure/cadre_general/fond_beige_milieu.gif);
	background-repeat: repeat-y;
}
.fond_beige_bas {
	background-image: url(images/structure/cadre_general/fond_beige_bas.gif);
	background-repeat: no-repeat;
	background-position: top;
}
.coin_vert_1 {
	background-image: url(images/structure/cadre_general/5_165x15.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}
.coin_vert_2 {
	background-image: url(images/structure/cadre_general/6_20x15.gif);
	background-repeat: no-repeat;
	background-position: bottom;
}
.coin_vert_3 {
	background-image: url(images/structure/cadre_general/7_envers.gif);
	background-repeat: no-repeat;
	background-position: top;
}
.coin_vert_4 {
	background-image: url(images/structure/cadre_general/8_envers.gif);
	background-repeat: no-repeat;
	background-position: top;
}
.pages_galerie {
	background-color: #333508;
	background: 333508;
}

CSS DU MODULE PHOTO

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
 
#flashcontent {
	width:80%;
	height:80%;
	position:absolute;
	z-index:100;
	left:215px;
	top:300px;
}
/*
 * BananAlbum | <a href="http://www.BananAlbum.net" target="_blank">www.BananAlbum.net</a> | 2007
 */

MERCI D’AVANCE POUR VOS REPONSES !