Lösung zur Request Minderung! (Seite 2)

Hallo @all

also die Geschichte mit den Inline Images ist ja mal garnicht so schlecht! Hab das mal auf meiner Startseite probiert.
.....mmmhhhh! Damit mach ich mir aber dann mein Verh. Queltext zu Content kapputt!
Beim Hintergrundbild und diesem kleinen Pixel, welches für den gepunkteten Hintergrund im Inhaltsbereich angeht kein Problem. Hab ich ja in meiner CSS stehen! Aber die Thumbs ist zuviel. Denke ich zumindest!

Dadurch ist mir aber wieder eingefallen, wie ich die Thumbs in meine DB bekomme!!

Aufgefallen ist mir allerdings, das der Seitenaufbau dadurch echt schnell ist, bzw schneller wird. Hab leider keine Ahnung wie ich das messen kann, aber vom Gefühl her fand ich den Aufbau dadurch schnelller.

Den Hover effekt beim oberen Menü bekomme ich auch nicht hin! Weiß jemand was da in der CSS falsch ist?

Danke im voraus.
Gruß
Werner

babylon26903 schrieb:

Den Hover effekt beim oberen Menü bekomme ich auch nicht hin! Weiß jemand was da in der CSS falsch ist?

Du setzt den hover-Effekt auf das a-Element, das Hintergrundbild aber auf das li-Element, da muss man sich schon für eines entscheiden.

Der folgende CSS-Code...
[css]#foxmenu ul li{
background-image:url("/images/index_sprite_2.jpg");
background-position: -210px -1px;
display:block;
float:left;
margin:0 1px 0 0;
}

#foxmenu ul li a{
background:transparent no-repeat top left;
color:#fff;
display:block;
float:left;
height:19px;
padding:5px 20px 0 20px;
text-decoration:none;
}

#foxmenu ul li a:hover{
background-position: -210px -26px;
background:transparent no-repeat top right;
color:#fff;
}[/css]
...sollte vermutlich so lauten:
[css]#foxmenu ul li{
background-image:url("/images/index_sprite_2.jpg");
background-position: -210px -1px;
display:block;
float:left;
margin:0 1px 0 0;
}

#foxmenu ul li a{
color:#fff;
display:block;
float:left;
height:19px;
padding:5px 20px 0 20px;
text-decoration:none;
}

#foxmenu ul li:hover{
background-position: -210px -26px;
}[/css]

babylon26903 schrieb:

Dadurch ist mir aber wieder eingefallen, wie ich die Thumbs in meine DB bekomme!!

Zum Thema "Bilder in Datenbanken speichern" empfehle ich dir folgenden Link: www.php-faq.de/q-db-blob.html

babylon26903 schrieb:

Aufgefallen ist mir allerdings, das der Seitenaufbau dadurch echt schnell ist, bzw schneller wird. Hab leider keine Ahnung wie ich das messen kann, aber vom Gefühl her fand ich den Aufbau dadurch schnelller.

Das Firefox Plugin "Firebug" liefert hier gute Dienste. Die gewünschte Funktion befindet sich im Reiter "Netzwek".

babylon26903 schrieb:

Den Hover effekt beim oberen Menü bekomme ich auch nicht hin! Weiß jemand was da in der CSS falsch ist?

Auf den Unterseiten "Karte Deutschland" und "Unterkunft eintragen" klappt es doch bereits prima.
Wo genau has du Probleme?

Hallo

Dank Oskar ist mir gestern zumindest klar geworden wie man die Technik mit den Inline Images überhaupt anwendet und habe auch bereits schon eine XML Datenbank von meinen Thumbs aufgebaut.

Mir sind einige Dinge zu diesem Inline Images oder Data-URL noch nicht so ganz klar.

Wie kann ich vorher ermittlen ob ich damit Vorteile erreichen kann im Vergleich zu der Verwendung von normalen Bildern?
Es hängt ja von der Datei-Grösse eines Bildes zumindest ab und dem was mich der HTTP Request kostet minus der Grösse wenn das Bild base 64 kodiert ist. Und halt eben wie das Caching Verhalten der normalen Bilder sich auch auswirkt.

Es müsste doch möglich sein sowas zu berechnen ob sich das prinzipiell lohnt CSS Sprites oder auch die inline Images anzuwenden.

Abgesehen davon das nicht jeder Browser damit umgehen kann und teilweise es von der Grösse wohl auch abhängig ist ob es einwandfrei dargestellt wird möchte ich folgendes auch noch wissen.

Hat jemand schon Erfahrungen aus der Praxis wie sich das im Bereich SEO auswirkt?

Gruß
Jörg

Inline Images werden nicht gecacht, oder ?
Bei CSS-Sprites wäre es der Fall.
Auch blähen meiner Kenntnis nach Inline Images den Quellcode auf.
Wenn man sich auf mobile Browser vorbereitet, ist es nicht so gut.


Ich habe eine andere Frage in diesem Bereich.
Ich binde zwei CSS ein. Eine Haupt CSS und eine CSS für das jeweilige Modul.
Ist es sinnvoll, diese beiden zusammenzufügen ?

Hallo Stefan,

Inline Images werden gecached, wenn die Datei gecached wird, in der sie liegen. Wenn man also die CSS-Datei bzw. die HTML-Datei cached, wird auch das Inline Image gecached.

Was deine CSS-Dateien angeht: In den meisten Fällen ist es sinnvoll, ja. Dadurch, dass die CSS-Datei gecached wird, wird im Endeffekt mehr erspart als durch das Aufteilen der Dateien.

Hallo

Durch diesen Thread habe ich dann mal einige Testseiten erstellt mit verschiedenen Techniken um eine Seite aufzubauen.

http://joerghuelsermann.de/test/bildtechnik/

Die Frage die sich mir jetzt stellt ist womit könnte ich diese Seiten noch testen um Unterschiede zu erkennen.

Gruß
Jörg

Hallo Jörg,

ich habe einmal alle Bild-Seiten aufgerufen:

1. Bilddatei: Alle Bilder stehen untereinander
2. Imagemap: Bilder stehen in Zeilen und Spalten
3. DataURL: keine Anzeige, nur Bilder mit roten Kreuzen
4. CSS Sprite: wie 1.
5. CSS Data URL: keine Anzeige aber keine roten Kreuze
6. CSS Bilddatei: wie 1.

Verwendet: IE7.0

Gruß

SGS

Hallo SGS

3 und 5 ist klar der Internet Explorer unterstützt erst ab Version 8 und auch da abhängig von der Größe Dataurls.

Und das alle Bilder bei deiner Version untereinander stehen liegt wohl daran das ich dieses im CSS verwende.

display : inline-block;

An der Auswertung ändert das überhaupt nichts und langsam überlege ich mir alles an IE Versionen unter 8 umzuleiten.

Gruß
Jörg

Hallo Jörg,

meine Anerkennung! Es macht eine Menge Arbeit solche Muster zu erstellen. Nachvollziehbar ist es ebenso. Deine Auswertung ist sicher nen Eintrag in einer Wiki wert