Contao-Camp 2024
Ergebnis 1 bis 18 von 18

Thema: CSS - Text umfliesst Bild nicht richtig

  1. #1
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard CSS - Text umfliesst Bild nicht richtig

    Hallo, auf meiner Website schaffe ich es nicht, dass der Text das Bild richtig umfliesst. Hier sieht man es besonders gut:
    http://bergünerstein.ch/belohnungen.html

    Die Bilder links sind eine eigene Klasse ("seitenbild") und haben float:left, aber trotzdem bleibt immer das ganze Textelement verschoben. Ich will aber, dass der Text wieder bis ganz links geht, sobald er "unter dem Bild" angekommen ist.

    Muss ich beim Text auch etwas im CSS definieren, damit das geht?

    Vielen Dank für Eure Hilfe!
    Antonia

  2. #2
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Das geht so nicht. Die Elemente sind ja in eigene DIVs gepackt. Das kann nicht ineinander floaten. Du musst dem Bildcontainer den Float geben. Nicht dem Container "seitenbild".
    Geändert von Kahmoon (25.09.2018 um 13:30 Uhr)

  3. #3
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Also quasi

    HTML-Code:
    <div>
    <figure class="image_container seitenbild">deinBild</figure>
    <p>blahblahbblah</p>
    </div>
    Siehe Contao Demo mit Bild rechts https://demo.contao.org/en/text-elements.html

    Also am besten das Standard Textelement verwenden und dort die Bilder angeben und das entsprechende floating auswählen.
    Geändert von Kahmoon (25.09.2018 um 13:33 Uhr)

  4. #4
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard

    Danke! Seh ich das richtig, dass das mit Contao nicht geht - also nicht, wenn man einfach innerhalb von einem Artikel Bild- und Textelemente nacheinanderbringt? Man muss also ein eigenes html-Element reinschreiben?

  5. #5
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Nö, das ganze normale Textelement kann das. Text rein, Bild auswählen und floatingverhalten auswählen. Musst gar nicht mit eigenen Klassen etc rummachen.
    Geändert von Kahmoon (25.09.2018 um 13:37 Uhr)

  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Du hast auch irgendwie eine CSS Anweisung drin, die das Verhalten von Contao blockiert. Das muss raus (siehe rot). Dann floated es auch. Siehe Anhang

    Code:
    media="screen and (min-width: 780px)"
    
    Style_1_large.css:2
    p {
    
    
    
    • max-width: 500px;
    • clear: both;
    • margin-bottom: 10px;
    • padding-left: 180px;
    • text-align: left;
    • white-space: normal;
    • font: 120%/140% Helvetica,Arial,Sans-Serif;
    • font-weight: normal;
    • color: #000;
    }
    Angehängte Grafiken Angehängte Grafiken

  7. #7
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard

    Danke! Das hab ich in der Vergangenheit auch schon probiert, funktioniert aber nicht... backend sieht bei mir auch einiges anders aus als bei dem Demobeispiel, das Du verlinkt hast.
    Backend: screenshot_2.PNG

    Und so kommts vorne raus:
    Screenshot_1.PNG

    Die Position des Bildes (also Abstand zum linken Rand) entsteht durch einen Bild-Margin von 10%, nicht, weil das Bild sich an die Formatierung des p hält...

    Irgendwas mach ich wohl falsch...?

  8. #8
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Es funktioniert deshalb nicht wegen der CSS Anweisung für p. Siehe mein letzten Kommentar

  9. #9
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard

    Danke! Und sorry, Deinen Tipp zur p-Formatierung hatte ich vorher übersehen. Nicht mein Tag heute... aber dank Dir konnte ich das endlich korrigieren - also tausend Dank nochmal!!!!

  10. #10
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Habs hier noch mal gescreenshotted
    Angehängte Grafiken Angehängte Grafiken

  11. #11
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard

    ... bzw. doch noch eine Frage: ist es auch möglich, daraus einen Bildlink zu machen? Ich meine, ohne selber html zu schreiben?

  12. #12
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Du meinst das Bild verlinken? Wenn ja...dann einfach den Link bei Bildadresse reinschreiben und das Häkchen "Großansicht/Neues Fenster" anklicken.

  13. #13
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard

    Nein, ich meine auf eine externe Seite verlinken. Was ich normalerweise mit dem Element "Hyperlink" mache und dort die Option "Bildlink" wählen. Dann hat man aber das Bild, auf das man klicken muss, eben nicht im Textelement, sondern es ist ein separates Element und floatet nicht richtig... ist nicht so schlimm, wäre aber schön, wenn man bei der Option "Bild in Textelement einfügen" auch einen externen Link daraus machen könnte.
    Sonst muss ich mich doch noch dranmachen mit html:-).

  14. #14
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Ja, davon rede ich. Trag den Link einfach beim Bild ein. Siehe Anhang
    Angehängte Grafiken Angehängte Grafiken

  15. #15
    Contao-Nutzer
    Registriert seit
    19.08.2017.
    Beiträge
    65

    Standard

    Ah, jetzt hab ichs kapiert - man muss bei "Metadaten überschreiben" ein Häkchen setzen, damit man diese Funktion bekommt. Alles klar jetzt, definitiv. SEHR herzlichen Dank!!

  16. #16
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Eigentlich nicht. Metadaten haben damit nichts zu tun AUSSER der Link wurde beim Bild in der Dateiverwaltung angeben und nicht im Textelement selbst. Dann muss das Häkchen gesetzt werden.

  17. #17
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.721
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Narges Beitrag anzeigen
    Ah, jetzt hab ichs kapiert - man muss bei "Metadaten überschreiben" ein Häkchen setzen, damit man diese Funktion bekommt.
    Stimmt so nicht ganz. Wenn Du das Bild grundsätzlich an die gleiche Stelle verlinken willst, machst Du das besser in der Dateiverwaltung.

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Eigentlich nicht. Metadaten haben damit nichts zu tun AUSSER der Link wurde beim Bild in der Dateiverwaltung angeben und nicht im Textelement selbst. Dann muss das Häkchen gesetzt werden.
    Stimmt so m.E. auch nicht, jedenfalls bei Contao 4. Nur wenn in der Dateiverwaltung ein Link hinterlegt ist, reicht das Aktivieren bei Großansicht/neues Fenster. Das Feld zum Eintragen eines speziellen Links genau für dieses Textelement bekommst Du erst, wenn Du Metadaten überschreiben anklickst. Dann werden aber m.E. auch die alt-Attribut etc. mit einem leeren Feld überschrieben. Wenn ich mich recht erinnere, muss man beim Überschreiben immer alle Metadaten anfassen.
    Deshalb ist es im Normalfall auch besser alles in der Dateiverwaltung zu pflegen und nur einmalige Abweichungen im entsprechenden Inhaltselement.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  18. #18
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.280

    Standard

    Ja, aber für mich macht ein Link in der Dateiverwaltung eher weniger Sinn und kam auch in der Praxis irgendwie noch nicht so oft vor. Nice to have aber nicht paxisnah (bei mir). Da kommen eher unterschiedliche Links bei teilweise gleichen Bildern. Deshalb hatte ich diese Fehlerursache gar nicht auf dem Schirm.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

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