Ein kleines CSS Rätsel...

    • Offizieller Beitrag

    Cascading style sheets - Ich bräuchte mal hilfe von jemanden, der sich besser damit auskennt.


    soup.io ist eine Microblogging- Plattform. Vergleichbar mit er Endlos scrollenden Facebook-Chronik. Nur eben dass es nicht per Definition beschissen ist. Die meisten Blog-Einträge sind Bilder, die mir gefallen haben und welche ich daher in Soup rebloggt habe. Unter diesen bildern KANN eine Beschreibung stehen. Es KANN ein element mit Tags vorhanden sein und es KANN ein Element "reposted from.../reposted by..." vorhanden sein. Diese Elemente tauchen nur auf, wenn sie mit Inhalt gefüllt sind. Diese grundlegende Struktur ist dem User (in diesem Fall mir) durch die Funktionsweise der Seite vorgegeben, allerdings lassen sich Styles durch einfache Auswahl von Elementen generieren und auch eigenes CSS einspeisen.


    Momentan sieht es so aus, dass jedes dieser drei genannten Elemente mit einem einfarbigem, um 10 % transparentem Hintergrund, und einem 5 px roten Rahmen mit abgerundeten Ecken versehen ist. Das erzeugt natürlich eine Menge roter Linien. Daher wäre es mir lieber, wenn diese elemente optisch als ein block wirken, welcher insgesammt von einem Rahmen umgeben ist. Heißt alle Elemente bekommen schonmal den 10% transparenten einfarbigen Hintergrund und seitliche Rahmen. Das oberste Element bekommt nun zusätzlich einen Rahmen oben und die oberen ecken abgerundet und entsprechend das unterste Element unten einen Rahmen und die untersten Ecken abgerundet. Da keines dieser Element zwingend vorhanden sein muss, der Block aber, wenn vorhanden, geschlossen und umrahmt sein soll wird das ganze etwas tricky. Jedes element lässt sich mit einer class ansprechen.


    die Basis struktur sieht in etwa so aus:

    Code
    ...
         <div class=content>
            <div class=image-container><img ...></img></div>
            <div class=description>...</div>
            <div class=tags>...</div>
            <div class=source>...</div>
        </div>
    ...


    div:first-child kommt scheinbar nicht so wirklich damit klar, dass da ein img Element vor ist, zumindest hatte das alles nicht so wirklich geklappt...
    Ideen?


    Nachtrag:
    Ich hab festgestellt, dass mir gar nicht alle Pseudo-Klassen bekannt waren und soup noch ein div um das Bild selbst herum spamt. Damit war dann alles lösbar:



    !important sollte man zwar eigentlich nie verwenden, da der Soup-Standardstyle aber ständig Angaben überschreibt war es schlichtweg notwenig. Der letzte Block diente da ebenfalls um eine seltsame Darstellung des p-Elements zu umgehen. Das erzeugte duch seinen Außenabstand einen 1em breiten Abstand zum nächsten div-Element anstelle das umgebende p-Element zu vergrößern. Die Klasse body wird übrigens von Nicht-Bild-Beiträgen in Soup erzeugt. Die Blockquote-Elemente entstehen wenn tumblr-Kommentare rebloggt werden.
    Also wenn irgendwer mal was ähnliches braucht... s.o.

    ALLES WAS ICH ANSABBER' GEHÖRT MIR!

    2 Mal editiert, zuletzt von Quappe ()

  • Forum

    Hat das Thema geschlossen.