Bild-Inhalte verzerren Layout

Hallo beisammen,

ich habe ein Problem bei der Darstellung von Seiten mit Bildinhalt in einem T3 Projekt - evtl wisst Ihr weiter:

Der Seitenaufbau soll, wie im folgenden Dummy aussehen:
http://www.annettebeisenherz.de/statement.htm

Mein Problem mit T3 & dieser Seite besteht darin, dass - sobald ich in den Image-Platzhalter der rechten Spalte ein Bild einstelle - die gesamte rechte Spalte die (vertikale) Länge des zentralen Inhalts annimmt:
http://u0063776338.user.hosting-agency.de/index.php?id=23

Wenn ich in den gleichen (Image) Platzhalter einen Textinhalt einstelle wird die rechten Spalte nicht verzerrt und korrekt formatiert ...

Hier noch zur besseren Nachvollziehbarkeit der Typoscript Code der Problem-Seite:

Code:

#Default PAGE Object:
page = PAGE
page {
    typeNum = 0
    #Stylesheet
    stylesheet = fileadmin/css/style.css
    10 = TEMPLATE
    10.template = FILE
        10.template.file = fileadmin/statement.htm
        10.workOnSubpart = DOKUMENT
    #Metadaten1
    meta.AUTHOR = Autorin
    meta.DESCRIPTION = Lorem Ipsum
    meta.ROBOTS = index, follow
    #Metadaten2
    page.headerData.900 = Text
    page.headerData.900 {
        wrap = <meta name="keywords" content="|">
        field = keywords
        }
    #Platzhalter ansprechen
    10.marks {    
        #Headline
        STATEMENT_HEADLINE = TEXT
        STATEMENT_HEADLINE.field = title
        #Content Text (Center)
        STATEMENT_CONTENT = CONTENT
        STATEMENT_CONTENT {
            table = tt_content
            select.where = colPos = 0
        }
        #Content Image (Right)
        STATEMENT_IMAGE = CONTENT
        STATEMENT_IMAGE {
            table = tt_content
            select.where = colPos = 2
        }
    }
}

Für Hinweise & Hilfestellung bin ich sehr dankbar 🙂

IM IE6 schaut es gut aus. Im FF hingegen nicht so wirklich.
Das wird vermutlich ein CSS Problem sein oder der DOCTYPE ist falsch.

Ja, das ist richtig - die IE6/7 stellen das ganze korrekt dar. FF, Safari & Opera hingegen nicht. Die reine HTML/CSS-Vorlage wird von allen 4en korrekt dargestellt.

Das Problem scheint bei CSS Styled Content zu liegen; das Float-Attribut wird im Fall von "Textpic" gecleared:

/* Clearer */
37 DIV.csc-textpic-clear { clear: both; }

Allerdings ist mir schleierhaft, wo ich CSS Style Content-Informationen modifizieren kann ;(

Falls jemand ein ähnliches Problem hat - die Lösung lag im entsprechenden (s.o.: clearer) Eintrag der Datei:

typo3/sysext/csc/static/setup.txt (wert "both" ist zu ändern)

Hi,

ich habe ein ähnliches Problem. könntest du mir eventuell kurz sagen in was ich den wert ändern muss?

Ich habe "none" gewählt. Mehr Informationen zum clearing hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear

danke für die schnelle antwort. hat leider nicht geholfen. ich werd mir mal den link durchlesen vielleicht hilft mir das ja weiter. bei mir tritt das problem auch nur bei safari auf und auch nur wenn ich ein bild anstatt eines flashmovies einfüge.

Hallo,

ich habe auch das Verhalten ausschließlich beim FF bemerkt.

Folgende Lösung wurde mit Hilfe von FireBug angedacht:

Wenn hinter dem Image-Element die nachstehende Style-Anweisung angegeben würde, dann wird ein Image auch beim FF korrekt angezeigt:

style = "float: none;"

Zusätzlich muß in der Datei typo3/sysext/css_styled_content/static/Setup.txt die CSS-Anweisung "CLEAR: both;" deaktiviert werden.

Die float-Zusatzangabe darf nur dann angegeben werden, wenn mindestens eine der nachstehenden Bedingungen erfüllt ist:

Abzufragendes Feld: key.field = imageorient
Bedingung: <> 17 or <> 18

Die Zahlen habe ich aus der CASE-Anweisung entnommen, die in der Setup.txt enthalten sind.
Hier ist auch eine Stelle, an der die CSS-Classe zugewiesen wird.

Nach meinen Kenntnissen müsste es ausreichen, wenn eine Function "float.none" erstellt wird:

# COA: float
float.none = COA
float.none {
                value = CASE
                value {
                        key.field = imageorient
                        # above-center
                        default = TEXT
                        default.value = float: none;
                        # intext-right
                        17 = TEXT
                        17.value =
                        # intext-left
                        18 = TEXT
                        18.value =
                }
        }

Das Ergebnis muß anschließend in die entsprechenden Anweisungen in der Setup.txt einfließen:

Original Anweisung:

oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl>

Hier muß das Ergebnis von float.none so integriert werden, daß folgendes Ergebnis herauskommt:

oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px; float:none;"> | </dl>

(float: none; ist hinzugekommen)

Hier fehlen mir leider die Erfahrungen, wie man ein dataWrap so zusammensetzen kann, das das gewünschte Ergebnis herauskommen kann.

Vielleicht weiß jemand, wie man dies realisieren könnte?

Dirk