Text in Border-CSS-HTML

Lesezeit: 7 Minuten

Ich hätte gerne ein div, das so aussieht:

Grenzbeispiel

Geht das mit HTML + CSS? Ich werde dieses div auch mit jQuery animieren. Wenn das div ausgeblendet ist, möchte ich, dass der Titel und die oberste Zeile angezeigt werden.

Text in Border CSS HTML
Bazz

Ja, aber es ist kein dives ist ein fieldset

fieldset {
    border: 1px solid #000;
}
<fieldset>
  <legend>AAA</legend>
</fieldset>

  • Sie können eine Problemumgehung vornehmen … Außerdem sollten Sie das kommentiert und nicht als Antwort gepostet haben

    – JavierIEH

    11. Oktober 2011 um 19:25 Uhr

  • Ich verstehe nicht, warum es eine Problemumgehung ist, für mich ist es eine Lösung. Welchen funktionalen Unterschied macht es, ob es sich um ein Div oder ein Fieldset handelt?

    – Bazz

    11. Oktober 2011 um 19:29 Uhr

  • @Bazzz- es ist falsche Semantik. “Das Fieldset-Element stellt eine Reihe von Formularsteuerelementen dar, die optional unter einem gemeinsamen Namen gruppiert werden können.” – HTML5-Spezifikation Wo sind die Kontrollen? Was wir eigentlich brauchen, ist ein display:fieldset CSS-Einstellung. Leider gibt es keinen.

    – Alohci

    11. Oktober 2011 um 19:33 Uhr

  • Tut mir leid. Ich dachte du wolltest meine Antwort kommentieren. egal

    – JavierIEH

    11. Oktober 2011 um 19:33 Uhr

  • @Alohci Stimme zu! Ich glaube jedoch nicht, dass das OP gesagt hat, dass es keine Formularsteuerelemente im Fieldset geben wird. Es könnte immer noch sein, dass er Formularsteuerelemente einbauen möchte 🙂

    – Bazz

    11. Oktober 2011 um 19:50 Uhr


1646265728 339 Text in Border CSS HTML
Jason Gennaro

Sie können so etwas tun, indem Sie ein Negativ festlegen margin auf der h1 (oder welchen Header Sie verwenden)

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

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

Hinweis: Sie müssen a einstellen background sowie ein width auf der h1

Beispiel: http://jsfiddle.net/ZgEMM/


BEARBEITEN

Damit es funktioniert mit dem Ausblenden der divkönnten Sie eine solche jQuery verwenden

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

(Sie müssen ändern …)

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

  • Ich mag diese Antwort nicht, sie hat viele Einschränkungen: Der obere Rand hängt von der Schriftgröße des h1 ab. Wenn sich die Schriftgröße später ändert, müssen Sie alle Ränder aktualisieren. Hintergrund: Weiß verhindert, dass ein Hintergrundbild durch den h1 sichtbar ist, es fühlt sich ein wenig unflexibel an. Ich habe nur das Gefühl, dass die Verwendung dieses Ansatzes so ist, als würde man sich später für weitere Styling-Probleme öffnen. nur mein Gedanke.

    – Bazz

    11. Oktober 2011 um 19:27 Uhr


  • Ich mag das. Gibt es eine Möglichkeit, den seitlichen und unteren Rand auszublenden, wenn das div darin ausgeblendet ist? jsfiddle.net/ZgEMM/3

    – Alex Bliskowski

    11. Oktober 2011 um 19:31 Uhr

  • Was ich gefragt habe, war, wie man den oberen Rand behält und die anderen drei versteckt, aber ich habe mich dagegen entschieden. Das ist, was ich am Ende gemacht habe: jsfiddle.net/ZgEMM/10

    – Alex Bliskowski

    11. Oktober 2011 um 19:49 Uhr

  • Sie werden Probleme haben, wenn jemand versucht, diese Seite zu drucken, da Browser normalerweise standardmäßig Hintergründe weglassen.

    – Vivian-Fluss

    16. Juli 2015 um 20:20 Uhr

  • Heute habe ich dieses Problem mit einem Kollegen besprochen. Um zu verhindern, dass das Problem eine feste Breite definiert (Titel variieren in der Länge), haben wir einfach Floating verwendet. Also statt width: XXpx; wir gebrauchen float: left;.

    – marcelion

    17. März 2017 um 15:48 Uhr


1646265728 782 Text in Border CSS HTML
PeterS

Ich weiß etwas spät zur Party, aber ich denke, die Antworten könnten etwas mehr Nachforschungen / Eingaben vertragen. Ich habe es geschafft, die Situation zu schaffen, ohne das Fieldset-Tag zu verwenden – das ist sowieso falsch, als ob ich mich nicht in einem Formular befinde, dann sollte ich das nicht wirklich tun.

/* 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;
}
<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>

Dies kann in diesem Plunk eingesehen werden:

Gliederungsbox mit Titel

Was damit erreicht wird, ist Folgendes:

  • keine Verwendung von Fieldsets.

  • Minimale Verwendung von CSS, um mit nur einigen Polstern einen Effekt zu erzielen.

  • Verwendung von “em”-Rand oben, um einen schriftartrelativen Titel zu erstellen.

  • Verwendung von Anzeige-Inline-Block, um eine natürliche Breite um den Text herum zu erreichen.

Wie auch immer, ich hoffe, das hilft zukünftigen Stylern, man weiß ja nie.

  • Obwohl sie etwas komplexer ist, als ich möchte, gefällt mir diese Antwort sehr gut, da es sich nicht um einen weiteren CSS-Hack oder eine schlechte Praxis handelt. +1

    – Gonkalotome

    11. Juli 2016 um 9:30 Uhr

  • Ihr Plunker-Link wird nicht geladen.

    – HoldOffHunger

    21. August 2018 um 16:11 Uhr

  • @HoldOffHunger scheint hier gut zu funktionieren, welchen Browser hast du ausprobiert?

    – PeterS

    21. August 2018 um 21:18 Uhr

  • Firefox lädt und funktioniert perfekt in Chrome. Ich hatte gehofft, dass eine HTML/CSS-Demo nicht viel mehr erfordern würde, aber Chrome ist ziemlich sicher. Ich freue mich über eine Antwort mit einem Seiten-/Abschnitts-Tag.

    – HoldOffHunger

    21. August 2018 um 21:34 Uhr


  • @HoldOffHunger Ich kann eine leichte Verbesserung vornehmen, die Firefox helfen könnte, aber ich sehe, dass plunkr gerade einige Alpha-Phasen durchläuft, sodass es möglicherweise nicht 100% ist.

    – PeterS

    22. August 2018 um 9:25 Uhr

1646265728 339 Text in Border CSS HTML
Mahdi Bashirpour

Text in Rahmen mit transparentem Texthintergrund

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: #333;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: #333;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: #333;
    display: block;
    height: 50%;
}
<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

<fieldset>
  <legend> YOUR TITLE </legend>
  
  
  <p>
  Lorem ipsum dolor sit amet, est et illum reformidans, at lorem propriae mei. Qui legere commodo mediocritatem no. Diam consetetur.
  </p>
</fieldset>

Text in Border CSS HTML
Rares Muresan

Sie können ein Fieldset-Tag verwenden.

<!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>

Überprüfen Sie diesen Link: HTML-Tag

1646265729 741 Text in Border CSS HTML
G-Cyrillus

Für ein Duplikat, hier eine weitere Option mit Transformation, kein Fieldset (und abgerundeter Rand in den Duplikaten erforderlich) :

position or transform kann Ihnen auch helfen:

* {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}

.fieldset {
  border: solid;
  color: #353fff;
  border-radius: 1em;
  margin: 2em 1em 1em;
  padding:0 1em 1em;
}

.legend {
  transform: translatey(-50%);
  width: max-content;
  background: white;
  padding: 0 0.15em;
}

.fieldset li {
  list-style-type: " - ";
}
<div class="fieldset">
  <h1 class="legend">Some Title</h1>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

917510cookie-checkText in Border-CSS-HTML

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy