HTML-CSS-Weiche für Windows/Mac-OS

[mangodrone]

Guten Abend

Zum Grundproblem: Ich möchte eine ganz einfache Menubar mit Schriftsatz Times, serif mit HTML und CSS erstellen. Dabei sind die Menuoptionen nacheinander in einem div-Container geschrieben mit ein paar Leerschlägen zwischen den Optionen. Um die Navbar passgenau zu machen, habe ich die font-size entsprechend gewählt. Das Problem ist nun, dass auf Mac und Windows der "Text", also die Menuoptionen-Zeichenkette, unterschiedlich lang ist; vermutlich weil Mac und Windows nicht den gleichen Times-Schriftsatz nehmen.

Es gibt viel Material auf dem Netz (auch hier) mit PHP, JavaScript oder HTML wie man Browser-Weichen stellen kann. Gibt es denn eine Möglichkeit z. B. mit PHP auch eine "OS-Weiche" zu definieren? Dass bspw. per PHP-echo die font-size auf dem Mac mit 20px, auf Windows mit 21px ausgegeben wird?

HTML-Code-Auszug:
<font style="font-size:21px">

<font color="#790905">HOME</font>

&nbsp;&nbsp;&bull;&nbsp;&nbsp;

BISTRO

&nbsp;&nbsp;&bull;&nbsp;&nbsp;

KUECHE

[...]

</font>

Vielen Dank und Gruss
mangodrone

[ChrisB]

Hi,

Ich möchte eine ganz einfache Menubar mit Schriftsatz Times, serif mit HTML und CSS erstellen. Dabei sind die Menuoptionen nacheinander in einem div-Container geschrieben

Setze eine Navigation bitte sinnvoll als Liste um.

mit ein paar Leerschlägen zwischen den Optionen.

Setze Formatierungen bitte sinnvoll per CSS um.

Um die Navbar passgenau zu machen, habe ich die font-size entsprechend gewählt.

Passgenau zu was?

Das Problem ist nun, dass auf Mac und Windows der "Text", also die Menuoptionen-Zeichenkette, unterschiedlich lang ist; vermutlich weil Mac und Windows nicht den gleichen Times-Schriftsatz nehmen.

Wieso ist das ein Problem?

Es gibt viel Material auf dem Netz (auch hier) mit PHP, JavaScript oder HTML wie man Browser-Weichen stellen kann.

Und die wenigsten davon sind auch nur ansatzweise sinnvoll.

HTML-Code-Auszug:
<font style="font-size:21px">

Pfui-bah & siehe oben - nutze bitte ausschliesslich CSS für Formatierungen, aufsetzend auf HTML, das die Inhalte sinnvoll strukturiert.

MfG ChrisB

[mangodrone]

Setze eine Navigation bitte sinnvoll als Liste um.

Was meinst du mit Liste?

Passgenau zu was?

Passgenau zum div-Wrapper.

Wieso ist das ein Problem?

Weil bei einem Windows-System die Menubar momentan "passgenau" ist, sprich die richtige Länge hat, und bei Mac-Systemen die Zeichenkette über den Rand hinaus verläuft.

Pfui-bah & siehe oben - nutze bitte ausschliesslich CSS für Formatierungen, aufsetzend auf HTML, das die Inhalte sinnvoll strukturiert.

Ich kann problemlos ein Menu in JavaScript oder mit CSS darstellen ohne diese Probleme. Aber der Sinn und Zweck (auch von mir mal experimentell) war wirklich eine "einfache" Menubar zu erstellen - ohne grossen Scriptteile in CSS oder JavaScript.

Gruss
mangodrone

[Auge]

Hallo

Setze eine Navigation bitte sinnvoll als Liste um.

Was meinst du mit Liste?

Na eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste, die mit CSS ihr http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Aussehen bekommt.

Passgenau zu was?

Passgenau zum div-Wrapper.

... so, wie er *bei dir* dargestellt wird, was woanders (unabhängig vom OS) nicht der Fall sein muss.

Wieso ist das ein Problem?

Weil bei einem Windows-System die Menubar momentan "passgenau" ist, sprich die richtige Länge hat, und bei Mac-Systemen die Zeichenkette über den Rand hinaus verläuft.

... so, wie er *bei dir* dargestellt wird, was woanders (unabhängig vom OS) nicht der Fall sein muss.

Pfui-bah & siehe oben - nutze bitte ausschliesslich CSS für Formatierungen, aufsetzend auf HTML, das die Inhalte sinnvoll strukturiert.

Ich kann problemlos ein Menu in JavaScript oder mit CSS darstellen ohne diese Probleme.

Auch mit JavaScript würde HTML-Code generiert werden, womit du an der gleichen Stelle wärst. Du kannst nicht erwarten, dass HTML überall gleich gerendert wird. Dazu ist HTML im übrigen auch nicht da.

Tschö, Auge

[mangodrone]

Na eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste, die mit CSS ihr http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Aussehen bekommt.

Ich verstehe. Werde mir das mit der Liste ansehen.

Trotzdem noch interessenshalber: Gibt es denn eine Möglichkeit mit PHP das OS herauszufinden?

Gruss
mangodrone

[Cheatah]

Hi,

Trotzdem noch interessenshalber: Gibt es denn eine Möglichkeit mit PHP das OS herauszufinden?

nein. Und es würde Dir auch absolut nichts bringen, weil die Schriftdarstellung auf einem Windows XP SP3 anders ist als auf einem Windows XP SP3, auch wenn der Browser der selbe ist.

Cheatah

[Der Martin]

Hallo,

Und es würde Dir auch absolut nichts bringen, weil die Schriftdarstellung auf einem Windows XP SP3 anders ist als auf einem Windows XP SP3, auch wenn der Browser der selbe ist.

... denn die endgültige Darstellung der Schrift hängt nicht nur davon ab, ob eine bestimmte Schriftart beim Client überhaupt verfügbar ist, sondern auch von den Eigenheiten und Einstellungen des Grafikkartentreibers sowie davon, ob eine Schriftenglättung aktiviert ist, und selbstverständlich von den Einstellungen des Browsers bezüglich Schriftartauswahl und -ersetzung.

(Das nur als Ergänzung zu deinem korrekten, aber seltsam anmutenden Beitrag.)

So long,
 Martin

[Der Martin]

Hallo,

Trotzdem noch interessenshalber: Gibt es denn eine Möglichkeit mit PHP das OS herauszufinden?

nein. Du bekommst mit PHP nur das mit, was dir der Client freiwillig erzählt. Es gibt in HTTP den User-Agent-Header, den du mit PHP auch im entsprechenden Eintrag von $_SERVER[] abfragen kannst. Was dir der Client darin erzählt, *kann* stimmen, muss aber nicht; der Eintrag muss nicht einmal vorhanden sein.
Und bei vielen Browsern kann man ihn nach Belieben einstellen. Ich könnte mich also, obwohl ich einen uralten IE5.5 unter Windows benutze, mühelos als Firefox 3.5.6 unter Ubuntu Linux ausgeben.

Du erkennst die Zuverlässigkeit dieser Information?

Ciao,
 Martin

[ChrisB]

Hi,

Passgenau zu was?

Passgenau zum div-Wrapper.

Gut - der entfällt ja sowieso, wenn du es als Liste umsetzt.
Problem also ab dann nichtexistent :-)

Wieso ist das ein Problem?

Weil bei einem Windows-System die Menubar momentan "passgenau" ist, sprich die richtige Länge hat, und bei Mac-Systemen die Zeichenkette über den Rand hinaus verläuft.

Warum gibst du denn überhaupt eine „Länge” (du kannst eigentlich nur Breite oder Höhe meinen, also benutze bitte auch den passenden Begriff) vor - anstatt dass du das ganze sich an den Platzbedarf des Inhaltes anpassen lässt?

MfG ChrisB

[Gunnar Bittersmann]

@@mangodrone:

nuqneH

Wieso ist das ein Problem?
Weil bei einem Windows-System die Menubar momentan "passgenau" ist, sprich die richtige Länge hat, und bei Mac-Systemen die Zeichenkette über den Rand hinaus verläuft.

Willkommen im WWW.

Du irrst schon, wenn du denkst, dass bei einem Windows-System (lies: bei jedem Nutzer) dein Menü passgenau wäre.

Was, wenn ein Nutzer die von dir angegebene Schriftart nicht installiert hat und eine andere verwendet wird, die eine größere Laufweite hat? Was, wenn ein Nutzer in seinem Browser eine Mindestschriftgröße angegeben hat und die Schrift bei ihm größer dargestellt wird als du vorgesehen hattest?

Gestalte dein Menü so, dass es sich den Erfordernissen beim Nutzer anpasst. Oder verwende Textgrafiken (Image-Replacement-Techniken).

Qapla'

[Joachim]

Hi,

Um die Navbar passgenau zu machen, habe ich die font-size entsprechend gewählt.

Ernsthaft: Du solltest Dich von dieser Philosophie trennen. Es gibt kein "passgenau" im Web. Du weisst _nie_, welche Schrift wirklich beim Client verfügbar ist, und jede Schrift läuft anders. Das hat auch nix mit dem OS zu tun.

Ich betreibe ein kleines Kletterforum, dass im Opera Mini fast genauso aussieht wie auf meinem Mac, nur kleiner ;-) und zwar ohne Weiche. Das sollte Dein Ziel sein.

Gruesse, Joachim