Partage

Créer un titre précédé par une barre horizontal

Sujet résolu
20 avril 2017 à 16:17:08

Bonjour,

Dans le cadre de mon stage en entreprise je réalise un site web. Pour cela j'ai besoin de créer des titres tels que celui-ci :


Pour le moment je suis parvenu a créer le fond bleu en dégradé dans une <div>, puis, à l'intérieur de cette div j'ai ajouté du texte (PARTENAIRES) qui possède un background-image, à savoir le rectangle bleu foncé.

Mon problème réside en la création du trait blanc et du rond. En effet je ne parviens pas à créer un titre qui s'adapte sur différentes résolutions d'écran.

Enfin, certains m'ont déjà proposé de remplacer le code en insérant simplement une image de mon titre (comme le screen ci-dessus), mais cela ne fait pas trop professionnel.


Merci à vous :)
20 avril 2017 à 16:38:36

Salut,

Voici un exemple trouvé sur internet. Ce n'est pas entièrement ce que tu cherches, mais cela devrait te donner une idée de résolution du problème.

http://jsfiddle.net/z8Hnz/

Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
20 avril 2017 à 17:00:10

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
20 avril 2017 à 18:43:41

Bonjour,

Un peu HS mais juste une question sur ton CSS.

Pourquoi fais-tu un font: 16px / 1.5 ? as-quoi sert cette division d'autant que je vois des padding de 0.25em par la suite.

20 avril 2017 à 19:05:21

Salut pipelette13,

Ce n’est pas une division, c’est juste la notation raccourcie de font-size et line-height.

Ça revient à ça :

body {
    font-size: 16px;
    line-height: 1.5em;
    font-family: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
}

Edit: Oooh, Elyppire, tu es de retour ? :D

-
Edité par rhooManu 20 avril 2017 à 19:05:49

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
20 avril 2017 à 20:34:40

Ah d'accord, bon bein j'était loin de penser à ça :D 

j'ai bien faite de poser la question, merci.

20 avril 2017 à 21:01:34

> Edit: Oooh, Elyppire, tu es de retour ?

Et oui, un peu ;)

-
Edité par elyppire 20 avril 2017 à 21:02:03

Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
21 avril 2017 à 9:36:02

Merci beaucoup pour vos réponses, ça me semble assez clair ! :D

Je vais essayer ça et si tout fonctionne je clos le sujet ;)
24 avril 2017 à 9:37:51

J'en reviens à vous, j'ai une question qui peut sembler très bête mais je n'arrive pas à refaire le code pour mettre le rond et la barre à droite du titre cette fois.

Pour être plus clair vous m'avez déjà aidé à faire : barre / rond / titre,
Je souhaiterai également faire : titre / rond / barre,
Mais lorsque j'essaie de modifier le code je n'obtient que : titre / barre / rond.


C'est tout bête mais je n'y arrive pas :x
24 avril 2017 à 14:39:39

Ça demande de changer un peu le code : https://jsfiddle.net/onmc6xnk/42/
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
25 avril 2017 à 10:21:35

Merci rhooManu, en effet j'ai finalement trouvé la solution hier soir ^^ je ne suis pas encore habitué à manipuler ce genre d'éléments mais ça avance !

Merci à tous pour votre aide :)

Créer un titre précédé par une barre horizontal

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown