Luca Thiede: Frage zum Wiki-Artikel ‚CSS/Templates‘

problematische Seite

Hallo,

Ich habe wiedermal eine Frage zu den CSS templates.

Momentan probier ich bei der zweiten Vorlage, die Social Media Links unten auf der Seite der vierten Vorlage zu übertragen. Nur ist das Problem dass die Bilder (facebook, twitter und YouTube) wenn ich sie durch selbstgemachte Symbole austauschen, verschwinden.

Folgendes habe ich aus dem vierten Beispiel kopiert und in das zweite eingefügt:

(Ich arbeite in Brackets)

                body > footer span {
			display: block;
		}
		
		#social li {
			margin: 0 20px 0 0;
			display: inline-block;
		}
		
		#twitter {
			background: src=("images/Twitter.png");
			float: left;
			width: 30px;
			height: 30px;  
		}
		
		#instagram {
			background: src=("images/Instagram.png");
			float: left;
			width: 30px;
			height: 30px;
		}
        
                #yt {
			background: src=("images/YouTube.png");
			float: left;
			width: 30px;
			height: 21px;
		}
--------------------------------------------------------------------------------------------------
    
<footer>
		<footer>
		<ul id="social">
			<li>
				<a id="twitter" href="#"></a>
			</li>
			<li>
				<a id="instagram" href="#"></a>
			</li>
            <li>
				<a id="yt" href="#"></a>
			</li>
		</ul>

	</footer>

Bilder sind bereits neu eingefügt.

Ich bedanke mich im voraus für eine Antwort.

Grüße Luca.

  1. problematische Seite

    @@Luca Thiede

      	background: src=("images/Twitter.png");
    

    Das kann so nichts werden. Schau mal, wie in CSS URLs angegebn werden.

    LLAP 🖖

    --
    “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. problematische Seite

        	background: src=("images/Twitter.png");
      

      Das kann so nichts werden. Schau mal, wie in CSS URLs angegebn werden.

      Das hilft mir nicht wirklich weiter :( trotzdem Danke.

      1. problematische Seite

        Hallo Luca Thiede,

        Das hilft mir nicht wirklich weiter :( trotzdem Danke.

        Dann vielleicht https://wiki.selfhtml.org/wiki/Background-image?

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      2. problematische Seite

        @@Luca Thiede

          	background: src=("images/Twitter.png");
        

        Das kann so nichts werden. Schau mal, wie in CSS URLs angegebn werden.

        Das hilft mir nicht wirklich weiter :(

        Inwiefern nicht? Der Unterschied zwischen dem dort gezeigten Beispielcode und dem, was du geschrieben hast, sollte deutlich zu erkennen sein.

        LLAP 🖖

        --
        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. problematische Seite

          [Vollzitat entfernt]

          Ich habe die neuen Bilder eingefügt, aber alle sind 1000x1000px und sind zu groß für die Seite. Kann ich sie verkleinert, aber dennoch in gleicher Auflösung auf der Seite erscheinen lassen ?

          1. problematische Seite

            Hi,

            Ich habe die neuen Bilder eingefügt, aber alle sind 1000x1000px und sind zu groß für die Seite. Kann ich sie verkleinert, aber dennoch in gleicher Auflösung auf der Seite erscheinen lassen ?

            ich weiß nicht, was du wirklich willst. Denn "verkleinert, aber dennoch in gleicher Auflösung" ist eigentlich ein Widerspruch.

            Natürlich kannst du sie verkleinern, indem du für width oder height eine passende Vorgabe machst (der andere Wert wird dann proportional angepasst). Aber die Auflösung reduziert sich dabei natürlich.

            So long,
             Martin

            --
            Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
            - Douglas Adams, The Hitchhiker's Guide To The Galaxy
            1. problematische Seite

              [Vollzitat entfernt]

              Sobald ich verkleinere verschwinden die Bilder komplett...

              1. problematische Seite

                @@Luca Thiede

                Sobald ich verkleinere verschwinden die Bilder komplett...

                Willst du weiter mit uns Ich-sehe-was-was-du-nicht-siehst spielen?

                LLAP 🖖

                --
                “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
                Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
              2. problematische Seite

                [Vollzitat entfernt]

                Sobald ich verkleinere verschwinden die Bilder komplett...

                Schon gut, hat sich alles erledigt.

                Danke an alle die geantwortet haben.

            2. problematische Seite

              Natürlich kannst du sie verkleinern, indem du für width oder height eine passende Vorgabe machst (der andere Wert wird dann proportional angepasst). Aber die Auflösung reduziert sich dabei natürlich.

              Aber die Auflösung erhöht sich dabei natürlich!?!

              1. problematische Seite

                Hi,

                Natürlich kannst du sie verkleinern, indem du für width oder height eine passende Vorgabe machst (der andere Wert wird dann proportional angepasst). Aber die Auflösung reduziert sich dabei natürlich.

                Aber die Auflösung erhöht sich dabei natürlich!?!

                wie denn das? Wenn ich eine Rastergrafik von, sagen wir 1000px im Quadrat habe, und ich skaliere die auf 50% Breite und Höhe, habe ich nur noch 500px im Quadrat. Also reduziert.

                So long,
                 Martin

                --
                Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                1. problematische Seite

                  Hallo,

                  Aber die Auflösung ...!?!

                  Rastergrafik

                  Hier von Auflösung zu reden, ist offensichtlich nicht zielführend

                  Gruß
                  Kalk

                2. problematische Seite

                  Aber die Auflösung erhöht sich dabei natürlich!?! wie denn das? Wenn ich eine Rastergrafik von, sagen wir 1000px im Quadrat habe, und ich skaliere die auf 50% Breite und Höhe, habe ich nur noch 500px im Quadrat. Also reduziert.

                  In Deinem Beispiel hast Du die Auflösung im Vergleich zu 100% verdoppelt. Nimm das Bild mal, rechne es mittels Bildbearbeitung mal auf die 500px runter vergleiche die beiden Varianten: links die 1000px auf 50% skaliert und rechts die phys. 500px auf 100%. Auf Retina-Displays solltest Du einen Unterschied erkennen können: links ist schärfer = höhere Auflösung.

                  1. problematische Seite

                    Hi,

                    Aber die Auflösung erhöht sich dabei natürlich!?! wie denn das? Wenn ich eine Rastergrafik von, sagen wir 1000px im Quadrat habe, und ich skaliere die auf 50% Breite und Höhe, habe ich nur noch 500px im Quadrat. Also reduziert.

                    In Deinem Beispiel hast Du die Auflösung im Vergleich zu 100% verdoppelt. Nimm das Bild mal, rechne es mittels Bildbearbeitung mal auf die 500px runter vergleiche die beiden Varianten: links die 1000px auf 50% skaliert und rechts die phys. 500px auf 100%. Auf Retina-Displays solltest Du einen Unterschied erkennen können: links ist schärfer = höhere Auflösung.

                    das gilt nur dann, wenn das Bild im Verhältnis zur physikalischen Auflösung des Displays ursprünglich größer als 1:1 dargestellt wurde, die Display-Auflösung also noch "Reserven" bietet. Ich gehe aber davon aus, dass Rastergrafiken im Regelfall genau 1:1 abgebildet werden - und dann verliere ich beim Verkleinern unweigerlich Information, egal ob vorher bei der Bildbearbeitung oder nachher beim Skalieren für die Anzeige.

                    So long,
                     Martin

                    --
                    Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
                    - Douglas Adams, The Hitchhiker's Guide To The Galaxy
                    1. problematische Seite

                      In Deinem Beispiel hast Du die Auflösung im Vergleich zu 100% verdoppelt. Nimm das Bild mal, rechne es mittels Bildbearbeitung mal auf die 500px runter vergleiche die beiden Varianten: links die 1000px auf 50% skaliert und rechts die phys. 500px auf 100%. Auf Retina-Displays solltest Du einen Unterschied erkennen können: links ist schärfer = höhere Auflösung.

                      das gilt nur dann, wenn das Bild im Verhältnis zur physikalischen Auflösung des Displays ursprünglich größer als 1:1 dargestellt wurde, die Display-Auflösung also noch "Reserven" bietet.

                      Stimmt schon, nur halte ich

                      Ich gehe aber davon aus, dass Rastergrafiken im Regelfall genau 1:1 abgebildet werden

                      heutzutage für eine gewagte These. In Zeiten von Responsive und heterogenen Display-Auflösungen wird das eher der Sonderfall sein. Spätestens, wenn der User "reinzoomt", ist es vorbei mit 1:1.

                      Es ist gängige Praxis, bei Bildern z.B. die JPEG-Kompression etwas zu erhöhen, dafür aber mit doppelten Pixeldaten einzubinden. Eben, um auf hochlauflösenden Displays eine verbesserte Darstellung zu erzielen - bei minimal höherem Traffic.

                      und dann verliere ich beim Verkleinern unweigerlich Information, egal ob vorher bei der Bildbearbeitung oder nachher beim Skalieren für die Anzeige.

                      Die Interpolationsalgorithmen sind heute in den Clients schon ziemlich gut.

                      1. problematische Seite

                        Hej Mitleser,

                        Es ist gängige Praxis, bei Bildern z.B. die JPEG-Kompression etwas zu erhöhen, dafür aber mit doppelten Pixeldaten einzubinden. Eben, um auf hochlauflösenden Displays eine verbesserte Darstellung zu erzielen - bei minimal höherem Traffic.

                        Wohl eher weniger Traffic...

                        Daher verwende ich diese Technik auch um auf JS/<piture> für Smartphones zu verzichten. Im ZWeifelsfall benötigen die zusätzlichen HTTP-Requests/das Abarbeiten des Skriptes und Nachladen des geeigneten Bildes mehr Zeit als die 30 bis 70 kbyte für eine Full-Retina-Grafik, die einmal im Cache auch für Thumbnails ggfs. weiter verwendet werden kann...

                        Marc

                      2. problematische Seite

                        das gilt nur dann, wenn das Bild im Verhältnis zur physikalischen Auflösung des Displays ursprünglich größer als 1:1 dargestellt wurde, die Display-Auflösung also noch "Reserven" bietet.

                        Stimmt schon ...

                        Wobei. Neh, stimmt eigentlich nicht! Geringere Einbindungsmaße im Verhältnis zu den physikalischen Pixelmaßen bedeuten immer eine Erhöhung der Auflösung. Ob und wie der Client damit etwas anfangen kann, ist eine andere Frage.

          2. problematische Seite

            @@Luca Thiede

            Ich habe die neuen Bilder eingefügt, aber alle sind 1000x1000px und sind zu groß für die Seite. Kann ich sie verkleinert

            Verkleinern? Sicher – im Bildverarbeitungsprogramm deiner Wahl.

            Ggfs. auch mit max-width: 100%. Bedenke aber, dass zu übertragene Dateien nicht größer als nötig sein sollten.

            Vorjin gin es noch um kleine Icons. Wie kommst du jetzt auf 1000 × 1000 Pixel?

            Mal ganz abgesehen davon, dass Icons i.a.R. keine Rastergrafiken (PNG) sein sollten, sondern Vektorgrafiken (SVG), und Pixel damit irrelevant.

            LLAP 🖖

            --
            “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|