[css] img-tag problem

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_img-tag_problem_198918/page_1 - zur Vollversion wechseln!

3mind schrieb am 25.08.2008 um 07:58

und gleich noch ein kleines problem.

auf meinem blog habe ich nun schon seit einiger zeit das problem, das bilder im post nicht korrekt angezeigt werden. sobald ich sie links- bzw. rechts- vom text ausrichte, überlappen sie den darauf folgenden post.

zum sehen etwa hier: http://www.3mind.at/ bei weekend roundup #1

das ganze css vom theme (wordpress) ist recht groß, hier mal die eventl. relevanten stellen:

Code:

/* Images
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/

p img {	padding: 0; max-width: 100%; }
img.centered {	display: block;	margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: block; float: right;}
img.alignleft {	padding: 4px; margin: 0 7px 2px 0; display: block; float: left;}

.PostContent img { background: #fff; padding: 1px; border: solid 1px #ccc; }

ich versteh zwar bissl was von css, allerdings bei weitem nicht genug um das selbst zu lösen (zumindest hab ich's bisher nicht geschafft).

wär fein wenn mir jemand helfen könnte, tia.

Nico schrieb am 25.08.2008 um 08:10

http://de.selfhtml.org/css/eigensch...erung.htm#clear

nen?

3mind schrieb am 25.08.2008 um 08:19

nen?!

hab's jetzt mal beim <hr>-tag im css hinzugefügt (clear: both; ) , hat aber zumindest mal nichts gebracht.

Nico schrieb am 25.08.2008 um 09:02

das hr tag kommt wo vor auf deiner seite?

3mind schrieb am 25.08.2008 um 09:03

direkt nach jedem post, über der anzeige der comments (gestrichelte linie)

//edit: moment - muss ich mir mal anschauen

//edit: ah ok, das ist ohne hr gelöst - die richtige position für das clear: both; hab ich schon gefunden, jetzt muss ich nur noch diese linie runter bringen.

3mind schrieb am 25.08.2008 um 09:14

das problem ist dass die linie zum block .postContent gehört

Code:

.PostContent { padding: 5px 0px 5px 0px; font-size: 11px; line-height: 17px; background: url(images/Dotted.gif) repeat-x bottom; color:#444640; }
.PostContent p { color:#444640; font-size: 11px; line-height: 17px;}
.PostContent p strong {}
.PostContent img { background: #fff; padding: 1px; border: solid 1px #ccc; }
.PostContent ul { padding: 10px 0px; margin: 0px; }
.PostContent li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(images/PostContentLiIco.png) no-repeat left top; font-size: 11px; line-height: 15px; color:#4c4c4c; }
.PostContent blockquote { padding: 2px 10px; background: #e9f8ff; margin: 0px; color:#336699; }
.PostContent blockquote p { font-size: 11px; padding: 5px 0px; margin: 5px 0px; line-height: 15px;}
.PostContent blockquote li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(images/PostContentBlockLiIco.png) no-repeat left top; font-size: 11px; line-height: 15px; color:#336699; }
.PostContent blockquote a { color:#0080ca; }
.PostContent blockquote a:visited { color:#0080ca; }
.PostContent blockquote a:hover { color:#003399; }
.PostContent a { text-decoration: underline;}

.PostDet { padding-top: 10px; clear: both;}
.PostDet ul { padding: 0px; margin: 0px;}
.PostDet li { padding: 2px 0px 5px 15px; margin: 0px 10px 0px 0px; list-style-type: none; display: inline; color:#336699; font-size: 10px; font-weight: bold; } 
.PostDet li a { text-decoration: underline; color:#ff3300;} 
.PostDet li a:visited { text-decoration: underline; color:#ff3300;} 
.PostDet li a:hover { text-decoration: underline; color:#990000;} 

.PostCom { background: url(images/PostCom.png) no-repeat left center; }

und so sieht der erzeugte sourcecode aus

Code:

<div class="PostContent">
<p><a href="http://www.3mind.at/gallery2/main.php?g2_itemId=6893"><img class="alignright" title="lene_fisch" src="http://www.3mind.at/gallery2/main.php?g2_view=core.DownloadItem&g2_itemId=6894&g2_serialNumber=2" alt="" width="108" height="163" /></a>wie auf dem blog bereits angekündigt ging es freitag abend für lene und mich das erste mal ins restaurant vom lentos in linz. für diejenigen denen das lentos kein begriff ist, es handelt sich dabei um ein kunstmuseum direkt an der donau welches besonders durch die bunte farbgebung in der nacht heraus sticht.</p>
<p><a href="http://www.3mind.at/gallery2/main.php?g2_itemId=6902"><img class="alignleft" title="meins" src="http://www.3mind.at/gallery2/main.php?g2_view=core.DownloadItem&g2_itemId=6903&g2_serialNumber=2" alt="" width="105" height="156" /></a>an dieser stelle möchte ich mich gleich mal für die einladung zum geburtstag bedanken! das essen war wie erwartet wirklich super, und auch die preise waren meiner meinung nach moderat. zwar mussten wir den abend aufgrund des bedrohlichen gewitters etwas frühzeitiger beenden, der abend war aber dennoch ein voller erfolg und ich freue mich schon aufs nächste mal.</p>
<p><a href="http://www.3mind.at/gallery2/main.php?g2_itemId=6848"><img class="alignright" title="colors" src="http://www.3mind.at/gallery2/main.php?g2_view=core.DownloadItem&g2_itemId=6849&g2_serialNumber=2" alt="" width="107" height="161" /></a>bei schönem wetter könnte man ja auch so mal auf einen caffee oder ähnliches die sonnenterrasse besuchen und die aussicht genießen? bilder gibt es auch ein paar dazu, zufinden in der <a href="http://www.3mind.at/gallery2/main.php?g2_itemId=6834" target="_blank">gallery</a>.</p>
</div>
<div class="PostDet">
  <li class="PostCom"><a href="http://www.3mind.at/2008/08/25/weekend-roundup-1/#respond" title="Comment on weekend roundup #1">0 Comments</a></li>
</div>
</div>

any ideas?

//update: habs jetzt in den anderen block als top-image gegeben, denke so passt's. sry für die langen zeilen und danke für die hilfe!