Ajax Pb DIV decallant affichage

Hello,
bon je precise que j ai fait des recherche avant de venir poser ma question, mais mes compétences faibles dans ce domaine ne m'on pas permit de trouver la solution:



j'ai fait une page utilisant moofx avec le css (que j ai publié tout en bas).

et dans cette page je voulais intégrer une gallerie slider
(http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm)

pour intégrer ce slider dans ma page, j ai juste a
coller a l endroit voulu:
<div id="simplegallery2"></div>

appeler 2 fichiers .js
et avoir "appelé" un ficheir css externe dont le contenu est:

#simplegallery2{ //CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
}

#simplegallery2 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

le pb qu'il se pose est que quand j integre le slider dans ma page web ça fait sauter toute la mise en page.

le pb est visiblement lié au fait que j'utilise une balise <div> pour afficher le slider, et que ma page web comporte deja des div.
ex:

<div id="container">
<div id="header">
<h1><span>titre</span></h1>
</div>
<div id="content">

je me disais que si je pouvais appeler le script autrement que par le "<div id="simplegallery2"></div>" cela solutionnerais le pb.

mais je ne vois pas comment faire.

help ?

HTML {
	HEIGHT: 100%
}
BODY {
	HEIGHT: 100%
}
BODY {
	BACKGROUND: url(bg.gif) #000000 fixed no-repeat center top; FONT: 11px/1.6 Arial, sans-serif; COLOR: #444
}
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H1 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H3 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
P {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
A:link {
	FONT-WEIGHT: bold; COLOR: #5275b4; outline: none
}
A:visited {
	FONT-WEIGHT: bold; COLOR: #5275b4; outline: none
}
A:hover {
	COLOR: #849cc9
}
A:active {
	COLOR: #849cc9
}
STRONG {
	COLOR: #990208
}
EM {
	COLOR: #769531; FONT-STYLE: normal
}
#container {
	MIN-HEIGHT: 100%; BACKGROUND: url(container.png) repeat-y center top; MARGIN: 0px auto; WIDTH: 447px; HEIGHT: 100%
}
#header {
	BACKGROUND: url(header.png) no-repeat right top; MARGIN-BOTTOM: 0px! important; WIDTH: 447px; HEIGHT: 91px
}
#header H1 {
	BACKGROUND: url(3kball.png) no-repeat left top; LEFT: 358px; WIDTH: 61px; CURSOR: move; POSITION: relative; TOP: 13px; HEIGHT: 62px
}
#header H1 SPAN {
	DISPLAY: none
}
#footer SPAN {
	DISPLAY: none
}
#content {
	PADDING-LEFT: 41px; WIDTH: 361px
}
#ads {
	PADDING-LEFT: 41px; WIDTH: 361px; BACKGROUND: url(footer.png) repeat-y center top;
}
H3 {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: #990208; PADDING-BOTTOM: 4px; TEXT-TRANSFORM: uppercase; CURSOR: pointer; COLOR: #222; PADDING-TOP: 4px
}
H4 {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #333; PADDING-TOP: 5px; BORDER-BOTTOM: #eee 1px solid
}
OL {
	PADDING-RIGHT: 10px; PADDING-LEFT: 35px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 0px
}
H3 A:link {
	DISPLAY: block; FONT-WEIGHT: bold; COLOR: #222; LETTER-SPACING: 2px; TEXT-DECORATION: none
}
H3 A:visited {
	DISPLAY: block; FONT-WEIGHT: bold; COLOR: #222; LETTER-SPACING: 2px; TEXT-DECORATION: none
}
H3 A:hover {
	COLOR: #222
}
H3 A:active {
	COLOR: #222
}
H3.news {
	BACKGROUND: #990208; FONT-WEIGHT: bold;
}
H3.info {
	BACKGROUND: #990208; FONT-WEIGHT: bold;
}
H3.aide {
	BACKGROUND: #990208; FONT-WEIGHT: bold;
}
H3.liens {
	BACKGROUND: #990208; FONT-WEIGHT: bold;
}
P {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; COLOR: #444; PADDING-TOP: 5px
}
#footer A {
	DISPLAY: block; BACKGROUND: url(footer.png) no-repeat right top; PADDING-BOTTOM: 300px; MARGIN-LEFT: 45px; WIDTH: 355px; HEIGHT: 60px
}

Modifié par amuart (17 Feb 2009 - 12:49)