Titre de section avec séparateurs
lilouetfredo
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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.
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.
A voir également:
- Titre de section avec séparateurs
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Saut de section word - Guide
- Je cherche une chanson dont je ne connais pas le titre - Guide
- Titre de l'adresse - Forum Réseaux sociaux
- Télécharger livre maternelle grande section gratuit pdf - Télécharger - Éducatifs
1 réponse
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 :
Et donc.. tout ce dont tu as besoin est dans le CSS :
https://isometricmaps.com/wp-content/themes/cardinal/style.css
Ce qui donne :
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>