IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Background sur les caractères et non pas sur le conteneur


Sujet :

CSS

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    août 2012
    Messages
    43
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2012
    Messages : 43
    Points : 29
    Points
    29
    Par défaut Background sur les caractères et non pas sur le conteneur
    Bonjour, je ne sais pas vraiment si ma question est compréhensible mais une image vaut mille mots :

    Ce que je veux :
    Nom : Capture d’écran 2014-06-02 à 17.02.32.png
Affichages : 94
Taille : 26,9 Ko

    Ce que je fais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     <p class="titreBlog">#TITRE</p>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .titreBlog{
    clear:both;
    float:left;
    background-color:rgba(66,75,81,0.8);
    padding:8px;
    color:#FFF;
    font-size:18px;
    text-transform:uppercase;
    margin:0;
    }
    Ce que j'ai :
    Nom : Capture d’écran 2014-06-02 à 17.02.45.png
Affichages : 88
Taille : 31,2 Ko

    Le problème :
    J'aimerai que comme sur la première image, le background s'arréte après mon dernier caractère de la première ligne (LA) et ne prenne pas toute la longueur.
    (Oui je sais que la balise P n'est pas la solution mais c'était pour bien expliqué ce que je voulais)

    Merci à vous, ça doit pas être bien compliqué mais je ne sais même pas quoi taper dans google pour chercher une solution... Merci !

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 868
    Points : 16 256
    Points
    16 256
    Par défaut
    Il suffit de passer le p en display:inline; par exemple et donc supprimer le float:left;.

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 421
    Points
    91 421
    Billets dans le blog
    20
    Par défaut
    C'est pas très très joli ça comme solution...
    Plutôt que de passer un paragraphe en inline, autant mettre une balise inline (par exemple <span>) que de modifier un paragraphe en ce qu'il n'est pas censé être.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 868
    Points : 16 256
    Points
    16 256
    Par défaut
    Ben si on parle sémantique, il s'agit (semble-t-il) d'un titre. Donc l'utilisation d'un hX parait plus appropriée, ce qui fait qu'il faudrait le passer en inline quand même.

    Citation Envoyé par Bovino Voir le message
    Plutôt que de passer un paragraphe en inline, autant mettre une balise inline
    Avec le mal qu'on a à faire prendre conscience aux gens qu'il faut développer selon la sémantique des éléments plutôt que leur rendu graphique.

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 421
    Points
    91 421
    Billets dans le blog
    20
    Par défaut
    Alors si on veut être correct dans ce cas, un titre n'a pas à être en display inline. De plus, une image de fond sur un texte n'a pas de valeur sémantique. La solution serait donc de mettre un span dans un titre et que ce span porte l'image de fond.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <h1><span class="titreBlog">Titre du blog</span></h1>
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Nouveau membre du Club
    Profil pro
    Inscrit en
    août 2012
    Messages
    43
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2012
    Messages : 43
    Points : 29
    Points
    29
    Par défaut
    Merci pour votre aide et ces précieux conseils !

    Edit : j'ai encore une petite question, lors du passage à la ligne, le padding ne prend pas (après le "à" et avant le "la") :

    Nom : Capture d’écran 2014-06-03 à 10.50.05.png
Affichages : 82
Taille : 30,4 Ko

  7. #7
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Citation Envoyé par Bovino Voir le message
    ...un titre n'a pas à être en display inline...
    Je ne vois pas trop pourquoi.

    J'ai vu beaucoup d'exemples qui utilisaient cette solution.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

Discussions similaires

  1. [AC-2003] operation sur les ligne et non pas sur les colonnes
    Par omarnigth dans le forum Requêtes et SQL.
    Réponses: 6
    Dernier message: 21/11/2011, 21h25
  2. [1.x] Les images n'apparaissent pas sur les pages interne
    Par etoileweb dans le forum Symfony
    Réponses: 6
    Dernier message: 19/11/2010, 12h08
  3. execution sur l'emulateur mais non pas sur le Pocket PC
    Par inter_amine dans le forum Windows Mobile
    Réponses: 2
    Dernier message: 08/06/2007, 09h35
  4. Réponses: 6
    Dernier message: 19/02/2007, 15h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo