Code Box in HTML mit CSS erstellen

Gr33nbl00d CSS
Code Box nur mit CSS

Um eine Code Box wie im letzten Blogpost, im Bild oben oder wie unten zu sehen, zu erstellen benötigst du nur folgendes CSS:

pre{
    margin-bottom: 1em;
    padding: 12px 8px;
    padding-bottom: 20px !ie7;
    width: auto;
    width: 650px !ie7;
    max-height: 600px;
    overflow: auto;
    font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
    background-color: #eff0f1;
    border-radius: 3px;
}

Den Code welchen du anzeigen möchtest musst du dazu einfach in <pre></pre> HTML-Tags packen und das CSS entweder in deine style.css oder in <style></style> Tags auf der gleiche Seite kopieren.

Style.css einbinden

Eine style.css bindest du übrigens so ein:

<link rel="stylesheet" type="text/css" href="style.css" />

Ich hoffe, dass dieser Post hilfreich für dich war 🙂