Chciałbym mieć div, który wygląda tak:Tekst w Border CSS HTML
Czy to możliwe, aby zrobić z HTML + CSS? Będę również animował ten element przy pomocy jQuery. Gdy div jest ukryty, chciałbym, aby tytuł i górna linia były wyświetlane.
można zrobić coś takiego, w którym można ustawić negatywny margin na h1 (lub cokolwiek nagłówek używasz)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Uwaga: trzeba ustawić background jak również width w sprawie h1
przykład: http://jsfiddle.net/ZgEMM/
EDIT
Aby działać z ukrycia div, można korzystać z niektórych jQuery tak
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(Będziesz musiał zmodyfikować ...)
Przykład # 2:http://jsfiddle.net/ZgEMM/4/
Jest to możliwe przy użyciu znacznika legendy. Patrz http://www.w3schools.com/html5/tag_legend.asp
Tak, ale to nie jest div, to fieldset
<fieldset>
<legend>AAA</legend>
</fieldset>
CSS:
fieldset {
border: 1px solid #000;
}
Możesz obejść to obejście ... Ponadto, powinieneś to skomentować, a nie opublikować go jako odpowiedź. – JavierIEH
Nie widzę powodu, dla którego jest to obejście, dla mnie jest to rozwiązanie. Jaka jest różnica funkcjonalna, czy to div czy fieldset? – Bazzz
@ Bazzz- to jest zła semantyka. "Element fieldset reprezentuje zestaw formantów formularzy opcjonalnie pogrupowanych pod wspólną nazwą." - Specyfikacja HTML5 Gdzie są kontrole? To, czego potrzebujemy, to ustawienie CSS 'display: fieldset'. Niestety nie ma. – Alohci
wiem trochę późno do partii, jednak czuję, że odpowiedzi mogłyby zrobić z trochę więcej badań/danych wejściowych. Udało mi się stworzyć sytuację bez użycia tagu fieldset - i tak jest źle, tak jakbym nie był w formie, to nie jest to, co powinienem robić.
Przede wszystkim moim 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;
}
A teraz mój 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>
To mogą być przeglądane w tym upadać:
Co ten osiąga się następujące:
bez użycia zestawów pól.
Minimalne użycie, jeśli CSS tworzy efekt za pomocą tylko niektórych paddings.
Użycie marginesu "em" u góry do utworzenia tytułu względnego czcionki.
użycie wbudowanego bloku inline do uzyskania naturalnej szerokości wokół tekstu.
W każdym razie mam nadzieję, że pomoże przyszłym modelarzom, nigdy nie wiadomo.
Pomimo tego, że jest trochę bardziej złożony niż bym chciał, bardzo podoba mi się ta odpowiedź, ponieważ nie jest to kolejny hack CSS lub zła praktyka. +1 – goncalotomas
Możesz użyć znacznika 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>Sprawdź ten link: HTML Tag
I dont like to odpowiedź ma wiele ograniczeń: górny margines jest związane z wielkością czcionki w H1, co w przypadku zmiany wielkości czcionki później musisz zaktualizować wszystkie marginesy. background: white zapobiega widoczności jakiegokolwiek obrazu tła przez h1, wydaje się mało sztywne. Po prostu mam wrażenie, że używanie tego podejścia jest jak otwarcie dla późniejszych problemów z stylizacją. tylko moja myśl. – Bazzz
Podoba mi się to. Czy istnieje sposób na ukrycie bocznej i dolnej granicy, gdy ukryty jest div inside? http://jsfiddle.net/ZgEMM/3/ –
Thx @AlexBliskovsky. Zobacz moją edycję ukrytego utworu –