Testo di Confine, CSS, HTML

Mi piacerebbe avere un div che assomiglia a questo:

Testo di Confine, CSS, HTML

Questo è possibile a che fare con HTML + CSS? Io sarà anche l’animazione di questo div con jQuery. Quando il div nascosto vorrei il titolo e la riga in alto per mostrare.



5 Replies
  1. 39

    Si può fare qualcosa di simile a questo, dove si imposta negativa margin sul h1 (o qualunque sia l’intestazione 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 width sul h1

    Esempio: http://jsfiddle.net/ZgEMM/


    MODIFICA

    Per farlo funzionare con il nascondere la 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/

    • Non mi piace questa risposta ha molti vincoli: il margine superiore è correlata alla dimensione del carattere di h1, che cosa se la dimensione del carattere modifiche successivamente, è necessario aggiornare tutti i margini. background: white impedisce qualsiasi immagine di sfondo da essere visibile attraverso la h1, ci si sente un po ‘ inflessibile. Ho una sensazione, che l’utilizzo di questo approccio è come l’apertura di più di styling problemi in seguito. solo il mio pensiero.
    • Mi piace questo. C’è un modo per nascondere il lato e bordo inferiore quando il div all’interno è nascosto? jsfiddle.net/ZgEMM/3
    • Thx @AlexBliskovsky. Vedere la mia modifica per nascondere pezzo
    • Quello che chiedevo era come tenere il bordo superiore e nascondere gli altri tre, ma ho deciso di non farlo. Questo è quello che ho finito per andare con: jsfiddle.net/ZgEMM/10
    • Guarda bene @AlexBliskovsky! Contento di aver potuto aiutare.
    • Si avranno problemi se qualcuno tenta di stampare questa pagina come browser è in genere omettere sfondi di default.
    • Oggi ho discusso di questo problema con un collega. Per evitare il problema di definire una larghezza fissa (titoli variano in lunghezza), abbiamo usato solo galleggiante. Così, invece di width: XXpx; usiamo float: left;.

  2. 47

    Sì, ma non è un div, è un fieldset

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

    CSS:

    fieldset {
        border: 1px solid #000;
    }
    • Si può fare una soluzione… Inoltre, si dovrebbe avere commentato, e non postare come risposta
    • Non vedo perché si tratta di una soluzione, per me, è una soluzione. Cosa funzionale differenza fa se è un div o un fieldset?
    • è sbagliato semantica. “Fieldset elemento rappresenta un insieme di controlli di modulo a scelta raggruppate sotto un nome comune.” – HTML5 spec. Dove sono i controlli? Ciò di cui abbiamo realmente bisogno è un display:fieldset CSS impostazione. Purtroppo non c’è.
    • Wow, mi dispiace. Ho pensato di commentare la mia risposta. Nevermind
    • D’accordo! Però, non credo che l’OP ha detto che non ci sarà alcuna forma di controlli in fieldset. Potrebbe comunque essere che lui vuole mettere il modulo controlli all’interno 🙂
  3. 8

    Conosco un po ‘in ritardo alla festa, però sento le risposte potrebbero fare con un po’ di più, di indagine e di ingresso.
    Sono riuscito a creare la situazione senza usare il tag fieldset – che è sbagliato in ogni caso, come se io non sono in forma, quindi, che non è quello che devo fare.

    CSS:

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

    HTML:

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

    Questo può essere visto in questo plunk:

    Riquadro con titolo

    Quello che si ottiene è il seguente:

    • nessun uso di fieldsets.

    • uso minimo se i CSS per creare un effetto con un po ‘ di imbottitura.

    • Uso di “em” margine superiore per creare font relativo titolo.

    • uso di display inline-block per raggiungere naturale larghezza di tutto il testo.

    Comunque spero che aiuta futuro stylers, non si sa mai.

    • Pur essendo un po ‘ più complesso di quanto vorrei, mi piace molto questa risposta perché non è un altro CSS hack o cattiva pratica. +1
    • Il Plunker link non carica.
    • sembra funzionare bene qui, che browser hai provato?
    • Firefox, si carica e funziona perfetto in Chrome. Io speravo in un html/css demo non richiedono molto di più, ma Chrome è abbastanza standard, sicuro. Felice di vedere una risposta con una parte/sezione tag.
    • Io un leggero miglioramento, che può aiutare a Firefox, comunque vedo che plunkr è in Alpha fasi in questo momento, quindi potrebbe non essere al 100%.
    • Per facilità ora ho fatto questo un “frammento di codice”.

  4. 1

    È possibile utilizzare un tag fieldset.

    HTML:

    <!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: Tag HTML

    • Come è diversa dalla risposta da Bazzz?
  5. 0

    È possibile, utilizzando la legenda tag.
    Consultare http://www.w3schools.com/html5/tag_legend.asp

    • il fieldset e legend tag non di HTML5
    • href=”http://www.w3.org/TR/html5/forms.html#htmllegendelement” >w3.org/TR/html5/forms.html#htmllegendelement Wut?
    • beh, anche loro esistono ancora in HTML 5, quindi tecnicamente… sono tag HTML 5. 🙂
    • E hai ragione sir, è HTML
    • Voglio solo chiarire questo, penso che sia corretto chiamarlo HTML5 è l’interfaccia è cambiata dal HTML4.01. HTML5 leggenda interfaccia è obsoleto l’accessKey e allineare gli attributi, mentre in HTML4.01 sono solo obsoleto. Quindi non c’è una distinzione.
    • come ho detto questi tag sono non HTML5 i tag HTML. i tag non sono HTML5 tag come audio è.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *