Liste nicht einrücken
B-ellanna
- css
Hallo Forum,
Ich habe nun schon eine Weile gesucht nach "Liste nicht einrücken" und bin mit den Tipps aus dem Forumsarchiv nicht zum gewünschen Ergebnis gekommen.
Nun folgendes Problem: Auf folgender Seite: http://www.personal.uni-jena.de/~b2stch/sonstige.htm, mit diesem CSS http://www.personal.uni-jena.de/~b2stch/styles.css habe ich das Problem, das meine Bücherliste erstens nicht genau unter dem "weitere" anfängt, sondern 4 Buchstaben weiter links. Ich möchte gerne (ich weiß, was ich möchte ist egal... trotzdem!) das die Liste genau unter dem w anfängt.
Desweiteren wäre es schön wenn der Buchtitel in der Mitte neben dem Bild angezeigt wird.
Kann man da was machen? Mit
ul#Buecherliste li {
height: 19em;
vertical-align: middle;}
funktionierte es übrigens nicht.
Ich hoffe ich steh nur auf dem Schlauch und das meine Wünsche realisierbar sind.
Danke liebes Forum!
B-ellanna
Hallo B-ellana,
Ohne großartige Quelltextansicht: Vielleicht liegt´s ja an deinem padding für die <li>s?
Beste Grüße
Richard
padding für die <li>s?
Hallo Richard,
Ich habe es schon mit margin und padding: 0em; in der Liste versucht.
ul#Buecherliste li {
margin: 0em;
padding: 0em;
height: 19em;
Das führte zu keiner sichtbaren Änderung. Auch mit negativen em Werten hab ich es schon versucht, das zerstört die ganze Liste.
Bis Bald.
B-ellanna
Hello out there!
Ich habe es schon mit margin und padding: 0em; in der Liste versucht.
Verschiedene Browser erzeugen die defaultmäßige Einrückung auf verschiedene Weise: manche mit margin-left/padding-left für li, manche mit padding-left für ul/ol.
Qapla’ & See ya up the road,
Gunnar
Verschiedene Browser erzeugen die defaultmäßige Einrückung auf verschiedene Weise: manche mit margin-left/padding-left für li, manche mit padding-left für ul/ol.
Hallo Gunnar.
Und nune? Das hab ich auch schon gemerkt. Was kann ich denn dagegen tun / damit anfangen? Wär schön wenns ne einfache Lösung gibt.
Was ist eigentlich mit meiner zweiten Frage passiert? Wie kann ich denn den Text neben dem Bild zentrieren?
Danke.
B-ellanna
Hello out there!
Verschiedene Browser erzeugen die defaultmäßige Einrückung auf verschiedene Weise: manche mit margin-left/padding-left für li, manche mit padding-left für ul/ol.
Und nune? Das hab ich auch schon gemerkt. Was kann ich denn dagegen tun / damit anfangen?
Die Defaultwerte der Browser überschreiben.
Was ist eigentlich mit meiner zweiten Frage passiert? Wie kann ich denn den Text neben dem Bild zentrieren?
Am einfachsten, wenn du das nicht als Liste, sondern als Tabelle auszeichnest: linke Spalte Bilder, rechte Spalte Texte. Würde ich in diesem Fall als tabellarische Daten gelten lassen. ;-)
See ya up the road,
Gunnar
Die Defaultwerte der Browser überschreiben.
Am einfachsten, wenn du das nicht als Liste, sondern als Tabelle auszeichnest: linke Spalte Bilder, rechte Spalte Texte. Würde ich in diesem Fall als tabellarische Daten gelten lassen. ;-)
Hallo Gunnar.
Danke. Nun ists halt ne Tabelle...
Das mit den Defaultwerten wär wahrscheinlich zu viel für mich gewesen.
Schönes Wochenende.
B-ellanna
Hello out there!
Das mit den Defaultwerten wär wahrscheinlich zu viel für mich gewesen.
<Loriot>Ach. Ach was.</Loriot>
Ich habe es schon mit margin und padding: 0em; in der Liste versucht.
Mit
li {
margin: 0;
padding: 0;
}
hattest du die Defaultwerte der Browser für die Eigenschaften bei 'li'-Elementen überschrieben.
Verschiedene Browser erzeugen die defaultmäßige Einrückung auf verschiedene Weise: manche mit margin-left/padding-left für li, manche mit padding-left für ul/ol.
Du hättest also bloß noch die Defaultwerte der Browser für die 'padding'-Eigenschaft bei 'ul'-Elementen überschreiben müssen:
ul {
padding: 0;
}
Nun darfste deine Hand an deine klingonischen Schädelkämme klatschen. ;-)
See ya up the road,
Gunnar
Du hättest also bloß noch die Defaultwerte der Browser für die 'padding'-Eigenschaft bei 'ul'-Elementen überschreiben müssen:
ul {
padding: 0;
}
Achso!
nun kann man das noch nicht ganz so tolle ergebnis des listenexperiments [hier](http://www.personal.uni-jena.de/~b2stch/sonstigeliste.htm) bewundern.
Wie bekomme ich denn meinen restlichen Text nun neben das Bild und nicht darunter?!?
Ich bin irgenwie verwirrt.
Danke im Vorraus für eure Entwirrung.
B-ellanna
Wie bekomme ich denn meinen restlichen Text nun neben das Bild und nicht darunter?!? listenexperiment
Hallo nochmal!
Im Forums-archiv habe ich folgenden Thread gefunden, der ja eigenltich mein Thema anreisst:
http://forum.de.selfhtml.org/archiv/2006/1/t120814/#m776121 nur leider funktioniert das clear:left nicht so wie gewünscht da meine Zeilenhöhe 19em ist um die Bilder nicht nebeneinander zu haben.
Was ist denn der Kniff für meinen Fall, ich komm selbst nicht drauf.
Danke!
B-ellanna
Hallo,
Wie bekomme ich denn meinen restlichen Text nun neben das Bild und nicht darunter?!? listenexperiment
Wozu Du die line-height von ul#Buchliste auf 19em gesetzt hast, will mir nicht so recht einleuchten.
Du hast eine solche Grundstruktur:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
* { margin:0; padding:0; }
html { background-color:#00AFFF; padding:1%; }
body { border:1px solid; width:600px; margin:auto; background-color:#EFEFEF; }
h1 { background-color:#FF7F7F; text-align:center; }
p#fusszeile { background-color:#FF7F7F; text-align:center; }
ul#navi { float:left; width:20ex; margin:1ex; list-style-type:none; background-color:#00AFAF; }
ul#buecherliste { list-style-type:none; margin:1ex; margin-left:22ex; background-color:#00FFAF; }
ul#buecherliste li { }
ul#buecherliste li img { width:100px; height:150px; }
</style>
<!--[if IE]>
<style>
ul#navi { display:inline; } /*gegen double margin bug*/
ul#buecherliste { height:1px; } /*hasLayout gegen 3px-bug*/
</style>
<![endif]-->
</head>
<body>
<h1>Verlag</h1>
<ul id="navi">
<li>Navi 01</li>
<li>Navi 02</li>
<li>Navi 03</li>
<li>Navi 04</li>
</ul>
<h2>Buecherliste</h2>
<ul id="buecherliste">
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild</li>
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild auch mal leanger</li>
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild auch mal leanger und auch mal noch laenger</li>
<li><img src="Beispiel.jpg" alt="ein Bild" title="">Text neben dem Bild auch mal leanger und auch mal noch laenger und noch laenger noch laenger noch laenger</li>
</ul>
<p id="fusszeile">Fußzeile</p>
</body>
</html>
Nun soll der Text neben den Bildern offensichtlich mehrzeilig neben dem jeweiligen Bild stehen. Das heißt, das Bild muss aus dem Textkontext heraus, in dem es wie ein Buchstabe auf der Textzeile betrachtet wird. Das Vergrößern der Zeilenhöhe bringt da nichts.
Wie bekommt man das Bild heraus? Normalerweise mit float. Allerdings haben wir float ja schon für die UL#navi gesetzt. Ein float nun auch noch für die Bilder ergibt Probleme mit dem clear, da dieses auch float in der Navigation aufheben würde (clear nur für _ein bestimmtes_ float gibt es nicht). Man könnte zwar extra Elemente für clear einfügen, aber das ist Pfusch. Außerdem müsste das erste clear-Element nach dem ersten Bildtext stehen, um das nächste Bild nach unten zu zwingen. Was aber, wenn die Navigation mal höher als das erste Bild wird? Dann fängt das zweite Bild erst unter der Navigation an. Richtig gut bekommt man es also mit noch einem float nicht hin.
Was könnte man noch tun? Absolute Positionierung der Bilder wäre möglich. Hierzu müsste man ein Element haben, an welchem sich diese absolute Positionierung ausrichten könnte. Im Beispiel wären das die LI-Elemente der UL#buecherliste.
Wir ergänzen also das CSS vom obigen Beispiel um:
ul#buecherliste li { position:relative; height:150px; padding-left:100px; }
ul#buecherliste li img { width:100px; height:150px; position:absolute; top:0; left:0; }
Erläuterung:
Die LI-Elemente der UL#buecherliste werden durch position:relative in die Lage versetzt, als Bezugsboxen für position:absolute zu fungieren. Sie werden mindestens so hoch wie die Bilder und der Textinhalt wird über padding-left mindestens um die Breite der Bilder eingezogen. Die Bilder werden dann links oben in den LI-Boxen platziert.
Das funktioniert natürlich nur, wenn die Bilder in etwa alle gleich groß sind. Das scheint ja bei Dir so zu sein.
Eine andere Variante wäre, float für die Bilder und clear für die LI-Elemente der UL#buecherliste zu nutzen und dann aber die Navigation absolut zu positionieren. Dazu müsste BODY mit position:relative als Bezugsbox vorbereitet werden. Diese Variante ist aber meiner Meinung nach schlechter, weil sie spezielle Berechnungen für den top-Wert der absolut positionierten Navigation voraussetzt, die wiederum nicht für alle Browser gleich gelten werden.
viele Grüße
Axel
hallo,
Ich hoffe ich steh nur auf dem Schlauch und das meine Wünsche realisierbar sind.
Wenn du dir http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_position angeschaut hast, kannst du dir diese Frage selber beantworten.
Grüße aus Berlin
Christoph S.
Wenn du dir http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_position angeschaut hast, kannst du dir diese Frage selber beantworten.
Hallo Christoph S.,
Ich hab schon dort geguckt. Auch bevor ich gepostet habe. Das scheint nur für <ol> zu funktionieren?
Denn wenn ich es so definiere:
ul#Buecherliste{
list-style-position:inside;
list-style: none;
}
ul#Buecherliste li {
height: 19em;
ändert sich rein gar nichts.
Wann nimmt man den uls und wann ols?
Oder mein Schlauch ist zu verknotet.
Tschau,
B-ellanna
Hello out there!
Wann nimmt man den uls und wann ols?
'ul' (“unordered list”), wenn die Reihenfolge der Items keine Rolle spielt
'ol' (“ordered list”), wenn die Reihenfolge der Items unbedeutend ist
HTML hat dabei nichts mit der Darstellung zu tun; du kannst 'ul' mit CSS so formatieren, dass Nummern/Buchstaben vor den Items angezeigt werden; oder auch 'ol' so, dass Bullets vor den Items erscheinen.
See ya up the road,
Gunnar
Hallo Gunnar.
Wann nimmt man den uls und wann ols?
'ul' (“unordered list”), wenn die Reihenfolge der Items keine Rolle spielt
'ol' (“ordered list”), wenn die Reihenfolge der Items unbedeutend ist
Über letzteres ließe sich streiten. Auch kann man OLs gerne zur Vermittlung einer Wertigkeit der Listenpunkte nutzen.
HTML hat dabei nichts mit der Darstellung zu tun; du kannst 'ul' mit CSS so formatieren, dass Nummern/Buchstaben vor den Items angezeigt werden; oder auch 'ol' so, dass Bullets vor den Items erscheinen.
Und was hat das damit zu tun, dass die eine Liste geordnet und die andere ungeordnet (lies: alle Listenelemente sind gleichgestellt) ist?
Einen schönen Freitag noch.
Gruß, Ashura
Hello out there!
'ol' (“ordered list”), wenn die Reihenfolge der Items unbedeutend ist
Über letzteres ließe sich streiten.
Mein Fehler: Sollte „bedeutend“ heißen.
HTML hat dabei nichts mit der Darstellung zu tun; du kannst 'ul' mit CSS so formatieren, dass Nummern/Buchstaben vor den Items angezeigt werden; oder auch 'ol' so, dass Bullets vor den Items erscheinen.
Und was hat das damit zu tun, dass die eine Liste geordnet und die andere ungeordnet (lies: alle Listenelemente sind gleichgestellt) ist?
Na eben nichts. Mit HTML gibts du an, ob die Items geordnet sind oder nicht; mit CSS, wie sie dargesellt werden sollen.
(Wenn das keine Anwort auf deine Frage ist, habe ich diese nicht verstanden.)
See ya up the road,
Gunnar
Hallo Gunnar.
'ol' (“ordered list”), wenn die Reihenfolge der Items unbedeutend ist
Über letzteres ließe sich streiten.
Mein Fehler: Sollte „bedeutend“ heißen.
OK.
Und was hat das damit zu tun, dass die eine Liste geordnet und die andere ungeordnet (lies: alle Listenelemente sind gleichgestellt) ist?
Na eben nichts. Mit HTML gibts du an, ob die Items geordnet sind oder nicht; mit CSS, wie sie dargesellt werden sollen.
(Wenn das keine Anwort auf deine Frage ist, habe ich diese nicht verstanden.)
Doch ist es; mein Posting begründete sich auch nur auf deinem Vertipper.
Einen schönen Freitag noch.
Gruß, Ashura
Hallo liebes Forum!
Ich habe folgendes kleines Problem. Im Internet Explorer wurde meine min-heigth Angabe ignoriert, okay hab nachgelesen das er das nicht kann und dafür height so interpretiert. Dann hab ich das in mein CSS eingebaut. Doch nichts da! Es wird auch height nicht interpretiert, was ist da los?
Hier ist das Html- und hier das Css-File dazu.
Wäre schön wenn ihr mir helfen könntet!
Dankeschön!
B-ellanna
Hallo B-ellanna
... Es wird auch height nicht interpretiert, was ist da los?
Hier ist das Html- und hier das Css-File dazu.
Mein IE zeigt es so an, wie ich es bei deinem CSS von ihm auch erwarten würde.
Du meinst sicher, er solle height: 500px;
für div#Inhalt
berücksichtigen.
Du gibst aber direkt danach height: 1em;
für * html div#Inhalt
an. Das selektiert auch genau div#Inhalt
, allerdings mittels Star-HTML-Hack, womit diese Regel nur vom IE angewand wird und deine verhergehende Regel überschreibt.
Aufgrund der höheren Spezifität würde dies auch passieren, wenn sie vor der anderen notiert wäre.
Auf Wiederlesen
Detlef
Hallo Detlef.
Mein IE zeigt es so an, wie ich es bei deinem CSS von ihm auch erwarten würde.
Du meinst sicher, er solle
height: 500px;
fürdiv#Inhalt
berücksichtigen.
Du gibst aber direkt danachheight: 1em;
für* html div#Inhalt
an. Das selektiert auch genaudiv#Inhalt
, allerdings mittels Star-HTML-Hack, womit diese Regel nur vom IE angewand wird und deine verhergehende Regel überschreibt.
Aufgrund der höheren Spezifität würde dies auch passieren, wenn sie vor der anderen notiert wäre.
Aaah,
Daran liegt es!
Vielen herzlichen Dank!
Schöne Woche noch.
B-ellanna
Hallo Ihrs,
Und noch ein Problem taucht mit einem Star Hack auf.
HTML:
<ul id="Navigation">
<li><a href="1.htm">Hauptlink 1</a></li>
<li><a href="2.htm">Hauptlink 2</a>
<ul>
<li><a href="2.htm">Unterlink eins von extremer Länge</a></li>
<li><a href="2.htm">Unterlink 2</a></li>
</ul></li>
<li><a href="3.htm">Hauptlink 3</a></li>
<li><span>Hauptlink 4</span></li>
</ul>
CSS:
ul#Navigation {
font-size: 0.75em;
float: left; width: 15em;
margin: 0; padding: 0.8em;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 12.9em;
w\idth: 15em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
text-align: left;
margin: 0.4em; padding: 0;
}
ul#Navigation li ul{
margin: 0 0 0 2.5em; padding: 0;
}
ul#Navigation li ul li {
margin: 0.1em 0;
width: 15em;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 2.5em;
ma\rgin-left: 0;
}
ul#Navigation a, ul#Navigation span {
padding: 0.25em 1em 0.25em 1em;
display:block;
text-decoration: none; font-weight: normal;
text-align: left;
border: 1px solid black;
color: #000000; background-color: #CCFF99;
}
* html ul#Navigation a, ul#Navigation span {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 15em; /* Breitenangabe fuer IE 6 */
}
* html ul#Navigation li ul li a, ul#Navigation li ul li span {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 15em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover, ul#Navigation span {
text-align: left;
border: 1px solid black;
color: #000000; background-color: #99CC66;
}
Wenn ich die letzten Beiden Star Hacks drin habe, dann funktioniert es im IE so wie gewollt, nur der Firefox verlängert mir aufeinmal meinen Kasten bei Span (um den unterlink 4). Wenn ich die Star Hacks rausnehme wirds wieder im Firefox okay und im IE falsch.
Was ist hier los?
Dankeschön,
B-ellanna
Hi,
* html ul#Navigation a, ul#Navigation span {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 15em; /* Breitenangabe fuer IE 6 */
}
* html ul#Navigation li ul li a, ul#Navigation li ul li span {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 15em; /* Breitenangabe fuer IE 6 */
}
Wenn ich die letzten Beiden Star Hacks drin habe,
Du hast hier 4 Selektoren. 2 davon mit Star-Hack, 2 ohne.
cu,
Andreas
Du hast hier 4 Selektoren. 2 davon mit Star-Hack, 2 ohne.
Hallo Andreas,
Aha. Ich wußte nicht, dass wenn man hinter dem 1. Star-Hack etwas mit Komma angibt dann der Star-Hack von vorne nicht mehr gilt.
Super. Da sieht man mal wieder wie genau es der FF nimmt.
Dankeschön.
B-ellanna
Hi,
Du hast hier 4 Selektoren. 2 davon mit Star-Hack, 2 ohne.
Aha. Ich wußte nicht, dass wenn man hinter dem 1. Star-Hack etwas mit Komma angibt dann der Star-Hack von vorne nicht mehr gilt.
Mit dem Komma trennst Du zwei vollkommen unabhängige Selektoren.
Der Star-Hack betrifft genau den Selektor, bei dem er steht.
cu,
Andreas
Hallo liebe Leute!
Endlich nun dank eurer Hilfe befinde ich meine Website für fertig. Ich fände es schön eure Meinung über das Html, Css und das Design zu hören. Die Validatoren für Html und Css hatten übrigens nichts zu meckern das müsst ihr nicht nochmal nachgucken.
Liebe Grüße,
B-ellanna
habe d'ehre B
Tja, ich verwende eine UMTS-Karte, eigentlich geht das bei allen Seiten recht flott. Bei Dir kommt Text und irgendwann ein Bild dazu, allerdings grottenlangsam.
Na dann schauen wir mal nach:
Grafik schlechter.jpg gespeichert, in Photoshop geoeffnet und was sehen meine verwunderten Augen? Breite: 720px, Hoehe: 1040px, Aufloeung: 96 Pixel/Zoll - oopppsss!
Bild in ImageReady geladen:
Ausgangsgroesse: 2,14 MB
Zielgroesse jpeg: 81KB
Ich weiss ja nicht, wie Du das Bild fuer die Anzeige eindampfst, aber an der Strategie solltest Du feilen. Ein Bild mit 2,14MB ausliefern finde ich heftig. Weitere Bilder sehe ich nicht, da ich die Uebertragung hierfuer explizit abgeschaltet habe.
Was mir z.B. gar nicht gefaellt, ist die Unternavigation fuer "weitere Titel". Schaut irgendwie nach Legosteinen aus. Ich wuerde die Balken fuer die zweite Ebene in der Breite denen der ersten Ebene angleichen, einen anderen Farbton vergeben und die Einrueckung nur fuer den Text vornehmen.
man liest sich
Wilhelm
Hallo Wilhelm
Bild in ImageReady geladen:
Ausgangsgroesse: 2,14 MB
Zielgroesse jpeg: 81KB
Ich weiss ja nicht, wie Du das Bild fuer die Anzeige eindampfst,
k.A Warum das bei dir so erscheint, ich habe im Browser mal auf Eigenschaften des Bildes geklickt und da steht bei den Bildern eine Auflösung zwischen 150 und 300 px und das macht zwischen 20 und 150 kb.
Finde ich persönlich ok. Wo dann die 2 MB bei dir hergekommen sind frag ich mich allerdings auch. Ist irgendwie seltsam oder ich verstehe nicht was mit den Bildern passiert wenn ich sie bearbeite/hochlade.
Was mir z.B. gar nicht gefaellt, ist die Unternavigation fuer "weitere Titel". Schaut irgendwie nach Legosteinen aus. Ich wuerde die Balken fuer die zweite Ebene in der Breite denen der ersten Ebene angleichen, einen anderen Farbton vergeben und die Einrueckung nur fuer den Text vornehmen.
Tja, Geschmackssache, ich finde das super so. Ist die Übersichtlichkeit dadurch etwa gefährdet? Falls ja würde ichs ändern falls nicht bleibts so weil ich es schön finde.
Also, danke für die Kritik und ich würde mich freuen wenn wir gemeinsam(?) dem Bildproblem auf die Spur kommen könnten.
B-ellanna
habe d'ehre B
k.A Warum das bei dir so erscheint, ich habe im Browser mal auf Eigenschaften des Bildes geklickt und da steht bei den Bildern eine Auflösung zwischen 150 und 300 px und das macht zwischen 20 und 150 kb.
Weil Du im CSS die Dimension fuer img auf 12 und 18em gesetzt hast und dadurch die 720 x 1040 gestaucht werden?
Finde ich persönlich ok. Wo dann die 2 MB bei dir hergekommen sind
Wie gesagt, die Angabe kommt von ImageReady. Warum die Bildgroesse bei mir in den Datei-Eigenschaften auch nur 63KB anzeigt, keine Ahnung. Eigentlich ist mir dies bisher noch nie untergekommen.
Was mir z.B. gar nicht gefaellt, ist die Unternavigation fuer "weitere Titel". Schaut irgendwie nach Legosteinen aus. Ich wuerde die Balken fuer die zweite Ebene in der Breite denen der ersten Ebene angleichen, einen anderen Farbton vergeben und die Einrueckung nur fuer den Text vornehmen.
Tja, Geschmackssache, ich finde das super so. Ist die Übersichtlichkeit dadurch etwa gefährdet? Falls ja würde ichs ändern falls nicht bleibts so weil ich es schön finde.
Ich sagte ja "was mir nicht gefaellt" und nicht "ich finde das schlecht". Im Endeffekt muss es Dir gefallen und wenn Du dazu stehst, ok. Mir fehlt irgendwo eine Harmonie.
man liest sich
Wilhelm
Hallo Wilhelm,
Grafik schlechter.jpg [...] Breite: 720px, Hoehe: 1040px
das kann ich bestätigen, ist ja auch nicht weiter schlimm.
Ausgangsgroesse: 2,14 MB
Zielgroesse jpeg: 81KB
Hmm. Ich weiß ja nicht, wie du auf solche Ergebnisse kommst - bei mir ist dasselbe Bild nur rund 61kB groß. Das finde ich fürs Web absolut okay.
Ein Bild mit 2,14MB ausliefern finde ich heftig.
Das ist keineswegs der Fall, lass dich von deinem Grafikprogramm nicht irreführen! Das ausgelieferte Bild hat genau 62323 Bytes, mit einem 56k-Modem und mittelmäßiger Verbindungsqualität wären das rund 15..20s Ladezeit. Ich halte das für zumutbar.
Schönen Abend noch,
Martin