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

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/

Salut;

https://jsfiddle.net/onmc6xnk/ 

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.

C'est le line-height.

Source : https://developer.mozilla.org/en-US/docs/Web/CSS/font

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 ?

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

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

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

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

Et oui, un peu

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

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

Je vais essayer ça et si tout fonctionne je clos le sujet

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

Ça demande de changer un peu le code : https://jsfiddle.net/onmc6xnk/42/

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