CSS/tableau/PHP

Faire en sorte que le système de news il soit joli :p

Sujet résolu

20 avril 2006 à 0:24:58

Bonjours, je reviens encore plus fort avec de nouvelle questions .(X_X).

J'ai suivis le tutoriel du système de news en php et j'ai voullu le mettre en forme. (en réalité j'ai pas fait tant de changement que ça mais ça a vite buguer T_T)

Bref...
J'aurrais voulu avoir le titre a gauche, en gras et en H3 et la datte a droite, en italique. Le tous avec une couleur de fond: #CCCCCC
Pour ce qui est du message, il m'aurrait plus que la couleur de fond soit celle la: #F5F5F5

J'ai donc "fait" ça:

<div span="news">

<table width="100%" height="100%">
<tr><h3>
<td align="left">
<strong><?php echo $donnees['titre']; ?></strong>
</td>
<td align="right">
Le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?>
</td></h3>
</tr>

<tr><p>
<td colspan="2">
<?php
// On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
$contenu = nl2br(stripslashes($donnees['contenu']));
echo $contenu;
?>
</td>
</p>
</tr>
</table>

</div>

Puis j'ai mis un peu de css:

.news
{
width:80%;
margin:auto;
}
.news table
{
border: 1px solid black;
}
.news h3
{
font-size:1em;
margin-bottom:0px;
}
.news p
{
background-color:#F5F5F5;
margin-top:0px;
}

(ce n'est qu'un exemple parmis tous ce que j'ai essayer..)
Bon bien sur ça m'affiche quelque chose mais... pas du tout ce que je veux et pas du tout joli.

Sinon il est peu etre important (mais je sais pas ^^) de précisé que mon script des news et appeller de l'index comme cela: (j'ai enlevé tous les autres divs, la page n'est pas aussi simple sinon ^^)

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!–– Head ––>
<head>
<title>Le sites des Friends</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="hmbd\design2.css" />
</head>
<body>

<!––Le corps de la page, bas droite ––>

<div id="corps">

<?php
$rubriques="";
if(isset($HTTP_GET_VARS["rubrique"])) $rubriques = $HTTP_GET_VARS["rubrique"];

switch ($rubriques)
{
case "accueil": include('accueil.html');
break;
case "page1" : include('page1.html');
break;
case "page2" : include('page2.html');
break;
default : include('accueil.html');
break;
}
?>
</body>

</html>

Edit: j'ai oublier toute une partie du sujet xD
La page accueil.html contient un include >_<:

<?php include("news.php"); ?>

Hawks

20 avril 2006 à 0:39:00

Citation : Sylvestre

J'ai donc "fait" ça:
<div span(?)="news">

<table width="100%" height="100%">
<tr><h3>
<td align="left">
<strong><?php echo $donnees['titre']; ?></strong>
</td>
<td align="right">
Le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?>
</td></h3>[...]

Tu as une mauvaise imbrication de balise... La balise h3 n'a rien à faire là!

Je te conseil d'oublié le tableau, d'utiliser plutot la balise <span>, exemple:

<div class="news">
<h3>titre</h3>
<span>timestamp</span>
</div>

avec

div.news h3{
display: inline;
}

div.news span{
text-align: right;
width: 100%;
}

Pas sur que ça marche mais ça fait déjà plus propre (enfin je trouve...)

sye

20 avril 2006 à 1:00:50

Citation : Hawks

<div span(?)="news">

Mon dieu... ça explique pourquoi ça marchais pas -_-*, comment il aurrait pus aller chercher dans mon css avec un span a la place d'un class :s
Bref encore une erreur toute bète qui m'a pris un temps fou T_T
Pour ce qui est du positionnement de mon H3, je sais c'est horrible mais, au bout d'un momment je me suis dis que je devais tout tester... xD
Pour ce qui est de laissé tomber le tableau, je sais pas. Je vais tester les 2 options et garder la meilleurs visuellement (mon site est juste pour quelques ami(e)s.

En tous cas merci a toi, tu me sauve beaucoups de temps ^^.
(je met le problème en résolu mais je reposterais ici si j'ai d'autres problèmes avec ma mise en page

)

Hawks

20 avril 2006 à 1:06:27

De rien...

sye

21 avril 2006 à 13:45:55

Yop bon bah en fait mon problème n'est plus résolut ^_^'

Bref mon problème est sensiblement le meme avec un code sensiblement le meme xD

<div class="news">

<h3><?php echo $donnees['titre']; ?>
<span class="test">Le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></span></h3>
<p><?php
// On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
$contenu = nl2br(stripslashes($donnees['contenu']));
echo $contenu;
?></p>

</div>

<?php
} // Fin de la boucle des news
?>

/*Tous ce qui concerne les elements du corps : la balise <div class="news"></div> */
/*Pour la partie concernant les news du site en page d'accueil */
.news
{
width:80%;
margin:auto;
}
.news h3
{
border: 1px solid black;
background-color:#CCCCCC;
font-size:1.1em;
margin-bottom:0px;
}

.news p
{
border: 1px solid black;
background-color:white;
margin-top:0px;
}

.test
{
text-align: right;
}

Je voudrais que ça fasse ça en gros:
_________________________________________________________________________________________

Titre de la news

Date de la news

________________________________________________________

Le contenu de la news, bref le contenu qui parle de ce dont j'ai envis, besoin de parler...

__________________________________________________________________________________________

Le titre et la date étant dans la meme "case", avec un fond commun.

Deeder

21 avril 2006 à 13:58:15

Je te propose de mettre ton titre et ta date dans un même conteneur et de placer la date en float: right pour qu'elle se situe à droite de ton titre.

<div class="news">

<div class="titre_news"><h3><?php echo $donnees['titre']; ?></h3>
<p class="test">Le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></p></div>
<p class="contenu"><?php
// On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
$contenu = nl2br(stripslashes($donnees['contenu']));
echo $contenu;
?></p>

</div>

<?php
} // Fin de la boucle des news
?>

/*Tous ce qui concerne les elements du corps : la balise <div class="news"></div> */
/*Pour la partie concernant les news du site en page d'accueil */
.news
{
width:80%;
margin:auto;
}
.titre_news
{
border: 1px solid black;
background-color:#CCCCCC;
font-size:1.1em;
margin-bottom:0px;
}

.news .contenu p
{
border: 1px solid black;
background-color:white;
margin-top:0px;
}

.test
{
float: right;
}

sye

21 avril 2006 à 15:24:06

ça ne marche malheureusement pas.... >_<

j'ai par contre enfin trouvé une manière d'optenir le design voullu:

<div class="news">
<span class="span_a_droire_pour_date">Le <?php echo date('d/m/Y à H\hi', $donnees['timestamp']); ?></span>
<h3><?php echo $donnees['titre']; ?>
</h3>
<p><?php
// On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
$contenu = nl2br(stripslashes($donnees['contenu']));
echo $contenu;
?></p>

</div>

.news
{
width:80%;
margin:auto;
}
.news h3
{
color:#000080;
border: 1px solid black;
background-color:#CCCCCC;
font-size:1.2em;
margin-bottom:0px;
}
.news p
{
font-size:1em;
border: 1px solid black;
background-color:white;
margin-top:0px;
}
.span_a_droire_pour_date
{
font-style: italic;
font-size:0.8em;
float: right;
}

Je crains que ce ne soit pas trés "catholique" (informatique? xD) mais comme ça fait 3 jours que je coince sur ce petit problème et que mon site avance pas a cause de ça, je risque a default de trouver mieux de laisser comme cela. >_<

Je n'arrive pourtant pas a comprendre comment ça peu marcher :'(

strucky

21 avril 2006 à 16:35:58

Salut,

Utilises le positionnement absolu pour tes blocs à placer à un endroit précis dans ta page, ce qui est bien plus pratique.

Un petit exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/* <![CDATA[ */
.news{ position: relative; width: 80%; height: 200px; margin: auto; padding: 25px 20px 30px 20px; background: #00ffff; border: 1px solid #800080 }
body>.news{ height: auto; min-height: 200px }
.news h3{ margin: 0; padding: 5px 0; text-align: center; background-color:#cccccc; color:#000080; border: 1px solid #000 }
.news p{ margin: 10px 0; padding: 10px; font-size:1em; border: 1px solid black; background-color: #fff }
.news .date{ position: absolute; top: 5px; right: 20px; font-style: italic; font-size: 0.8em }
.news .auteur{ position: absolute; left: 20px; bottom: 10px; font-style: italic; font-size: 0.9em }
/* ]]> */
</style>
</head>
<body>

<div class="news">
<h3>TITRE DE LA NEWS</h3>
<p>Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......
</p>
<p>
Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......<br />
Texte de la news .......
</p>
<span class="date">Le vendredi 24 avril 2005</span>
<span class="auteur">Proposé par Toto</span>
</div>
</body>
</html>

sye

21 avril 2006 à 21:25:20

Héééé, s'pas mal du tous ton code.
/me prend sa sacoche et le met de coté.

Bref j'ai résolus mon problème plus ou moins. merci a tous.

CSS/tableau/PHP

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

CSS/tableau/PHP

Faire en sorte que le système de news il soit joli :p

CSS/tableau/PHP

Supprimer

Modérer

Signaler le message aux modérateurs