Texte en Bordure CSS HTML

Question

Texte en Bordure CSS HTML

j'aimerais avoir un div qui ressemble à ceci:

border example

est-ce possible avec HTML + CSS? Je vais aussi animer cette div avec jQuery. Quand la div est cachée, je voudrais que le titre et la ligne supérieure apparaissent.

33

css html

demandé sur Alex Bliskovsky 2011-10-11 23:19:31

5 réponses

score 34 · Answer 1

Vous pouvez faire quelque chose comme cela, où vous définissez un négatif (ou quel que soit l'en-tête que vous utilisez)

div{
    height:100px;
    width:100px;
    border:2px solid black;
}

h1{
    width:30px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

Remarque: vous devez définir un background ainsi qu'une width sur le h1

exemple:http://jsfiddle.net/ZgEMM/

EDIT

Pour le faire fonctionner avec de cacher l' div, vous pouvez utiliser quelques jQuery comme ceci

$('a').click(function(){
    var a = $('h1').detach();
    $('div').hide();
    $(a).prependTo('body');    
});

(Vous aurez besoin de modifier...)

exemple #2:http://jsfiddle.net/ZgEMM/4/

score 39 · Answer 2

Oui, mais ce n'est pas un div, c'est un fieldset

<fieldset>
  <legend>AAA</legend>
</fieldset>

CSS:

fieldset {
    border: 1px solid #000;
}

score 7 · Answer 3

je sais un peu tard à la partie, mais je pense que les réponses pourraient faire avec un peu plus d'enquête/input. J'ai réussi à créer la situation sans utiliser la balise fieldset - c'est mal de toute façon comme si je n'étais pas dans une forme alors ce n'est pas vraiment ce que je devrais faire.

/* Styles go here */

#info-block section {
    border: 2px solid black;
}

.file-marker > div {
    padding: 0 3px;
    height: 100px;
    margin-top: -0.8em;
    
}
.box-title {
    background: white none repeat scroll 0 0;
    display: inline-block;
    padding: 0 2px;
    margin-left: 8em;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="/style.css">
    <script src="index.js"></script>
  </head>

  <body>
    <aside id="info-block">
      <section class="file-marker">
              <div>
                  <div class="box-title">
                      Audit Trail
                  </div>
                  <div class="box-contents">
                      <div id="audit-trail">
                      </div>

                  </div>
              </div>
      </section>
    </aside>
  </body>

</html>

ceci peut être vu dans ce Pluk:

encadré avec le titre

ce que cela permet Est le suivantes:

pas d'utilisation de fieldsets.
utilisation minimale si CSS pour créer l'effet avec juste quelques paddings.
utilisation de la marge" em " en haut pour créer le titre relatif de la police.
utilisation du bloc display inline pour obtenir une largeur naturelle autour du texte.

de toute façon j'espère que ça aidera les futurs stylistes, on ne sait jamais.

score 1 · Answer 4

C'est possible en utilisant la balise legend. Reportez-vous à http://www.w3schools.com/html5/tag_legend.asp

score 1 · Answer 5

Vous pouvez utiliser une balise fieldset.

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

</body>
</html>

Vérifier ce lien: HTML Tag

Las etiquetas más populares

Texte en Bordure CSS HTML

5 réponses