Problème de centrage du texte

Résolu/Fermé
codeur08 - 31 août 2009 à 13:25
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 - 1 sept. 2009 à 14:55
Bonjour,

J'ai un problème avec un bout de code.

En fait, j'ai créé un forum de A à Z. Le problème c'est que le message se centre dans son "cadre". Une image sera plus claire :
https://i85.servimg.com/u/f85/11/05/88/12/sans_t26.jpg

Ce n'est pas un problème de marge puisque lorsque les messages sont plus long que les informations du membre, cela ne pose aucun problème.

Par ailleurs, le texte "Posté le ..." devrait être écrit en petit.

Je ne vous donne pas mon code PHP, ce serait trop lourd. J'ai pris le code source à partir de Mozilla et vous en donne l'essentiel :
<div id="corps_forum">
	<table>
		<tr>
			<th class="vt_auteur"><strong>Auteurs</strong></th>             
			<th class="vt_mess"><strong>Messages</strong></th>       
		</tr>



		<tr>
			<td class="topic_infos_membre"><strong><a href="../membres/voirprofil.php?m=6&amp;action=consulter">Ghuighui</a></strong>
				<br>administrateur<br>
				<img src="../membres/avatars/1251715445.jpg" alt="">
				<br><strong>Peuple :</strong> romain
				<br><strong>Membre inscrit le</strong> 15/08/2009
				<br><strong>Messages :</strong> 92<br>
			</td>
			
			<td id="p_583">
				<span class="topic_infos_membre">
				<span class="bbcode_petit">Posté le 31/08/2009 à 12h44</span>
				<span class="infos_droite"><a href="poster.php?p=583&amp;action=supprimer&amp;sur=0">
				<img src="images/supprimer.png" alt="Supprimer" title="Supprimer ce message"></a>   
				<a href="poster.php?p=583&amp;action=editer">
				<img src="images/editer.png" alt="Editer" title="Editer ce message"></a>
				<a href="poster.php?p=583&amp;action=citer">
				<img src="images/citer.png" alt="Citer" title="Citer ce message"></a><br><hr></span>
				<br>mouahaha, j'ai un avatar, et une signature !
				<br><hr>Les signatures, c'est le mal !</span>
			</td>
		</tr>
	</table>
</div>


Et voici le CSS qui va avec (seulement les balises utilisées que je met ici) :
body
{
   width: 95%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 10px;
   background-image: url("../font.jpg");
   background-attachment: fixed;
   font-family: "Trebuchet MS", "Times New Roman", Times, serif;
   font-size: 0.8em;
}

#corps_forum
{
	margin-left: 140px;
	margin-bottom: 20px;
	padding: 5px;
	font-size : 1.1em;
	font-family: "Book Antiqua", Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #ecffc2;
	border: 1.2px solid black;
}

#bbcode_petit
{
	font-size: 0.7em;
}

table
{
	background-color: rgb(237,224,213);
	border: 1px solid gray;
	border-collapse: collapse;
	margin-bottom: 15px;
}

td
{
	border: 1px solid gray;
	background-color: rgb(253,244,223);
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	margin: 0px;
}

.topic_infos_membre
{
	padding-left: 5px;
	vertical-align: top;
	font-size: 0.9em;
}

.infos_droite
{
text-align: right;
}

.vt_auteur
{
	width: 20%;
	vertical-align: top;
	background-color : rgb(244,238,250);
}
.vt_mess
{
	width: 80%;
	vertical-align: top;
	background-color : rgb(244,238,250);
}


Si j'ai oublié un truc vous savez quoi faire ;)

Merci d'ava,ce

7 réponses

M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
31 août 2009 à 15:30
OK ;)

Sinon il n'y a aucun problème à mettre à la fois un id et une classe à une même balise.

Et pour être plus précis, il est même possible de mettre une infinité de classe.

<div id="identifiant" class="classe uneAutreClasse encoreUneClasse ToujoursUneClasse ..." ></div> est tout à fait envisageable! ^^
1
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
31 août 2009 à 16:31
C'est normal. La propriété CSS text-align s'applique au contenu et non au conteneur. comme la balise span est une balise inline, la balise a la forme du texte. il est donc aligné à la fois à gauche et à droite du span.

Pour régler ça facilement , il faut modifier un peu le code:
<div class="topic_infos_membre">
	<div class="infos_droite">
		<a href="poster.php?p=583&amp;action=supprimer&amp;sur=0">
			<img title="Supprimer ce message" alt="Supprimer" src="images/supprimer.png"/></a>   
		<a href="poster.php?p=583&amp;action=editer">
			<img title="Editer ce message" alt="Editer" src="images/editer.png"/></a>
		<a href="poster.php?p=583&amp;action=citer">
			<img title="Citer ce message" alt="Citer" src="images/citer.png"/></a>
	</div>
	<p class="bbcode_petit">Posté le 31/08/2009 à 12h44</p>
	<hr/>
	<p>mouahaha, j'ai un avatar, et une signature !</p>
	<hr/>
	<p>Les signatures, c'est le mal !</p>
</div>

et en css:
.infos_droite {
	float:right; /* Pour qu'il s'affiche en flottant à droite */}
hr {
	clear:both;/* permet d'éviter des problèmes d'affichage avec le float:right; */}


Pourquoi avoir changer les <span> en <div> et <p>? parce que c'est plus souple. les balises <div> et <p> sont des balises block qui réagissent plus facilement aux css.
Une balise inline comme span n'a pas de marge par exemple.
1
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
31 août 2009 à 14:44
Bonjour,

Tout d'abord attention, les informations cachées sur l'image ne le sont pas dans le code que tu as donné.

Ensuite, pour tes problèmes:
Pour la position du texte dans une cellule, il suffit de mettre la propriété css "vertical-align:top;", à affecter à la balise TD
Pour le texte normalement plus petit: dans ton css, tu as mis #bbcode_petit alors que tu utilises des classes.

J'espère que ces réponses te suffiront.
0
Exact pour bbcode_petit, j'avais même pas fait gaffe.

Par contre, il n'y a pas un autre moyen pour aligner en haut ?
1/ Je veux pas que toutes les cellules soient affectées (notamment sur l'accueil de mon fofo)
2/ Je ne peux pas rajouter une class aux td puisque certains ont déjà un id (id du message), comme vous pouvez le remarquer dans mon code. A moins qu'on puisse attribuer une class et un id a la même balise ?

Pour les infos cachées, ce n'est rien du tout, je n'avais pas caché pour vous ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Ah ben je savais pas, ou alors j'avais oublié ! Merci j'essaie ça... et ça marche !

Par contre, une seule chose. Vous voyez la class "infos_droite". En fait, dans le même td, j'ai plusieurs choses :
- L'heure du post, la date que j'aimerai mettre à gauche (c'est bon)
- Les boutons éditer, supprimer, citer, que j'aimerai mettre à droite. J'ai donc mis un span autour de ces boutons mais ils restent à la suite de la date et l'heure...
0
Merci, ça fonctionne à merveille !

En passant, si quelqu'un aurait des idées pour améliorer le confort de mon forum... Le message se fond dans le design et ne ressort pas très bien, cf image. Changer de couleur de fond peut-être ? (que je trouve moche d'ailleurs, mais j'ai pas vraiment d'imagination alors j'ai du mal avec le design)
0
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
1 sept. 2009 à 14:55
C'est possible de faire ressortir le message en jouant sur les tailles et les couleurs.
par exemple, réduit la tailles des informations annexes, mets les dans des couleurs plus pâles (gris par exemple), et augmente la taille du pseudo et du message, avec une couleur plus contrastée, comme le noir.

Fait en sorte que le message ait un fond de couleur différente du reste, un peu plus foncé par exemple.

Avec ça déjà ça attirera l'oeil sur les éléments importants du forum
0