28173 sujets

CSS et mise en forme, CSS3

Bonjour a tous, je suis nouveaux parmis vous Smiley smile Et je vais essayer d'être le plus clair possible avec mon soucis.. Oui parce que forcément j'ai un soucis...

Alors Voila, je m'éssai à la création d'un site WEB et deja les problêmes arrivent, je n'arrive pas à mettre mes news dans un seul cadre et unique cadre...
Pour voir ce que ca donne, suffit d'aller visiter mon site ( en cour de créations ) heberger sur Ifrance pour s'entrainer : http://underground-psp.ifrance.com

Donc comme vous pouvez le voir j'ai mit un system de news en PHP, et des que je poste plus de une news, elle se cale en dessous de mon bloc de contenu... C'est assez embetant

Smiley confus

Ce que je voudrais : Simplement que mon bloc de contenu s'agrandisse au fur et à mesure des news poster, ou bien qu'elle se mettent chacunes dans un bloc qui eux mêmes seraient dans un grand bloc .. Peu m'importe tant qu'elle ne traine pas en dessous.. Smiley smile

Je vous met donc mon code ( un peu brouillon mais je commence juste ..) pour, si vous le voulez bien m'indiquer les erreurs ect .. Bref de l'aide Smiley smile

Code php de l'index :

<!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" >

        <head>
                <title>...Underground PSP...</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				<link rel="stylesheet" media="screen" type="text/css" title="Underground PSP Design" href="design1.css" />
        </head>
		
		
        <body>
		
	<div id="banniere">
	
</div>

	<div id="menu">
		<div class="Element_Menu">

	<h3>Menu</h3>
<ul>
	<li><a href="index.php">News/Actu PSP</a></li>
	<li><a href="tutos.php">Astuces et Tutos</a></li>
	<li><a href="forum.php">Forum</a></li>
	<li><a href="chat.html">Chat</a></li>
	<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<div class="Element_Menu">

<?php
if (isset($_POST['pseudo']) AND isset($_POST['message'])) 
{
    if ($_POST['pseudo'] != NULL AND $_POST['message'] != NULL) 
    {
       
        mysql_connect("Serveur SQL", "ROOt", "Pass Root");
        mysql_select_db("Base de donnee");

        
        $message = htmlentities ($_POST['message']);
        $pseudo = htmlentities ($_POST['pseudo']);

        
        mysql_query("INSERT INTO chat_box VALUES('', '$pseudo', '$message')");

                mysql_close();
    }
}



?>


<h3>Chat box</h3>
<form action="index.php" method="post">

<p>
Pseudo : <input type="text" name="pseudo" /><br />
Message :  <input type="text" name="message" /><br />
<br />
<input type="submit" value="Envoyer" />
</p>

</form>



<?php

mysql_connect("serveur SQL", "rOOt", "MDP rOOt");
mysql_select_db("ma base de données");

$reponse = mysql_query("SELECT * FROM chat_box ORDER BY ID DESC LIMIT 0,10");

mysql_close();

while ($donnees = mysql_fetch_array($reponse) )
{
?>

<p><strong><?php echo $donnees['pseudo']; ?></strong> : <?php echo $donnees['message']; ?></p>



<?php
}
?>
</div>	
</div>



	<div id="contenu">
<h1>News</h1>
<?php
mysql_connect("serveur SQL", "rOOt", "MDP rOOt");
mysql_select_db("Ma base de données");

$retour = mysql_query('SELECT*FROM news ORDER BY id DESC LIMIT 0, 5');
while ($donnees = mysql_fetch_array($retour))
{
?>
<h3>
<?php echo $donnees['titre']; ?>
<em>le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></em>
</h3>
<p>
    <?php
    
    $contenu = nl2br(stripslashes($donnees['contenu']));
    echo $contenu;
    ?>
</p>
</div>
<?php
} 
?>

<div id="pied_de_page">
</div>



        </body>
</html>


Et mon code CSS qui va avec :




body
{
   width: 760px;
   margin: auto; 
   margin-top: 20px;
   margin-bottom: 20px;   
   background-color: #CFD1E5; 
}

#banniere
{
   width: 760px;
   height: 200px;
   background-image: url("images/Banniere_Underground_PSP.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}

#menu
{
   float: left; 
   width: 200px; 
}

.Element_Menu
{
   background-color: #6979C1;
   background-repeat: repeat-x;
   border-style: outset;
   margin-bottom: 10px;
}

.Element_Menu h3 
{   
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.Element_Menu ul 
{
   list-style-image: url("images/puce/info.png"); 
   padding: 0px;
   padding-left: 0px; 
   margin: 0px; 
   margin-bottom: 5px; 
}

.Element_Menu a 
{
   color: black;
   text-decoration: none;
   font-family: Arial, "Arial Black", "times New Roman", times, serif;
}

.Element_Menu a:hover 
{
   background-color: #E5E5ED;
   color: blue;
}

#contenu
{
   margin-left: 230px; 
   margin-bottom: 20px; 
   padding: 5px; 
   color: black;
   background-color: #E5E5ED; 
   border-style: outset; 
   
}


.Element_Contenu h1
{
		text-align: center;
		font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

.Element_Contenu h3
{
	text-align: center;
	font-family: Arial, "Arial Black", "Times New roman", Times, serif;
}

Modifié par immat (15 Oct 2006 - 01:11)
Mon probleme est résolu, maintenant un autre se pose pfffiou ... je n'arrive pas a séparer mes news... Elle se mettent bien dans le cadre du contenu ( qui s'agrandi au fur et a mesure ) mais elle ne sont pas separer par un trait ...La je ne sais pas du tout comment m'y prendre ...
Modérateur
bonjour,

1) si ce sont tes identifiant de connexion a ta base de données que tu donne , tu devrais les enlevé en editant ton premier post.

2) autrement en regardant ta boucle while , je vois que tu referme une balise div ... que tu n'ouvre pas , d'ou l'incoherence probable du code html finale , a chaque news tu referme un div que tu n'ouvres pas .

essai de corriger ça , et si le probleme persiste , laisse un lien ou le code html generé (et simplifié avec de petit morceau de lorem ipsum.


++
Modifié par gcyrillus (12 Oct 2006 - 21:32)
Je ne voit pas ce que tu veut dire, je ferme tout mes div... La je ne voit vraiment pas désoler Smiley smile Ma balise <div> que j'ouvre pour le menu est lier avec celle de la chat box ( Element_Menu ) ensuite a la fin de mon script pour la chat box, je la ferme ainsi que la balise div id menu.. Mais peut être que je me trompe ...

Sinon pour la news, le soucis est résolu, les news se poste bien dans mon cadre de contenu qui s'agrandi au fur et a mesure mais seulement, je souhaiterai separer mes differente news par une barre ou autre chose ou elle meme les mettre dans un cadre . J'ai reussi a faire un cadre dans le cadre de contenu mais il englobe aussi toutes les news .. voila si quelqu'un a une idee Smiley smile
Modérateur
bonsoir,

possible que je me trompe aussi , voici ou je vois une eventuelle erreur :

while ($donnees = mysql_fetch_array($retour))

{

?>

<h3>

<?php echo $donnees['titre']; ?>

<em>le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></em>

</h3>

<p>

    <?php

    

    $contenu = nl2br(stripslashes($donnees['contenu']));

    echo $contenu;

    ?>

</p>

</div>   <!-- ICI   tu referme un div que tu n'ouvre pas dans ta boucle , 
a chaque news affiché , il sera la aussi  non ?  
en survolant ton code  cette balise semble etre la fermeture de #contenu   !?  
 ne devrais t-elle pas etre a l'exterieur , aprés ?
 -->

<?php

} 

?>


pour delimiter visuellement tes news , une bordure basse au dernier paragraphe pourrait-etre attribué avec une classe.


...
<p class="txt_nws"><!--  ajout d'une classe  -->

    <?php

    

    $contenu = nl2br(stripslashes($donnees['contenu']));

    echo $contenu;

    ?>

</p>

et pour css par exemple :

.class {
border-bottom:#777 ridge 2px;
padding-bottom:0.5em;
margin-bottom:0.5em;
}


voila juste l'idée de base
++
Modifié par gcyrillus (12 Oct 2006 - 23:42)
Merci beaucoup c'est parfait ..; Et oui tu avait raison pour mon div, c'est que je l'avait modifier apres avoir poster mon code et pour regarder l'erreur je ne regardais pas celui que j'ai mit sur le forum ( forcément je ne trouvais pas l'erreur ) Bref ca fonctionne bien, mes news sont separer les une des autres Smiley smile ) Ca commence a prendre forme tout ca..; Je suis content !!
Voila je reposte au prochain soucis Smiley langue
salut

attention au php !

<?php
if (isset($_POST['pseudo']) && isset($_POST['message'])) 
{
    if ($_POST['pseudo'] != NULL && $_POST['message'] != NULL) 
    {
       
        mysql_connect("Serveur SQL", "ROOt", "Pass Root");
        mysql_select_db("Base de donnee");

        
        $message = htmlentities ($_POST['message']);
        $pseudo = htmlentities ($_POST['pseudo']);

        
        mysql_query("INSERT INTO chat_box VALUES('', '$pseudo', '$message')");

                mysql_close();
    }
}



?>


un test sur empty serait utile ainsi qu'un test sur la validité du pseudo, !NULL ne suffit pas.

if (!isset($_POST['pseudo']) && (!empty($_POST['pseudo']) && !isset($_POST['message']) && !empty($_POST['message'])) 


si vide, çà arrive...

mysql_close();


close quoi?

$db = mysql_connect('localhost', 'root', 'passe'); 
mysql_select_db('ma_base',$db);


mysql_close($db);


sans çà, le serveur, ferme la connexion ouverte, oui mais au prix d'efforts inutiles, donc, de ressources serveur supplémentaires et chez ifrance...çà fait une différence.si le serveur sait quel connexion il doit fermer, il le fait directement, sans test.c'est beaucoup plus rapide.

if (isset($_POST['pseudo']) && isset($_POST['message'])) 
{
    if ($_POST['pseudo'] != NULL && $_POST['message'] != NULL) 
    {


optimisé

if (isset($_POST['pseudo'],$_POST['message']) && !empty($_POST['pseudo'],$_POST['message'])) 

Modifié par keran (13 Oct 2006 - 01:14)
Des que je fait ca, j'ai des erreur, de plus il doti savoir quelle bases fermer puisque j'en ai qu'une ....
Bref maintenant sur ma page il me manque une grande partie de design, je n'arrive pas a suivre le tuto d'alsa pour mettre des image extensible derriere mes blocs de menu...; Sur potoshop en fait je n'arrive pas a faire un cadre arrondi d'une taille exact je suis obliger de prendre la taille au dessus .. Pas tres clair ce que je dit la ..