nicht angemeldet
Gunnar Bittersmann
Matthias Apsel
Gunnar Bittersmann
Der Martin
Der Martin
Tabellenkalk
Der Martin
marctrix
Gunnar Bittersmann
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.
@@Luca Thiede
background: src=("images/Twitter.png");
Das kann so nichts werden. Schau mal, wie in CSS URLs angegebn werden.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
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.
Hallo Luca Thiede,
Das hilft mir nicht wirklich weiter :( trotzdem Danke.
Dann vielleicht https://wiki.selfhtml.org/wiki/Background-image?
Bis demnächst
Matthias
@@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 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
[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 ?
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
[Vollzitat entfernt]
Sobald ich verkleinere verschwinden die Bilder komplett...
@@Luca Thiede
Sobald ich verkleinere verschwinden die Bilder komplett...
Willst du weiter mit uns Ich-sehe-was-was-du-nicht-siehst spielen?
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
[Vollzitat entfernt]
Sobald ich verkleinere verschwinden die Bilder komplett...
Schon gut, hat sich alles erledigt.
Danke an alle die geantwortet haben.
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!?!
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
Hallo,
Aber die Auflösung ...!?!
Rastergrafik
Hier von Auflösung zu reden, ist offensichtlich nicht zielführend
Gruß
Kalk
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.
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
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.
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
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.
@@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 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|