Forum : css3 et php

ayant terminé le tutoriel sur la creation de news (merci patou), j'aimerai stylisé les news.
Je voudrais creer un cadre à chaque news crée et stylisé les <h1>,<p>
Par la meme occasion, s'il y a une news, pas de probleme mais à partir de 2 news, qu'elles soient l'une à coté de l'autre...

<?php
    require "config.php";
    mysql_connect(DB_HOST,DB_LOGIN,DB_PASS);
    mysql_select_db(DB_BDD);
?><!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titre</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
<body>
 <div class="container_news">
            <?php   
    $sql="SELECT * FROM news";
    $req=mysql_query($sql) or die('erreur sql!<br/>'.$sql.'<br/>'.mysql_error());
    while($data=mysql_fetch_assoc($req)){
        echo "<h1>{$data"titre"]}</h1>";
        echo "<p>{$data"contenu"]}</p>";
        echo "<p align\"right\">".date("j/n/Y G:i",strtotime($data"date"]))."</p>";

    }
    ?> 
</body>
</center>
</html>...

donc mon css3 :

container_news{

box-shadow: 1px 2px 9px #000;
}
pour exemple...
l'ideal serait les memes cadres que le blog de grafikart....
?

Lotfi Berrahal

Réponse acceptée

Bonsoir ,

Ce que elscorto t'a écris est bon par contre dans la création de ta seconde news elle n'est plusdans une div avec la class news.
Je pense que ça vient de ton while tu as peu être oublié la création de la div class="news dans ton while?

elscorto

Salut,

Pour rajouter un bloc à chaque news

<body>
 <div class="container_news">
    <?php    
    $sql="SELECT * FROM news";
    $req=mysql_query($sql) or die('erreur sql!<br/>'.$sql.'<br/>'.mysql_error());
    while($data=mysql_fetch_assoc($req)){
        echo '<div class="news">';
        echo "<h1>{$data"titre"]}</h1>";
        echo "<p>{$data"contenu"]}</p>";
        echo "<p align\"right\">".date("j/n/Y G:i",strtotime($data"date"]))."</p>";
        echo '</div>';
    }
    ?> 
</body>

Ensuite ton css

.news{border: 1px solid red}
.news h1{color: blue}
.news p{}

Par contre quelques remarques, évite le style en ligne cay moche :),t'as oubliez de fermer ta div container_news, c'est quoi ce </center> après le body ? Penses aussi la sécurité .Hésite pas à refaire les tutos de graf car j'ai l'impression que tu as quelques lacunes, sinon pour les mettre côte à côte, voit ça avec les flottant ou display : Tuto

neuillane

Auteur

Je te remercie ca fonctionne trés bien sur ma premiere news mais lorsque je fais une seconde news, aucun cadre n'apparait. Dans le tuto je n'ai rien vu la dessus?
Si sur mon site je fais 6 news comment faire pour repeter les donner css dans tous les cadres?

merci de votre aide.

antergos98

Ta un screen a nous montrer?

neuillane

Auteur

voici le lien => ici

les news sont en bas pour l'instant. la premiere news crée est bien dans un cadre (provisoire je précise) lorsque je veux cree une nouvelle news ici dans ma partie admin le cadre ne se crée pas automatiquement?

voir mon css basique (pour l'instant)

#news {
background-color:#005146;
border:1px solid #000000;
margin:10px;
width:250px;
height:150px;
padding:5px;
-moz-border-radius:10px 10px;
-webkit-border-radius:10px 10px;
border-radius:10px 10px;
}

ce que je voudrais c'est qu'a chaque news crée, un cadre se crée automatiquement dans mon index ...

merci

Nonathy

En effet le problème vient très certainement de la balise <div id="news"></div> qui n'est pas bien mise dans ton while.

Tant que je répond à ton post, je te fais deux suggestion importante. La première, évite de mettre plusieurs h1 par page, c'est jamais conseillé, notamment au niveau du référencement. Ensuite, si tu as une div qui se répète, c'est du <div class="news"></div> et non pas un id="news". En effet, si un élément est répété plusieurs fois, une div ne peut pas être utilisée.

Voilà, j'espère que tu arriveras à résoudre ton problème :)

neuillane

Auteur

bon merci a vous tous, vos précieux conseils m'ont permis de reussir:

<?php    
    $sql="SELECT * FROM news";
    $req=mysql_query($sql) or die('erreur sql!<br/>'.$sql.'<br/>'.mysql_error());

    while($data=mysql_fetch_assoc($req)){
        echo '<div class="news" id="news">';
        echo "<h1>{$data"titre"]}</h1>";
        echo "<p>{$data"contenu"]}</p>";
        echo "<p align\"right\">".date("j/n/Y G:i",strtotime($data"date"]))."</p>";
        echo '</div>';
    }
    ?>

2b3ez

Code corrigé :

<?php    
    $sql="SELECT * FROM news";
    $req=mysql_query($sql) or die('erreur sql!<br/>'.$sql.'<br/>'.mysql_error());

    while($data=mysql_fetch_assoc($req)){
        echo '<div class="news">';
        echo '<h1>{$data'titre']}</h1>';
        echo '<p>{$data'contenu']}</p>';
        echo '<p style="text-align:right;">'.date('j/n/Y G:i',strtotime($data'date'])).'</p>';
        echo '</div>';
    }
    ?>

Tu as deux erreurs. La première comme Nonathy à essayer de te le dire ^^ (désolé mais en lisant j'ai eu du mal à saisir :D)
une classe peut être répétée alors qu'un id est unique. Tu ne peux pas avoir deux id identique sur la même page car :
1) tu ne seras pas valide W3C, et donc tu ne respectes pas les standards
2) si tu mets du javascript en ciblant cette id, ton script js ne saura pas sur quel identifiant joué son animation.

Du coup ton css sera :

.news {
background-color:#005146;
border:1px solid #000000;
margin:10px;
width:250px;
height:150px;
padding:5px;
-moz-border-radius:10px 10px;
-webkit-border-radius:10px 10px;
border-radius:10px 10px;

}

T'as deuxième erreur ce situe ici :

<p align\"right\">

tu as oublié le = de l'attribut qui aurait du être align="right"

Perso je préfère utiliser du style ce qui te permet une meilleure organisation mais aussi, et surtout d'overrider ta propriété css.
Exemple : si tu met un attribut

<div align="right">

mais que dans tes feuilles CSS tu as

div{text-align:left;}

tu auras un conflit. Alors qu'en faisant comme je t'ai mis ci-avant, tu es peinards.

css3 et php

8 réponses