Logo definiert Zeilenhöhe. Das soll es nicht.

[michaah]

Ich möchte das Logo gerne in dieser Größe im Kontext der untersten Zeile behalten, aber es soll eben nicht die Zeile erhöhen. Alle drei Zeilen sollen eben gleichmäßige Zeilenabstände haben, die nicht vom Logo abhängen sollen.

Geht das irgendwie?

Gruß

M.

[djr]

Wie soll das Logo den vertikal ausgerichtet sein?
Ggf. würde es die Zeile darüber dann teilweise überdecken.

Da das Logo ja in der letzten Zeile steht, reicht evtl. ein vertical-align: text-top; oder vertical-align: top;. Dadurch wird die Zeile nach untenhin vergrößert.

Im Falle einer beabsichtigten Überdeckung der vorangegangenen Zeile(n), ist eine Positionierung der richtige Weg.

<span class="wrap">
  <img src="" alt="" />
</span>

/* Positionierungsanker */
.wrap {
  position: relative;
}

/* Bild aus dem Textfluss nehmen und vertikal ausrichten */
.wrap > img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Da das Logo nun außerhalb des Textflusses ist, würde evtl. nachfolgender Text hinter dem Bild liegen. Dann hilft es, den .wrap um ein display: inline-block; und ein width: mit Angabe der Bildbreite zu ergänzen. Tipp: width im style-Attribut des Wrappers angeben, statt in der CSS-Datei, macht das Konstrukt wiederverwendbar und die Bildbreite lässt sich evtl. über ein Script einfügen.

[Gunnar Bittersmann]

@@djr

Da das Logo ja in der letzten Zeile steht, reicht evtl. ein vertical-align: text-top; oder vertical-align: top;. Dadurch wird die Zeile nach untenhin vergrößert.

Das ist so nicht gewollt.

Im Falle einer beabsichtigten Überdeckung der vorangegangenen Zeile(n), ist eine Positionierung der richtige Weg.

Nein.

😷 LLAP

[djr]

Stimmt @Gunnar Bittersmann, Deine Lösung mit einem negativen magrin-top-Wert ist besser. Danke.
Eine vertikale Feinjustierung kann dann auch mit transform: translateY(); und einem em-Argument erfolgen.

[Gunnar Bittersmann]

@@michaah

Ich möchte das Logo gerne in dieser Größe im Kontext der untersten Zeile behalten, aber es soll eben nicht die Zeile erhöhen. Alle drei Zeilen sollen eben gleichmäßige Zeilenabstände haben, die nicht vom Logo abhängen sollen.

Geht das irgendwie?

Gib dem Bild genügend großen negativen Abstand nach oben:

header img { margin-top: -666em }

😷 LLAP

[michaah]

Man, ich glaube die Version habe ich gestern Nachmittag auch mal probiert ... aber da stand offenbar ... wie gestern bei anderer Gelegenheit noch schlimmer ... der Cache im Weg ... und so ist diese Lösung dann wg. meiner Unsicherheit ob das so richtig ist hinten runter gefallen ... und ich virtuell aber emotional real kerzengerade in die Höhe.

Danke, klappt so prima, und auch einfach ... weil es so ja auch klappen muss!

[Gunnar Bittersmann]

@@michaah

... der Cache im Weg ...

Hast du beim Entwickeln nicht das Entwicklertool deines Browsers offen?

Hast du in dessen Einstellungen nicht den Cache deaktiviert?

Im Firefox unter Erweiterte Einstellungen: ✅ „HTTP-Chache bei offenem Werkzeugkasten deaktivieren“ setzen.

In Chrome unter Preferences > Network: ✅ Disable cache (while DevTools is open)

WFT, Chrome? Mein Chrome ist auf deutsch. Warum ist das nicht übersetzt?

Safari hat so eine Einstellung nicht?

😷 LLAP

[michaah]

@@michaah

... der Cache im Weg ...

Hast du beim Entwickeln nicht das Entwicklertool deines Browsers offen?

Jain. Ich schaue mir das immer wieder darin an. Und Cache ist darin deaktiviert. ABER:

1. funktioniert meiner Erfahrung nach das ausschalten des Caches nicht zuverlässig. Es kommt immer wieder vor, dass Änderungen nicht durchschlagen, bzw. dann erst zufällig später wahrgenommen werden können. Dass ist meiner Ansicht nach besonders bei sehr verschachteltem CSS der Fall.

2. Mir sind die Entwicklertools (ja die haben in jedem Fall auch ihren Wert!) schon deshalb zuwieder, weil Websites damit nicht in voller Bildschirmgröße betrachtbar sind und es dann bereits zu Darstellungsänderungen kommt oder kommen kann.

3. Ich habe im Vivaldiforum (Renderer und Entwicklertools des Chrome) deshalb sogar schon angeregt eine Konfigurationsoption für normale Tabs bereitzustellen, die dann für diesen Tab das Cachen unterbindet. Ohne Erfolg ... war eine völlig quarkige Argumentation Ich könnte mich darüber ausk...... kostest aber auch nur nerv.

Zudem wurde von deren Seiten auf die Unzuverlässigkeit der Deaktivierung des Caches hingewiesen!

Hast du in dessen Einstellungen nicht den Cache deaktiviert?

Doch

Im Firefox unter Erweiterte Einstellungen: ✅ „HTTP-Chache bei offenem Werkzeugkasten deaktivieren“ setzen.

Nutze keinen FF mehr. Sollte ich zum Testen aber wohl doch wieder machen.

In Chrome unter Preferences > Network: ✅ Disable cache (while DevTools is open)

WFT, Chrome? Mein Chrome ist auf deutsch. Warum ist das nicht übersetzt?

Nutze Chromium = Debian-Chrome. Ja, WTF in english ;-) . Aber auch hier, ich zweifle daran dass das Deaktivieren des Caches 100% funktioniert.

Aber meine html/css Kenntnisse sind von soviel Unsicherheit durchzogen dass ich immer raten kann: Mein Fehler/Unwissen oder Cachefalle.

Safari hat so eine Einstellung nicht?

Neeee, hab doch keinen MAC, und falls der auch unter Windows läuft, kein Windows mehr erfügbar.

Hab' nen extra Thread aufgemacht wg. Cache und Apache2

[djr]

Zu 2.: Die Entwicklertools können auch in einem eigenen Fenster geöffnet werden.

[Gunnar Bittersmann]

@@michaah

2. Mir sind die Entwicklertools (ja die haben in jedem Fall auch ihren Wert!) schon deshalb zuwieder, weil Websites damit nicht in voller Bildschirmgröße betrachtbar sind und es dann bereits zu Darstellungsänderungen kommt oder kommen kann.

Du entwickelst also im Blindflug‽ Kann man machen. Ist dann halt Kacke.

Durch „nicht in voller Bildschirmgröße“ kann es nicht zu Darstellungsänderungen kommen, die nicht sowieso kommen, weil „volle Bildschirmgröße“ für verschiedene Nutzer was anderes bedeutet.

Und was djr sagte.

Nutze keinen FF mehr. Sollte ich zum Testen aber wohl doch wieder machen.

Ja natürlich!!!^[1]

Schon um herauszufinden, ob es dein Fehler ist oder einer der vielen Chromium-Bugs.

Nur für Chromium zu entwickeln hat nichts mit Webentwicklung zu tun. (Hoffen wir, dass das auch so bleibt.)

😷 LLAP

---

1. Der kranke Geist, für den die multiplen Ausrufezeichen ein Zeichen sind, ist nicht der meine. 😏 ↩︎

[michaah]

...

Nutze keinen FF mehr. Sollte ich zum Testen aber wohl doch wieder machen.

Ja natürlich!!!^[1]

😉

... nur damit das alles richtig rüberkommt:

Es war und ist auch meine Überzeugung, dass man für alle (mehr oder minder) aktuelle Browser testen sollte, dazu gehört dann natürlich auch der FF. Siehe zudem auch meine IE threads.

Nur bin ich eben kein Fulltime Webentwickler, sondern das kommt halt immer mal wieder. Und nun ist es eben passiert, dass ich vor ein paar Monaten den FF runtergeschmissen habe weil mir die Update-policy mit den dann immer wieder neu erstellten Profil mächtig auf den Zeiger gegangen ist. Nun, und das ist klar, muß er zum Testen wieder her.

Und ja, ich entwickle zunächst nur mit Vivaldi. Weil man sich hier wie früher bei Opera sehr um Standardkonformität bemüht ist das keine schlechte Wahl. Der Test quer über die Browser kommt bei mir erst dann wenn die Seite "an und für sich" fertig ist. Ich achte jedoch von Anfang an darauf nur Techniken zu verwenden die breitestmögliche Browserunterstützung erfahren, sonst suche ich von Beginn an nach Alternativen.

Soweit nur damit hier kein falscher Eindruck hinsichtlich der von mir angestrebten Browserunterstützung hängen bleibt.

---

1. Der kranke Geist, für den die multiplen Ausrufezeichen ein Zeichen sind, ist nicht der meine. 😏 ↩︎

[Auge]

Hallo

Und ja, ich entwickle zunächst nur mit Vivaldi. Weil man sich hier wie früher bei Opera sehr um Standardkonformität bemüht ist das keine schlechte Wahl.

Zur Einordnung: Beide Browser benutzen die Chromium-Engine. Das gilt auch für deren Unzulänglichkeiten, Bugs und die Entwicklerwerkzeuge. Deine Vorschläge im Vivaldi-Forum werden daher mit großer Wahrscheinlichkeit ins Leere laufen.

Tschö, Auge

[Der Martin]

Hallo,

2. Mir sind die Entwicklertools (ja die haben in jedem Fall auch ihren Wert!) schon deshalb zuwieder, weil Websites damit nicht in voller Bildschirmgröße betrachtbar sind

doch, sind sie. Löse die Entwicklertools aus dem Hauptfenster und lass sie als separates Fenster anzeigen. Hmm, ein zweiter Monitor ist einfach praktisch ...

Nutze keinen FF mehr.

Ich auch nicht. Nur im Notfall. Frisst mir entschieden zuviel Arbeitsspeicher.

Live long and pros healthy,
 Martin

[michaah]

Hallo,

2. Mir sind die Entwicklertools (ja die haben in jedem Fall auch ihren Wert!) schon deshalb zuwieder, weil Websites damit nicht in voller Bildschirmgröße betrachtbar sind

doch, sind sie. Löse die Entwicklertools aus dem Hauptfenster und lass sie als separates Fenster anzeigen.

Ahaaa, ok, gefunden. Danke. Ist ein kleiner Schritt vorwärts.

Hmm, ein zweiter Monitor ist einfach praktisch ...

fieser Kommentar ... 😉

[Rolf B]

Hallo Martin,

Hmm, ein zweiter Monitor ist einfach praktisch ...

Sagte ich neulich noch.

Rolf