Mise en page et positionnement d'un diaporama

Question

pg59180

16 Jun 2011 à 13:47

Bonjour à toutes et tous,

Je débute dans la création d'un site et j'ai besoin de votre aide.

J'ai récupéré un gabarit de page qui me convient etque j'adapterai à mon site.
J'ai récupéré jquery et un diaporama réalisé en javascript.

L'un de mes problème est que les boutons de contrôles n'aparaissent pas sous le diaporama avec le code ci-dessous alors que l'affichage du "status" "de progression de visualisation" apparaît deux fois. J'ai tenté de corriger de différentes façon sans y parvenir.

Vos conseil seront les bienvenus.

Je suis loin d'être un spécialiste du code alors, vraiment pardonnez les maladresses qu'ils peuvent présenter

Merci.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="ultime.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon titre</title>
<meta name="keywords" content="mes mots clés">
<meta name="description" content="ma description page" />

<link href="page.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
	
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
	
</head>

<body>
	<div id="wrapper">
		<div id="header">
			<div id="nav">
				<ul id="lesmenus">
					<li><a href="1.htm">menu 1</a></li>
					<li><a href="2.htm">menu 2</a></li>
					<li><a href="3.htm">menu 3</a></li>
					<li><a href="4.htm">menu 4</a></li>
					<li><a href="5.htm">menu 5</a></li>
					<li><a href="6.htm">menu 6</a></li>
					<li><a href="7.htm">menu 7</a></li>
					<li><a href="8.htm">menu 8</a></li>
					<li><a href="9.htm">menu 9</a></li>
			</ul>
			</div>
			
			
			<img src="../images/band1.jpg"><img src="../images/band2.jpg"><img src="../images/band3.jpg"><img src="/images/band4.jpg">
			
			<div id="menuhor">
				<ul id="lesmenus">
				<li><a href="1b.htm">menu 1b</a></li>
				<li><a href="2b.htm">menu 2b</a></li>
				<li><a href="3b.htm">menu 3b</a></li>
				<li><a href="4b.htm">menu 4b</a></li>
				<li><a href="5b.htm">menu 5b</a></li>
				<li><a href="6b.htm">menu 6b</a></li>
			</ul>
			</div> 
			
		</div>
		<div id="headline">
			
			<div class="clear"></div>
		</div>
		<div id="body">
			<div id="body-left">
				<class="post">

'Ci-dessous j'aimerais obtenir comme résultat :
'une image à gauche de chaque paragraphe et à la droite de l'image
'le texte s'alignant à quelque px de l'image et aligné à la verticale de l'image
					<h2>Entête paragraphe 1</h2>
					<img src="../images/illustration1.jpg" class="left" />
					<p><h2><strong>Texte de mon 1er paragraphe.</h2>
			Suite du texte du 1er paragraphe.</strong></p>
					</class>
				</class>
				<br>
				<br>
					
				<class="post">
					<h2>Entête paragraphe 2</>
                                        <img src="../images/illustration2.jpg" class="left" />
					<p><h2><strong>Texte du paragraphe 2</</strong></h2></p>
					<strong>suite texte paragraphe 2 partie 1.</strong>
					suite texte paragraphe 2 partie 2.
					</class>
				</class>
				<br>
				<br>
				<br>
'Ci-dessous j'aimerais obtenir une liste à puce avec liens qui serait strictement
'positionnée sous les 2 paragraphes à une distance que je pourrais fixer
				<ul class="plussbullets">
					<li><a href="lien1.html"><strong>Texte puce 1.</a></li>
					<li><a href="lien2.html">Texte puce 2.</a></li>
					<li><a href="lien3">Texte puce 3.</a></li>
				</ul>
			</div>

'Dans cette partie, je souhaite placer à droite des paragraphes (les paragraphes étant
'placé dans 50% de la largeur) un diaporama sur 50% de la largeur restante
			<div id="body-right">
				<h2>Un texte de présentation du diaporama</h2>
				
				<div id="updates" class="orangebox">
					<!-- Javascript -->
					<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
					<script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
					<script type="text/javascript" src="js/script.js"></script>
					
					<ul class="diaporama1">
						<li><img src="img/galerie/image1.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image2.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image3.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image4.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image5.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image6.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image7.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image8.jpg" alt="" title="" /></li>
					</ul>
				</div>
			</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div id="footer">
		<p></p>
	</div>
</body>


'ici la source du code du modèle à partir duqel je pars				
				<p>This is a template designed by free website templates for you for free you can replace all the text by your own 
				
			<div id="body-right">
				<h2>Un avant goût de ce qui vous attend !</h2>
				
				<div id="updates" class="orangebox">
					<!-- Javascript -->
					<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
					<script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
					<script type="text/javascript" src="js/script.js"></script>
					
					<ul class="diaporama1">
						<li><img src="img/galerie/image1.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image2.jpg" alt="" /></li>
						<li><img src="img/galerie/image3.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image4.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image5.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image6.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image7.jpg" alt="" title="" /></li>
						<li><img src="img/galerie/image8.jpg" alt="" title="" /></li>
					</ul>
				</div>
			</div>
				
				
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div id="footer">
		<p>&copy; 2006 all rights reserved.</p>
	</div>
</body>
</html>

Et voici les Css
page.css :



p{
	font-style:normal;
	text-shadow:none;
	margin:35px 0 0 0
}

* {
	margin: 0;
	padding: 0;

}

body {
	background:#dea;
	text-align: justify;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	color: #666666;
}


post hr {
	margin-bottom: 20px;
	font-weight: normal;
}

h1, h2, h3 {
	color: #333333;
	margin-left:0px;
}

h1, h2 {
	margin-bottom: 20px;
	font-weight: normal;
}

h1 {
	font-size: 190%;
}

h2 {
	font-size: 140%;
}

h3 {
	font-size: 90%;
}

h4 {
	font-size:85%;
}

p, ul, ol {
	margin-bottom: 20px;
	line-height: 1em;

}

ul, ol {
	margin-left: 3em;
}

blockquote {
	padding-left: 3em;
	background: url(images/img08.gif) no-repeat;
	font-style: italic;
}

form {
	background:#dea;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #666666;
}

a:link {
	color: #1953A7;
}

a:active {
	color: #ED5C0C;
}

a:visited {
	color: #666666;
}

a:hover {
	text-decoration: none;
	color: #067600;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 0 0px 0px 0;
}

/* Menu */

#lang {
	width: 950px;
	margin: 0 auto;
}

#menu {
	width: 950px;
	height: 25px;
	margin: 0 auto;
	}

#menuhor {
	width: 950px;
	height: 25px;
	margin: 0 auto;
	}	
	

ul#lesmenus
{
	height: 25px ;
	margin: 0 ;
	padding: 0 ;
	background-color: #008000 ;
	list-style-type: none ;
}
	
ul#menuhor
{
	height: 25px ;
	margin: 25px ;
	padding: 20px ;
	background-color: #008000 ;
	list-style-type: none ;
	width: 950px;
}


				
ul#lesmenus li
{
	float: left ;
	text-align: center ;
}
		
ul#lesmenus li a
{
	width: 100px ;
	line-height: 25px ;
	font-size: 1em ;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 1px solid #dea ;
}
		
ul#lesmenus li a:hover
{
	background-color: #DDEEAA ;
	color:#008000;
}
/* Header */

#header {
	width: 950px;
	height: 150px;
	margin: 0 auto;
	text-align:center;
}



/* Page */

#page {
	width: 980px;
	margin: 0 auto;
	padding: 20px 0;
}

/* Content */

#content {
	float: left;
	width: 470px;
	padding-top: 0px;
}

#contentor {
	float: left;
	width: 980px;
	padding-top: 0px;
}
.post {
	margin-bottom: 20px;
	padding: 0 20px;
}

.hr {
	border-bottom: 1px solid #EDEBD5;
	margin-left:5px;
}

/* Sidebar */


#sidebar {
	float: right;
	width: 480px;
	padding: 5px;
	background: #F5F39C;
}

#sidebar h2 {
	margin: 0;
	padding: 5px 15px;
	color: #FFFFFF;
}

#sidebar h3 {
	font-size: 85%;
	color: #FFFFFF;
}

#sidebar ul {
	margin: 0;
	padding: 15px;
	list-style: none;
}

#sidebar li {
}

#sidebar a {
	color: #FFFFFF;
}

* html .threepxfix{
margin-left: 3px;
}

Et enfin le code de style.cc


html, body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	border: 0;
}
a {
	font-weight: bold;
	text-decoration: none;
}

l, ol {
	margin-left: 3em;
}

#menu {
	width: 100%;
	height: 25px;
	margin: 0 auto;
	border:solid;
	border-color:white;
	'il s'agit du menu au dessus du bandeau
}

#menuhor {
	width: 100%;
	height: 25px;
	margin: 0 auto;
	}	

ul#lesmenus
{
	height: 25px ;
	width:100%;
	margin: 0 ;
	padding: 0 ;
	background-color: #008000 ;
	list-style-type: none ;
}
	
ul#menuhor
{
	height: 25px ;
	margin: 25px ;
	padding: 0px ;
	background-color: #008000 ;
	list-style-type: none ;
	width: 100%;
}

ul#lesmenus li
{
	float: left ;
	text-align: center ;
}
		
ul#lesmenus li a
{
	width: 110px ;
	line-height: 25px ;
	font-size: 1em ;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 1px solid #dea ;
}
		
ul#lesmenus li a:hover
{
	background-color: #DDEEAA ;
	color:#008000;
}


a:hover {
	text-decoration: underline;
}
.more {
	text-align: right;
}
.left {
	float: left;
}
.clear {
	clear: both;
}

body, h1, h2, h3, form {
	font: 10px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #5C5C5C;
}

body {
	background: url(images/header_bg.jpg) repeat-x;
	text-align: center;
	width:100%;
}
#wrapper {
	text-align: left;
	margin: auto;
	width: 100%;

}


#header {
	height: 203px;
	position: absolute;
}
#header h1 {
	margin-top: 44px;
}
#header h1 img {
	display: block;
}
#nav {
	margin-top: 7px;
}
#nav img {
	float: left;
}

#headline {
	padding-top: 205px;
}


a {
	font-weight: bold;
	color: #5C5C5C;
}

#body {
	padding-top: 2em;
	text-align: justify;
}

#body-left {
	float: left;
	width: 49.5%;
}
#body-right {
	float: right;
	width: 49.5%;
}

#body-left ul.plussbullets {
	margin-top: 45px;
	margin-left: 120px;
	padding: 0;
	font-weight: bold;
}
#body-left ul.plussbullets li {
	background: top left url(images/bullet_plus.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 25px;
}

#body h2, #body p {
	margin: 0.3em 0;
}

#body-right p {
	margin-right: 2em;
}

#body a.green {
	color: #9AAB68;
	font-weight: normal;
	text-decoration: underline;
}

#gallery img {
	float: left;
}

#footer {
	color: #FFFFFF;
	background: #42453D url(images/footer_bg.gif) repeat-x;
	padding: 6px 0 5px 0;
	margin-top: 2em;
	font-weight: bold;
}
#footer p {
	margin: 0;
	padding: 0;
}

.jDiaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
}

.jDiaporama li img{
	display:block
}

.jDiaporama li .desc{
	position:absolute;
	bottom: 0; left: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
	background:url(img/back_desc.png) repeat;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.png',sizingMethod='scale');  _background-image:none;
	width:50%;
	height:30px;
}

.jDiaporama li .title{
	position:absolute;
	top: 0; left: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
}

.jDiaporama li .count{
	position:absolute;
	top: 0; right: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
}

.jDiaporama_controls{
	display:true;
}

.jDiaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:block;
	margin:0 3px;
	position:relative;

}

.jDiaporama_controls .prev{
	background:url(img/controls2.png)  bottom;
	_background:url(img/controls.gif)  bottom;
	top:120%;
	margin-top:-16px;
	height:32px;
	width:32px;
	display:true;
	left: 0px;
}

.jDiaporama_controls .next{
	background:url(img/controls2.png)  top;
	_background:url(img/controls.gif)  top;
	top:120%;
	margin-top:-5px;
	height:32px;
	width:32px;
	display:true;
	right: 0px;
}

.jDiaporama_controls .pause{
	background:url(img/playpause.png)  top;
	_background:url(img/playpause.gif)  top;
	width:64px;
	height:48px;
	left:50%;
	top:120%;
	display:true;
	margin-left:-32px;
	margin-top:-19px;
}

.jDiaporama_controls .play{
	background:url(img/playpause.png);
	_background:url(img/playpause.gif)  ;
	width:64px;
	height:48px;
	left:50%;
	top:120%;
	margin-left:-32px;
	display:true;
	margin-top:-5px;
}

/**** Status ****/

.jDiaporama_status{
	text-align:center;
	margin-top:10px;
	position:absolute;
	left:50%;
	display:true;
}

.jDiaporama_status a{
	background:url(img/bullets.png)  left;
	_background:url(img/bullets.gif)  left;
	float:left;
	width:10px;
	height:10px;
	text-indent:-9999px;
	margin-right:5px;
}

.jDiaporama_status a.active, .jDiaporama_status a:hover{
	background:url(img/bullets.png)  right;
	_background:url(img/bullets.gif)  right;
}

Macpom

16 Jun 2011 à 16:32

Bonjour,
si tu pouvais nous faire juste le tri de ce qui concerne l'affichage de ton diaporama, et non tout le code html + css stp ?

pg59180

16 Jun 2011 à 19:10

Bonjour,

Merci de vous arrêter sur mon message.

En effet, j'essaie de simplifier un peu, désolé mais les codes restent longs.

Ici le code css dudit diaporama


.jDiaporama{
	position:relative;
}

.jDiaporama ul{
	-moz-box-shadow:1px 1px 0.5em #222;
	overflow:hidden;
}

.jDiaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute
}

.jDiaporama li img{
	display:block
}

.jDiaporama li .desc{
	position:absolute;
	bottom: 0; left: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
	background:url(img/back_desc.png) repeat;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.png',sizingMethod='scale');  _background-image:none;
	width:100%;
	height:30px
}

.jDiaporama li .title{
	position:absolute;
	top: 0; left: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
}

.jDiaporama li .count{
	position:absolute;
	top: 0; right: 0;
	display:none;
	margin:0;
	color:#fff;
	font-size:12px;
	font-family: Arial;
	padding:5px;
}

.jDiaporama_controls{
	display:true;
}

.jDiaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:block;
	margin:0 3px;
	position:absolute;
}

.jDiaporama_controls .prev{
	background:url(img/controls2.png)  bottom;
	_background:url(img/controls.gif)  bottom;
	top:120%;
	margin-top:-16px;
	height:32px;
	width:32px;
	display:true;
	left: 0px
}

.jDiaporama_controls .next{
	background:url(img/controls2.png)  top;
	_background:url(img/controls.gif)  top;
	top:120%;
	margin-top:-16px;
	height:32px;
	width:32px;
	display:true;
	right: 0px
}

.jDiaporama_controls .pause{
	background:url(img/playpause.png)  top;
	_background:url(img/playpause.gif)  top;
	width:64px;
	height:48px;
	left:50%;
	top:120%;
	display:true;
	margin-left:-32px;
	margin-top:-24px
}

.jDiaporama_controls .play{
	background:url(img/playpause.png)  bottom;
	_background:url(img/playpause.gif)  bottom;
	width:64px;
	height:48px;
	left:50%;
	top:120%;
	margin-left:-32px;
	display:true;
	margin-top:-24px
}

/**** Status ****/

.jDiaporama_status{
	text-align:center;
	margin-top:10px;
	position:absolute;
	left:50%;
	display:true;
}

.jDiaporama_status a{
	background:url(img/bullets.png)  left;
	_background:url(img/bullets.gif)  left;
	float:left;
	width:10px;
	height:10px;
	text-indent:-9999px;
	margin-right:5px;
}

.jDiaporama_status a.active, .jDiaporama_status a:hover{
	background:url(img/bullets.png)  right;
	_background:url(img/bullets.gif)  right;
}

le second code css de la page html :
p{
font-style:normal;
text-shadow:none;
margin:35px 0 0 0
}

* {
margin: 0;
padding: 0;

}

body {
background:#dea;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
color: #666666;
}

post hr {
margin-bottom: 20px;
font-weight: normal;
}

h1, h2, h3 {
color: #333333;
margin-left:0px;
}

h1, h2 {
margin-bottom: 20px;
font-weight: normal;
}

h1 {
font-size: 190%;
}

h2 {
font-size: 140%;
}

h3 {
font-size: 90%;
}

h4 {
font-size:85%;
}

p, ul, ol {
margin-bottom: 20px;
line-height: 1em;

}

ul, ol {
margin-left: 3em;
}

blockquote {
padding-left: 3em;
background: url(images/img08.gif) no-repeat;
font-style: italic;
}

form {
background:#dea;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #666666;
}

a:link {
color: #1953A7;
}

a:active {
color: #ED5C0C;
}

a:visited {
color: #666666;
}

a:hover {
text-decoration: none;
color: #067600;
}

img {
border: none;
}

img.left {
float: left;
margin: 0 0px 0px 0;
}

/* Menu */

#lang {
width: 950px;
margin: 0 auto;
}

#menu {
width: 950px;
height: 25px;
margin: 0 auto;
}

#menuhor {
width: 950px;
height: 25px;
margin: 0 auto;
}

ul#lesmenus
{
height: 25px ;
margin: 0 ;
padding: 0 ;
background-color: #008000 ;
list-style-type: none ;
}

ul#menuhor
{
height: 25px ;
margin: 25px ;
padding: 20px ;
background-color: #008000 ;
list-style-type: none ;
width: 950px;
}

ul#lesmenus li
{
float: left ;
text-align: center ;
}

ul#lesmenus li a
{
width: 100px ;
line-height: 25px ;
font-size: 1em ;
font-weight: bold ;
letter-spacing: 1px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 1px solid #dea ;
}

ul#lesmenus li a:hover
{
background-color: #DDEEAA ;
color:#008000;
}
/* Header */

#header {
width: 950px;
height: 150px;
margin: 0 auto;
text-align:center;
}

/* Page */

#page {
width: 980px;
margin: 0 auto;
padding: 20px 0;
}

/* Content */

#content {
float: left;
width: 470px;
padding-top: 0px;
}

#contentor {
float: left;
width: 980px;
padding-top: 0px;
}
.post {
margin-bottom: 20px;
padding: 0 20px;
}

.hr {
border-bottom: 1px solid #EDEBD5;
margin-left:5px;
}

/* Sidebar */

#sidebar {
float: right;
width: 480px;
padding: 5px;
background: #F5F39C;
}

#sidebar h2 {
margin: 0;
padding: 5px 15px;
color: #FFFFFF;
}

#sidebar h3 {
font-size: 85%;
color: #FFFFFF;
}

#sidebar ul {
margin: 0;
padding: 15px;
list-style: none;
}

#sidebar li {
}

#sidebar a {
color: #FFFFFF;
}

.orangebox {
background:#dea;
}

.orangebox h2 {
background:#008000;
}

/* Footer */

#footer {
clear: both;
height: 100px;
padding: 25px 0;
background: #EDEBD5 url(images/img04.gif) repeat-x;
}

#footer p {
margin: 0;
text-align: center;
font-size: 150%;
}

#footer a {
color: #666666;
}

#page-wrap {
width: 660px;
background: white;
padding: 5px 5px 5px 5px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 800px;
}

#contact-area {
width: 660px;
margin-top: 25px;
}

#contact-area input, #contact-area textarea {
padding: 5px;
width: 640px;
font-family: Helvetica, sans-serif;
font-size: 1em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}

#contact-area textarea {
height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}

#contact-area input.submit-button {
width: 100%;
float: left;
}

label {
float: left;
text-align: left;
margin-right: 15px;
width: 120px;
padding-top: 5px;
font-size: 1.1em;
}
td {
vertical-align: middle;
text-align: left;
font-size: 1.2em;
color : #666666;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

Ici le code d'une page html contenant le diaporama

<!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" lang="fr">
<head>
<title>Diaporama Simple JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link href="page.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>

<h1>Diaporama Simple</h1>

<ul class="diaporama1">
<li><img src="img/galerie/image1.jpg" alt="On the road again" title="Sur la route de l'ouest, Arizona © Guillaume Voisin" /></li>
<li><img src="img/galerie/image2.jpg" alt="Venice Beach, California" /></li>
<li><img src="img/galerie/image3.jpg" alt="" title="Les garde-côte sur les plages de Malibu © Guillaume Voisin" /></li>
<li><img src="img/galerie/image4.jpg" alt="Universal Studios" title="Le parc d'attractions Universal Studios © Guillaume Voisin" /></li>
<li><img src="img/galerie/image5.jpg" alt="Hollywood Sign" title="Le fameux panneau Hollywood sur la colline © Guillaume Voisin" /></li>
</ul>

<br /><br />
<p><a style="color:#eee; font-size:12px; font-family:Arial;" href="http://www.guillaumevoisin.fr/blog/jquery/diaporama-simple-avec-jquery-nouvelle-version-jdiaporama">Revenir à l'article.</a></p>

</body>

</html>

Mon souhait serait de placer le diaporama sur la partie droite de l'écran et à sa gauche deux zones s'empilant et contenant chacune une image et un ou plusieurs paragraphes.

Macpom

17 Jun 2011 à 10:08

... re bonjour,
...
1 - S'agit-il de corriger tes deux blocs d'affichage (contenu d'un côté, diaporama de l'autre) ou le positionnement de tes boutons de contrôle de ton diaporama ? (ta demande a évolué en route ?)
2 - Le lien que tu fournis ( http://www.guillaumevoisin.fr/blog/jquery/diaporama-simple-avec-jquery-nouvelle-version-jdiaporama ) présente ces boutons de contrôle dans l'image...
3 - le tri dans ton code ne semble pas très opérant pour se repérer...

pg59180

17 Jun 2011 à 11:31

Bonjour,

Je le reconnais, le code est loin d'être lisible, et je vais essayer de mieux faire.

L'objectif semble assez basique, mais je n'y arrive pas.
Je souhaite :
En haut de page, 1 premier menu
Sous ce menu 1 bandeau composé de 4 images
Sous ce bandeau un second menu
Sous le 2nd menu le contenu de page qui se présente ainsi :
1 "colonne" à gauche contenant plusieurs "rubriques", chacune des rubriques se présente avec 1 image à gauche, des paragraphes de texte à droite, l'image devant être centré selon la hauteur des textes

1 "colonne" à gauche contenant le diaporama avec les boutons de contrôles.

Enfin, un pied de page.

Cordialement,
Fabrice

Macpom

17 Jun 2011 à 11:42

Donc :
1 - je te propose d'utiliser les gabarits que tu trouveras par là :
http://www.alsacreations.com/static/gabarits/
(de préférence, un 2 colonnes)
2 - de placer ton diaporama (sans rien trop toucher) dans la colonne de droite, que tu formates pour que tout rentre bien dedans

pg59180

17 Jun 2011 à 11:49

Bonjour,

C'est ce par quoi j'ai commencé, chercher des gabarits et j'avais effectivement trouvée les gabarits proposé sur le site Alsacréations. Par contre, à chaque fois que j'ai tenté d'utiliser un gabarit proche du résultat souhaité, le problème du positionnement du diaporama se posait, et je ne parvenais pas à le positionner correctement ni a obtenir les boutons de contrôle, visible.

Je vais m'y remettre en essayant de comprendre ce qui se passe car c'est finalement très logique puisque la position de chaque élément peut être définie dans le fichier css.

Merci,

Fabrice

Macpom

17 Jun 2011 à 14:40

Voilà ! Et deux autres choses sur lesquelles tu peux t'appuyer : la taille de tes éléments : un conteneur ne doit pas être plus petit qu'un contenu (ou que ses contenus) ; et : il te faut prévoir toujours un peu plus large que l'addition de la taille de tes contenus, la juxtaposition exacte ne fonctionne pas.
Bon courage Smiley cligne

pg59180

17 Jun 2011 à 20:21

Bonjour à toutes et à tous,

J'ai résolu mon problème, du moins en grande partie.
Les conseils et remarques m'ont été utiles.

En fait voici comment j'ai réglé la question
pour obtenir une division en deux zones j'ai en fait créé un tableau et des cellules pour qu'elles contiennent images, texte ou diaporama.

Ainsi, le dépot du code dans la balise de cellule à droite permet effectivement d'afficher le diaporama avec les boutons de contrôle.

Bonne soirée,
Fabrice

pg59180

17 Jun 2011 à 20:28

[Résolu]

pg59180 a écrit :
Bonjour à toutes et à tous,

J'ai résolu mon problème, du moins en grande partie.
Les conseils et remarques m'ont été utiles.

En fait voici comment j'ai réglé la question
pour obtenir une division en deux zones j'ai en fait créé un tableau et des cellules pour qu'elles contiennent images, texte ou diaporama.

Ainsi, le dépot du code dans la balise de cellule à droite permet effectivement d'afficher le diaporama avec les boutons de contrôle.

Bonne soirée,
Fabrice

Sujet clos

CSS et mise en forme, CSS3

Mise en page et positionnement d'un diaporama