Problème de mise en page CSS pour commentaires

20 janv. 2007, 22:06

Bonsoir à tous,

J'ai un petit souci de mise en forme de mes pages de commentaires (j'espère rien de bien grave, mais je ne vois plus ce que je peux faire -> je ne suis pas un pro non plus

).

En fait, j'aimerais avoir une entête d'une couleur avec dedans le nom de l'auteur et la date, ensuite un bloc avec le commentaire de couleur blanc, et enfin un bloc de "pied" avec une note et de la même couleur que l'entête.

Pour le positionnement, j'y suis arrivé, mais pour appliquer les couleurs avec CSS j'ai quelques soucis et en plus, je n'ai bien sûr pas le même rendu sous IE et Firefox.

Voici les commentaires sous IE :

Voici les commentaires sous Firefox :

Voilà une partie du code HTML que ça génère :

Code : Tout sélectionner

    <div class="unCommentaire">
        <div class="enteteCommentaire">
            <span class="auteurCommentaire">
                Test ADMIN01
            </span>

            <span class="dateCommentaire">
                10/12/2006 18:20:29
            </span>
        </div>
        <div class="comCommentaire">
            Djsklmjkdsqklfjqsd
sdfljdsmklfjmsdlqkjf
flmkjdqfmkljdqmflkjdlkmfjlmdjf
flkjdflmjdslfkjkldjfkljdfkjdvlkj d<kdfjlmkqdjsfl mkjqsdf
        </div>
        <div class="piedCommentaire">
            <span class="noteCommentaire">
                Note : 1/5
            </span>

        </div>
    </div>
    <div class="unCommentaire">
        <div class="enteteCommentaire">
            <span class="auteurCommentaire">
                Test ADMIN01e
            </span>
            <span class="dateCommentaire">
                10/12/2006 18:23:14
            </span>

        </div>
        <div class="comCommentaire">
            Xvwwxddfgvvwcvcwxv
        </div>
        <div class="piedCommentaire">
            <span class="noteCommentaire">
                Note : 2/5
            </span>
        </div>
    </div>

Et voilà le CSS correspondant :

Code : Tout sélectionner

/*** Parametrage concernant le conteneur de tous les commentaires ***/
div#conteneur_tous_commentaires {
	clear: both;
	margin: auto;
	width: 650px;
	float: center;
	text-align: left;
	padding: 1px;
}


/*** Parametrage concernant l'affichage de chaque commentaire ***/
.unCommentaire {
	margin: auto;
	margin: 10px 0 5px 0;
	width: 650px;
	float: left;
	text-align: center;
	border: 1px solid black;
	background-color: #ffffff;
	padding: 0;
}


.enteteCommentaire {
	font-size: 14px;
	color: #000000;
	background-color: cyan;
	padding: 2px;
}

.auteurCommentaire {
	clear: both;
	text-align: left;
	float: left;
}

.dateCommentaire {
	text-align: right;
	float: right;
}


.comCommentaire {
	clear: both;
	text-align: left;
	padding: 5px;
}


.piedCommentaire {
	clear: both;
	text-align: right;
	font-size: 14px;
	color: #000000;
	background-color: cyan;
	padding: 2px;
}


.noteCommentaire {
	clear: both;
	float: right;
	text-align: right;
}

Si vous aviez une idée...
Merci d'avance.

21 janv. 2007, 01:05

J'ai beau chercher, je ne vois pas de différence particulièrement flagrante entre tes deux captures... ou alors ça doit être trop subtil

21 janv. 2007, 02:20

Les bordures du premier commentaire sont étirés jusqu'au dernier. Regarde bien toutes les bordures.

21 janv. 2007, 02:28

Les bordures du premier commentaire sont étirés jusqu'au dernier. Regarde bien toutes les bordures.

de plus, pas d'espace entre la première et seconde news

21 janv. 2007, 09:44

Vu, autant pour moi.

Je ne m'étais pas attardé sur le code, mais cette collection de div ne vaut pas plus cher qu'une mise en page en tableau. Trop de <div> tue le <div> Il te faut simplifier la structure HTML en ne conservant que ce qui correspond sémantiquement à ton contenu. Donc un paragraphe sera entre des balises <p> et non <div> par exemple.

Donc mon conseil : revoie ta copie coté HTML et après on pourra voir le style et la mise en forme.

21 janv. 2007, 15:34

D'accord,

Merci à vous, j'essaye de modifier tout ça et je "reviens" dès que c'est fait

21 janv. 2007, 16:11

Bon je viens de modifier mon code (en meilleur ou comme il le faut j'espère).
En tous les cas, mis à part que je n'arrive toujours pas à mettre le texte de mes entêtes et de mes pieds de commentaires dans la zone prévue (la zone avec la couleur), j'arrive à afficher maintenant correctement sous IE les différents blocs.

Voilà le nouveau code, avec effectivement beaucoup moins de "div".

Code : Tout sélectionner

    <div class="unCommentaire">
        <p class="enteteCommentaire">
            <span class="auteurCommentaire">
                Test ADMIN01
            </span>
            <span class="dateCommentaire">
                10/12/2006 18:20:29
            </span>
        </p>
        <p class="comCommentaire">
            Djsklmjkdsqkl fjqsdsdfljdsmklfj msdlqkjffl mkjdqfm kljdqm flkjdlkmfjlmdjfflkj dflmjdslfkjkldjfkljdfkjdvlkjd<kdfjlmkqdjsfl mkjqsdf=""></kdfjlmkqdjsfl>
        </p>
        <p class="piedCommentaire">
            <span class="noteCommentaire">
                Note : 1/5
            </span>
        </p>
    </div>

    <div class="unCommentaire">
        <p class="enteteCommentaire">
            <span class="auteurCommentaire">
                Test ADMIN01e
            </span>
            <span class="dateCommentaire">
                10/12/2006 18:23:14
            </span>
        </p>
        <p class="comCommentaire">
            Xvwwxddfgvvwcvcwxv
        </p>
        <p class="piedCommentaire">
            <span class="noteCommentaire">
                Note : 2/5
            </span>
        </p>
    </div>

N'ai-je pas un problème avec les "span" maintenant ?
Sachant que je les ai mis pour pouvoir positionner les noms/prénoms des auteurs, la date et la note où je le souhaitais, en l'occurence en haut à gauche pour les noms, en haut à droite pour les dates et en bas à droite pour la note.

Pour l'instant, je n'ai pas changé le CSS.
Merci de votre aide.

21 janv. 2007, 16:47

Un span ne prend pas la largeur totale du bloc par défaut, contrairement a une div.
@+

21 janv. 2007, 17:32

Bon, on va y aller un morceau à la fois.

Tu as des éléments positionnés, il faut donc adapter ta feuille de style en conséquence.
Première chose, pour pouvoir positionner des éléments par rapport au <div qui les contient, il faut que ce <div> soit lui même positionné. Donc on va commencer par :

Code : Tout sélectionner

div.unCommentaire {
    position: relative;
}

Partant de là, on va pouvoir s'occuper du contenu.
Tes deux span avec l'auteur et la date doivent être transformés en éléments de bloc et ensuite positionnés et dimensionés aussi:

Code : Tout sélectionner

p.enteteCommentaire {
    position: relative;
}
p.enteteCommentaire span {
    display: block;
    width: 10em; /* Une dimension de 10 em devrait suffire, ajuste au desoin */
}
span.dateCommentaire {
    position: absolute; /* cet élément sera positionné par rapport au premier élément parent positionné */
    top: 0;
    right: 0;
}

Le nom de l'auteur va naturellement se place à gauche, mais la date est positionnée pour être a droite;

Enfin, il reste le pied de commandaire : là, je saisis mal l'intérêt d'ajouter un span si tu n'as rien d'autre que la note. Donc, on vire le span et on aligne le teste à droite :

Code : Tout sélectionner

p.piedCommentaire {
    text-align: right;
}

Voilà, essaye avec ça et ajuste les détails au besoin.

21 janv. 2007, 17:51

GENIAL !!!!!

Merci à tous et à toi Cyrano...
Tout fonctionne parfaitement, et sous IE, et sous Firefox !

J'ai appris quelque chose et au moins ce soir je me coucherai moins bête.

Problème de mise en page CSS pour commentaires

Qui est en ligne