Mi piacerebbe avere un div che assomiglia a questo:testo in Border CSS HTML
Questo è possibile a che fare con HTML + CSS? Animerò anche questo div con jQuery. Quando il div è nascosto vorrei che il titolo e la linea superiore mostrassero.
Si può fare qualcosa di simile, in cui si imposta un negativo margin sul h1 (o qualunque colpo di testa che si sta utilizzando)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Nota: è necessario impostare un background così come un width sulla h1
Esempio: http://jsfiddle.net/ZgEMM/
EDIT
Per farlo funzionare con nascondere il div, si potrebbe usare un po 'di jQuery come questo
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(Sarà necessario modificare ...)
Esempio # 2:http://jsfiddle.net/ZgEMM/4/
È possibile utilizzare il tag della legenda. Fare riferimento a http://www.w3schools.com/html5/tag_legend.asp
Sì, ma non è un div, si tratta di un CSS fieldset
<fieldset>
<legend>AAA</legend>
</fieldset>
:
fieldset {
border: 1px solid #000;
}
Puoi fare una soluzione ... Inoltre, dovresti averlo commentato e non postarlo come risposta – JavierIEH
Non vedo perché è una soluzione, per me è una soluzione. Che differenza funzionale fa se è un div o un fieldset? – Bazzz
@ Bazzz- è una semantica sbagliata. "L'elemento fieldset rappresenta una serie di controlli di modulo raggruppati facoltativamente sotto un nome comune." - Specifiche HTML5. Dove sono i controlli? Quello di cui abbiamo effettivamente bisogno è un 'display: fieldset' impostazione CSS. Purtroppo non ce n'è uno. – Alohci
So un po 'in ritardo alla festa, però mi sento le risposte potuto fare con qualche ulteriore indagine/input. Sono riuscito a creare la situazione senza usare il tag fieldset - che è comunque sbagliato come se non fossi in una forma quindi non è proprio quello che dovrei fare.
Prima di tutto la mia CSS:
#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;
}
E ora la mia HTML:
<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>
Questo può essere visto in questo Plunk:
Ciò realizza è il seguente:
nessun utilizzo di set di campi.
uso minimo se il CSS crea l'effetto con solo alcuni paddings.
Uso di "em" margine superiore per creare il titolo relativo al carattere.
uso di display inline-block per ottenere una larghezza naturale attorno al testo.
In ogni caso, spero che questo aiuti i futuri styler, non si sa mai.
Nonostante sia un po 'più complesso di quanto vorrei, mi piace molto questa risposta perché non è un altro hack CSS o cattiva pratica. +1 – goncalotomas
È possibile utilizzare un tag 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>controllare questo link: HTML Tag
Non mi piace questa risposta ha molte limitazioni: il margine superiore è legata alla dimensione del carattere del h1, che cosa se i cambiamenti dimensione del carattere più tardi, avresti bisogno di aggiornare tutti i margini. sfondo: il bianco impedisce a qualsiasi immagine di sfondo di essere visibile attraverso l'h1, sembra un po 'inflessibile. Ho solo la sensazione che l'utilizzo di questo approccio sia come aprire più tardi questioni di stile. solo il mio pensiero – Bazzz
Mi piace questo. C'è un modo per nascondere il lato e il bordo inferiore quando il div all'interno è nascosto? http://jsfiddle.net/ZgEMM/3/ –
Thx @AlexBliskovsky. Vedi la mia modifica per il nascondiglio –