Thema: Abstand zwischen Bildern und Text trotz caption css-class

hi,
ich habe seit ca 2 monaten ein problem mit dem abstand zwischen bildern und text. Dass ich damit nicht der einzige bin, ist mir bewusst ... im netz und diesem forum gibt es ja unzählige threads, die sich mit diesem thema befassen, leider konnte ich mein problem bislang nicht zufriedenstellend lösen. Folgendes:
nach wie gesagt längerem rumprobieren, habe ich es immerhin hinbekommen, dass überhaupt ein abstand entsteht. siehe http://dj-news.net/dj-technik/kopfho...er-deluxe.html
im bildeditor habe ich bei hspace und vspace 10 pixel angegeben. Das ganze funktioniert allerdings nur, wenn ich bei der css-klasse "nicht gesetzt" auswähle, setzte ich die css-klasse auf caption rückt der text, anstatt von bild weg, in das bild rein, siehe http://dj-news.net/dj-technik/contro...ontroller.html
Da ich eigentlich gerne eine Bildunterschrift hätte, wäre es super, wenn jemand n tipp hätte, wie ich trotz css-class caption den abstand bewerkstelligt kriege... wo ist mein denkfehler?
grüße cc

img {
padding:5px;
}

?! Hilft das nicht?!

hi,
ne leider hilft padding auch nicht... im editor wird es dann zwar richtig dargestellt (bei v/h-space übrigens auch), wenn er die seite läd, wird der text aber nach wie vor ins bild gerückt. Anfangs passts während des ladevorgangs und kurz bevor die seite fertig geladen ist, besteht das alte problem wieder. wie gesagt, tritt das prob immer dann auf, wenn ich eine css-class definiere (caption z.b). scheint so, wie wenn diese dominiert... bin ehrlich gesagt, was die ganze css-class.-geschichte angeht ein ziemlicher anfänger... könnte es sein, dass ich irgendwo anders im template css eine allgemeine einstellung machen kann, die für alle images im content bereich gilt ?

Guggst du im Anhang!

Problem ist nicht das <img> sondern der div drum rum

der div ist 184px breit...das bild das drinnen liegt auch, nur hat das img ein padding von 10 an allen seiten, d.h. das bild fängt erst nach 10px an, d.h. das bild steht 10px über den div drüber!

um das problem zu lösen musst du entweder die breite des umschließenden div's auf 204px erhöhen (184px breit + 10px padding links + 10px padding rechts für den abstand zum text) ODER du entfernst das "width" attribut komplett von dem div, somit ist der div immer genauso breit wie der inhalt ist!

dank Dir infernalshade!

wenn ich beim div die width-angabe weglasse oder um den padding-wert vergrößere passt das ganze :-) (trotz caption)

mich quälen allerdings noch ein paar fragen, die ich mir trotz recherche im netz nicht beantworten konnte:

wie kann ich im css angeben, dass der div-container sich automatisch an die größe des bildes + padding anpasst bzw. dass der div von vornherein keine width zugewiesen bekommt? (damit ich nicht jedes mal, wenn ich ein bild einfüge in nem blogeintrag, danach im code rumregeln muss)

im grunde müsste man doch in der template-css datei festlegen können, dass alle <div class="img_caption left" mit einem bestimmen abstands-wert versehen werden.

bei einer anderen joomla-site hatte ich gesehen, dass zwischen text und bild ein abstand (5px) ist, obwohl der width-wert des div-containers um das bild herum genau gleich groß war wie der widht-wert des bildes selber. dort scheint das also irgendwo anders im template generell eingestellt zu sein, dass alle links- und rechts-bündigen bilder im contentbereich einen best. abstand zum bild haben. (bin noch am suchen, aber find momentan die entsprechende site nicht mehr ;-)

eben grad hab ich noch versucht das ganze auf diese weise zu steuern:


img.content-left {
float: left;
margin-right: 10px;
padding: 5px;
border: 1px solid #eee;
}
bzw. img.content-right...

hat aber leider nichts gebracht.

glaube aber einer genrellen lösung durch Deinen (infernalshade) Tipp auf der spur zu sein:

wenn ich per firebug den besagten div anwähle
(auf http://dj-news.net/dj-technik/contro...ontroller.html den <div class="img_caption left" style="float: left; width: 185px;"> und im css padding hinzufüge, hab ich das gewünschte ergebnis (trotz div-width = img-width), z.b.

element.style {
float:left;
padding-bottom:30px;
padding-left:30px;
padding-right:30px;
padding-top:30px;
width:185px;

nur leider, finde ich momentan noch nicht raus, wo ich in der template-css die zeilen reinhauen muss ;-)) falls das jemand weiß, wäre super

soweit der stand der dinge ;-) für alle programmier-pro's: nicht lachen, wenn z.t. vll ziemlicher stuss da steht

in diesem sinne
gruss cc

ich würd den div's ne eigene klasse verpassen, dann kannst du ganz einfach sagen

Code:

div.deineklasse {
     width:auto !important;
}

somit beansprucht jeder div mit dieser klasse soviel platz wie der inhalt braucht! das !important setzt nur "die höchste priorität", d.h. du kannst dem div noch soviele css-eigenschaften geben wie du willst, aber die eigenschaft mit "!important" wird immer dominieren!

ich mach jetzt mal bewusst nen doppelpost, damit der TS sieht das ich noch was geschrieben hab, also nicht schimpfen

@captaincut:
hab grad gesehn das der div eh schon eine klasse hat, dann musst du im css nur folgendes hinzufügen:

Code:

div.img_caption {
     padding:30px;
}

und zusätzlich evtl noch das "width:auto !important;" somit bist du auf der sicheren seite

Tausend Dank an Infernalshade !!!

das war die lösung - absolut klasse, hast meinen abend gerettet ;-)

viele grüße captaincut

kein thema

Hallöchen und sorry, dass ich hier in den Thread reinplatze, aber ich habe ein ähnliches Problem auf meiner Seite, was ich mit dem hier angebotenen Lösungsansatz irgendwie nicht lösen kann, weil ich bei mir keine DIV Breite beim Bild finden kann.

Ich habe in meinen Text Bilder eingebaut, die aber nicht so recht da hinrücken wollen, wo sie hinsollen: http://test.chris-marquette.com/biography.html

Z.B. die Bilder zu Strong Medicine, Joan of Arcadia und American Gun sollen ganz rechts sein, was ihnen ja eigentlich durch den Befehl float: right angegeben wird. Irgendwie blicke ich nicht, warum die Bilder nicht rechts angezeigt werden, sondern nach links rücken...

Hat jemand vielleicht noch eine schlaue Idee, was ich falsch gemacht habe oder wo mein Problem liegt? Ich kann auch gerne noch meinen CSS zur Verfügung stellen, der ist jedoch sehr lang.

Wäre über jede Hilfe dankbar!

-TeeJay