Problème php/css

Résolu
Utilisateur anonyme -  
Bonjour,

Je suis en train de développer un site avec une gestion de news en php.
Le script est bon, mais quand je veut l'afficher via du css, toutes les news sont placés au même endroit.
J'aurais voulu savoir comment faire pour que chaque news soit séparer d'un espace.
Merci

10 réponses

  1. msarah
    si tu ne veux pas essayer mon code exactement comme il est, remplace position: absolute; par position: relative; mais il faut changer les valeurs de ton top/left, c'est impossible que ca marche avec position: absolute;
    1
    1. maka54
      un id doit etre unique, ce qui n'est pas le cas ici, il faut utiliser des classes

      je parle de id="titre" et id="contenu"

      et les balise meta , link et title doivent être dans le head

      il y a également un problème avec le fichier

      et il manque le doctype
      1
      1. Alain_42
        quand tu fais cette boucle:
        while($data=mysql_fetch_assoc($req)){
        echo "<div id=\"titre\">{$data["titre"]}</div>";
        echo "<div id=\"contenu\">{$data["contenu"]}</div>";
        }

        tu crée plusieurs div qui ont tous les mêmes id="titre" et id="contenu"

        hors il faut que un id soit unique

        mets plutôt: 

        while($data=mysql_fetch_assoc($req)){ 
     echo "<div class=\"titre\">{$data["titre"]}</div>"; 
  echo "<div class=\"contenu\">{$data["contenu"]}</div>"; 
  }


        et dans ton css 
        .titre { 
 .....     
} 
.contenu {
.... 
}
        1
        1. msarah
          tu peux montrer un peu de ton code?
          0
          2. Utilisateur anonyme
            Oui alors l'index : 

            <?php 
   require "config.php";
   mysql_connect(DB_HOST,DB_LOGIN,DB_PASS);
   mysql_select_db(DB_BDD);
 
   $sql="SELECT * FROM news";
   $req = mysql_query($sql) or die('Erreur SQL !<br />'.$sqm.'<br />'.mysql_error());
   while($data=mysql_fetch_assoc($req)){
     echo "<div id=\"titre\">{$data["titre"]}</div>";
	 echo "<div id=\"contenu\">{$data["contenu"]}</div>";
	 }
   ?>
   
   <!DOCTYPE html>
   <html lang="fr">
   <head>
       <meta charset="utf-8">
                <title>Atelier Rode</title>
                <meta name="description" content="Atelier Rode, éléctro-érosion">
                <meta name="author" content="Cabon Web">
                <link rel="stylesheet" href="css/main.css" type="text/css"  media="screen">
        </head>
        <body>
		<div id="menu">
<ul>
  <li><a href="#">ENTREPRISE</a>
  <ul>
      <li><a href="#">Pr&#233;sentation</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Produits</a></li>
    </ul>
  
  </li>
  <li><a href="#">CONTACTS</a>
  </li>
</ul>
</div>
<div id="infos">ATELIER RODE 16 Rue Charles Cros - 95320 Saint-Leu-la-For&#234;t </div>
<div id="admin"><a href="admin/index.php">Administration</a></div>
		</body>
		</html>


            Le CSS : 
            html{
 background-color:black;
 }

body{
 background:url("../img/fond.png");
 background-repeat: no-repeat;
 background-attachment:absolute;
 margin:50px 0 0 250px;
  border-radius: 20px 20px 20px 20px;
  border:1px solid #ffffff;
width:800px;
height:600px;
 }

#menu{
 color:white;
 font-family:timesnewroman;
 font-size:16px;
 position:absolute; 
 margin:0 0 0 0;
 top:200px; 
 left:275px;
 }

#titre{
 color:white;
 font-family:timesnewroman;
 font-size:16px;
 position:absolute; 
 margin:0 0 0 0;
 top:200px; 
 left:350px;
     
}

#contenu{
color:white;
font-family:timesnewroman;
font-size:12px;
 position:absolute; 
 margin:0 0 0 0;
 top:220px; 
 left:350px;
}

#infos{
 color:#770000;
 font-family:timesnewroman;
font-size:16px;
position:absolute; 
margin:0 0 0 0;
top:150px; 
left:500px;
}

#menu ul {
 margin:-50px;
 padding:-70px;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:0;
 padding:0;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 }
#menu li a:hover {
 color:#5C8BC3;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 color:5C8BC3;
 display:block;
 margin:3px 0 0 -45px;
 }
#menu li:hover ul li {
 float:none;
 margin:5px 0 0 0;
 }
#menu li ul {
 position:absolute;
 margin:
 }

#admin{
 color:white;
 font-family:timesnewroman;
font-size:12px;
position:absolute; 
margin:0 0 0 0;
top:680px; 
left:600px;
}

#admin a{
 color:white;
}

#admin a:hover{
 color:#5C8BC3;
}
            0
            1. Utilisateur anonyme
              Le site en question est http://etoilis.olympe-network.com/
              0
              1. ze-life-of-quent1
                Bonjour,
                votre problème vient de ça dans votre CSS: 
                position: absolute;
top: 220px;
                0
              2. Utilisateur anonyme
                Merci de ta réponse si rapide, le position absolute et le top, où ça stp ?
                0
              3. ze-life-of-quent1
                Dans la div content
                0
              4. Utilisateur anonyme
                Faut que je fasse quoi stp ?
                0
            2. msarah
              Salut , je crois que pour regler ton probleme tu dois changer ton code de cette facon (je ne suis pas totalement sur) 
               while($data=mysql_fetch_assoc($req)){
     echo "<div id="news"><div id=\"titre\">{$data["titre"]}</div>";
	 echo "<div id=\"contenu\">{$data["contenu"]}</div></div>";
	 }


#news {
    float: left;
    margin-right: 10px;
}
#titre{
 color:white;
 font-family:timesnewroman;
 font-size:16px;
margin:0 0 0 0;     
}

#contenu{
color:white;
font-family:timesnewroman;
font-size:12px;
 margin:0 0 0 0;
}
              0
              1. Utilisateur anonyme
                Merci j'ai juste modifié le float, je l'ai mis en bottom, une dernière question, comment je peut la placé maintenant parce que quand je met une position absolute et un top/left sa redevient serré..
                0
                1. Utilisateur anonyme
                  C'est bon merci pour vos réponse et surtout toi msarah :)
                  0
                  1. Utilisateur anonyme
                    Ah merci ça marche parfaitement maintenant :)
                    0

                    Discussions similaires

                    indice et exposant en css ?
                    yiv

                    19 réponses
                    Comment aligner des éléments html css
                    eligame

                    1 réponse
                    Joomla et php 5.3
                    Japan-O-Fan

                    6 réponses
                    Faire passer du texte SOUS une image HTML / CSS
                    Mihai

                    2 réponses
                    audit de code php
                    darraji

                    3 réponses