Probleme avec le design de mon blog

  1. Accueil
  2. Forum
  3. Programmation
  4. PHP
  5. Probleme avec le design de mon blog
Suivre ce topic
Ce topic est suivi par : yvesroland
yvesroland

yvesroland Le 21 mars 2018 à 02:05 (Édité le 25 janvier 2019 à 17:54)

Bonsoir par ici j'ai un probleme avec le design de mon blog. J'ai créé un blog en HTML, CSS et PHP; lorsqu'il n'y avait pas de PHP cela marchait correctement mon design s'affichait comme je le voulais maintenant que j'ai reattaché le blog a une base de donnée ou l'admin peut poster des articles dans differentes categories le design a changé et ne s'affiche plus comme je le veux. Je vous laisse le code pour la section sport(La page avec du php) et celle de la section politique(sans php). 
*********************************
section sport ( Page contenant le php et sur laquelle il y a probleme)  
<?php
$bdd = new PDO("mysql:host=127.0.0.1;dbname=blog;charset=utf-8", "root", "");
$article= $bdd->query('SELECT * FROM article_sport ORDER BY date_time_publication DESC');
?>
<!DOCTYPE html>
<html>
<head>
  <title>Scoopmag.com | Sport</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <link rel="stylesheet" type="text/css" href="../css/slider.css">
  <meta charset="utf-8">
</head>
<body>
<!--Le menu de navigation-->
<?php include("inc/nav.php"); ?>
  <section class="j2code-blog-home">
    <div class="container">
      <div class="">
        <h2>Scoop <b>#SPORT</b></h2>
          <div class="col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
          <?php while ( $a = $article->fetch()) { ?>
            <a href="articlesport.php?id=<?= $a['id'] ?>" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i3.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3><?php echo $a['titre_art'] ?></h3>
                <p><span><?php echo $a['lib_art'] ?></span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          <?php } ?>
        </div>
      </div>
    </div>
  </section>
    <!--Le pieds de page-->
<?php include("inc/footer.php"); ?>
*******************************************************
Section politique (Page sur laquelle il n'y a pas de PHP donc qui fonctionne bien) 
<!DOCTYPE html>
<html>
<head>
  <title>Scoopmag.com | Politique</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <link rel="stylesheet" type="text/css" href="../css/slider.css">
  <meta charset="utf-8">
</head>
<body>
<!--Le menu de navigation-->
<?php include("inc/nav.php"); ?>
  <section class="j2code-blog-home">
    <div class="container">
      <div class="">
        <h2>Scoopmag <b>#POLITIQUE</b></h2>
          <div class="col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i3.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i6.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="hidden-sm col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i4.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i6.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="hidden-sm col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i4.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="hidden-sm col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i7.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="hidden-sm col-page col-sm-4 col-md-3">
            <!-- ICI JE MET LE LIEN DE LA PAGE VERS LAQUELLE JE VEUX REDIRIGER L'UTILISATEUR -->
            <a href="" class="fond-j2code-home">
              <div class="img-publication-home">
                <img class="img-responsive" src="images/i7.jpg">
              </div>
              <div class="contenido-publicacion-home">
                <h3>Titre</h3>
                <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat...</span></p>
              </div>
              <div class="mascara-enlace-blog-home">
                <span>Lire plus </span>
              </div>
            </a>
          </div>
          <div class="col-page col-sm-4 col-md-3">
            <a href="#" class="todas-las-j2code-home">
                <span>Titre</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Latest compiled and minified JavaScript 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <!--Le pieds de page-->
<?php include("inc/footer.php"); ?>
***************************************************
Les css
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100italic,100,300,300italic,900italic,900,700,700italic,500italic,500,400italic);
body {
    font-family: 'Roboto', sans-serif;
    /*background-color: #f1f1f1;*/
    /*background: url('images/i1.jpg');*/
}
/*Entete la bar de .headerigation et le logo*/
/*Fin du menu*/
.header{
    width: 100%; /** Pour definir la lageur du menu **/
    background-color: #2BBCDE; /** Pour la couleur du menu deroulant **/
    /*position: fixed; Pour que le menu soit fixé lorsqu'on va plus bas dans le corps de la page.*/
    font-size: 20px;
}
.header ul img{
    margin-top: 20px;
    margin-left: 10px;
    width: 150px;
    height: 30px;
    transition: 0.5s;
}
.header li{
    list-style: none; /** Pour enlever les puces sur les listes du menu **/
}
.header li a{
    text-decoration: none;
    color: #fff;    
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.header li a:hover{
    background-color: #fff;
    color: grey;
    padding: 5px;
    border-radius: 10px;
}
 .header li  a:focus{
    background-color: #fff;
    color: black;
    padding: 5px;
    border-radius: 10px;
}
.header > ul{
    margin: 0px; /** determine si le menu est collé au "haut de page" ou non **/
    padding: 0px; /**marge interne **/
}
.header ul li{
    margin: 30px;
}
.header > ul > li{
    float: right;
    position: relative;
}
.header > ul::after{ /** je ne sais vraiment pas a quoi ca sert ces propriétés là **/
    content: "";
    display: table;
    clear: both;
}
/*Fin du menu*/
/* from index */
.info{
    border: 5px solid #2BBCDE;
    border-radius: 10px;
    background: url('images/i5.jpg'); 
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: left;
    margin-bottom: 15px;
    height: 60px;
    padding: 15px;
    padding-left: 100px;
}
.j2code-blog-home {
    padding-bottom: 50px;
   background: url("") no-repeat fixed center center;
    background-size: 100% auto;
}
.j2code-blog-home h2 {
   text-align: center;
    font-weight: 300;
    margin-bottom: 30px;
    font-size: 44px;
    margin-top: 70px;
}
.j2code-blog-home h2 b {
   color: #2BBCDE;
}
.j2code-blog-home .fond-j2code-home {
   background: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    height: 400px;
    margin-bottom: 20px;
    display: block;
    color: inherit;
    text-decoration: none;
    position: relative;
}
.j2code-blog-home .fond-j2code-home:hover h3 {
   color: #2BBCDE;
/*    box-shadow: 0px 4px 3px 3px rgba(0, 0, 0, 0.08);*/
}
.j2code-blog-home .fond-j2code-home:hover .mascara-enlace-blog-home {
    height: 400px;
    width: 100%;
    color: #aaa;
    background-color: #2BBCDE;
    position: absolute;
    top: 0;
    opacity: 0.95;
    -webkit-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;   
}
.j2code-blog-home .black {
   background: #2BBCDE;
}
.j2code-blog-home .fond-j2code-home .img-publication-principale-home {
   display: inline-block;
    width: 50%;
    overflow: hidden;
    height: 100%;
}
.j2code-blog-home .fond-j2code-home .img-publication-principale-home img {
   height: 100%;
    width: auto;
}
.j2code-blog-home .fond-j2code-home .contenu-publication-principale-home {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    padding: 0 10px;
}
.j2code-blog-home .fond-j2code-home .contenu-publication-principale-home h3 {
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    font-size: 30px;
}
.j2code-blog-home .fond-j2code-home .contenu-publication-principale-home p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
}
.j2code-blog-home .fond-j2code-home .contenido-publicacion-home {
    padding: 0 10px;
}
.j2code-blog-home .fond-j2code-home .contenido-publicacion-home h3 {
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
}
.j2code-blog-home .fond-j2code-home .img-publication-home  {
    overflow: hidden;
    max-height: 180px;
}
/*Le code pour les boutons sur les images */
.mascara-enlace-blog-home {
    height: 400px;
    width: 0%;
    color: #aaa;
    background-color: #2BBCDE;
    position: absolute;
    top: 0;
    opacity: 0.0;
    -webkit-transition: all 0.4s ease-out 0s;
    -o-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    text-align: center;
    padding-top: 180px;
}
.mascara-enlace-blog-home span {
    text-align: center;
    max-height: 400px;
    border: 1px solid #fff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 3px;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
}
.j2code-blog-home .todas-las-j2code-home {
    background: #2BBCDE;
    height: 400px;
    width: 100%;
    display: inline-block;
    padding: 20px;
    text-decoration: none;
    border-radius: 3px;
}
.j2code-blog-home .todas-las-j2code-home span {
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 25px;
    line-height: 26px;
}
/*Fin code des bouton sur les articles */
@media (max-width: 768px) {
    .j2code-blog-home h2 {
    text-align: center;
    font-weight: 300;
    margin-bottom: 30px;
    font-size: 34px;
    margin-top: 70px;
    }
    .j2code-blog-home .fond-j2code-home {
    background: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    height: inherit;
    margin-bottom: 20px;
    display: block;
    color: inherit;
    text-decoration: none;
    position: relative;
    }
    .j2code-blog-home .fond-j2code-home .img-publication-principale-home {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    height: auto;
    }
    .j2code-blog-home .fond-j2code-home .img-publication-principale-home img {
    height: auto;
    width: 100%;
    }
    .j2code-blog-home .black {
    background: #fff;
    }
    .j2code-blog-home .fond-j2code-home .contenu-publication-principale-home {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 0 10px;
    }
    .j2code-blog-home .fond-j2code-home .contenu-publication-principale-home h3 {
    font-weight: 900;
    color: #333;
    text-transform: uppercase;
    font-size: 20px;
    }
    .j2code-blog-home .fond-j2code-home .contenu-publication-principale-home p {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    }
    .j2code-blog-home .todas-las-j2code-home {
    background: #2BBCDE;
    height: 100%;
    width: 100%;
    display: inline-block;
    padding: 20px;
    text-decoration: none;
    border-radius: 3px;
    }
}
/*Pied de page*/
.footer{
    margin-bottom: 30px;
    background-color: #2BBCDE;
    opacity: 0.8; 
    /*background-color: rgba(251,251,251,0.8);*/
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 50px;
    padding-bottom: 70px;
}
.footer .about{
    border: 5px solid white;
    border-radius: 15px;
    box-shadow: 5px 10px 15px black;
    font-size: 25px;
    width: 320px;
    height: 200px; 
    padding-left: 10px;
    padding-right: 10px;
}
.footer .equipe{
    border: 5px solid white;
    border-radius: 15px;
    box-shadow: 5px 10px 15px black;
    font-size: 25px;
    width: 320px;
    height: 200px; 
    margin: auto;
    margin-top: -200px;
    padding-left: 10px;
    padding-right: 10px;
}
.footer .sociaux{
    border: 5px solid white;
    border-radius: 15px;
    box-shadow: 5px 10px 15px black;
    font-size: 25px;
    width: 320px;
    height: 200px; 
    margin-top: -200px;
    margin-left: 835px;
    padding-left: 10px;
    padding-right: 10px;
}
footer p{
    font-size: 15px;
    font-family: TAHOMA;
}
.footer .news input[type="email"]{
    border: 5px solid #2BBCDE;
    outline: none;
    width: 500px;
    height: 50px;
    padding-left: 25px;  
}
.footer .news input[type="submit"]{
    box-shadow: 5px 10px 15px grey;
    border: 2px solid  white;
    outline: none;
    width: 260px;
    height: 45px;
    background-color: #2BBCDE;
    color: white;
    font-size: 16PX;
    font-weight: bold;
    transition: 0.5s;
    margin-left: 15px;
}
.footer .news input[type="submit"]:hover{
    box-shadow: 5px 10px 15px white;
    border: 2px solid #2BBCDE ;
    border-radius: 10px;
    transform: scale(1.1);
    background-color: white;
   color: #2BBCDE;
}
/* images reseaux sociaux et annimations */
.social{
            background: rgba(0,0,0,0.2);
            position: relative;
            width: 80px;
            height: 80px;
            display: flex; 
            border-radius: 50%;
            overflow: hidden;
            justify-content: center;
            align-items: center;
        }
.social img{
            z-index: 2;
            width: 50px;
            height: 50px;
        }
.fond_fb{
            top: -100px;
            z-index: 1;
            display: block;
            width: 80px;
            height: 80px; 
            background-color: #3b5999;
            position: absolute;
            transition: 1s;
        }
        .fond_link{
            top: -100px;
            z-index: 1;
            display: block;
            width: 80px;
            height: 80px; 
            background-color: #007bb5;
            position: absolute;
            transition: 1s;
        }
        .fond_snap{
            top: -100px;
            z-index: 1;
            display: block;
            width: 80px;
            height: 80px; 
            background-color: #fffc00;
            position: absolute;
            transition: 1s;
        }
        .fond_twi{
            top: -100px;
            z-index: 1;
            display: block;
            width: 80px;
            height: 80px; 
            background-color: #55acee;
            position: absolute;
            transition: 1s;
        }
        .fond_wha{
            top: -100px;
            z-index: 1;
            display: block;
            width: 80px;
            height: 80px; 
            background-color: #4dc247;
            position: absolute;
            transition: 1s;
        }
.social:hover .fond_fb{
            top: 0;
        }
.social:hover .fond_link{
            top: 0;
        }
.social:hover .fond_snap{
            top: 0;
        }
.social:hover .fond_twi{
            top: 0;
        }
.social:hover .fond_wha{
            top: 0;
        }
.reseaux{
            margin-top: -30px;
        }
.reseaux2{
            margin-top: -10px;
        }
/*Fin du footer */

/*from article  */
.blocfb{
    background-color: red;
    box-shadow: 5px 10px 15px red;
}
.bordered{
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 20px;
    position: relative;
}
.bordered::after{
    position: absolute;
    bottom: -1px; left: 0;
    content: "";
    display: inline-block;
    width: 150px;
    border: 1px solid #2BBCDE;
}
.article .fond-j2code-home{
    border-radius: 4px 4px 0px 0px;
    margin-bottom: 0;
}
.article .fond-j2code-home .img-publication-principale-home{
    width: 100%;
}
.article .wrapist{
    background: #fff;
    box-shadow: 0px 3px 5px 0px #ddd;
    padding: 20px;
    color: #535353;
    min-height: 600px;
    overflow: auto;
}
.article .article-talking h3{
    /*text-align: center;*/
    font-weight: 300;
    margin-bottom: 0;
    color: #2BBCDE;
}
.article .article-talking p{
    text-align: justify;
    margin-top: 30px;
}
.article .article-talking .author{
    text-align: right;
    margin-top: 50px;
}
.article .article-talking .author i{
    background: #e7e7e7;
    color: #535353;
    display: inline-block;
    height: 40px; width: 40px;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    border-radius: 20px;
}
.article .article-talking .recents{
    margin-top: 37px;
}
.article .article-talking .recents .media{
    margin-bottom: 15px;
}
.article .article-talking .recents .media-object{
    width: 40px;
}
.article .article-talking .recents .media h4{
    font-weight: 300;
}
.article .article-talking .recents .media p{
    margin: 0;
    font-size: 13px;
    color: #888;
}
.article .article-talking .comment-form{
    margin-top: 30px;
    overflow: auto;
}
.article .article-talking .comment-form input[type="text"]{
    display: block;
    width: 100%;
    padding: 15px;
    color: #999;
    border: 0;
    background: #f7f7f7;
}
.article .article-talking .comment-form textarea{
    display: block;
    width: 100%;
    padding: 15px;
    color: #999;
    border: 0;
    font-size: 13px;
    min-height: 200px;
    resize: none;
    border-top: 1px solid #e7e7e7;
    background: #f7f7f7;
}
.article .article-talking .comment-form input[type="text"]:focus,
.article .article-talking .comment-form textarea:focus{
    border-left: 2px solid #2BBCDE;
    outline: none;
}
.article .article-talking .comment-form{
    padding: 60px;
}
.article .article-talking .comment-form input[type="submit"]{
    box-shadow: 5px 10px 15px grey;
    border: 2px solid white;
    padding: 10px;
    background: #2BBCDE;
    color: #fff;
    font-size: 25px;
    float: right;
    margin-top: 0px;
    margin-bottom: 20px;
    width: 170px;
    transition: 0.5s;
}
.article .article-talking .comment-form input[type="submit"]:hover{
    box-shadow: 5px 10px 15px #2BBCDE; 
    border: 2px solid #2BBCDE;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    color: #2BBCDE;
    /*float: right;*/
    margin-top: 0px;
    width: 170px;
}
.article .sidebar{
}
.article .sidebar h3{
    font-weight: 100;
    font-size: 1.5em;
    color: #2BBCDE;
}
.article .sidebar h3.oldtitle{
    margin-top: 50px;
}
.article .sidebar .search{
    margin-top: 20px;
    margin-bottom: 35px;
}
.article .sidebar .search input{
    border-radius: 0;
}
.article .sidebar .search span{
    border-radius: 0;
    background: #2BBCDE;
    color: #fff;
}
.article .sidebar .recents{
    margin-top: 37px;
}
.article .sidebar .recents .media{
    margin-bottom: 15px;
}
.article .sidebar .recents .media-object{
    width: 70px;
}
.article .sidebar .recents .media-body p{
    color: #999;
    font-size: 13px;
}
.article .sidebar .links{
    margin-top: 20px;
}
.article .sidebar .links ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.article .sidebar .links ul li{
    margin-bottom: 10px;
    color: #535353 !important;
}
.article .sidebar .links ul li a{
    color: #535353 !important;
}
.article .sidebar .tags{
    margin-top: 25px;
    word-spacing: 2px;
}
.article .sidebar .tags span{
    padding: 5px;
    background: #2BBCDE;
    word-spacing: normal;
    display: inline-block;
    margin-bottom: 5px;
    color: #fff;
}
/* contact */
.contact{}
.contact .wrapist{
    overflow: auto;
}
.contact .map{
    height: 500px;
    background: #e7e7e7;
}
.contact .form{
    height: 500px;
    overflow-y: auto;
    background: #fff;
}
.contact .form h3{
    font-weight: 300;
    font-size: 2em;
}
.contact .form form{
    margin-top: 30px;
}
.contact .form form div{
    padding: 0;
    margin-bottom: 20px;
}
.contact .form form input{
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    padding: 10px;
    outline: none;
    position: relative;
}
.contact .form form input:focus{
    transition: border-bottom 0.2s ease;
    border-bottom: 2px solid #2BBCDE;
    margin-top: -1px;
}
.contact .form form textarea:focus{
    transition: border-bottom 0.2s ease;
    border-bottom: 2px solid #2BBCDE;
    margin-top: -1px;
}
.contact .form form input[name="nom"]{
    margin-right: 5px;
}
.contact .form form input[name="prenoms"]{
    margin-left: 5px;
}
.contact .form form textarea{
    width: 100%;
    padding: 10px;
    height: 200px;
    border: 0;
    border-bottom: 1px solid #ddd;
    resize: none;
    outline: none;
}
.contact .form form input[type="submit"]{
    box-shadow: 5px 10px 15px grey;
    padding: 10px;
    background: #2BBCDE;
    color: #fff;
    font-size: 25px;
    float: right;
    border: 0;
    margin-top: 0px;
    width: 170px;
    transition: 0.5s;
}
.contact .form form input[type="submit"]:hover{
    box-shadow: 5px 10px 15px #2BBCDE;
    border: 2px solid #2BBCDE ;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    color: #2BBCDE;
    float: right;
    margin-top: 0px;
    width: 170px;
}
Profil introuvable

Profil introuvable Le 21 mars 2018 à 03:02 (Édité le 21 mars 2018 à 03:03)

Hello 'yvesroland',

On veut bien t'aider mais il faut que tu, lors de la rédaction d'un topic, utilise les balises mises à ta disposition ! 😬 (Car le code n'est pas l'isible et ça pique les yeux pour nous, avec la balise [CODE] on a le numéro des lignes et on se repère bien).
Ceci est dans les règles du forum que la communauté et moi-même avons rédigé.
yvesroland

yvesroland Le 24 mars 2018 à 17:22

Salut Jerem971 j'ai suivi ton conseil et j'ai republié mon sujet avec la balise [CODE]. Excusez moi s'il est un peut long.
yvesroland

yvesroland Le 24 mars 2018 à 17:38 (Édité le 24 mars 2018 à 17:40)

J'ai fait des captures d'ecran pour que vous puissiez voir le probleme. Je vous pase le lien d'heergement google drive.
https://drive.google.com/drive/folders/14aocinU__GEYxd1FLby_I8z4ctIavDOq?usp=sharing
 la capture nommée sport cest cest la page defaillante et la capture nommée autrespages c'est la page sans php et sans probleme 
Zbuu

Zbuu Le 24 mars 2018 à 20:28

Salut 

Le comportement est tout à fait normal. Dans ta page politique chaque "articles" à sa propre div :  
<div class="col-page col-sm-4 col-md-3">
Alors que dans ta page contenant le php, tu boucles tes articles dans une et même div 😀 

Du coup en rectifiant comme le code ci-dessous tu devrais avoir le résultat voulu 
<?php while($a = $article->fetch()): ?>
   <div class="col-page col-sm-4 col-md-3">
      <a href="articlesport.php?id=<?= $a['id'] ?>" class="fond-j2code-home">
         <div class="img-publication-home">
            <img class="img-responsive" src="images/i3.jpg">
         </div>
         <div class="contenido-publicacion-home">
            <h3><?php echo $a['titre_art'] ?></h3>
            <p><span><?php echo $a['lib_art'] ?></span></p>
         </div>
         <div class="mascara-enlace-blog-home">
            <span>Lire plus </span>
         </div>
        </a>
   </div>
<?php endwhile; ?>
Désolé les explications c'est vraiment pas mon truc 😄
yvesroland

yvesroland Le 13 avril 2018 à 01:49

😂😂😂Vraiment merci je vais m'y mettre pour comprendre et tester
Profil introuvable

Profil introuvable Le 16 avril 2018 à 03:38

Re:

Salut Jerem971 j'ai suivi ton conseil et j'ai republié mon sujet avec la balise [CODE]. Excusez moi s'il est un peut long.
Oui c'est parfait, regarde c'est beaucoup plus propre même si le code est long c'est pas grave 😉
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte

Programmation, développement web, high-tech, etc. Je partage ma passion pour l'informatique à travers des tutos vidéos et articles en espérant qu'ils vous soient utiles ;-)

Échange
Articles / Vidéos
Ressources

© 2024 PrimFX.com. Tous droits réservés. Propulsé par Single Quote.