PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

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

rickways
Membre
Inscription : 30-08-2009
Messages : 35

Slider et div dans une structure

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;
  }
 
}
 


Hors ligne

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

rickways
Membre
Inscription : 30-08-2009
Messages : 35

Re : Slider et div dans une structure

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

Eric

Hors ligne

Pied de page des forums