Problème code CSS citation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème code CSS citation

Message par Shashy le Mer 7 Mai 2014 - 16:42

Bonjour à tous,

Je reviens vers vous pour vous demander de m'aider suite à un problème de code CSS pour les citations s'il vous plaît.

Regardez ce que cela donne:



Ce que je souhaiterai c'est:


  • Garder la mise en forme de la citation, que cela ne fasse pas un écart dans les lignes comme ci-dessus.
  • Ajouter une image qui sera centrée à gauche de la citation (Cette image)


Voici mon code actuel:

Code:
dd.quote{
                background: url("http://i58.servimg.com/u/f58/18/82/33/07/ciel-b12.jpg");
                border-radius: 10px 10px 10px 10px;
                border: 1px solid rgb(0, 0, 0);
               box-shadow: 3px 3px 6px rgb(black);
                margin: 0px;
                font-family: arial;
                font-size: 12px;
                color: rgb(0, 0, 0);
                padding: 10px 10px 10px 10px;
                text-indent: 15px;
                overflow: hidden;
  dl.codebox{padding-bottom:10px;}
                  }

Je vous remercie énormément pour votre aide d'avance et j'espère obtenir une réponse favorable de votre part ! Very Happy


Dernière édition par Shashy le Mer 7 Mai 2014 - 18:52, édité 1 fois

Shashy
****

Féminin
Messages : 306
Inscrit(e) le : 01/12/2013

http://www.forumactif.com/
Shashy a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème code CSS citation

Message par MlleAlys le Mer 7 Mai 2014 - 18:45

Bonjour,
La propriété text-indent est responsable du décalage de la première ligne, retirez-là pour retrouver l'alignement du texte.
L'image de fond peut être ajoutée à la première comme ceci :
Code:
dd.quote {
    background-image: url(http://i58.servimg.com/u/f58/18/57/97/27/bulle-10.png), url("http://i58.servimg.com/u/f58/18/82/33/07/ciel-b12.jpg");
    background-repeat: no-repeat,repeat;
    background-position: 5px center, left top;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid rgb(0, 0, 0);
    box-shadow: 3px 3px 6px black;
    margin: 0px;
    font-family: arial;
    font-size: 12px;
    color: rgb(0, 0, 0);
    padding: 10px;
}
Chaque première valeur d'une propriété du fond, c'est à dire avant la virgule, concerne l'image de la bulle, et celle après la virgule concerne le fond bleu.
Si vous vouliez ajouter un décalage de tout le texte (et pas seulement la première ligne) vers la droite, vous pouvez également modifier padding:10px; en padding: 10px 10px 10px 60px;

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code CSS citation

Message par Shashy le Mer 7 Mai 2014 - 18:49

Bonsoir ! ^^

Edité: J'ai réussi ! En modifiant ce que tu m'as dit de faire, je suis vraiment une tête-en-l'air... Very Happy

Merci beaucoup !

Shashy
****

Féminin
Messages : 306
Inscrit(e) le : 01/12/2013

http://www.forumactif.com/
Shashy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code CSS citation

Message par MlleAlys le Mer 7 Mai 2014 - 18:53

ah, j'ai surement mal compris ce que vous vouliez alors ! Nouvelle tentative : l'image doit elle se trouver à l'extérieur du cadre de citation ? ^^"

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code CSS citation

Message par Shashy le Mer 7 Mai 2014 - 18:54

Excuse-moi, tu as dû écrire ton message alors que j'éditais le mien ! ^^ Non non, c'est exactement cela. Après modification du "padding" j'ai réussi à faire le cadre de citation.

Merci beaucoup !

Shashy
****

Féminin
Messages : 306
Inscrit(e) le : 01/12/2013

http://www.forumactif.com/
Shashy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code CSS citation

Message par MlleAlys le Mer 7 Mai 2014 - 18:56

effectivement, désolée, et de rien ! ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum