[Résolu] Problème d'affichage par Hooli - page 1

Bonjour (ou plutot bonsoir) à tous,
Je rencontre un problème avec la création de mon site. A partir d'un moment le contenu du corps passe en dessous du menu.
Voilà un screen ca sera plus clair :
Image utilisateur

Voilà 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
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
{
?>
<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 $donnees['contenu']; ?></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;
}

.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;
}

#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;
}

En esperant que vous pourrez m'aider,

Merci d'avance

Hooli

25 décembre 2005 à 22:14:40

Isenduil

25 décembre 2005 à 23:32:38

C'est normal, le problème vient du fait que tu aies usé de la propriété "float : left" pour ton menu.

Cette propriété fonctionne à l'image d'une lettrine : le texte s'agence à sa droite puis passe en dessous afin de l'entourer.

La solution est simple : introduire un

"margin-left : #px" dans ta partie #corps.

Normalement, cela devrait résoudre ton problème...

25 décembre 2005 à 23:40:57

C'est parfait ca fonctionne, je te remercie

Problème d'affichage

Problème d'affichage

Supprimer

Modérer

Signaler le message aux modérateurs