[salnet]

Hallo Forum,

am einfachsten lässt sich mein Problem mit einem Bild darstellen:


Das erste Bild zeigt mein Menü mit einer Auflösung von 1280x1024 - alles ok.
Das zweite Bild zeigt mein Menü mit einer Auflösung von 1024x768 - die Abstände zwischen den einzelnen Menüelementen ist in Ordnung, allerdings der automatische Zeilenumbruch durch die kleinere Auflösung solle so sein wie in Bild 3.

Mein Stylesheet:

.menusubitem
{
	margin: 0 0 0 1em;
	font-size: 9pt;
	font-family: sans-serif;
	line-height: 2em;
	color:#000000;
}

Der HTML-Code sieht wie folgt aus:

<div class="menusubitem"><a href="#">erweiterte Suche</a></div>
<div class="menusubitem"><a href="#">eigene Beiträge</a></div>
<div class="menusubitem"><a href="#">neue Beiträge</a></div>
<div class="menusubitem"><a href="#">unbeantw. Beiträge</a></div>
<div class="menusubitem"><a href="#">aktive Themen</a></div>

Hat jemand eine Idere, wie ich den Soll-Zustand hinbekommen kann?

Viele Grüße,
salnet

[heiko_rs]

Stelle das Ganze als Liste dar, siehe FAQ (oberster Thread) "CSS-Prolog", verwende eine kleinere line-height ohne Einheit (verhindert Vererbungsprobleme) und gib den li margin/padding für die Abstände zwischen den einzelnen Punkten. Und verwende nicht pt für den Bildschirm, sondern px (unschön, da im IE nicht vergrößerbar) oder em (ideal).

[salnet]

Hallo Heiko,
danke für deine Vorschläge. Den FAQ habe ich schon gelesen, aber ich wollte mein ganzes Design nicht komplett neu machen.

Habe jetzt alles auf li umgebaut, aber das Grundproblem besteht immer noch (es sieht alles noch so aus wie auf dem Bild oben - Cache ist geleert).

Mein Stylesheet:

.menusubitem
{
	margin: 0 0 0 1em;
	font-size: 9pt;
	font-family: sans-serif;
	line-height: 2;
	list-style: none;
	color:#000000;
}

Der HTML-Code sieht wie folgt aus:

<ul class="menusubitem">
<li><a href="#">erweiterte Suche</a></li
<li><a href="#">eigene Beiträge</a></li>
<li><a href="#">neue Beiträge</a></li>
<li><a href="#">unbeantw. Beiträge</a></li
<li><a href="#">aktive Themen</a></li>
<ul>

[heiko_rs]

Wie gesagt:

Zitat von heiko_rs

verwende eine kleinere line-height

Ich nehme meist 1.5.

[salnet]

Danke, habe es jetzt so gelöst:
Mein Stylesheet:

.menusubitem
{
	margin: 0 0 0 1em;
	font-size: 9pt;
	font-family: sans-serif;
	line-height: 1.5;
	margin-bottom: 6px;
	list-style: none;
	color:#000000;
}

Der HTML-Code sieht wie folgt aus:

<ul class="menusubitem">
<li style="margin-top: 3px"><a href="#">erweiterte Suche</a></li>
<li><a href="#">eigene Beiträge</a></li>
<li><a href="#">neue Beiträge</a></li>
<li><a href="#">unbeantw. Beiträge</a></li
<li><a href="#">aktive Themen</a></li>
<ul>

[EvT]

Salnet, wenn dir eine weitgehendst identische Darstellung auf den unterschiedlichen Rechnersystemen wichtig ist, ist es sehr sinnvoll auf Points (pt) für die Bildschirmdarstellung zu verzichten, da sie von Betriebssystem zu Betriebssystem unterschiedlich angezeigt werden.

Als Erklärung: Windows arbeitet in den Standardeinstellungen mit 96dpi für die Bildschirmdarstellung, auf Linux- oder Mac-Rechnern liegt dieser Wert bei 72dpi. Diese Standardeinstellung kann zumindest unter Windows vom User im weiten Umfang verändert werden. Hinzu kommen unterschiedliche Interpretationen in verschiedenen Browsern.

Wie Points am Bildschirm dargestellt werden, zeigt auch die folgende Tabelle:

Mac ( 72ppi) => 1pt = 1px => font-size: 9pt = 9px
Win ( 96ppi) => 1pt = 1,33px => font-size: 9pt = 12px
Win (120ppi) => 1pt = 1,66px => font-size: 9pt = 15px

[salnet]

Zitat von EvT

Wie Points am Bildschirm dargestellt werden, zeigt auch die folgende Tabelle:

Mac ( 72ppi) => 1pt = 1px => font-size: 9pt = 9px
Win ( 96ppi) => 1pt = 1,33px => font-size: 9pt = 12px
Win (120ppi) => 1pt = 1,66px => font-size: 9pt = 15px

Hallo EvT,
interessant.
Wie sieht das aus, wenn ich als font-size: 9px angebe. Wird die dann bei allen dpi als 9px angezeigt?

[Geronimo]

Zitat von salnet

Wird die dann bei allen dpi als 9px angezeigt?

Ein Pixel entspricht immer einem Pixel. Es sei denn der Benutzer vergrößert den Schriftgrad.

[hubspe]

Hi,

Zitat von salnet:
Wie sieht das aus, wenn ich als font-size: 9px angebe. Wird die dann bei allen dpi als 9px angezeigt?

9px. willst du der User mit ner Lupe arbeitet um alles lesen zu können.

IE-User können damit noch nicht einmal die Schrift vergrößern (siehe Heikos Beitrag!).

Gruß
Klaus