Problem mit "the content" in Kombi mit CSS

Und schon gibt es das nächste Problem...

Ich habe bei meiner Idee der bisherigen Templategestaltung (Infos & Screenshot: http://forum.wordpress-deutschland.org/theme-entwickl…-einbinden.html) eines total außer acht gelassen. Bilder liegen nicht nur vertikal sondern auch horizontal vor.

Da viel mir dann aber ein, dass ich evt. einen Trick anwenden könnte der den Betrachter sozusagen optisch ein wenig täuscht und zwar einen simplen Borderbefehl im CSS für das veröffentlichte Bild in der Mitte. Das Bild wird ja mittels dem Befehl:

<?php the_content(''); ?>

eingefügt.

Lege ich nun eine CSS Definition fest für diese Zeile also z.B.

<div id="imageposting"><?php the_content('Beitrag weiterlesen &raquo;'); ?></div>

Im CSS lautet der Befehl

#imageposting {
	border-style: solid;
	border-color: #406ffe;
	position: absolute;

bekomme ich zwar den gewünschten Rahmen um das Bild, jedoch sind oberhalb und unterhalb vom Bild noch Platz von etwa 5 Pixeln. Links und rechts ist der festgelegte Rahmen bündig mit dem eingefügten Bild.

Sieht nun so aus:
http://media.com-2-mac.de/ig_temp/ZZ62309FC2.jpg

Ich habe das ganze CSS gegengeprüft von mir einschließlich der Linkdefinitionen, aber kein Fehler. Sobald ich ein Bild über einen simplen HTML Befehl einbinde und gegen den content Befehl austausche, ist der selbige Rahmen komplett um das Bild, ohne Lücke. Auch bei meinen Navigationsbuttons, wo ich nun mal testweise einen farbigen Rahmen gesetzt habe, ist der Rahmen komplett bündig mit dem Bild. Nur eben bei dem Wordpress Befehl, da ist dann schluss mit lustig. Natürlich könnte ich nun eine feste Größe für das Bild im Content definieren, dann habe ich aber wieder das Problem mit der vertikalen und horizontalen Ausrichtung.

Jemand einen Tipp oder Rat?

Ich bin wirklich beeindruckt wie schnell hier einem geholfen wird. Dein Tipp hat geholfen. Habe die Bildeinbindung im CSS nun so geändert... Und es hat sofort funktioniert.

Hier mal mein aktuelles CSS

Entfernt da veraltet

Evt. gibt es ja noch ein paar Optimierungstipps. Wobei ich das finale Theme / CSS dann hier mal posten möchte um es von ein paar erfahrenen Leuten absegnen zu lassen. Wenn ich mit meiner Arbeit fertig bin, würde ich das Template ggf. mal publizieren. Es ist das zweite Template das ich selbst erstelle.

Jedenfalls vielen Dank...

Nun brauche ich nochmal nen Denkstoß...

Das CSS habe ich inzwischen noch einmal komplett von vorne begonnen und nochmal die Strukturen überdacht, was nicht nachteilhaft gewesen ist.

Jedenfalls habe ich das Problem das "the content" nicht mittig positioniert wird was die Abstände von oben und unten anbelangt. Links und rechts ist der Abstand mittig dank des Befehls "text-align: center;" (anders konnte ich den wirklichen Postingininhalt nicht mittig positionieren). Aber ein Befehl der das selbe mit oben und unten macht, ist mir derzeit nicht über den Weg gelaufen.

Zwei Screenshots werden jedoch mal wieder besser rüberbringen, was das Problem ist...

1. http://media.com-2-mac.de/ig_temp/ZZ6483281B.jpg (So sieht es ja ok aus)
2. http://media.com-2-mac.de/ig_temp/ZZ0D0FF8BC.jpg (Das sollte nicht passieren)

Wie schaffe ich es also das hin zu biegen? Die farbigen Rahmen dienen der Orientierung.
Das CSS sieht aktuell so aus:

/*  
Theme Name: MOTIVHIMMEL
Theme URI: http://motivhimmel.de
Description: MOTIVHIMMEL THEME
Version: 1.0
Author: -------
Author URI: http://motivhimmel.de
*/


* {
	padding: 0; 
	margin: 0;
}
p {
	margin: 0.7em 0;
	line-height:1.8em;
}


body 
{
	background: #111312; 
	font: 0.8em Verdana, Arial, Helvetica, sans-serif; 
    color:#FFFFCC; 
	margin-top: 20px;
}
a 
{
    text-decoration: none;
}
/* Linkdesign (Standard) */
a:link, a:visited {
	color: #FFFFCC;	
	text-decoration: none;
}
a:hover, a:active {
	border-bottom:#FFFFCC 1px solid;
    text-decoration: none;
}


/* Hauptfenster Breite, Farbe, Rahmendicke, Plazierung & Farbe */
#maincontainer {
    background: #111312;
	margin: 0 auto; 
	width: 1024px;
	height: 768px;
	position: relative; 
	border: 1px solid #f22f1e;
}


#header {
	background-image: url(images/logo.jpg);
	width: 650px;
	height: 135px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #fff;
}


#nav_l {
	width: 35px;
	height: 35px;
	border: 1px solid green;
	position: absolute;
	background: url(images/navibutton_stop.jpg) no-repeat 0 center;
	margin: 250px 0 0;
}


#nav_r {
	width: 35px;
	height: 35px;
	border: 1px solid green;
	background: url(images/navibutton_stop.jpg) no-repeat 0 center;
	position: absolute;
	margin: 250px 0 0 989px;
}


#content {
	border: 1px dotted #fff;
	width: 1024px;
	height: 570px;
	text-align: center;
	background: url(images/photoframe.gif) no-repeat center;
	vertical-align: middle;
}


#content img {
	border: 25px solid #fff;
	width: auto;
	height: auto;
}

Leider geht das nicht mit dem padding, auch wenn es die einfachste Lösung ist

Denn die Bilder liegen vertikal und horizontal vor. Darüber hinaus habe ich Panoramabilder die in der Höhe viel niedriger sind als ein normales horizontales Bild.

Und was das aktuelle zentrieren anbelangt. Ich hätte gerne auf jenen Befehl verzichtet, aber leider zentriert sich der Inhalt vom Content dann überhaupt nicht mehr. Da kann ich im CSS rumfummel bis ich grün werd :-(

Mir kam auch die Idee den Abstand zur linken Seite ztu kontrollieren, aber auch hier wieder das selbe Problem mit horizontal und vertikal. Eine Seite ist eben immer schmaler.

Evt. würde es gehen wenn man CSS auf bestimmte Größenangaben reagieren lassen könnte.
In der Regel sind die Bilder nämlich alle gleich (bis auf derzeit zwei Panoramabilder). Die Horizontalen haben immer eine Breite von 500 Pixeln, die Vertikalen hingegen immer eine Breite von 330 Pixeln.
Aber das ist wohl eher mit PHP lösbar, übertrifft jedoch meine Vorstellungskraft.

Achja, ich habe auch schon versucht eine automatische Skalierung von oben nach unten ein zu richten, doch dann wird das Hintergrundbild immer wieder mal "beschnitten".

Es scheitert eigentlich alles nur noch am Abstand zu oben für horizontale Bilder... Ansonsten ist alles ok.

Danke für den letzten Tipp, dass könnte in etwa das sein wonach ich gesucht habe.

Das die Bilder gelöscht wurden, war keine Absicht sondern ein versehen. Ich habe die Bilder in einem temporären Verzeichnis gelagert das ich regelmäßig leere ohne nach zu sehen was drin ist. Dadurch kam der Fehler zustande. Ich bin auch nur ein Mensch ;-)