Slider et div dans une structure

rickways · 20-04-2016 10:52:16

Bonjour à tous,

je vous remercie par avance du temps que vous voudrez bien m'accorder pour solutionner la situation.

Il y a 2 ans de cela, j'ai essayé de refaire mon site en php5 en suivant des tutos, et j'avais réussi à obtenir une page avec des blocs les uns à coté des autres qui s'adaptent donc à la largeur de l'écran.

Le CSS définit la position des blocs, les un par rapport aux autres, voir code CSS plus bas.

La page se trouve ici http://www.lespoetes.net/accueil7.php

Tout se passe bien. Le problème est survenu lorsque j'ai voulu insérer un slider d'image à l'intérieur de mon p'tit bloc
(slider visible ici juste avec le code nécéssaire : http://www.lespoetes.net/accueil7BIS.php)

Lorsque j'ajoute ce code, le bloc galerie d'art répète l'entête du bloc, je n'arrive pas à m'en sortir,

si je supprime les div du slider, il n'y a soit plus d'image soit plus de slide...

Merci d'avance pour vos conseils.

CODE PHP DE LA PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- Meta pour forcer les téléphone à respecter la taille de l'écran -->

  <meta name="viewport" content="width=device-width" />

    <link rel="icon" href="favicon.ico" />

    <link rel="stylesheet" href="style7.css">

<!-- Insertion de JQUERY et JSSOR -->     

    <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>

    <script src="js/jssor.slider.mini.js"></script>

    <script>

      jQuery(document).ready(function ($) {

        var options = { $AutoPlay: true };

        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

      });

    </script>

    <!--[if lt IE 9]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

    <title>Lespoetes.net - La po&eacute;sie sur internet</title>

  </head>

  <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]-->

    <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]-->

    <!--[if IE 8 ]><body class="ie8"><![endif]-->

    <!--[if IE 9 ]><body class="ie9"><![endif]-->

    <!--[if !IE]><!--><body><!--<![endif]-->

    <div id="bloc_page">

      <header>

        <div id="titre_principal">

          <img src="images7/logo2.png" alt="lespoetes.net" id="logo" />

          <div id="pub">

          <?php include "publicites/googleutf8.php";?>

          </div>

        </div>

                <nav>

                    <ul>

                        <li><a href="#">Accueil</a></li>

                        <li><a href="#">Po&egrave;mes</a></li>

                        <li><a href="#">Arts Visuels</a></li>

            <li><a href="#">Artistes</a></li>

            <li><a href="#">Forum</a></li>

                    </ul>

                </nav>

      </header>

      <section id="inline-table">

        <div id="derniersposts" class="bigbox"> 

          <h1>Les derniers po&egrave;mes re&ccedil;us</h1>

        <?

        include ("includeaccueil7/lesdernierspoemesrecus.php");

        ?>

        </div>

        <div id="artistedujour" class="box">

          <h1>Artiste du jour <img src="images7/icopointinterrogation.png" alt="Question" height="15" title="Pour &ecirc;tre &eacute;lu artiste du jour, vous devez &ecirc;tre un membre actif du site &#013(S'être connecté dans les 30 derniers jours) &#013et avoir de la chance (tirage au sort)"/></h1>

        <?

        include ("includeaccueil7/artistedujour.php");

        ?>

        </div>

        <div id="artistedhierdujour" class="box">

          <h1>Artistes c&eacute;l&egrave;bres</h1>

        <?

        include ("includeaccueil7/artistescelebres.php");

        ?>

        </div>      

        <div id="galeriedart" class="box">

          <h1>Galerie d'art </h1>

        <?

        include ("includeaccueil7/galeriedart.php");

        ?>

        </div>

        <div id="Illustrations" class="box">

          <h1>Illustrations</h1>

        <?

        include ("includeaccueil7/illustrations.php");

        ?>

        </div>  

        <div id="chat" class="bigbox"> 

          <h1>Discussions en direct, le chat :</h1>

        <?

        include ("includeaccueil7/lesdernieresinterpretations.php");

        include ("includeaccueil7/chat7.php");

        ?>

        </div>        

        <div id="livrecdadecouvrir" class="box">

            <h1>Livre - CD à découvrir</h1>

        <?

        include ("includeaccueil7/livrecdadecouvrir.php");

        ?>

        </div>

      </section>

      <br />

        <footer>

            </footer>

    </div>

  </body>

</html>

CODE PHP DE L'INCLUDE GALERIE D'ART

<!-- galerie d'art -->

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">

    <!-- Slides Container -->

    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; width: 100%; height: 100%;">
<?php
$sql='

SELECT *

FROM galeriedart

WHERE validtableau=1

ORDER by idtableau DESC

LIMIT 5

';
$req=mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
while($list=mysql_fetch_array($req))
{
$idtableau=$list['idtableau'];
$titretableau=$list['titretableau'];
$lientableau=$list['lientableau'];
$auteurtableau=$list['auteurtableau'];

echo'

    <div id="tableaux" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">

    <a href="gdatableau.php?idtableau='.$idtableau.'">

    <img u="image" src="upload/gda/mini'.$lientableau.'" alt="Création de la galerie d\'art">

    </a>

    </div>

    ';

}

?>

    </div>

</div>

CODE CSS

/* Eléments principaux de la page */

body
{
background:url('images7/background.png');
font-family:'Trebuchet MS', Arial, Sans-Serif;
color:#333333;
margin:0px;
}

#bloc_page

{

  margin: auto;

}

footer h1, nav a

{

  font-family: 'Trebuchet MS', Arial, Sans-Serif;

  font-size: 1.0em;

  font-weight: normal;

  text-transform: uppercase;

}

/* header */

header

{

  background: url('images7/backgroundheader.png') repeat-x top;

}

#titre_principal

{

  display: inline-block;

  padding:0px;

  margin:0px;

}

#pub

{

  display: inline-block;

  margin-bottom: 0px;

  margin-left: 30px;

}

header h1

{

  font-family: 'Trebuchet MS', Arial, Sans-Serif;

  font-size: 1.6em;

  font-weight: bold;

  text-transform: uppercase;

}

#logo, header h1

{

  display: inline-block;

  margin-bottom: 0px;

}

header h2

{

  font-size: 1.4em;

  margin-top: 0px;

  margin-bottom: 0px;

  font-weight: normal;

}

/* Navigation */

nav

{

  display: block;

  text-align: left;

  background: url('images7/backgroundmenu.png');

  height:30px;

}

nav ul

{

  list-style-type: none;

}

nav li

{

  display: inline-block;

  margin-right: 15px;

}

nav a

{

    font-size: 0.9em;

    color: #181818;

    padding-bottom: 1px;

    text-decoration: none;

}

nav a:hover

{

    color: #760001;

    border-bottom: 3px solid #760001;

}

/* Contenu de la page */

.box {

  vertical-align:top;

  height:250px;

  width:200px;

  text-align:center;

  background-color: #F0F7EF;

  margin-top:30px;

  margin-left:2%;

  margin-right:2%;

}

.box:hover {background:white;}

.box .banniere_description {

    background-color: #CFCFC9;

  line-height:30px;

}

.box h1 {

    background: url('images7/backgroundmenu.png');

  margin:0;

  font-size: 1.0em;

  font-weight: bold;

  text-transform: uppercase;

  line-height:30px;

}

/* exemple inline-table */

#inline-table

{

text-align:center;

}

#inline-table .box {

    display:inline-table;

}

#inline-table .box h1,

#inline-table .box .banniere_description {

  display:table-row;

}

#inline-table .box .img{

  vertical-align:middle;

  display:table-cell;

  height:100%;

}

#inline-table  img {

  max-height:150px;

  max-width:150px;

}

#inline-table .bigbox {

    display:inline-table;

}

/* Essai pour la box derniers envois sur le site inline-table */

.bigbox {

  vertical-align:top;

  height:250px;

  min-width:400px;

  max-width:500px;

  text-align:left;

  background-color: #F0F7EF;

  margin-top:30px;

  margin-left:2%;

  margin-right:2%;

}

.bigbox:hover {background:white;}

.bigbox h1 {

    background: url('images7/backgroundmenu.png');

  margin:0;

  font-size: 1.0em;

  font-weight: bold;

  text-align:center;

  text-transform: uppercase;

  line-height:30px;

}

.bigbox ul

{

    list-style-type: none;

  padding:0px;

  }

.bigbox li

{

    font-size: 0.8em;

  padding-left: 10px;

  padding-right: 10px;

}

/* Liens */

.bigbox a {

  color: black;

  text-decoration: none;

}

.bigbox a:hover, a:focus {

  color: #C0C0C0;

}

.bigbox a img {

  border: none; /* -> 10 */

}

/* --- Ajout de style : tooltip info bulle extrait de poème --- */

a.tooltip em {

    display:none;

}

a.tooltip:hover {

    border: 0;

    position: relative;

        z-index: 500;

    text-decoration: none;

}

a.tooltip:hover em {

    display: block;

    position: absolute;

    top: 20px;

    left: 80px;

    padding: 5px;

    color: #000;

    border: 2px solid #000000;

    background: #ffffff;

    width:300px;

}

a.tooltip:hover em span {

    position: absolute;

    top: -7px;

    left: 25px;

    height: 7px;

    width: 11px;

    color: url(infobulletop00.gif);

    margin:0;

    padding: 0;

    border: 0;

}

/* Nouvelles règles si la fenêtre fait au plus 1024px de large */

@media all and (max-width: 1024px)

{

    #pub

    {

        display: none;

  }

}

/* Nouvelles règles si la fenêtre fait au plus 600px de large */

@media all and (max-width: 600px)

{

  .bigbox {

  vertical-align:top;

  height:250px;

  min-width:200px;

  max-width:300px;

  text-align:left;

  background-color: #F0F7EF;

  margin-top:30px;

  margin-left:2%;

  margin-right:2%;

          } 

  nav

  {

  display: none;

  }

}

rickways · 02-06-2016 15:31:13

Je suis toujours preneur d'un coup de main, si quelqu'un est motivé...

Eric

PHP|Débutant :: Forums

Advertisement

#1 20-04-2016 10:52:16

Slider et div dans une structure

#2 02-06-2016 15:31:13

Re : Slider et div dans une structure

Pied de page des forums