Titre de section avec séparateurs

lilouetfredo -
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention - 22 déc. 2014 à 12:04

Bonjour,

Je ne sais pas si je suis dans la bonne partie de forum car je ne sais pas comment cela se réalise. N'hésitez pas à déplacer mon post.

Je souhaiterai réaliser ce genre de titre :
http://isometricmaps.com/
dans la dernière partie "Feature", le titre "Full Features List"

je souhaiterai faire de même sur mon site: la présentation d'une section avec un titre, et de chaque côté du titre un trait épais.

Je retrouve souvent cela sur des thème wordpress mais est-il possible de le faire en HTML/CSS/JS ?

N'hésitez pas non plus à me poser des questions si je ne suis pas claire :)

En vous remerciant par avance.

Afficher la suite

1 réponse

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

Bonjour,

Il suffit de regarder le code source de la page... de regarder ce que contiennent les différents CSS jusqu'à trouver ce qui a été utilisé sur la partie du code qui t'interesse...

Ici .. tu veux reproduire ce qu'il y à ici :

<div class="divider-wrap col-sm-12">
	<div class="spb_divider " style="margin-top: 0px; margin-bottom: 0px;">
	<h3 class="divider-heading">Full Features List</h3>
	</div>
</div>

Et donc.. tout ce dont tu as besoin est dans le CSS :
https://isometricmaps.com/wp-content/themes/cardinal/style.css

Ce qui donne :


<style>
divider-heading {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    float: none;
}

/* --------------------------------------------
	DIVIDER SHORTCODE
-------------------------------------------- */

.spb_divider {
    display: block;
    border-bottom-width: 1px;
    margin-bottom: 30px;
}

.spb_divider.standard {
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

.spb_divider.thin {
    border-bottom-style: solid;
}

.spb_divider.dotted {
    border-bottom-style: dotted;
}

.spb_divider.go_to_top {
    padding: 0;
}

.spb_divider.go_to_top a {
    text-align: right;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-bottom: 30px;
}

.spb_divider.go_to_top_icon1 {
    position: relative;
    height: 9px;
    border-bottom: 1px solid transparent;
}

.spb_divider.go_to_top_icon2 {
    position: relative;
    height: 10px;
    border-bottom: 1px solid transparent;
}

.spb_divider.go_to_top_icon1 a, .spb_divider.go_to_top_icon2 a {
    position: absolute;
    right: 0;
    display: block;
    padding: 0 0 0 10px;
    text-decoration: none;
}

.spb_divider.go_to_top_icon2 a i {
    padding-left: 6px;
    vertical-align: -3px;
}

.divider-wrap h3.divider-heading {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    float: none;
}

.divider-wrap h3.divider-heading:before, .divider-wrap h3.divider-heading:after {
    position: absolute;
    top: 50%;
    overflow: hidden;
    width: 50%;
    height: 2px;
    content: '\a0';
    background-color: #e3e3e3;
}

.divider-wrap h3.divider-heading:before {
    margin-left: -53%;
    text-align: right;
}

.divider-wrap h3.divider-heading:after {
    margin-left: 3%;
}

.divider-wrap h3.divider-heading:before {
    width: 50%;
    margin-left: -53%;
}

.divider-wrap h3.divider-heading:after {
    width: 50%;
    margin-left: 3%;
}


</style>
<div class="divider-wrap col-sm-12">
	<div class="spb_divider " style="margin-top: 0px; margin-bottom: 0px;">
	<h3 class="divider-heading">Full Features List</h3>
	</div>
</div>

Titre de section avec séparateurs

1 réponse

Discussions similaires

Newsletters