IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Utiliser les grids avec un nombre d'article dynamique


Sujet :

Grille CSS (CSS Grid)

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert

    Homme Profil pro
    développeur
    Inscrit en
    Octobre 2013
    Messages
    1 588
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : développeur

    Informations forums :
    Inscription : Octobre 2013
    Messages : 1 588
    Par défaut Utiliser les grids avec un nombre d'article dynamique
    Bonjour à tous,

    J'ai un petit problème pour les grids pour un nombre d'article dynamique :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <title>RSS</title>
        <link rel="stylesheet" href="css/rss.css">
        <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/old-standard" type="text/css"/>
      </head>
      <body class="wrapper">
    	<!-- rss input -->
    	<input type="url" class="" placeholder="http://" name="rss">	<aside class="logo"><img src="https://static.20mn.fr/logos/20minutes-blue-512.png" alt="logo"/> </aside><section>
                         <article class="post">
                           <header class="post-head">
                             <h2><a class="feed_title" href="https://www.20minutes.fr/sport/coupe_du_monde_2018/2304679-20180709-coupe-monde-2018-comment-gerez-stress-devant-matchs#xtor=RSS-149">Coupe du monde 2018: Comment gérez-vous le stress devant les matchs?</a></h2>
                             <span>Mon, 09 Jul 2018</span>
                           </header>
                           <main class="post-content">
                             Difficile de garder son calme quand son équipe favorite est sur le terrain......<a href="https://www.20minutes.fr/sport/coupe_du_monde_2018/2304679-20180709-coupe-monde-2018-comment-gerez-stress-devant-matchs#xtor=RSS-149">Read more</a>
                           </main>
                         </article>
                         <article class="post">
                           <header class="post-head">
                             <h2><a class="feed_title" href="https://www.20minutes.fr/sport/tour-de-france/2304351-20180709-direct-tour-france-2018-premier-grand-rendez-suivez-contre-montre-equipe-live#xtor=RSS-149">Tour de France 2018: BMC prend l'étape et le maillot... Revivez le contre-la-montre par équipe en live</a></h2>
                             <span>Mon, 09 Jul 2018</span>
                           </header>
                           <main class="post-content">
                             Tour de France direct : suivez en live l'étape 3 du tour de France entre Cholet et Cholet...<a href="https://www.20minutes.fr/sport/tour-de-france/2304351-20180709-direct-tour-france-2018-premier-grand-rendez-suivez-contre-montre-equipe-live#xtor=RSS-149">Read more</a>
                           </main>
                         </article>
                         <article class="post">
                           <header class="post-head">
                             <h2><a class="feed_title" href="https://www.20minutes.fr/monde/2304667-20180709-pluies-japon-bilan-alourdit-encore-deblayage-complique#xtor=RSS-149">Pluies au Japon : Le bilan s'alourdit encore, le déblayage sera compliqué</a></h2>
                             <span>Mon, 09 Jul 2018</span>
                           </header>
                           <main class="post-content">
                             Des pluies torrentielles suivies de glissements de terrain ont fait des ravages dans l’ouest du Japon avec un bilan provisoire de 103 morts. Le soleil est revenu, mais les secours appellent la population à rester sur ses gardes.....<a href="https://www.20minutes.fr/monde/2304667-20180709-pluies-japon-bilan-alourdit-encore-deblayage-complique#xtor=RSS-149">Read more</a>
                           </main>
                         </article>
                         <article class="post">
                           <header class="post-head">
                             <h2><a class="feed_title" href="https://www.20minutes.fr/arts-stars/culture/2304415-20180709-coupe-monde-2018-personnalites-elles-belges-francaises#xtor=RSS-149">Coupe du monde 2018: Ces personnalités sont-elles Belges ou Françaises?</a></h2>
                             <span>Mon, 09 Jul 2018</span>
                           </header>
                           <main class="post-content">
                             Alors que la France affrontera la Belgique en demi-finale de la Coupe du monde mardi, ces personnalités vont devoir choisir leur camp…...<a href="https://www.20minutes.fr/arts-stars/culture/2304415-20180709-coupe-monde-2018-personnalites-elles-belges-francaises#xtor=RSS-149">Read more</a>
                           </main>
                         </article>
                         <article class="post">
                           <header class="post-head">
                             <h2><a class="feed_title" href="https://www.20minutes.fr/sport/coupe_du_monde_2018/2304615-20180709-coupe-monde-2018-belgique-equipe-plus-complete-tournoi-estime-lloris#xtor=RSS-149">Coupe du monde 2018: La Belgique est l'équipe «la plus complète du tournoi», estime Lloris</a></h2>
                             <span>Mon, 09 Jul 2018</span>
                           </header>
                           <main class="post-content">
                             Le capitaine de l'équipe de France connaît très bien tous les talents qui constituent cette équipe......<a href="https://www.20minutes.fr/sport/coupe_du_monde_2018/2304615-20180709-coupe-monde-2018-belgique-equipe-plus-complete-tournoi-estime-lloris#xtor=RSS-149">Read more</a>
                           </main>
                         </article>
                         <article class="post">
                           <header class="post-head">
                             <h2><a class="feed_title" href="https://www.20minutes.fr/sport/coupe_du_monde_2018/2304659-20180709-coupe-monde-2018-mbappe-absent-entrainement-pavard-kante-part#xtor=RSS-149">Coupe du monde 2018: Mbappé absent de l'entraînement, Pavard et Kanté à part</a></h2>
                             <span>Mon, 09 Jul 2018</span>
                           </header>
                           <main class="post-content">
                             Mais Deschamps a assuré que personne n'était forfait pour la demi-finale de mardi......<a href="https://www.20minutes.fr/sport/coupe_du_monde_2018/2304659-20180709-coupe-monde-2018-mbappe-absent-entrainement-pavard-kante-part#xtor=RSS-149">Read more</a>
                           </main>
                         </article></section>  </body>
    </html>

    J'aimerais que quelque chose comme ça:
    ligne -> input=80% logo=20%
    ligne -> article= 80%
    ligne -> article= 80%

    seul problème les articles sont généré dynamiquement en php avec un foreach je n'arrive donc pas à utiliser

  2. #2
    Membre expérimenté
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2012
    Messages
    170
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2012
    Messages : 170
    Par défaut
    Bonjour,

    Il va falloir acter sur tes class post/post-header/post-content et logo et créer une class à utiliser pour les inputs.

    Je ne vois pas de foreach donc difficile de te donner une recommandation mais si c'est un foreach JSTL tu mets uniquement ton style dans les balises
    sinon si c'est du JS tu injecte ton code html avec le style....

    On ne voit pas aussi la partie css.

    tu peux aller jetter un coup d'oeil ici :

    https://www.w3schools.com/css/css_rwd_grid.asp

    le probleme parait etre assez simple à part si j'ai pas bien compris.

    Bon courage

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 20/02/2007, 18h47
  2. comment utiliser les API avec Perl?
    Par megapacman dans le forum Langage
    Réponses: 5
    Dernier message: 23/08/2006, 15h18
  3. Utiliser les Streams avec TSocket
    Par francky23012301 dans le forum Web & réseau
    Réponses: 8
    Dernier message: 02/05/2006, 23h07
  4. [CF][PPC/VB.NET] Comment utiliser les Socket avec Pocket PC ?
    Par joefou dans le forum Windows Mobile
    Réponses: 5
    Dernier message: 17/05/2005, 14h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo