[CaptainGerrard]

Hallo,

ich habe bei einem Projekt ungefähr folgende Menüstruktur:

responsive-menü - jsFiddle

Wenn sich die Seitenbreite unter der max-width befindet, sollte auch das Menü angepasst werden.

Mein Ziel ist es, die Abstände der Menüpunkte dynamisch zu ändern (bis eventuell nur mehr ein minimaler Abstand von ein paar px gegeben ist).

Dies sollte soweit möglich sein, bis eben mein Menü (durch einen media query) anders dargestellt wird.

Leider erhalte ich durch oben genanntes CSS kein befriedigendes Ergebnis, meine Frage, wie kann man dies besser lösen?

Ausgegangen wird bei einer Seitengesamtbreite von 990px, die Menüleiste ist 100% breit, die einzelnen Menüpunkte haben links und rechts einen Padding in %.

Danke

[explanator]

Folgende Fehler:

* {line-height:1em;}

Die Zeilenhöhe sollte grösser sein als die Schrift, sonst klebt jede Zeile direkt unter der darüberliegenden. Das kann dann kein Mensch vernünftig lesen. Verwende einen praktikablen Wert, irgendwas zwischen 1.3 und 1.7em.

body {
	font-size: 68.75%;
}

Die optimale Schriftgrösse als Ausgangsgrösse ist 1em, bei kleineren Angaben muss der Benutzer immer zoomen.

Wenn du anderen Elementen eine andere Grösse zuweisen willst kannst du das gerne machen, indem du die Elemente direkt ansprichst oder über eine ID bzw. Klasse.

.wrapper {
	max-width: 990px;
	margin: 0 auto;
}

Der Wrapper bezieht sich nur auf das Menü und ist eigentlich überflüssig, da du das erste UL-Element ebenso verwenden kannst. Vergib dazu eine aussagekräftige ID wie Navigation oder Menue und übernimm die Eigenschaften des Wrappers für dieses UL.

Die Max-width Eigenschaft ist hier schlecht gewählt. Wenn du das Menü 990px Breit haben willst, dann nimm eine Breite von 990 px. Über Media-Queries steuert du das Verhalten bei unterschiedlichen Darstellungsmodi der Browser.

Sollte deine ganze Seite 990px breit sein, solltest du dein Konzept überdenken. Nutze den vollen Darstellungsbereich oder wähle einen zeitgemässen Wert.

ul.dropdown > li {
	position: relative;
	display: inline-block;
	margin: 0 0 0 -2px;
}

Der Linke Abstand der Menüpunkte ist hier mit 2px angegeben.
Du kannst hier, wenn du dich nicht auf eine feste Breite des gesamten Menü festlegst, auch einen prozentualen Wert angeben und passt dann die Abstände flexibel zur Fenstergrösse(Viewport) an.

ul.dropdown > li {
	padding: 12px 16px 11px;
	background: #CFCFCF;
}

Entgegen deiner Aussage sind die Innenabstände der Menüblöcke nicht pronzentual sondern fix mit Pixel angegeben.

ul.dropdown > li > a {
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	color: #232A33;
	font-size: 1.091em; /* 12px */
}

Die Schriftgrösse 1.091em soll 12 Pixeln entsprechend. Bitte Lösche den Kommentar, diese Aussage ist falsch. Lese bei Wikipedia über Punktdichte nach.

[CaptainGerrard]

ich weiß jetzt gar nicht wo ich anfangen soll, aber ich schreibe dennoch auf alle deine Punkte eine Antwort:

1. line-height: 1em: diese ist gewollt und in Ordnung, da bei allen anderen Elementen wo der Text mehrzeilig sein kann, die line-height erhöht wird.

2. body font-size: 68.75%: dient als Ausgangslage, sind 11px (da von 16px ausgegangen wird), ist also auch richtig so.

3. Seitenbreite 990px: ist ebenfalls korrekt, da bei diesem Projekt Bilder in 990px Breite Pflicht sind und die Seite keinesfalls breiter sein darf!!!!

4. das -2px hebt den Standardabstand von display: inline-block auf (eine andere Idee hatte ich nicht), da der display: inline-block Abstand im IE aber nicht 2, sondern 3px sind, bin ich wieder auf float: left umgestiegen.

5. die 16px beim li sind natürlich Quatsch von mir, sorry, ich habe das auf 1% umgestellt, das war eben meine ursprüngliche Frage, da passen sich die Abstände nicht dynamisch an bei mir (habe das im jsFiddle geupdatet).

6. Die Schriftgröße von 1.091em dient als Hilfe für spätere Anpassungen, und bei einem Ausgangswert von 16px (Browser-Standard) und davon 68.75%, sind 1.091em sehr wohl 12px!!!

Doch um nicht ganz aus den Fugen zu kommen, stelle ich hier noch einmal meine Frage:

Wie schaffe ich es, dass die Abstände der einzelnen Menüpunkte sich von einem gewissen Wert, bis auf minimal 1px verkleinern?
Ich will je nach vorhandener Fläche meine Menüpunkte bzw. deren Abstand so klein wie möglich halten.

[explanator]

Ehrlich gesagt habe ich kein Lust auf Diskussionen.
Wenn du eh alles besser weist warum fragst du dann hier nach Hilfe?

Für mich hat sich das Thema hiermit erledigt. Vielleicht hilft dir ja jemand anderes.

[CaptainGerrard]

Es geht nicht um etwas besser wissen, ich wollte nur aufschlüsseln warum es zu dem Code kam und warum diese Dinge (in meinen Augen) Sinn machen.

Du brauchst nicht in jedem Thread antworten, wenn du nicht Lust und Gedult dazu hast, auch in anderen Themen schriebst du schon ähnliche Antworten, dass du keine Lust hast dir den Code genau anzuschauen etc.! Dann lass es bleiben und Antworte wenn es dem Themenersteller auch hilft und nicht nur damit deine Beitragszähler erhöht werden.

Auf meine ursprüngliche Frage, bist du nämlich überhaupt nicht eingegangen, deshalb finde ich deine Beiträge in diesem Thread bis jetzt auch relativ sinnlos.

Danke

[heiko_rs]

Zitat von explanator

Verwende einen praktikablen Wert, irgendwas zwischen 1.3 und 1.7em.

line-height am besten ohne Einheit, verhindert Vererbungsprobleme.

Zitat von CaptainGerrard

body font-size: 68.75%: dient als Ausgangslage, sind 11px (da von 16px ausgegangen wird)

Ist aber nur bedingt sinnvoll, da 1em nicht mehr 11px ist, wenn ein Vorfahre z.B. 2em hat (anders wäre das natürlich bei der Einheit rem).

Zitat von explanator

das -2px hebt den Standardabstand von display: inline-block auf

Aber nur Pi-mal-Daumen und bei Textzoom geht es eh den Bach runter. Näher dran wäre .25em, aber das taugt auch hier nix. Sollen die Abstände wirklich auf Null, entferne die Whitespaces (geht auch per Kommentar).

Zitat von CaptainGerrard

Wie schaffe ich es, dass die Abstände der einzelnen Menüpunkte sich von einem gewissen Wert, bis auf minimal 1px verkleinern?

Kannst Du doch per media query festlegen.

[CaptainGerrard]

Danke für deine Antwort.

Ich habe es jetzt mit display: table (auf das UL) und display: table-cell (auf die LI's) gelöst.
Mein Padding links und rechts (von 3px) wird jetzt als "Minimal-Padding" aufgenommen. Ist mehr Platz, so teilt sich der Padding automatisch auf, das war zwar ursprünglich nicht meine Denkweise, doch entspricht genau meiner Lösung die ich mir vorgestellt habe.

Dadurch hat sich zwar ein weiteres Problem hervorgehoben, nämlich funktioniert im Firefox das relative positionieren auf table-cell Elemente nicht (was bei meinen Untermenüpunkten Auswirkung hat), dies habe ich jedoch mit jQuery lösen können.

Media Queries kommen schon auch in Spiel, aber wenn ich, wie bisher, fixe px Werte als Padding verwendet hätte, hätte ich bei meinem horizontalen Menü relativ viele Media Queries einsetzen müssen, was ich nicht als vorteilhaft sehe.

LG

[fricca]

edir: Tja, jetzt will ich absenden und merke, dass ich zu lange geschrieben habe. Angefangen habe ich vor Heikos Post -- ich lass jetzt trotzdem mal alles so stehen:

Zitat von CaptainGerrard

Es geht nicht um etwas besser wissen, ich wollte nur aufschlüsseln warum es zu dem Code kam und warum diese Dinge (in meinen Augen) Sinn machen.

In anderer Augen ergeben viele Dinge aber keinen Sinn. Manchmal lohnt es sich, diesen anderen zuzuhören -- auch, wenn man eigene Ansichten dadurch ändern müsste (oder vielleicht gerade dann).
Ich versuch's nochmal:

Zitat von CaptainGerrard

1. line-height: 1em: diese ist gewollt und in Ordnung, da bei allen anderen Elementen wo der Text mehrzeilig sein kann, die line-height erhöht wird.

Du möchtest deinen Gartenzaun weiß streichen, zwei von den ingesamt 10 Pfosten sollen rot werden. Deshalb streichst du jetzt den ganzen Zaun erstmal rot und überstreichst dann alles bis auf die zwei Pfosten nochmal weiß.
Ist das wirklich sinnvoll?

Mehr Lesetoff zu sinnvoller line-height: Eric's Archived Thoughts: Unitless line-heights

2. body font-size: 68.75%: dient als Ausgangslage, sind 11px (da von 16px ausgegangen wird), ist also auch richtig so.

Vor inzwischen fast 10 Jahren kam Richard Rutter auf die Idee, man könnte für font-size im body 62.5% angeben, dann hätte man 10px als Rechenbasis für weitere em-Werte. Klingt erstmal gut, hat sich aber nicht als praktikabel erwiesen. Nur ein paar wenige Gründe:
- Schriftgrößen in em beziehen sich immer auf den Vorfahren. Man muss also trotzdem rechnen, sobald nicht mehr body der Bezugspunkt ist.
- User, die ein Userstylesheet verwenden, in dem body {font-size:100%!important} steht, bekommen eine "etwas" aufgeblasene Website zu sehen (Ja, User machen sowas -- weil sie Fitzelschriften nicht lesen können).
Ein bischen aktueller Lesestoff dazu z.B.: How we learned to leave default font-size alone and embrace the em | Filament Group, Inc., Boston, MA

Dein Wert hat noch nicht einmal den Vorteil, dass man damit leichter rechnen kann. Der Sinn erschließt sich also wirklich nicht.
Solltest du wirklich "11px" als Grundschriftgröße für Fließtext verwenden wollen, sei noch gesagt: Das ist zu klein. iPad mini schonmal in der Hand gehabt?

Die Zukunft wird wohl "rem" heißen, doch im Moment ist es das sinnvollste, wenn man als Grundgröße 100% verwendet (nicht 1em, denn der Vergrößerungsbug besteht bis in neuere IE-Versionen fort)

3. Seitenbreite 990px: ist ebenfalls korrekt, da bei diesem Projekt Bilder in 990px Breite Pflicht sind und die Seite keinesfalls breiter sein darf!!!!

Auch mit 4 Ausrufezeichen erschließt sich das nicht. Wenn Bilder eine bestimmte Breite haben sollen -- was hat das dann mit der gesamten Seite zu tun?
Da du im Threadtitel das Wort "responsive" verwendest: Es gibt auch "responsive images".

Niemand hier weiß, was das mal werden soll. Wir sehen nur ein Mini-Fragment -- und nur darauf können wir uns beziehen. Von diesem allgemeinen Standpunkt aus gesehen, sind feste Pixelangaben für Seitenbreiten nicht mehr zeitgemäß.

4. das -2px hebt den Standardabstand von display: inline-block auf (eine andere Idee hatte ich nicht), da der display: inline-block Abstand im IE aber nicht 2, sondern 3px sind, bin ich wieder auf float: left umgestiegen.

Dieser Abstand ist nicht zwei Pixel und nicht drei Pixel -- sondern der Wortabstand. Und der wiederum ist abhängig von der Schriftgröße.
Wenn man also in der Richtung etwas anpassen wollte, dann sind em die richtige Wahl.

6. Die Schriftgröße von 1.091em dient als Hilfe für spätere Anpassungen, und bei einem Ausgangswert von 16px (Browser-Standard) und davon 68.75%, sind 1.091em sehr wohl 12px!!!

Man verwendet em als Einheit für die Schriftgröße, weil man Rücksicht auf die Einstellung des Users nehmen will, und weil man heutzutage nicht mehr davon ausgehen kann, dass dieser Default-Wert 16px ist. Z.B. irgendein Kindle hat 26px (oder so) als Defaultgröße. Wer weiß, was da noch kommt.
Sobald der User in seinem Browser die berühmten 16px ändert, ist es ohnehin vorbei mit der pixelgenauen Rechnerei.
Es sind demnach Verhältnisse, von denen man ausgehen muss -- keine festen Pixelgrößen. (Deshalb funktioniert z.B. auch eine 35px-Höhe für etwas, das Text enthält, nicht.)

Noch ergänzend zu dem, was explanator schon geschrieben hat:

• Der globale Reset von Abständen ist schon nicht empfehlenswert (siehe FAQ, ganz am Anfang) -- border:0 ist tödlich, wenn Formularelemente vorkommen.
• Was soll das target-Attribut? Arbeitest du mit Frames?
• Warum haben die Links ein title-Attribut, in dem der Linktext wiederholt wird? Wem soll das nützen?

Wie schaffe ich es, dass die Abstände der einzelnen Menüpunkte sich von einem gewissen Wert, bis auf minimal 1px verkleinern?
Ich will je nach vorhandener Fläche meine Menüpunkte bzw. deren Abstand so klein wie möglich halten.

Mit selbst angegebenen Abstandswerten geht das nicht, denn die Länge der Menüpunkte ist unbekannt, da abhängig von der Textlänge.
Wenn ich dich richtig verstanden habe, möchtest du, dass sich dein Menü gleichmäßig über die verfügbare Breite verteilt. In Zukunft werden wir sowas mal mit Flexbox machen. Im Moment wäre ein erzwungener Blocksatz wohl noch der praktikablere Ansatz.
Ich hatte vor einiger Zeit Ansätze dazu gepostet: http://xhtmlforum.de/68482-server-on...tml#post523146
(Die drei Links dort unterscheiden sich nur in der Angabe zum meta charset -- ist also egal, welchen du aufrufst)
Das Grundprinzip liegt darin, mit einem generierten Element eine zweite Zeile zu erzeugen und so den Blocksatz in der ersten zu erzwingen.

[CaptainGerrard]

Mir ist jetzt nicht ganz klar, warum ich 100% als Schriftgröße verwenden sollte?
Ich habe lt. Designvorlage bei Schriftar "Tahoma" 11px (Desktop), meine 68.75% sind (von den 16px) 11px.
Wenn jemand mit einem anderen Wert als 16px Standard fährt, passt sich das ja eh alles an, oder denke ich falsch?

[fricca]

Zitat von CaptainGerrard

Mir ist jetzt nicht ganz klar, warum ich 100% als Schriftgröße verwenden sollte?

Weil das der einzige Wert ist, bei dem man nicht ungewollt danebenschießen kann. Hab ich doch oben schon beschrieben (und einen Link gepostet).

Ich habe lt. Designvorlage bei Schriftar "Tahoma" 11px (Desktop), meine 68.75% sind (von den 16px) 11px.

Das ist dann eine untaugliche Vorlage. Zeig dem Vorleger doch mal, was an einem iPad Mini davon übrigbleibt.
(Ja, ich weiß, dass man gegen Grafiker-Vorlagen manchmal wenig machen kann. Aber man sollte es wenigstens versuchen -- den Kunden ist es dann doch meist wichtiger, dass ihre Inhalte lesbar sind.)

Wenn jemand mit einem anderen Wert als 16px Standard fährt, passt sich das ja eh alles an, oder denke ich falsch?

Wenn jemand ein Userstylesheet verwendet: Siehe oben. Außerdem resultieren aus diesem Grundwert derart krumme em-Werte, dass es doch auch nicht in deinem Interesse sein kann, sowas einzusetzen.

Die 990px in der Breite passen sich übrigens nicht an. Die Menüpunkte aber beispielsweise schon.