Yadgar: Positionierung von Elementen an Bildschirmauflösung anpassen

Hi(gh)!

Nachdem ich mir einen neuen Monitor angeschafft hatte und fortan statt 1024 x 768 die 1280 x 1024er Auflösung verwende, stellte ich fest, dass sich - logischerweise - die mit CSS positionierten Fotos (siehe z. B. hier: http://www.rock-o-data.de/khyberspace/bikeblog_2013-06.php) verschoben hatten und nun nicht neben den passenden Textstellen liegen.

Gibt es eine Möglichkeit, zur Anpassung der CSS-Elemente die Bildschirmauflösung zu ermitteln, ohne Javascript benutzen zu müssen?

Bis bald im Khyberspace!

Yadgar

  1. Om nah hoo pez nyeetz, Yadgar!

    Gibt es eine Möglichkeit, zur Anpassung der CSS-Elemente die Bildschirmauflösung zu ermitteln, ohne Javascript benutzen zu müssen?

    Nein. Vielleicht solltest du die Bilder direkt in den Absatz stecken.

    Nicht nur die Bildschirmauflösung (natürlich meinst du die Viewportgröße, denn man kann seinen Browser auch einem Nicht-Vollbild-Modus betreiben ;-), auch der Zoomfaktor und die verwendete Schriftart oder Mindestschriftgröße spielen eine Rolle.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Apfel und Apfelsine.

    1. Hi(gh)!

      Nein. Vielleicht solltest du die Bilder direkt in den Absatz stecken.

      Aber auch dann würde sich bei unterschiedlichen Fenstergrößen/Auflösungen der Text relativ zu den Bildern verschieben, was ich nach Möglichkeit vermeiden will!

      Bis bald im Khyberspace!

      Yadgar

      1. Om nah hoo pez nyeetz, Yadgar!

        Aber auch dann würde sich bei unterschiedlichen Fenstergrößen/Auflösungen der Text relativ zu den Bildern verschieben, was ich nach Möglichkeit vermeiden will!

        Du kannst dir ja mal den 3-spaltigen Forumskopf anschauen. Für deine Zwecke würde ich eine Tabelle empfehlen.

        <figure>…</figure>
        <p>…</p>
        <figure>…</figure>

        mit display: table-cell

        oder <p><img><img>Text</p> mit p img {float: left} und img + img {float-right} Damit sollten ungetestet die Bilder und der Absatz auf der selben Höhe beginnen. Wenn du dann noch die Floats einschließt p {clear: float}, siehts wieder so aus, wie im Original.

        Die Margins links und rechts, falls es Absätze ohne Bilder gibt, müsstest du noch anpassen.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sala und Salami.

        1. Hi(gh)!

          Du kannst dir ja mal den 3-spaltigen Forumskopf anschauen. Für deine Zwecke würde ich eine Tabelle empfehlen.

          Tabelle?!? Ich dachte immer, Layout mit Tabellen wäre absolut pfui! Aber im Gegensatz zu position:xxx macht eine Tabelle auch Änderungen der Fenstergröße unfallfrei mit, das ist mir schon klar...

          Bis bald im Khyberspace!

          Yadgar

          1. Om nah hoo pez nyeetz, Yadgar!

            Tabelle?!? Ich dachte immer, Layout mit Tabellen wäre absolut pfui!

            nicht <table> sondern display: table-*!! Die Float-Geschichte ist auch nicht von der Hand zu weisen.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Elf und Elfmetertöter.

            1. Hi(gh)!

              nicht <table> sondern display: table-*!! Die Float-Geschichte ist auch nicht von der Hand zu weisen.

              Also, das ist mir erst mal zu kompliziert... dann lieber die prollige Tabellenlösung (auch wenn dann die Hüter der HTML-Orthodoxie mal wieder das Anathema über mich aussprechen...)!

              Bis bald im Khyberspace!

              Yadgar

              P.S. Übrigens, der Unterschied zwischen Java und Javascript ist auch größer als der zwischen Baktrien und Bakterien!

              1. Om nah hoo pez nyeetz, Yadgar!

                Also, das ist mir erst mal zu kompliziert...

                http://selfhtml.apsel-mv.de/forum/fahrradtest.html

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Hund und Hundertwasser.