Krautkanal.com

Veröffentlicht am 2015-03-13 07:47:59 in /prog/

/prog/ 6774: Guten Tag, /prog/-Bernd Ich hatte schon /b/ um Hilfe...

Bernd Avatar
Bernd:#6774

Guten Tag, /prog/-Bernd

Ich hatte schon /b/ um Hilfe gebeten, aber ..naja.. /b/ halt. Deswegen bin ich nun hier.
Vorweg möchte ich sagen, dass mein Problem für einen Könner wahrscheinlich nur eine Kleinigkeit ist und es auch kein Problem für mich ist, wenn man mir nicht haargenau vorgibt, was ich zu tun habe, nur bitte verweist mich nicht einfach auf selfhtml.org oder eine andere Seite. Damit ist mir nicht geholfen.

Nun zu dem Grund, warum ich überhaupt hier bin.

[NSFW]

Ich habe einen Tumblr-Blog (nein, ich bin keine Femnazi-Dragonkin-Transgender Person of Colour, sondern habe einen Titten-Blog). Ich verwende seit kurzem ein neues Thema (https://www.tumblr.com/theme/38379) und habe ein Problem damit:
Wenn Leute Bilder teilen, dann können sie zusätzlich noch einen Kommentar hinterlassen, der dann unter dem Bild erscheint. Je nach Größe des Bildes und Länge des Kommentares kann einem das echt auf den Senkel gehen.
Ist das Bild groß genug, dann bleibt der Kommentar unter dem Bild (siehe http://lampen-und-uhren.tumblr.com/post/113320112976/snapshot19d-snapshot19d).
Ist das Bild aber nicht groß genug, dann erscheint der Kommentar am unteren Bildrand (siehe http://lampen-und-uhren.tumblr.com/post/113312758541/bimbo-boobs-and-shemale-young-danielle-derek).
Ganz schlimm wird es, wenn das Bild klein und der Kommentar lang ist (siehe http://lampen-und-uhren.tumblr.com/post/113273273450/hirevkev-ever-wonder-where-the-term-best-of-both).

Ich möchte einfach nur, dass der Text immer unterhalb des Bildes erscheint, nie auf ihm.
Hier ist der HTML-Code: http://pastebin.com/rcYZG7eg

Ich habe mich schon an die Macher des Themas gewandt, aber die sagen mir, dass sie den Support dafür eingestellt hätten. Selber komme ich mit dem Code nicht klar. Für mich sind das böhmische Dörfer. Ich habe versucht einen Durchblick zu bekommen, aber ich kann mit den Befehlen, der Struktur, mit allem nichts anfangen. Ich glaube allerdings, die Passagen ausgemacht zu haben, die Bild bzw. Text definieren, aber das wars auch schon.

Wenn Bernd mir helfen könnte, wäre ich ihm wirklich sehr dankbar.

joki4 Avatar
joki4:#6804

Versuch mal, das position: absolute für den Selektor .permalinkContent.permalinkPhotoPost .permalinkMeta aus dem CSS zu entfernen.

murrayswift Avatar
murrayswift:#6820

>>6804
Ui, eine Antwort! Danke dafür :3

Auch wenn ich nicht weiß, welche Stelle du meinst. Kannst du mir die Zeile nennen? Ich finde es leider nicht.

vaughanmoffitt Avatar
vaughanmoffitt:#6841

>>6820

In der style.css ab Zeile 1352, laut meinem Firebug.

sreejithexp Avatar
sreejithexp:#6848

>>6841
So viele Zeilen hat die Datei gar nicht. Ich habe nur Zugriff auf das, was man auf http://pastebin.com/rcYZG7eg lesen kann.

eduardostuart Avatar
eduardostuart:#6849

>>6848

>http://static.tumblr.com/3cvhfpr/yjZndym1l/style.css

Ich kenne tumblr-Themes nicht, aber das ist die Datei die ich meine. Kannst du die irgendwie bearbeiten oder wenigstens eigene Styles hinzufügen (muss dann nicht die gleiche Datei sein)?

newbrushes Avatar
newbrushes:#6850

>>6849

Da du das wahrscheinlich nicht verändern kannst, versuch mal im style-Block folgendes hinzuzufügen (Custom-CSS):

.permalinkContent.permalinkPhotoPost .permalinkMeta {
position: relative;
}

CSS ist kaskadierend, d. h. man kann die Stile der verschiedenen Elemente an unterschiedlichen Stellen modifizieren. Allerdings muss man zum Überschreiben spezifischer als der bisherige Stil sein, was sich z. B. wie folgt erreichen lässt:

a) Selektor mit gleicher Spezifität und später eingebunden
b) Selektor mit höherer Spezifität, Einbindungsort egal

Wenn du das genannte CSS im Bereich "Custom CSS" deines Templates einfügst, wäre das die a) Variante und sollte daher funktionieren.

Ggf. sind weitere Anpassungen notwendig, aber kannst dann ja nochmal fragen.

smaczny Avatar
smaczny:#6852

>>6850
Bernd, du bist ein Genie. Es hat funktioniert. Vielen, vielen Dank!
Ich danke dir auch im Namen einiger Follower, die mir geschrieben hatten, weil sie der Text störte.

Und ich danke dir für die Erklärung. Du bist echt super, Bernd :3

judzhin_miles Avatar
judzhin_miles:#6858

>>6852

Kein Problem. :3

kennyadr Avatar
kennyadr:#7055

OP meldet sich erneut und bittet Bernd um Hilfe.

Öffnet man meine Tumblr-Seite, dann wird das linke Drittel von dem dominiert, was ich lieber als Kopf meiner Seite sehen würde. Das lässt sich aber nur erreichen, indem man den Browser schmal macht, sprich die Fenstergröße so verstellt, dass er wesentlich höher als breit ist.

Das möchte ich nicht. Ich möchte, dass der linke Teil der Seite immer oben eingeblendet wird.

Desweiteren hätte ich gerne, dass die Bildvorschauen nicht alle dieselbe Größe haben und somit ein einheitliches Fliesenmuster ergeben, sondern unterschiedliche Größen haben und die ganze Seite auflockern.

Anbei eine Zeichnung, falls ich mich bescheuert ausgedrückt haben sollte.

Kann /prog/-Bernd mir helfen? Ich würde mich riesig freuen, wenn ich die Seite so gestalten könnte, wie es mir gefällt, aber leider bin ich strohdoof ;_;

guischmitt Avatar
guischmitt:#7058

Anscheinend funktioniert das über media-Queries.

In der CSS mal den Block mit

>@media screen and (max-width: 768px) {

suchen und den Inhalt als custom-CSS hinzufügen (ohne das @media, also nur den Inhalt). Ist zwar nicht hübsch, aber vielleicht funktioniert's.

woodydotmx Avatar
woodydotmx:#7059

>>7058
Das ist der entsprechende Abschnitt:

@media screen and (min-width: 1024px) {
            body {
                {block:ifBackgroundImage}{block:ifNotRandomBackground}
                background-image: url('{image:Background}');
                {/block:ifNotRandomBackground}{/block:ifBackgroundImage}
                {block:ifNotRepeatBackgroundImage}
                background-repeat: no-repeat;
                background-position: center;
                background-attachment: fixed;
                background-size: cover;
                {/block:ifNotRepeatBackgroundImage}
                {block:ifRepeatBackgroundImage}
                background-repeat: repeat;
                {/block:ifRepeatBackgroundImage}
            }
            {block:ifNotRandomBackground}
            body.permalink {
                background-image: none;
            }
            {/block:ifNotRandomBackground}
        }


Was muss ich denn davon kopieren?

Danke schon mal für deine Hilfe.

steynviljoen Avatar
steynviljoen:#7068

>>7059

Nein, das ist nicht der Abschnitt. Die width-Angabe ist unterschiedlich.

Es würde zu weit führen, wenn ich dir das jetzt auseinanderpule, also erklär ich dir mal kurz wie das funktioniert und bitte dich, es selbst zu versuchen:

Das Prinzip von media-Queries ist, dass sie Eigenschaften wie z. B. die Breite des Browserfensters abfragen und je nachdem ob die Bedingung zutrifft bestimmte Stile aktiveren.

Der von dir gewünschte Effekt trat - soweit ich das gesehen habe - ausgelöst durch folgende Query auf:

>@media screen and (max-width: 768px) {

Das heißt: Ist das Fenster MAXIMAL 768px Breit, werden die Stile innerhalb dieses Blocks angewandt.
Was du nun willst ist, die Stile für diesen Bereich generell zu aktivieren. Also müsstest du das innere vom Block nehmen und an's Ende deiner .css kopieren.

Ggf. musst auch auch mehrere Queries beachten, da die kaskadieren können. Also ein Block mit z. B.

>min-width: 500px

wäre auch bei 768px noch aktiv etc.

Der von dir genannte Abschnitt ist nur bei relativ großen Fenstern aktiviert (hat also den Stil, den du nicht willst), den müsstest du also löschen.

Bei Fragen kannst du gerne fragen (sofern Google nicht hilft), aber ich habe leider keine Zeit dir jetzt das Theme zu machen (vielleicht ja jemand anders hier?).

timgthomas Avatar
timgthomas:#7069

>>7068
Ah, habe verstanden.

Ich finde aber keinen Abschnitt mit max-width, sondern nur min-width (siehe http://pastebin.com/rcYZG7eg) ;_;
Kann ich das nicht einfach umschreiben und als Custom-CSS hinzufügen?

joe_black Avatar
joe_black:#7072

>>7069

>Ich finde aber keinen Abschnitt mit max-width, sondern nur min-width

Steht in der CSS:

https://d2pi0bc9ewx28h.cloudfront.net/3cvhfpr/yjZndym1l/style.css

Zur Not da raus kopieren.

jrxmember Avatar
jrxmember:#7074

>>7072
Wo hast du das denn her?
(Tut mir leid, wenn das eine doofe Frage ist, aber ich habe *wirklich* gar keine Ahnung davon)

Ok, in der CSS finde ich den "@media screen"-Eintrag insgesamt viermal (1024px, 768px, 640px und 480px). Alle sind unterschiedlich lang, haben unterschiedliche Inhalte.
Welchen muss ich denn da nehmen?

Und was passiert, wenn die Breite des Browser-Fensters über 1024px hinaus geht? Welcher der Einträge wird dann ausgewählt?

chatyrko Avatar
chatyrko:#7075

>>7074
Nachtrag: Dies ist eine Schätzung meinerseits.

Bei minimaler Browser-Breite wird der Titel am Kopf der Seite und eine Bildvorschau pro Zeile angezeigt.
Ab 480px Breite sieht man zwei Vorschauen.
Ab 640px Breite sieht man vier Vorschauen.
Ab 768px Breite springt der Titel an den linken Rand.
Ab 1024px Breite scheint sich nichts zu verändern.

bobwassermann Avatar
bobwassermann:#7076

>>7074

>Wo hast du das denn her?

Das ist anscheinend die Haupt-CSS-Datei deines Themes. Wird ja auch als <link>-Element auf deiner Seite eingebunden (siehe deinen pastebin-Link).

Der Inline-CSS-Bereich (<style>-Element) dient in diesem Fall wohl nur der "Erweiterung" bzw. dem Überschreiben des Hauptstyles (da CSS kaskadierend ist wird bei gleicher Selektor-Wertigkeit ['Spezifität'] die zuletzt angegebene Regel genommen, deswegen kann der Block die Regeln der Haupt-CSS-Datei überschreiben).

>Und was passiert, wenn die Breite des Browser-Fensters über 1024px hinaus geht? Welcher der Einträge wird dann ausgewählt?

Dann greifen neben den Regeln ohne media-Query (also alle die normal angegeben sind) noch die Regeln mit min-width: 1024px, da ja selbst 9999999999px Breite noch min-width: 1024px erfüllen würde.

Stell dir das so vor: Du hast 'ne normale CSS (alle Regeln ohne media-Query) und willst jetzt bestimmte Regeln für verschiedene Fenster-Eigenschaften einführen. Dann kannst du mit media-Queries die normalen Regeln überschreiben, sofern die media-Query-Bedingungen erfüllt sind (min-width oder max-width etc.). Was du willst ist jetzt die Regeln für kleine Fenster als Standard zu haben. Daher musst du die Inhalte der betreffenden media-Queries kopieren und als custom-CSS einfügen.

heikopaiko Avatar
heikopaiko:#7077

>Der Inline-CSS-Bereich (<style>-Element)

CSS im style-Block nennt man eigentlich nicht Inline-CSS, Inline-CSS ist wieder was anderes. Säge, da nebensächliche Korrektur.

shadowfreakapps Avatar
shadowfreakapps:#7078

>>7076
>Dann greifen neben den Regeln ohne media-Query (also alle die normal angegeben sind) noch die Regeln mit min-width: 1024px, da ja selbst 9999999999px Breite noch min-width: 1024px erfüllen würde.
Ah, das hatte ich vergessen :3

Ok, ich habe den 768px-Teil reinkopiert, aber es verändert sich nichts.
Dann habe ich den 640px-Teil reinkopiert und die Kopfzeile entstand, allerdings veränderte sich auch alles andere, sprich die Vorschaubilder wurden riesengroß angezeigt etc.

Jetzt schaue ich mir gerade per 'Element untersuchen' den Bereich an, den ich gerne am Kopf der Seite hätte, und versuche herauszufinden, welche Zeilen das sind, aber der Code erschlägt mich fast. Morgen schaue ich es mir nochmal genauer an.

Danke für deine Geduld, Bernd.

Neuste Fäden in diesem Brett: