3 problèmes sur une page

...ca fait beaucoup

Sujet résolu

26 décembre 2005 à 12:13:29

Bonjour à tous,
j'ai 3 problèmes d'affichage sur mon site. En fait dans le système de news dès que j'ajoute un smiley, il se met à coté de l'image de la catégorie. Deuxième problème, il y a un espace entre le border top et le titre de la news (il n'y a pas ce problème sous IE). Et troisième problème, le footer ne prend pas toute la largeur de la page.
Je vous ai fait un screen avec des fleches montrants les problèmes pour que ce soit plus clair :
Image utilisateur

Voila mon html :

<?php
session_start();
?>
<!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>Team-Heavy - Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS de Team-Heavy" href="css/css_team-heavy.css" />
</head>
<body>
<div id="header">
</div>

<div id="menu">
<div class="element_menu_titre">
<h3>Team-Heavy</h3>
</div>

<div class="element_menu_contenu">
<ul>
<li><a href="index.php">News</a></li>
<li><a href="sorties.php">Prochaines sorties</a></li>
<li><a href="agenda.php">Agenda</a></li>
   <li><a href="liste_membres.php">Liste des membres</a></li>
<li><a href="livre_or.php">Livre d'or</a></li>
<li><a href="http://www.team-heavy.be/forumss">Forum</a></li>
   <li><a href="admin/index.php">Administration</a></li>
</ul>
</div>

<div class="element_menu_titre">
<h3>Membres</h3>
</div>

<div class="element_menu_contenu">
<?php
if(!isset($_SESSION['pseudo']))
{
?>
<form action="login.php" method='post'>

Login :<br/>
<input type="text" name="pseudo" maxlength="250">

Password :<br/>
<input type="password"name="password" maxlength="10">
<input type="submit" value="Connexion"><br/>
<center><a href="inscription.php">S'inscrire</a></center>

</form>
<?php
}
else
{
?>
<ul>
<li><a href="ajouter_news_m.php">Ajouter une news</a></li>
<li><a href="sorties.php">Prochaines sorties</a></li>
<li><a href="agenda.php">Agenda</a></li>
   <li><a href="connexion.php">Se connecter</a></li>
   <li><a href="liste_membres.php">Membres</a></li>
<li><a href="livre_or.php">Livre d'or</a></li>
<li><a href="http://www.team-heavy.be/forumss">Forum</a></li>
   <li><a href="deconnexion.php">SE DECONNECTER</a></li>
<?php
if($_SESSION['pseudo'] == 'Hooli2')
{
?>
<li><a href="ajouter_news_a.php">Ajouter une news</a></li>
<li><a href="liste_news.php">Modifier/supprimer une news</a></li>

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

<div id="corps">
<h3>Bienvenue sur Team-Heavy !</h3>
<p><b><i>Où suis-je ?</i></b> Vous êtes actuelement sur le site de la Team-Heavy, c'est une petite communauté d'amis.<br/>
<b><i>Ok, et qu'est ce que je peux faire ici ?</i></b> Beaucoup de choses :-) Commence par t'inscrire, tu auras alors accès à plus d'options. Sinon tu peux visiter le <a href="http://www.team-heavy.be/forumss">forum</a> de la Team-Heavy.
</p>

<h3>Voici les dernières news :</h3>
<?php //fonctions smileys
include('mysql.php');
$result_smiley = mysql_query("SELECT * FROM smileys");
$path_smiley = "smileys";
if ($result_smiley)
{
while ($row=mysql_fetch_object($result_smiley))
{
$smiley[] = $row->smiley;
$image[] = "<img src=" . $path_smiley . "/" .
$row->image . ">";
}
}
mysql_close();
?>

<?php
include("mysql.php");

$retour = mysql_query('SELECT * FROM news ORDER BY id DESC LIMIT 0, 5') or exit(mysql_error()); //On séléctionne tout de la table news, en ordre décroissant et on limite à 5 le nombre de news par page
while ($donnees = mysql_fetch_array($retour)) //Ici on cré une boucle
{
$titre = $donnees['contenu'];
$resultat = str_replace($smiley, $image, $titre);
?>
<center>
<div id="news">
<p class="news_titre"><?php echo $donnees['titre']; ?> écrit par <a href="profil.php?pseudo=<?php echo $donnees['auteur']; ?>"><?php echo $donnees['auteur']; ?></a> <em> le <?php echo date('d/m/Y à H:i', $donnees['timestamp']); ?></em> </p>

<p><img src="img/<?php echo $donnees['categorie']; ?>.jpg" alt="Image de la catégorie" /><?php echo $resultat; ?></p>
<p class="clear"></p>
</div>
<br/>
</center>

<?php
} //On ferme la boucle
?>

<div id="footer">
<p>Copyright 2005-2006 <a href="http://www.Team-Heavy.be">www.Team-Heavy.be</a> - Tous droits réservés</p>
</div>

</body>
</html>

Et mon css :

body
{
background-color: Black;
color: White;
width: 100%;
height: 100pc;
}

a
{
color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-style:italic
}

a:hover
{
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:line-through;
}

p
{
font-size: 12px;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}

#news
{
   width: 70%;
   border: 1px solid;
   text-align: left;
}

.news_titre
{
background-color: Maroon;
border-bottom: 1px solid;
padding-left: 3%;
}

.news_titre p
{
margin: 0px;
padding: 0px;
}

#news p img
{
float: right;
padding: 5px; /* laisser un peu d'écart entre l'image et le reste*/
}

#news .clear
{
clear: right;
}

#header
{
width: 100%;
height: 100px;
background: black;
text-align: center;
border-bottom: 1px solid;
background-image: url(../img/banniere.jpg);
background-repeat: no-repeat;
background-position: center;
}

#menu
{
border: thin White;
float: left;
border-style: solid;
width: 13%;
border-left: none;
border-bottom: none;
border-top: none;
height: auto;
}

.element_menu_titre
{
border: thin;
text-align: center;
margin-bottom: 0px;
padding-bottom: 0px;
padding-top: 0px;
border-bottom: 1px solid;
background-color: Maroon;
border-top: 1px solid;
}

.element_menu_titre h3
{
margin: 0px;
padding: 0px;
}

.element_menu_contenu
{
border: thin;
}

#corps
{
text-align: left;
margin-left : 10pc
}

#corps h3
{
text-align: center;
}

#corps b
{
background-color: Maroon;
}

#footer
{
text-align: center;
width: 100%;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 3px;
clear:both;
}

#footer p
{
margin: 0px;
padding: 0px;
}

table
{
background-color: Maroon;
}

Voilà, jespère que vous pourrez m'aider.

Merci d'avance

Mikiael

26 décembre 2005 à 13:09:11

Bonjour

Citation : Pas de titre

il y a un espace entre le border top et le titre de la news

Pour ca essay de voir si en metant une hauteur pour la cellule

(la meme que l'image

)

mais j'suis pas sur...

@ bientot

Isenduil

26 décembre 2005 à 13:18:46

margin-left : 10pc

Il manque un ";"... (je ne sais pas si cela changera grand chose, mais bon...)
je cherche encore pour le reste

Edit :

Il y a un problème dans ton code xhtml : la balise <div id="corps"> est mal fermée je penses... (voire pas du tout) Tu vois bien d'ailleurs sur ton code que la coloration de la balise <div id="footer"> n'est pas normale.

Je penses que ton </div> doit venir plus bas...

Hooli

26 décembre 2005 à 13:55:52

Merci, j'ai fermé le div comme il fallait, le problème du footer est maintenant résolulé. Plus que 2 problèmes

mistike

26 décembre 2005 à 17:00:43

Citation : Hooli

Merci, j'ai fermé le div comme il fallait, le problème du footer est maintenant résolulé. Plus que 2 problèmes

Résolulé ? :lol:

Tu as un lien vers ton site ? Je préfère voir ça en live ;-)

Aurélien Massé

26 décembre 2005 à 17:17:14

#news p img
{
float: right;
padding: 5px; /* laisser un peu d'écart entre l'image et le reste*/
}

tu met un padding de 5px donc ton image va etre décalée vers le bas de 5 px c'est logique essaye de regler ca pour tes news je reflechis a la derniere erreur mais donne un exemple parceque la je comprend pas ton probleme de smiley

Hooli

26 décembre 2005 à 18:09:42

Oui en fait dans le css j'ai mis

#news p img
{
float: right;
padding: 5px; /* laisser un peu d'écart entre l'image et le reste*/
}

pour que l'image de la categorie se mette à droite. Le problème c'est que le smiley est aussi une image donc il fait la meme chose. Moi j'aimerais qu'il se mette dans le texte, la ou je l'ai ajouté.
J'ai mis le site en ligne : http://www.hooli666.be/sites/team-heavy/
Par contre il aurait fallu que je change toute la base de données et comme j'ai déjà une table nommée news je ne peux pas, mais il suffit de regarder sur le screen on voit bien le problème avec le smiley.

Isenduil

26 décembre 2005 à 18:23:09

Tu ne peux pas tout simplement rajouter un élément de type "class="smileys"" pour que les smileys se comportent comme tu le souhaites ? o_O

mistike

26 décembre 2005 à 18:25:06

Re-coucou,

Ton titre décalé, c'est parce que c'est un <p>, donc avec marge par défaut. Ajoute

margin: 0;

à ta classe #news_titre.

Pour le smiley :

#news p img
{
float: right;
padding: 5px; /* laisser un peu d'écart entre l'image et le reste*/
}

Ton smiley étant une image, il se comporte comme les autres. Il faut que tu crées une classe spécifique pour l'image de la catégorie avec tout ça, pour ne pas que toutes les autres images de tes news ne se retrouvent à flotter elles-aussi.

Un truc genre :

<p><img class="img_categorie" src="img/toto.jpg" alt="Image de la catégorie Toto" />Ma news qu'elle est belle et toute neuve</p>

#img_categorie
{
float: right;
margin: 5px; /* laisser un peu d'�cart entre l'image et le reste*/
}

re-re-edit : d'un point de vue sémantique je pense que margin est plus approprié que padding dans le cas présent ;-)

Hooli

26 décembre 2005 à 18:30:52

Citation : mistike

Re-coucou,

Ton titre décalé, c'est parce que c'est un <p>, donc avec marge par défaut. Ajoute
margin: 0;
à ta classe #news_titre.

Vala. Pour le smiley je n'ai pas regardé.

Merci, ce problème la est maintenant réglé

Citation : Isenduil

Tu ne peux pas tout simplement rajouter un élément de type "class="smileys"" pour que les smileys se comportent comme tu le souhaites ?

Pourrais-tu m'expliquer comment faire parce que je ne comprend pas ce que je dois mettre dans cette classe.

mistike

26 décembre 2005 à 18:34:10

Je t'ai répondu en éditant mon post précédent ;-)

A mon sens c'est pas une classe smiley qu'il te faut, c'est une classe pour l'image de la catégorie. Le smiley, lui, doit se contenter d'être un élément inline de base, au beau milieu d'une phrase, donc sans formatage particulier.

Hooli

26 décembre 2005 à 18:36:13

Super ton idée a fonctionné mistike (il fallait juste remplacé le # par un . dans le css).
Je vous remercie tous pour votre aide

mistike

26 décembre 2005 à 18:39:00

Citation : Hooli

Super ton idée a fonctionné mistike (il fallait juste remplacé le # par un . dans le css).
Je vous remercie tous pour votre aide

hummm. Tu as fait un id de ta classe ? Méfies-toi, tu vas avoir plusieurs news, avec plein de smileys et d'images pas forcément dans le même ordre que celui dans lequel tu as testé... Et alors ça ne marchera plus, car un id doit être unique dans la page !

(enfin c'est ce que je comprends de ce que tu dis...)

Sinon, de rien

Hooli

26 décembre 2005 à 18:42:47

J'ai fais comme ca :

<div id="news">
<p class="news_titre"><?php echo $donnees['titre']; ?> écrit par <a href="profil.php?pseudo=<?php echo $donnees['auteur']; ?>"><?php echo $donnees['auteur']; ?></a> <em> le <?php echo date('d/m/Y à H:i', $donnees['timestamp']); ?></em> </p>

<p><img class="img_categorie" src="img/<?php echo $donnees['categorie']; ?>.jpg" alt="Image de la catégorie" /><?php echo $resultat; ?></p>
<p class="clear"></p>
</div>

et comme ca :

#news
{
   width: 70%;
   border: 1px solid;
   text-align: left;
}

.news_titre
{
background-color: Maroon;
border-bottom: 1px solid;
padding-left: 3%;
margin: 0;
}

.news_titre p
{
margin: 0px;
padding: 0px;
}

.img_categorie
{
float: right;
padding: 5px; /* laisser un peu d'écart entre l'image et le reste*/
}

#news .clear
{
clear: right;
}

C'est pas bon ?