28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai apprécié le post Smiley smile : http://forum.alsacreations.com/topic-4-75099-1-RnsoluTexteentre2traits.html
qui explique comment placer un texte entre deux traits mais je ne sais pas comment :

- réduire la longueur des traits sans les décaler
- gérer l'espace entre le texte et les traits (éviter qu'ils soient collés au texte)
- utiliser des filets dotted et pas solid

Pour l'instant, j'en suis donc là Smiley ohwell :
h1 {
    position: relative!important;
    overflow: hidden!important;
}
h1:before, h1:after {
    position: absolute!important;
    top: 51%!important;
    overflow: hidden!important;
    width: 50%!important;
    height: 1px!important;
    content: '\a0'!important;
    background-color: #FFF!important;
}
h1:before {
    margin-left: -52%!important;
    text-align: right!important;
}


ça me semble pas mal compliqué Smiley rolleyes ...
Houlà ! Ça fait beaucoup de !important tout ça... et puis la position en absolute ça me semble foireux. Une solution en inline-block avec border-bottom pour que ça marche dans tous les cas de figure : CodePen (je l'utilise depuis longtemps sur mon framework).

Le code :
.emphasized {
  margin-bottom: 0.7em;
  text-align: center;
}
@media (max-width: 30rem) {
  .emphasized {
    padding-bottom: 0.25em;
    border-bottom: 0.15em solid Orange;
  }
}
@media (min-width: 30rem) {
  .emphasized {
    overflow: hidden;
    position: relative;
  }
  .emphasized::before,
  .emphasized::after {
    content: '';
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    margin-top: 0.3em;
    border-bottom: 0.15em solid Orange;
  }
  .emphasized::before {
    margin-left: -100%;
    margin-right: 1%;
  }
  .emphasized::after {
    margin-right: -100%;
    margin-left: 1%;
  }
}

Les médias queries c'est pour annuler le code si écran trop petit (l'effet fonctionne mais je trouve que ce n'est "pas beau" sur petits écrans).
Modifié par Olivier C (23 Jan 2017 - 21:33)
Merci pour ton retour !

Pour les !important, c'est que je travaille à partir d'un thème et j'en case un systématiquement pour être sûr que mes changements de classe deviennent prioritaires, par orthodoxe mais efficace.

Et j'avoue que je ne m'étais pas posé la question des médias queries et du rendu sur petit écran. Cela dit, le style recherché se limite quand même à la valeur de deux petits tirets simples et discrets et pas un gros filet épais de part et d'autre.

J'ai testé ton code, très bien Smiley cligne sauf que vertical-align : middle; ne fonctionne pas (même avec un !important Smiley ohwell , les tirets restent collés en pied... mais j'ai peut-être pas tout compris.

Avec les petites modifs, j'en suis là :
h1 {
  margin-bottom: 0.7em;
}
@media (max-width: 30rem) {
  h1 {
    padding-bottom: 0.25em;
    border-bottom: 0.15em solid Orange;
  }
}
@media (min-width: 30rem) {
  h1 {
    overflow: hidden;
    position: relative;
  }
h1::before, h1::after {
    content: '';
    display: inline-block;
    width: 3%;
    vertical-align: middle;
    margin-top: 0.3em;
    border-bottom: 1px solid white;
  }
h1::before {
    margin-left: -100%;
    margin-right: 1%;
  }
h1::after {
    margin-right: -100%;
    margin-left: 1%;
  }
}
goudurisc a écrit :
J'ai testé ton code, très bien Smiley cligne sauf que vertical-align : middle; ne fonctionne pas (même avec un !important Smiley ohwell , les tirets restent collés en pied... mais j'ai peut-être pas tout compris.

C'est normal, je l'ai conçus pour qu'il ait ce comportement. Les traits sont liés à des pseudo-éléments, ils se comportent donc comme tel. Leur hauteur est définie par un margin-top. Si vous voulez center les traits en hauteur il vous suffit donc de supprimer cette ligne :
/* margin-top: 0.3em; */

Vous aurez ainsi ce comportement : CodePen
Modifié par Olivier C (25 Jan 2017 - 06:08)
Modérateur
Si tu n'as rien contre l'usage de flex, cela va te facilité grandement la tâche, voir te passer des mediaqueries (si'il ny a pas de place, alors les traits disparaissent d'eux mêmes).
h1 {
    display:flex;
}
h1:before, h1:after {
  content:'';
  flex:1;
  border-bottom:1px white solid;
  margin:auto 0.5em;  /* auto = marge vertical, un enfant  flex se centre verticalement , 0.5em = marge latérales pour se cecoller des bords et du texte */
}


Le centrage se fait autant verticalement qu'horizontalement avec la valeur auto si celle-ci est appliqué à deux cotés opposés.

Ensuite pour le style, tu peut faire http://codepen.io/gc-nomade/pen/xgXzpr n'importe quoi Smiley smile ou pas.
Modifié par gcyrillus (26 Jan 2017 - 20:58)