CSS - Artikel-Bilder steuern und Tags-Anzeige

  • Liebe Community,

    ich baue zurzeit eine neue Website (J 3.9) mit JoomSharper-Helix-Template. Ich würde gern zwei Dinge über CSS steuern, scheitere aber an den konkreten CSS-Auszeichnung und würde mich sehr freuen, wenn ihr mich hierbei unterstützen könntet.


    1.) Artikel-Bilder steuern

    Ich würde gerne zentral per CSS automatisch allen Bildern INNERHALB VON ARTIKELN (!, nicht in Modulen etc.) margin-Ränder anfügen und die Bildgrößen im responsiven Verhalten steuern.

    Es sollen also

    - Bilder rechts vom Text positioniert und umflossen werden (Desktop-Version),

    - Bilder rechts vom Text so verkleinert werden, dass ca. 50% der Bildschirmbreite für Text, 50% der Bildschirmbreite für das Bild verwendet wird (Tablets)

    - und ab einer kleinen Bildschirmgröße sollen die Bilder in Vollbreite wechseln und den vorher umfließenden Text nach unten verdrängen (Smartphones, bereits im Template enthalten).


    Für die mittlere Anforderung dachte ich an:


    img {

    width:100%;

    height:auto;

    margin-right: 10px;

    margin-left: 10px;

    }


    @media screen and (min-width:28em) {

    img {

    width:50%;

    }

    }


    @media screen and (min-width:50em) {

    img {

    width:33%;

    }

    }


    FRAGE: Wie gebe ich an, dass diese Anweisung nur auf die Artikel angewandt wird?


    2.) Tags-Anzeige

    Die Tags erscheinen in Button-Form oberhalb der Artikel und sind horizontal optimal ausgerichtet. Responsiv fällt aber auf, dass der Zeilenabstand zwischen den Tags, wenn sie sich auf 2 und mehr Zeilen verteilen, zu gering ist. Wie kann ich dies ändern? Screenshot anbei.


    Ganz herzlichen Dank im Voraus!

    Beste Grüße!

  • Zitat

    FRAGE: Wie gebe ich an, dass diese Anweisung nur auf die Artikel angewandt wird?

    ...in dem du die Klasse/id für die Artikel vor dem img-Tag schreibst. Wie der heißen muss, kann ich dir in Unkenntnis der Site nicht sagen.

    Bei CSS-Fragen solltest du immer(!) einen Link zur Site angeben!




    NACHTRAG

    "em" ist an der Stelle, wo du es einsetzt falsch. em ist eine relative Angabe für Schriftgrößen. Bei Media-Querriss gibt's aber nichts Relatives.

    Weiteres hier: https://www.mediaevent.de/tutorial/masseinheiten.html




    Axel

  • Beachte bitte auch meinen Nachtrag im ersten Post, falls noch nicht gesehen. Und nein, der Blick in den Quellcode ist mir zu umständlich und fraglich, ob es zum Ziel führt!


    Aber:

    Spiele das ganze Geraffel auf eine Website hoch, schalte es Offline und lege uns eine Benutzergruppe an, der du den Offlinezugang erlaubst. Die Zugangsdaten für diese Benutzergruppe schreibst du hier ins Forum und wenn dein Problem gelöst ist, dann löschst du die Benutzergruppe wieder.



    Axel

  • Im unteren Bereich der Seite liegt das Login-Formular für forum/forum.

    Danach erscheint die "wirkliche Seite". Oben im Menü gibt es hier zum Beispiel "Aktuelles", auf der Startseite liegt aber auch schon eine TagCloud als Bild, die die Anpassung erfahren soll.

  • Aus meiner Sicht funktioniert alles. Was genau möchtest du denn bei den Bildern noch haben?

    Bedenke dabei stets, dass nicht alle "nur" die Auflösung(en) haben, die du hast und benutzt. Gibt eventuell größeres und noch viel kleineres ;)


    Die Wortwolke hat 200% Breite. Mach sie halt kleiner, wenn du sie nicht so groß haben möchtest. Ich verstehe das Problem nicht...?





    Axel

  • Haha, danke, dass die Wortwolke 200% kassiert hat, habe ich gar nicht gesehen und gerade korrigiert.

    Irgendwie bin ich mit meiner Bastellösung mit dem Code von oben noch nicht ganz glücklich. Wenn ich mir die Startseite per Chrome ansehe und responsiv mir Samsung Galaxy S5 anzeigen lasse, sehe ich, dass oben verloren neben der Wolke 3 kurze Zeilen Text stehen.

    Kann ich die Werte in meinem Code-Schnipsel so verändern, dass das Bild bei "Smartphones senkrecht" automatisch schon größer gezogen wird und den Text "nach unten verdrängt"?

    Im Prinzip könnten alle Bilder für Smartphone horizontal zu 100%-Breite angezeigt werden, die üblichen Tabletgrößen könnten zu 50% Text und 50% Bild befüllt werden. Hier hänge ich gerade und bin mir nicht sicher, wie / ob ich das per CSS erzielen kann.

  • Naja, das machst du ja über die Media-Querries. Dort sagst du bei welcher Größe, welche Breite bei Bildern, Schrift, etc. genommen werden sollen.

    Du kannst responsives Layout per Hand so machen - aber du solltest dann wirklich sehr gute Kenntnisse in CSS haben. Ich habe das mal gemacht und deutlich länger gebraucht, als die Einarbeitung in einem responsiven Framework, wo Bootstrap meiner Meinung nach am einfachsten und auch am weitesten verbreitet ist. Dort kannst du das einfach über entsprechende CSS-Klassen/-IDs machen.


    Ein paar Links für dich:

    Etwas weiter unten findest du einiges zu responsive Layout: https://www.mediaevent.de/css/

    Bootstrap: http://holdirbootstrap.de/

    Wie CSS funktioniert - eine kleine Einführung: https://www.time4joomla.de/joo…wie-funktioniert-css.html

    Und wie du die richtigen Stellen im Code findest: https://www.time4joomla.de/joo…n-css-angaben-findet.html



    Viel Spaß! :)


    Axel

  • Ganz lieben Dank für die Links und für die tolle Unterstützung, Axel! :) Das hilft mir wirklich sehr!


    Da schaue ich gerne in den nächsten Tagen mal rein! Deine Ratschläge haben mich sehr weitergebracht und mir neue Ideen geliefert, wie ich weiter vorgehe. Man lernt doch nie aus ;)


    Meine Frage zu den Tags hat sich inzwischen auch erledigt, die Ergänzung von

    .tags > li {

    display: inline-block;

    margin: 0.2rem;

    }


    hat meine Darstellung verschönert.


    Besten Dank und noch einen schönen Abend

    Raphael

  • Ich muss leider doch noch einmal nachfragen: Wenn ich eine CSS-Eingabe wie diese hier habe:


    @media screen and (min-width:28) {

    img {

    width:50%;

    }


    An welcher Stelle genau positioniere ich den Befehl "wende nur auf Artikel an"?

    Und wie heißt die Angabe in meinem Fall genau?


    Ich vermute, dass es "articleBody" ist (s. Anhang).

    In der jetzigen Form wendet die Website die Angabe natürlich auf alle gefundenen Bilder an.


    Danke!!

  • Wenn du mit deinem style nur die Bilder in diesem von dir markierten div ansprechen möchtest, musst du den selektor deiner Style-Anweisung ergänzen zu:


    [itemprop="articleBody"] img {

    ....

    }


    Weitere Informationen:

    CSS3 Attribute-Selectors


    Zu deinem Media-Query:

    Da fehlt noch eine Einheit ;-)


    So z.B würde deine Anweisung für Fenstergrössen die grösser als 28px sind angewendet:


    @media screen and (min-width:28px) {
    ....

    }


    Lg