Infobox mit Rahmen und Hintergrund

Phos4

Hey-ho.

Ich bastel zzt an meinem neuen Blog rum (http://www.freeki.de).

Im Moment versuche ich, eine Infobox einzubauen, die bei der Einzelansicht eines Posts zwischen Post und Kommentaren einige Infos anzeigt (Kategorie, Tags + Trackback-Url). Den Inhalt dieser Box hab ich schon ganz gut hinbekommen, er sieht so aus:

PHP

<div class="infobox">
<hr width="593px" size="2">
Kategorie: <?php the_category(' '); ?> <br>
<?php if (get_the_tags()) the_tags(); ?> <br>
Trackback URL: <a href="<?php trackback_url(display); ?>"> <?php trackback_url(display); ?> </a>
</div>

Doch wie mache ich um diese Box einen Rahmen (wie z.B. um die Widgets in der Seitenleiste)?

Der entsprechende CSS-Code sieht momentan noch so aus:

Code

.infobox {
margin-left: 10px;
}

Wenn ich ihn zum Beispiel folgendermaßen ändere wird nicht nur ein Rahmen & Hintergrund um die 3 Zeilen gesetzt, nein, dieser wird dann bis zur Überschrift durch den Artikel durchgezogen.

Code

.infobox {
margin-left: 10px;
background-color:#F9F9F9;
border:1px solid #EBEBEB;
}

Kann mir jemand erklären, wo der Fehler liegt und wie ich doch noch eine gut aussehende Box basteln kann?

Danke!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Probier mal so:

PHP

<div class="infobox">
  <hr width="593[COLOR="Red"][del]px[/del][/COLOR]" size="2" [COLOR="#ff0000"][B]/[/B][/COLOR]>
  Kategorie: <?php the_category(' '); ?> <br[COLOR="#ff0000"][b] /[/b][/COLOR]>
  <?php if (get_the_tags()) the_tags(); ?> <br[COLOR="#ff0000"][b] /[/b][/COLOR]>
  Trackback URL: <a href="<?php trackback_url([COLOR="#ff0000"][del]display[/del][B][I]true[/I][/B][/COLOR]); ?>"> <?php trackback_url([COLOR="#ff0000"][del]display[/del][B][I]true[/I][/B][/COLOR]); ?> </a>
</div>

Ansonsten sieht das weitesgehend korrekt aus, auf den 1. Blick. Dein Post-Footer ist noch falsch auskommentiert:

Code

<!-- <div class="post-footer">...</div> --[COLOR="#ff0000"][B]![/B][/COLOR]>

Das 2. Ausrufezeichen am Ende ist zuviel.

Phos4

Die Ausgabe der Informationen funktioniert ja problemlos.

Nach der Korrektur ist ein grauer Rahmen und ein grauer Hintergrund um den ganzen Blogpost herum, allerdings will ich den ja nur um die Infobox (Kategorie, Tags, TrackbackURL) herum.

Wie bewerkstellige ich das?

marX

Die XHTML-Änderungen (leere Elemente) solltest du schon noch umsetzen. ;-)

.post-wrapper wird gefloatet:

Code

.post-wrapper {[B]style.css (line 299)[/B]
[COLOR="Red"]float:left;[/COLOR]
margin-bottom:0;
margin-left:-20px;
padding:10px 30px 0;
width:593px;
}

Nimmst du das raus, dann stimmt die Anzeige. Zumindest im firefox, müssest mal prüfen ob es dadurch in anderen Browsern zu Darstellungsproblemen kommt.

Phos4

Ok, tut genau wie es soll, Danke!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Infobox mit Rahmen und Hintergrund

Jetzt mitmachen!