Texte en Bordure CSS HTML
j'aimerais avoir un div qui ressemble à ceci:
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.
5 réponses
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/
Oui, mais ce n'est pas un div
, c'est un fieldset
<fieldset>
<legend>AAA</legend>
</fieldset>
CSS:
fieldset {
border: 1px solid #000;
}
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:
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.
C'est possible en utilisant la balise legend. Reportez-vous à http://www.w3schools.com/html5/tag_legend.asp
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