• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bitte Design bewerten

Wieso machst du nicht den Text mit ins Bild rein und gibst dann:

Code: 
li img { widht: [I]xx[/I]em; height:[I] xx[/I]em;}

an. Das würde zwar vorraussetzen, dass alle Buttons gleich groß sind (ansonsten müsstest du mehrere klassen anlegen), ABER dafür kannst du das Bild, auf dem die Schrift mit zu sehen ist, mit der Schriftgröße deines Browsers vergrößern.

Grüßli
Loon3y
 
Werbung:
Loon3y schrieb:
dafür kannst du das Bild, auf dem die Schrift mit zu sehen ist, mit der Schriftgröße deines Browsers vergrößern.
Zum Vergrößern anklicken....
Nö. Gar nicht wahr.

Wenn man es so macht, kann man alles zusammen zoomen. Aber bei Schriftgrößenänderung vergrößert sich nur Schrift, nicht Images.
 
Ich habs jetzt so gemacht, wie es Loon3y beschrieben hat. Das war eine ganz schöne Tüftelei, Pixel in em zu übertragen. Die Bilder orientieren sich jetzt an der Standardeinstellung von 16pt.

Beim Vergrößern/Verkleinern werden, wie zu erwarten war, die Grafiken etwas unscharf, gibt es da etwas dagegen?
 
Werbung:
Hab mich jetzt noch etwas mehr über SVG schlau gemacht, wie man es erstellt und einbindet und bin jetzt auch nah dran es zu verwenden. Doch was mir noch nicht so richtig klar geworden ist, ist folgendes:
  • kann SVG von jedem Browser irgendwie interpretiert werden (sei es durch Plugins oder von Haus aus)?
  • wenn kein Plugin o.ä. für SVG vorhanden ist, gibt es dann eine Möglichkeit die bisher von mir verwendeten IMGs anzeigen zu lassen und zwar so, dass das Aussehen der Seite nicht leiden muss?
Gruß
fiedel
 
Ich hab das hier gefunden: Welcome To codedread

Wie man sieht, gibt es zumindest für IE bis einschließlich Version 8(!) keine SVG-Unterstützung.

Wie das mit der Alternative aussieht, weiß ich nicht.
 
Werbung:
Stimmt, das hab ich übersehen. Weiß auch nicht, was ich mir mit dem Kommentar gedacht habe - ich muss irgendwie daran gedacht haben, dass FF3 voreingestellt hat, dass er mit STRG-+/- zoomt (wie Opera) statt wie früher nur die Schriftgröße ändert.

Aber Du hast natürlich recht, mein Fehler.
 
Werbung:
Design finde ich genial.
Aber ich wollte jetzt auch mal meinen Senf zum Menü abgeben.
Also: Du könntest ruhig die Schrift auf das Image setzen (oder einen On-The-Fly-Generator wie sgss | Experiments | PHP Font Image Generator 2 | Usage benutzen )

Dann fügst du das Bild im Normalzustands und im Hoverzustand in einem Bild untereinander oder nebeneinander zusammen. Das hat den Vorteil, dass du dann mit der CSS :hover Class nur noch die background-position ändern musst und nicht den gesamten background. Somit muss auch kein Bild mehr nachgeladen werden.

Weiterhin würde ich eine Listenstruktur nehmen (geht natürlich auch mit allen anderen semantisch weitgehend korrekten Elementen), und dann entsprechend per CSS die Hintergrundgrafiken zuweisen. Das a-Element schaltest du auf display:block, damit es das ganze li-Element ausfüllt, und packst in den anchor den Text, der auf dem Bild steht. Damit niemand, der CSS eingeschaltet hat, diesen Linktext sieht, setzt du den text-indent auf beispielsweise -1000em.

Und schon ist alles perfekt.
Die Methode habe ich übrigens aus dem Quelltext von Web Design Blog: Web Design & Innovation in web standards : Viget Labs

Viele Grüße
Voodoo
 
Efchen schrieb:
Ich hab das hier gefunden: Welcome To codedread

Wie man sieht, gibt es zumindest für IE bis einschließlich Version 8(!) keine SVG-Unterstützung.

Wie das mit der Alternative aussieht, weiß ich nicht.
Zum Vergrößern anklicken....
Tschja... wird dann wohl ein immer ungelöstes Rätsel bleiben... Also es ging bei mir zu mindest mit allen Browsern, die ich zu bieten habe (das sind Opera 9.6, Firefox 3, Google Chrome, Safari für Windows), außer dem IE.

Voodoo schrieb:
Design finde ich genial.
Aber ich wollte jetzt auch mal meinen Senf zum Menü abgeben.
Also: Du könntest ruhig die Schrift auf das Image setzen (oder einen On-The-Fly-Generator wie sgss | Experiments | PHP Font Image Generator 2 | Usage benutzen )
Zum Vergrößern anklicken....
Der On-The-Fly-Generator ist ja echt ne interessante Sache!
Doch ich versteh nicht ganz den Sinn dahinter, Grafiken mit Text kann ich doch auch mit Photoshop erstellen! Und wenn ich den Text irgendwann mal ändern wollte, müsste ich ja sowieso höchstwahrscheinlich auch ein neues Icon basteln, also geht das in einem dahin.

Voodoo schrieb:
Dann fügst du das Bild im Normalzustands und im Hoverzustand in einem Bild untereinander oder nebeneinander zusammen. Das hat den Vorteil, dass du dann mit der CSS :hover Class nur noch die background-position ändern musst und nicht den gesamten background. Somit muss auch kein Bild mehr nachgeladen werden.

Weiterhin würde ich eine Listenstruktur nehmen (geht natürlich auch mit allen anderen semantisch weitgehend korrekten Elementen), und dann entsprechend per CSS die Hintergrundgrafiken zuweisen. Das a-Element schaltest du auf display:block, damit es das ganze li-Element ausfüllt, und packst in den anchor den Text, der auf dem Bild steht. Damit niemand, der CSS eingeschaltet hat, diesen Linktext sieht, setzt du den text-indent auf beispielsweise -1000em.
Zum Vergrößern anklicken....
Stimmt, damit würde ich JavaScript umgehen! Und CSS hat denke ich mal so gut wie niemand aus geschalten (ich wüsste nicht mal, wie das ginge! ^^).

Gruß
fiedel
 
Werbung:
Ja, so hätte ich es mir beim IE auch gedacht, doch was mach ich mit den anderen Browsern, die unterstützen doch auch nicht alles!

Edit: Achso, jetzt seh ichs erst, die "Grundlagen" (also Pfade) von SVG werden doch von allen Browsern berücksichtigt (außer IE). Weiß jemand, ob sich Adobe Illustrator beim Export von SVGs an die "Grundlagen" hält, oder ob er auch xml-Angaben schreibt, die nicht jeder Browser (außer IE) interpretieren kann?
 
Weiter kann ich Dir nicht helfen, aber vielleicht berichtest Du irgendwann mal über Deine SVG-Erfahrungen oder lässt uns an einer Site mit SVG teilhaben, damit wir uns das mal selber ansehen und testen können?
Denn eigentlich bin ich der Meinung ist doch SVG das beste, was einem Webmaster passieren kann. Wenn das halbwegs einfach umzusetzen ist und auch funktioniert, dann würde ich das für mich auch in Erwägung ziehen.
 
Meint ihr nicht, dass es für den IE auch in diesem Fall wieder irgendeinen obskuren JavaScript-Bandwurm gibt, der SVG auch dort möglich macht? ;ugl
Ansonsten werfe ich mal den Begriff VML für den Internet Explorer in den Raum (ohne mir genauere Gedanken gemacht zu haben :mrgreen:).

EDIT: Ich habe mal das Code-Beispiel von Wikipedia kopiert und es funktioniert. Problematisch ist nur die Erzeugung dieser Dateien: Anscheinend bekommt man es ausschließlich hin, wenn man ein Microsoft-Office-Dokument als Webseite speichert und sich dann den Code da herauswühlt. Es schaut auch so aus, als könnte man eine einbindung per <img...> vergessen. Außerdem gibt/gab es wohl eine Sicherheitslücke, aber das gehört ja beim Internet Explorer zum Inventar. :p
Fazit: Nicht unbedingt praktisch, aber immerhin eine Lösung.
 
Zuletzt bearbeitet:
Werbung:
Hoppla... mir ist soeben aufgefallen, dass sich die Dateigröße der Icons verzehnfacht hat, vorher lag die Größe so bei 6KB, jetzt liegt sie bei 62KB...
Meine SVGs

Lohnt es sich da noch weiterzumachen? Ich meine, ich hab jetzt schon einen Haufen Zeit investiert und bevor ich mich noch mehr abmühe, was meint ihr dazu?

Edit: Hab die SVGs manuell nochmal komprimieren können, jetzt liegt die Durchschnittsgröße bei 54KB. Adobe war nicht ganz so genau beim Exportieren. ;)
mal schauen, ob ich noch mehr reduzieren kann!
 
Zuletzt bearbeitet:
So! Ich habe jetzt einen Haufen Fortschritte gemacht, doch nun stehe ich vor einem Problem!
Und zwar habe ich die SVG-Navigation per object-Tag eingebunden, weil das das einzig valide war (für die älteren Exemplare kommt dann noch die embed Alternative), doch wenn ich nun auf ein Icon klicke um dem Link zu folgen, so wird die verlinkte Seite im "object-Frame" angezeigt. Welches target brauche ich nun um den Link "normal" ausführen zu können?

Hier die Demoseite: SVG

Edit: Hab gefunden, was ich gesucht habe! (target="_parent")

Grüße
fiedel
 
Zuletzt bearbeitet:
Ich glaube, ein klitzekleines (oder auch etwas größeres :mrgreen:) Problem ist auch, dass sich zumindest im Firefox nichts vergrößert, wenn Nur-Text-Zoom eingestellt ist...
 
Werbung:
Stimmt, das war ja eigtl. der Sinn des ganzen, dass es sich zoomen lässt! ;-) Hab ich jetzt geändert! Das lag daran, dass ich die Breite des object-Tags in Pixel angegeben hatte!
 
Ich find das einfach genial; macht richtig Spaß, da zu zoomen. :mrgreen:
Irgendwelche längeren Ladezeiten fallen mir übrigens überhaupt nicht auf. :)
Der Alternativtext für den IE gefällt mir, "Hier folgt später noch eine Alternative für schlechte Browser", hehe...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben