Autor Thema: html, css & Co. // alles zum Thema Websites erstellen und Verwalten  (Gelesen 25516 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

ulimann644

  • Gast
Am Firefox hab ich nichts geändert. Die Standardeinstellung von dem blöden Browser muss auf Times gegangen sein. Anders kann ich mir das nicht erklären, denn auf Fremdrechnern mit Firefox sieht meine Seite genauso bescheiden aus :(.

Seltsamerweise bei mir nicht - obwohl auch bei mir Times als Standard definiert ist...
Ich sehe die Defender-Seite so wie immer - mit Arial-Schrift.

Taschenmogul

  • Crewman 2nd Class
  • *
  • Beiträge: 225
Verzweifle nicht, Lairis, denn ich habe die Lösung! :D

Puh... Also, danke mal dafür, daß du mich dazu gebracht hast, mich mit deinem Problem zu beschäftigen, denn dadurch hab ich auch was gelernt. =D

Also, ich habe mir mal deine Seite angeschaut (http://st-defender.de/ , richtig?) und das dazugehörige CSS-file.
Dabei bin ich auf folgenden Teil gestoßen:

  #nav a {
  display: block;
  line-height: 28px;
  margin: 0;
  padding: 0 20px 0 15px;
  Font-Family: Arial Narrow; font-size: 14pt; font-weight: bold; letter-spacing: 1px;
  color: #ffffff;
  }

wichtig ist hier:
Zitat
Font-Family: Arial Narrow;

Dazu fallen mir folgende Dinge ein:
Erste Kleinigkeit - du schreibst hier auch mit Großbuchstaben, was ich persönlich nicht machen würde, auch wenn der Code trotzdem funktoniert. Zweite Kleinigkeit - du setzt hier mehrere Definitionen hintereinander in eine Zeile, ich persönlich würde es der Ordnung halber in je eine Zeile schreiben. Aber auch das ist für die Funktion nicht relevant.

Relevant und das Problem sind zwei Sachen an dem Code.
Zweitens: Du hast keine Ersatzschriften definiert, auf die der Browser zurückgreifen sollte, falls die erste Schriftart nicht funktioniert.
Du kannst praktisch beliebig viele Ersatzschriften angeben, jeweils durch Komma getrennt, also z.B.:

font-family: arial narrow, arial, verdana, tahoma, helvetica, sans-serif;
In dem Fall hätte der FF zwar die Arial Narrow nicht gefunden, wäre dann aber auf die normale Arial ausgewichen.
Im Notfall wäre er auf die Verdana ausgewichen, dann auf die Tahoma, dann auf die Helvetica, und, wenn alle Stricke reißen, auf die im Browser als serifenlose Standardschriftart angegebene sans-serif.
Du findest die Einstellungen für diese Standardschriften im FF unter Hauptmenü->Extras->Einstellungen->Inhalt->Schrifarten & Farben->Erweitert.
Nun aber zum Kern des Problems.

Erstens: Arial Narrow. Die Schriftart wird so vom Firefox nicht erkannt, hingegen aber von anderen Browsern.
Das wusste ich vorher auch nicht, deshalb eben danke, denn jetzt hab ich was dazugelernt.
Es ist nämlich so - die Arial Narrow ist ein Schriftschnitt innerhalb der Arial Familie, sie hat zwar einen eigenständigen Zeichensatz, ist aber der Arial untergeordnet. Und genau das scheint das Problem zu sein, wie ich jetzt mit mehreren Schriftarten getestet habe.
Ich muß gestehen, daß ich selber immer noch nicht genau verstehe, wie das jetzt funktioniert, aber das scheint auch schon ein komplexes Gewirr zu sein.
Denn die Art und Weise wie Windows die Schriftarten abspeichert und verwaltet steht im Konflikt mit den Dateinamen der Schriftarten und den englischen Originalbezeichnungen. Bei mir ist die Arial Narrow als Datei unter "ARIALN.TTF" zu finden, geführt wird sie aber als Schriftschnitt der Arial mit der Bezeichnung "Arial Halb Schmal". Gibt man "arial halb schmal" unter font-family ein, so setzt er das nicht um, "arial narrow" hingegen funktioniert auf manchen Browsern.
Hingegen habe ich bei der Schriftart "Agency FB" das umgekehrte Problem.
Nutze ich nur "agency fb" als font-family, so zeigt er mir die Schriftart, schreibe ich "agency fb bold", so setzt er das nicht um, schreibe ich hingegen "agency fb fett" (denn so führt Windows den Schriftschnitt), so zeigt er mir den Text unter Chrome in der regulären Agency FB an.

Das erste Problem hier ist also, daß ich als Nutzer kaum wissen kann, wie bei diversen Schriftschnitten die Bezeichnungen lauten, die jetzt für manche Browser funktionieren, wie das zweite Beispiel zeigt, scheint es aber auch dann Probleme mit der Umsetzung zu geben.
Das zweite Problem ist, daß selbst dann der Firefox nicht mit solchen Schriftschnitten umgehen kann.

Dir bleiben also m.E. folgende Möglichkeiten:

1. Ignorier das Darstellungsproblem mit der Arial Narrow und ergänze die Zeile einfach um Ersatzschriftarten.
Auf anderen Browsern wird dann die Arial Narrow gezeigt, auf FF die Ersatzschriftart.

2. Bau eine Browserweiche ein, die den FF etwas anderes zeigen lässt als andere Browser.

Halt, oh nein, viel geiler, ich weiß es.
Gerade noch am Herumexperimentieren gewesen.
Also, ne Browserweiche stellt halt die Möglichkeit, für verschiedene Browser verschiedene Anweisungen zu benutzen.
Die Sache ist, daß es ein CSS-Attribut gibt, daß dir im Firefox die Möglichkeit bietet, die Laufweite von Schrift zu kontrollieren, und sie so z.B. enger oder weiter zu machen.

Du hättest jetzt also eine Browserweiche bauen können, um für den einen Browser die Arial Narrow zu zeigen, für den anderen dann die normale Arial aber eben enger gesetzt, "condensed".
Aber es ist ja viel besser und einfacher, du schreibst einfach folgendes:

font-family: arial narrow, arial, sans-serif;
font-stretch: condensed;

Zuerst mal - "font-stretch" ist das erwähnte Attribut. Das Problem damit ist, daß es von anderen Browsern noch nicht verarbeitet wird, der Firefox kann es aber.
Hingegen haben wir mit der Arial Narrow das Problem, daß sie von anderen Browsern verarbeitet wird, dafür aber vom Firefox nicht.
In diesem Fall addieren sich Problem und Problem zu Lösung! =D
Denn folgendes passiert - der Firefox liest die Anweisungen, kann die Arial Narrow nicht finden/verarbeiten, weicht statt dessen auf die Arial aus. Er erkennt den font-stretch-Befehl und setzt ihn um.
Chrome oder IE finden die Arial Narrow, verstehen aber den font-stretch-Befehl nicht und setzen ihn daher nicht um.
Und das ist perfekt so, weil du somit keine Browserweiche brauchst, das ist quasi eine automatische Browserweiche.

Denn, tadada, ich glaube durchblickt zu haben, wie font-stretch funktioniert. "narrower", "wider", "expanded" und andere funktionieren hier nicht mit der Arial, lediglich "condensed" tut es. Das weist darauf hin, daß FF hier tatsächlich die Laufweite nicht selber berechnet, sondern nachschaut, ob für die verwendete Schriftart ein entsprechender Schriftschnitt vorhanden ist.
Und das bedeutet in diesem Fall, daß der Firefox zur Darstellung so tatsächlich die Arial Narrow verwendet, und die Ergebnisse auf IE, Chrome und Firefox somit identisch sein dürften.

Das hieße dann letztlich m.E. auch, daß Firefox hier nicht der Böse ist, sondern das Vorbild.
Denn wie anfangs erwähnt ist es nicht unproblematisch, überhaupt die Bezeichnung für den Schriftschnitt herauszufinden, der bei IE und Chrome funktioniert, es bringt daher nicht sonderlich viel Sinn, es auf diese Weise zu handhaben.

Also, wie gesagt deine CSS einfach entsprechend abändern, dann dürfte das wieder funktionieren!


PS @Uli: Ich glaube, es geht nur um die Menüzeile ganz oben.

PPS:

Ich korrigiere mich - der Test mit der Agency FB war ok, "font-weight" war nur auf "bold" eingestellt.
Ich habe hier unter Chrome also die Wahl, entweder "font-family: agency fb fett" zu schreiben, oder aber "font-family: agency fb" und zusätzlich "font-weight: bold" zu benutzen.
Was natürlich erstere Variante immer noch völlig unbrauchbar macht, denn wer ein englisches Windows hat, bei dem heißt die Schriftart vermutlich "agency fb bold" und nicht "agency fb fett"; wie gesagt funktioniert bei mir hier nur die deutsche Bezeichnung.
Und wie gesagt ist es mit der Arial Narrow wieder umgekehrt, DA brauche ich dann die englische Bezeichnung, damit es unter Chrome und IE überhaupt läuft...
« Letzte Änderung: 29.06.12, 16:33 by Taschenmogul »

Lairis77

  • Fleet Captain
  • *
  • Beiträge: 9.032
    • Star Trek - Defender
Danke, Taschenmogul. Das könnte es bringen. Probier ich gleich mal aus :).
"Ich habe diese Geschichte nur gepflanzt, aber sie wächst, wie sie will, und alle verlangen, dass ich voraussehe, welche Blüten sie treiben wird." (Cornelia Funke: Tintentod)


Tolayon

  • Lieutenant Commander
  • *
  • Beiträge: 4.517
Ich definiere grundsätzlich nur "Arial, sans-serif" oder "Times New Roman, Times, serif" als Schriftfamilien - damit sollte es eigentlich keine Probleme geben.
Und wenn wir schon bei Schrifttypen sind - für die von einer Schreibmaschine sollte man hinter das "Courier" auch noch "monospace" setzen (gilt das alte <tt>-Tag für dasselbe Schriftbild überhaupt noch? Ich denke nicht, so wie der Trend in den letzten Jahren gelaufen ist).


Was nun Gifs betrifft:
Ich bin ihnen gegenüber etwas gespalten. Einige witzige Animationen lassen sich damit schon basteln, solange man die Beschränktheit des Formats kennt.
Ich verwende die immer noch gute Dienste leistende Uralt-Version 5 des "Ulead Gif Animators", der bietet u.a. gerade bei Vielfarben-Gifs aus 24-Bit-Grundlage eine verlustbehaftete Kompression an, die aber entsprechend auch die optische Qualität beeinträchtigt.

Von den Alternativen ist Flash wirklich auf den absteigenden Ast, zuviele Probleme wegen Störanfälligkeit des Players für virenartigen Code, wohl auch mit ein Grund, weshalb das iPad dieses Format nicht mehr unterstützt.
Das alternative und offene Vektor-Format SVG beinhaltet auch eine Erweiterung für Animationen, aber die Darstellung in den Browsern ist noch nicht optimal.

Taschenmogul

  • Crewman 2nd Class
  • *
  • Beiträge: 225
@Lairis: Los, probier mal aus, ich will wissen, ob ich richtig lag! :)

@Tolayon:

Eigentlich reicht es ja auch völlig, lediglich "sans-serif" bzw. "serif" zu definieren; es sei denn halt, man möchte ein bestimmtes Aussehen.
Problematisch kann es mit Schriften wie Arial oder Times New Roman halt wohl dann werden, wenn du einen Rechner hast, auf dem diese nicht installiert sind. Wie´s bei Apple-Rechnern diesbezüglich aussieht, weiß ich nicht, zumindest unter Linux aber kann das eben passieren (obwohl es die Windows-Schriftarten auch als Linux-Addin gibt).

Bzg. Gifs: Ich bin da indifferent, denn ich halte von animierten Elementen auf Webseiten auch nur bedingt etwas.
Wenn sich im oder am Rande des relevanten Seiteninhalts etwas ständig bewegt, kann ich mich nämlich nicht mehr auf diesen Seiteninhalt konzentrieren. Und wenn es darum geht, Dinge nur kurzzeitig zu animieren, sind Gifs alleine wohl nicht das richtige.

Lairis77

  • Fleet Captain
  • *
  • Beiträge: 9.032
    • Star Trek - Defender
@Taschenmogul:
Die Schrift haut wieder hin. Nur am Zeichenabstand hapert's noch. Jedenfalls in Firefox :/.
"Ich habe diese Geschichte nur gepflanzt, aber sie wächst, wie sie will, und alle verlangen, dass ich voraussehe, welche Blüten sie treiben wird." (Cornelia Funke: Tintentod)


Taschenmogul

  • Crewman 2nd Class
  • *
  • Beiträge: 225
Huch? Meinst du den "font-stretch", oder meinst du wirklich den Abstand zwischen den Zeichen?
Da wäre das "letter-spacing", also halt der Zeichenabstand, für zuständig: http://de.selfhtml.org/css/eigenschaften/schrift.htm#letter_spacing

Tolayon

  • Lieutenant Commander
  • *
  • Beiträge: 4.517
Was mir in letzter Zeit auch aufgefallen ist:

Ohne ein eigenes Icon (wie es von den meisten Browsern in der oberen Zeile links vor der Adresse angezeigt wird) geht heute scheinbar gar nichts mehr.
Früher wurde bei Icon-losen Seiten einfach das Logo des Browsers angezeigt, was noch halbwegs ästhetisch aussah, aber Firefox zeigt da - soweit ich mitgekriegt habe aber erst seit einigen Versionen - nur ein leeres abgerundetes Rechteck.

Von daher:
Ein eigenes Icon macht auf jeden Fall Sinn, sofern man es schafft, eines zu gestalten, das bei den kleinen Maßen ansprechend ist und die "Corporate Identity" der jeweiligen Website unterstützt.

Taschenmogul

  • Crewman 2nd Class
  • *
  • Beiträge: 225
Ja, macht schon was her, ist außerdem eigentlich auch wirklich nicht so schwer.
Der Grund dafür, daß ich das für leicht halte, ist, daß bei der kleinen Auflösung eigentlich sowieso fast nichts zu machen ist. Wichtig ist eigentlich nur, daß man das Icon visuell von anderen unterscheiden kann. Das SMF-Standardicon hier für´s Forum ist z.B. nichtssagend und kaum zu erkennen (irgendwie ne Wippe auf ner Pyramide oder so), es tut trotzdem seinen Zweck.

Max

  • Mod
  • Rear Admiral
  • *
  • Beiträge: 18.429
  • Adagio non molto
    • http://home.arcor.de/epgmm_trip/ST-BSB-09.html
Wie implementiert man ein Icon dann, sodass es angezeigt wird? Newbie-Frage, ich weiß :D

Tolayon

  • Lieutenant Commander
  • *
  • Beiträge: 4.517
Einfach als "favicon.ico" im Hauptverzeichnis des Webspaces abspeichern.

Wenn ich mich nicht irre, kann man Unterverzeichnissen auch noch eigene Favicons zuweisen, indem man sie dann dort abspeichert - unter denselben Namen, also Vorsicht, dass da nichts durcheinander gerät!

Max

  • Mod
  • Rear Admiral
  • *
  • Beiträge: 18.429
  • Adagio non molto
    • http://home.arcor.de/epgmm_trip/ST-BSB-09.html
Einfach als "favicon.ico" im Hauptverzeichnis des Webspaces abspeichern.

Wenn ich mich nicht irre, kann man Unterverzeichnissen auch noch eigene Favicons zuweisen, indem man sie dann dort abspeichert - unter denselben Namen, also Vorsicht, dass da nichts durcheinander gerät!
Super! Vielen Dank für die Information :)

darett

  • Master Chief Petty Officer
  • *
  • Beiträge: 782
  • das glück bevorzugt den der vorbereitet ist
Zum Thema Favicons.
Da gibt es einen netten Generator. Habe ihn allerdings noch nicht gebraucht, da ich die Icons mit PS erstelle.

http://www.favicon-generator.de/
 
Fügt anschließend in Webseiten den folgenden Link zwischen <head> und </head> ein.

Beispiel 1: (Relative Adresse)
<link rel="SHORTCUT ICON" href="../icons/favicon.ico" type="image/x-icon">

Beispiel 2: (Absolute Adresse)
<link rel="SHORTCUT ICON" href="http://www.ihreseite.de/favicon.ico" type="image/x-icon">

So müsste es gehen bei euch.
Bei mir geht es.


Über Feedback würde ich mich freuen.

David

  • Commodore
  • *
  • Beiträge: 10.689
    • mein deviantART
Hoho.

Ich habe heute einige Fehler auf meiner persönlichen Präsenz im World Wide Web (Homepage) ausgebessert.
falsche Links und ein fehlerhaft dargestelltes Menü auf einer der Unterseiten.

Hätte nicht gedacht, dass mir das gelingt, ich hatte schon befürchtet, ich zerschiesse mir damit die ganze Seite.
Aber es hat gefunzt.

So langsam komme ich mit html und php Code besser zurecht.

Max

  • Mod
  • Rear Admiral
  • *
  • Beiträge: 18.429
  • Adagio non molto
    • http://home.arcor.de/epgmm_trip/ST-BSB-09.html
Ja, solche Dinge austüfteln zu können, kann schon auch Spaß machen :)

 

TinyPortal © 2005-2019