[débutant] Aide pour intégrer un élément de style

Bonsoir !

Dans le cadre de mes cours, je dois réaliser un petit portfolio

N'ayant que peu de temps et des compétences en css relativement modestes je fais appel à vous afin de pouvoir finir dans les temps.

Je souhaite intégrer ceci (à plusieurs reprises en changeant le texte)



Ça parait peut-être bête, mais j'essayais de comprendre si je pouvais faire ça avec des <hr>.
C'est entourer le texte avec ces séparateurs de manière propre et assez pro qui me pose problème, j'ai pas très envie de bidouiller !

Merci si vous prenez le temps de me mettre sur une petite piste

Bonne soirée

Si tu nous montrait ce que tu as tenté ,base HTML et CSS, tu aurais probablement quelques conseils.
Des pistes: hx, p , span et bordure, padding, margin, background, text-align, ...

Bonjour et bienvenue,

entourer quel texte ?
Si c'est entourer "Mes compétences" par un hr à gauche (avant dans le code HTML) et un hr à droite (après), ce n'est pas sémantique du tout : il n'y a pas de séparation entre quelque chose et ce texte puis entre ce texte et autre chose qui suit. Ce n'est qu'un effet de style, ça se fait en CSS (et ce n'est pas basique mais ça se fait bien (*)).
Si c'est un hr avant "À la recherche d'un emploi", pourquoi pas. Ça peut être considéré comme un effet de style ou comme une séparation, au choix. Mais l'important sémantiquement c'est surtout d'en faire un titre h1-h6. Ça c'est de la vraie séparation entre ce qui précède, le titre et le contenu qu'il introduit.

Sinon astuce d'intégrateur (je me répète) : dans des vrais projets où on veut du robuste, des marges verticales respectées quand on ajoute un hr ou autre élément et ce qu'il y ait avant des flottants ou pas, des tableaux, du clearfix et cie, en responsive, etc : ne PAS utiliser hr, surtout si tu veux éviter la "bidouille".
Sur une page et/ou un seul cas d'utilisation de hr, tu arriveras à tes fins sans trop de souci mais plus... les bordures basse ou haute c'est bien aussi.

(*) à coup de pseudo :before et :after portant chacun un trait horizontal et positionnés en position absolue (IE8+) ou le texte avec background: transparent par dessus un trait horizontal allant de gauche à droite

Pour navigateur récent, je voyais deux balises de titre, une bordure, un line-height et un text-shadow http://codepen.io/gc-nomade/pen/azlKi .
Cdt,

Bonjour,

De nombreuses solutions avaient été trouvées à l’occasion d’un « cap ou pas cap » lancé par Raphaël Goetter, jette un œil .

Ah merci, plus fort que Google (j'ai un peu de mal avec le passage du blog de Tumblr à trucmuche)

Merci à vous pour vos réponses.
Effectivement je compte faire ce genre de style à plusieurs reprises dans mon one page, il me fallait donc une solution efficace.

Je retiens donc la technique du :before et :after et celle de gc-nomade qui me paraissent abordable.
Je fais un test en intégrant le reste et je vous dis

Alors :

Concernant la méthode de gc-nomad le problème est que je n'ai pas un fond blanc mais une texture, du coup le blanc se voit pas mal.

Et pour la méthode de Goetter, j'ai un petit soucis concernant le redimensionnement des traits de gauche et de droite entourant le texte (j'aimerai ne pas à avoir à utiliser des dimensions comme celles-ci en pixels)

salut,
tu n'es pas obligé de te lancer dans le cap ou pas cap ^^ Tu peux éviter les dimensions en mettant un <span> par exemple avec un fond blanc. Un peu comme ça.

Hey

Bon finalement en intégrant la solution du "T'es pas cap" ça fonctionne et aucun soucis pour le responsive... pour des raisons que j'ignore, mais c'est fonctionnel !
Modifié par Srygor (24 Jun 2014 - 22:31)