Gleichmäßige Innenabstände bei "Box" mit Hintergrundfarbe

Hi,

ich möchte den blauen, in der nichtproportionalen Schriftart verfassten Text im Artikel Intel Server Board S5000VSA: Bluescreen während der Installation von Windows Server 2003 layer9. in einer Art Box mit Hintergrundfarbe darstellen (wie etwa das gleich folgende Codebeispiel). Dazu habe ich den Text in folgendes div-Element gewickelt:

div.code {
font:1.1em 'Courier New', Courier, Monospace;
background-color:#FAFAFA;
border-color:#DDDDDD;
border-style:dotted;
border-width:1px;
padding:4px;
}

Das Problem ist, dass der Innenabstand zur Unterseite der Box größer ist, als zu den restlichen Seiten, als Beispiel siehe folgendes Bild: abload.de - Bilderupload Offenbar liegt das daran, dass mir das div-Element noch ein Absatzelement ans Ende der Zeile haut:

<divclass="code">A problem has been detected and Windows has been shut down to prevent damage to your computer.</p>
 
 
<p>If this is the first time you’ve seen this Stop error screen, restart your computer. If this screen appears agian, follow these steps:</p>
 
 
 
<p>Check for viruses on your computer. Remove any newly installed hard drives or hard drive controllers. Check your hard drive to make sure it is properly configured and terminated. Run CHKDSK /F to check for hard drive corruption, and then restart your computer.</p>
 
 
 
<p>Technical information:</p>
 
 
 
<p>*** STOP: 0×0000007B (0xF789EA94, 0xC0000034, 0×00000000, 0×00000000)</p></div>

Entferne ich das div-Element nämlich, fehlt das abschließende </p> Tag am Ende der Zeile:

<ul><code>A problem has been detected and Windows has been shut down to prevent damage to your computer.</p>
 
 
<p>If this is the first time you’ve seen this Stop error screen, restart your computer. If this screen appears agian, follow these steps:</p>
 
 
 
<p>Check for viruses on your computer. Remove any newly installed hard drives or hard drive controllers. Check your hard drive to make sure it is properly configured and terminated. Run CHKDSK /F to check for hard drive corruption, and then restart your computer.</p>
 
 
 
<p>Technical information:</p>
 
 
 
<p>*** STOP: 0×0000007B (0xF789EA94, 0xC0000034, 0×00000000, 0×00000000)</code></ul>

Hat jemand eine Idee, wie ich die Box mit gleichmäßigen Innenabständen realisieren kann? Sorry übrigens für mögliche Fehler bei meiner Wortwahl, ich habe gerade erst angefangen!

Danke
Starsailor

Zitat von Narcanti

Im Prinzip ist das mit der Box schon richtig, aber ich denke nicht, dass die anderen Abstände vom div kommen. Ich würde an deiner Stelle dort eher mal die ganzen <p>s rauswerfen, eigentlich reicht da doch <br />...

Das habe ich schon getestet - leider macht Wordprass aus zwei mal <br> immer ein <p> :(

Zitat

Außerdem steht in deinem Beispiel noch divclass statt div class, aber das hattest du vermutlich schon korrigiert...

Ja, das habe ich korrigiert. Ich glaube übrigens, dass es tatsächlich an dem div Element liegt. Bin gerade noch am Googlen und so wie es aussieht, fügt ein DIV element am Ende immer einen Zeilenumbruch ein. Mit dem Problem scheinen mehrere zu kämpfen.

Zitat von codestyling

Div's werden vom WordPress TinyMCE in <p> umgewandelt!
Warum nicht deinen Text in ein <p> sperren:

Hab ich auch schon getestet. Das Problem ist, dass Wordpress bei jedem Zeilenumbruch automatisch ein <p> einfügt. In die automatisch eingefügten <p>'s kriege ich die gewünschte Klasse nicht rein, bzw. das wäre auch nicht sinnvoll. So reicht meine Klasse immer nur bis zu dem selber von Wordspace geschlossenen </p> Tag.

Kann aber auch sein dass ich Dich falsch verstehe, bin wie gesagt Anfänger.

Zitat

Man könnte allerdings auch die dafür vorgesehenen <code> oder <pre> Tag verwenden und stylen.

Mit <pre> habe ich auch gerade getestet und einen guten Workaround gefunden. Füge ich in das <div>-Element noch ein <pre> Element, werden keine <p> Tags ergo Zeilenumbrüche eingefügt und alles ist so wie gewollt. Das <pre> Element macht in meinem Fall sowieso Sinn, kannte ich vorher noch gar nicht. Alternativ kann man sich das <div>-Element auch mit height zurechtstutzen. Ist allerdings ziemlich aufwendig, jedes Mal die richtige Höhe rauszukriegen.