+ Antworten
Seite 1 von 2 1 2 LetzteLetzte
Ergebnis 1 bis 10 von 11

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

  1. #1
    Neu an Board
    Registriert seit
    25.08.2008
    Beiträge
    9
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard 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

  2. #2
    Hat hier eine Zweitwohnung Avatar von infernalshade
    Registriert seit
    12.11.2008
    Ort
    Straubing
    Beiträge
    1.733
    Bedankte sich
    78
    Erhielt 335 Danksagungen
    in 302 Beiträgen

    Standard

    img {
    padding:5px;
    }

    ?! Hilft das nicht?!

  3. #3
    Neu an Board
    Registriert seit
    25.08.2008
    Beiträge
    9
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    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 ?

  4. #4
    Hat hier eine Zweitwohnung Avatar von infernalshade
    Registriert seit
    12.11.2008
    Ort
    Straubing
    Beiträge
    1.733
    Bedankte sich
    78
    Erhielt 335 Danksagungen
    in 302 Beiträgen

    Standard

    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!
    Angehängte Grafiken

  5. Erhielt Danksagungen von:


  6. #5
    Neu an Board
    Registriert seit
    25.08.2008
    Beiträge
    9
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    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

  7. #6
    Hat hier eine Zweitwohnung Avatar von infernalshade
    Registriert seit
    12.11.2008
    Ort
    Straubing
    Beiträge
    1.733
    Bedankte sich
    78
    Erhielt 335 Danksagungen
    in 302 Beiträgen

    Standard

    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!

  8. #7
    Hat hier eine Zweitwohnung Avatar von infernalshade
    Registriert seit
    12.11.2008
    Ort
    Straubing
    Beiträge
    1.733
    Bedankte sich
    78
    Erhielt 335 Danksagungen
    in 302 Beiträgen

    Standard

    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

  9. Erhielt Danksagungen von:


  10. #8
    Neu an Board
    Registriert seit
    25.08.2008
    Beiträge
    9
    Bedankte sich
    2
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    Tausend Dank an Infernalshade !!!

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

    viele grüße captaincut

  11. #9
    Hat hier eine Zweitwohnung Avatar von infernalshade
    Registriert seit
    12.11.2008
    Ort
    Straubing
    Beiträge
    1.733
    Bedankte sich
    78
    Erhielt 335 Danksagungen
    in 302 Beiträgen

    Standard

    kein thema

  12. #10
    Neu an Board
    Registriert seit
    19.04.2009
    Beiträge
    4
    Bedankte sich
    0
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard Ähnliches Problem

    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

+ Antworten
Seite 1 von 2 1 2 LetzteLetzte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein