Verknüpfung von Selektoren

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

kann mir jemand sagen, warum im folgenden Beispiel die Angabe für „line-height“ unterschiedlich interpretiert wird, je nachdem ob ich die Klassen „button“ und „rechts“ verschachtelt oder verknüpft aufrufe:

http://www.loaditup.de/files/687907_n59fnzsagh.html (STRG+U für Quelltext)

Leider kann ich den Quelltext nicht direkt auf wer-weiss-was posten, da mir meine Links trotz PREHTML umgewandelt werden.

Hinweis: Ich habe diese Frage bereits in einem anderen Forum gestellt, habe aber leider keine sachdienlichen Antworten erhalten.

Vielen Dank!

#2

Es hat nichts mit der line-height zu tun. Die unterschiedlichen Abstände der Schaltflächen wird durch den div Container hervorgerufen. Der Div-Container ist ein Blockelement und wird daher anders gerendert als ein Nicht-Blockelement. Der Link passt sich etwas in den Container ein, wenn man so möchte.

Eine Möglichkeit den Unterschied zu eliminieren wäre z. B. die Elemente mit der Klasse .button in ein Blockelement zu verwandelt.
Dafür „display:block;“ zu den CSS-Regeln ergänzen.

#3

Danke für die Info, das ist ein interessanter Hinweis. Ich habe nun „display:block“ in die Klasse „button“ eingefügt. Jetzt ändert sich allerdings die Größe des oberen Buttons (im DIV Container).

Ich möchte in erster Linie, dass meine Buttons immer gleich aussehen, egal ob rechts umflossen oder nicht.

#4

Moin,

die Frage stellt sich ja, warum Du Deinen ersten Link als „Gruppe“ auszeichnest, ohne dass Du eine Gruppe hast. Hier ist ja der HTML-Code schon falsch bzw. widersprüchlich, wenn man beide Beispiele anschaut.

Bevor man CSS-Probleme angeht, sollte immer der HTML-Code stimmen. Was bringt es, wenn man den CSS-Code für einen fehlerhaften HTML-Code anpasst, dann den HTML-Code korrigiert, um festzustellen, dass sich dann wieder alles anders verhält?

Eine Klasse „rechts“ ist übrigens kontraproduktiv. Man sollte auch bei Klassennamen darauf achten, Inhalt und Layout immer strikt voneinander zu trennen und auch bei ID/Klassennamen nur Namen mit einer semantischen Bedeutung benutzen. Das macht einem das Leben erheblich leichter.

Außerdem ist mir aufgefallen, dass beim line-height die Einheit fehlt, damit sich die Ergebnisse schonmal undefiniert.
In Hinsicht auf Barrierefreiheit würde ich mir aber überlegen, warum der Text in den Buttons kleiner ist als 1em. Das könnte dem Nutzer Probleme bereiten, Buttons sind ja nicht nur Zierde, sondern wichtig.

Dein Problem hat IMHO übrigens mit der Einheit em zu tun (die ja richtig und gut gewählt ist!).

Beim Beispiel 1 hast Du erst ein div, das die font-size auf 75% setzt. Darauf beziehen sich dann die padding:0.75em des Buttons. Also hast Du hier 75% von 75% von der Originalschriftgröße.

Beim Beispiel 2 hast Du die Schriftgröße auf 75% vom Original und den Abstand auch auf 75% vom Original. Deswegen ist der erste Button kleiner.

Okay?

Liebe Grüße,
-Efchen

#5

Nachtrag:

Solche Dinge siehst Du schon mit Firebug (Add-On). In der Layoutansicht siehst Du, dass Deine Abstände in beiden Buttons unterschiedlich groß sind. Wenn Du dann in Deinem Code siehst, dass beide eigentlich 0.75em sind, dann muss Dir daraus klar werden, dass beide von unterschiedlichen Referenzwerten ausgehen.

Grüße,
-Efchen

#6

Moin,

Leider kann ich den Quelltext nicht direkt auf wer-weiss-was
posten, da mir meine Links trotz PREHTML umgewandelt werden.

Keine Angst. Den Link zu posten ist unendlich wertvoller. Was bringt einem der Quellcode? Da muss man entweder so fit sein, dass man genau weiß, wie das im Browser aussieht, oder aber man muss den Code in eine eigene Datei legen.
Mit einem Link hat man beides sofort: Übersicht, wie das im Browser aussieht und man hat den Quellcode. Und man kann so Nützlichkeiten wie Firebug direkt anwenden!

Grüße,
-Efchen

#7

Danke für die ausführliche Antwort. Dass man „line-height“ ohne Einheit verwenden kann, habe ich von einer größeren CSS Seite. Wenn dies aber keinem guten CSS entspricht, verwende ich analog zur Schriftgröße zukünftig auch beim Zeilenabstand „em“ als Einheit.

Leider verstehe ich deine Argumentation nicht zur Gänze. Den Innenabstand nach oben und unten habe ich immer mit 3px definiert, die 0,75em gelten nur für den Innenabstand nach links und rechts. Die Buttons unterscheiden sich aber in der Höhe und nicht in der Breite. Interessant wird es auch was passiert wenn man den Zeilenabstand erhöht (z.B. line-height:3em). Button #2 wächst dann in der Höhe während sich Button #1 nicht ändert. Die Größe der Schrift ist und bleibt übrigens in beiden Buttons gleich.

Den Code von Button #1 - den du kritisierst - möchte ich ohnehin nicht verwenden. Allerdings hat Button #1 die gewünschte Größe und Button #2 den gewünschten Code. Zwei Klassen - eine zur Positionierung und eine zur Darstellung - verwende ich, da ich meinen Butteon nicht immer am rechten Bildschirmrand möchte.

#8

So, ich habe mein Beispiel nochmal hochgeladen, diesmal sind zur Demonstration alle Schriftgößen und Abstände in Pixel angegeben. Den Zeilenabstand habe ich von 1,5em auf 2em erhöht, um mein Problem zu verdeutlichen.

http://www.loaditup.de/files/688587_r8ygevnw6y.html (STRG+U für Quelltext)

Ich möchte meine Schaltfläche nur ungern als Gruppe auszeichnen, aber wie bekomme ich sie sonst auf die gewünschte Größe? „Line-height“ kann ich nicht aus dem Body nehmen, da es mir sonst die Formatierung meiner Website über den Haufen haut :confused:

#9

Hallo,

Firebug machts einfach - das float ist schuld.

Das float???
In Fire bug sieht man, dass die line-height bei beiden Elementen gleich groß ist.
Der Unterschied liegt darin, dass Schaltfläche #1 ein Inline-Element ist und Schaltfläche #2 ein Block-Element. Wieso, das ist doch auch ein Anchor? Ja, aber durch das float wird es zu einem Block-Element.

Mit Firebug :smile: kann man das schön testen. Da kannst Du das float einfach kurzfristig abschalten, und schon ist die Schaltfläche #2 genauso hoch wie die andere.

Letztlich ist jetzt die Frage, wo Du das wie anwenden willst, an dieser Stelle wäre die Lösung, das jeweils andere Element, also den Paragraph links floaten zu lassen.
text-align könnte prinzipiell auch eine Lösung für ein anderweitig geartetes Problem sein.

Nettes Problem :smile:

Übrigens, die Klasse .rechts würde ich niemals rechts nennen. Ich hab das glaub ich schon erwähnt, aber das scheint nicht richtig angekommen zu sein. Keine ID- oder Klassennamen einen Layoutnamen geben. Trennung von Inhalt und Layout auch an der Stelle, ganz strikt. Immer nur Namen mit semantischer Bedeutung vergeben. Das wird auf lange Sicht gesehen immer einfacher, auch wenn man dann vielleicht mehrere Klasse mit unterschiedlichen Namen aber gleichem Inhalt hat.

Liebe Grüße,
-Efchen

#10

Ja, „nettes Problem“ trifft es genau. Danke, dass du dir die Mühe machst, es dir anzusehen. Dass die Klasse nicht „rechts“ heißen soll ist tatsächlich bei mir angekommen, ich habe in der Eile aber vergessen es auszubessern. Auch Firebug habe ich mir geladen, soweit „float“ auszuschalten, war ich aber noch nicht. Praktisch ist dieses Add-On allemal. Anscheinend lässt sich Schaltfläche #2 nicht einfach mit „display: inline“ umstellen. Insofern bin ich mir noch nicht sicher, wie ich mein nettes Problem in eine nette Lösung umwandeln soll. Die Anwendung sieht folgendermaßen aus:

http://www.loaditup.de/files/688695_4zw949byqs.html

Nochmals ein großes Danke!

#11

Moin,

da gibts zwei Möglichkeiten, was Du machen kannst:

  1. Die Liste links floaten. Evtl. noch einen Abstand nach rechts definieren. Wenn der Button rechts floatet, ist er bei dieser body-Breite vielleicht ohnehin zu weit rechts.

  2. Der Link darf ohnehin nicht so alleine da stehen, sondern muss in einen Container. Das wird ja wahrscheinlich ein Block-Element sein (hier: p oder zur Not vllt. evtl. auch div), das kann dann rechts floaten.

Liebe Grüße,
-Efchen

P.S.: Du scheinst Zusatzinfos gerne aufzusaugen, also schmeiß ich Dir mal noch ein paar Brocken hin, guck mal, ob Du damit was anfangen willst.

  • 1000px feste Breite ist doof, warum werden Leute mit weniger als 1000px Breite zu horizontalen Scrollbalken gezwungen?
  • Wenn HTML5, dann bitte aber auch mit HTML5-typischer Semantik.
  • Aber die Seite so ist ja ohnehin njoch nicht valide :smile:
  • font-size in Pixeln anzugeben, ist doof, weil es ältere IE-Browser gibt, die damit kein Skalieren zulassen. Außerdem sollte Fließtext immer in der Größe 1em geschrieben sein, weil das die Schriftgröße ist, die der Nutzer für sich als *ideal* eingestellt hat (auch wenn das die meisten nicht machen, die deren Augen es nötig machen, setzen darauf, dass die Websites das nicht verändern).
#12

_1. Die Liste links floaten. Evtl. noch einen Abstand nach rechts definieren. Wenn der Button rechts floatet, ist er bei dieser body-Breite vielleicht ohnehin zu weit rechts.

  • 1000px feste Breite ist doof, warum werden Leute mit weniger als 1000px Breite zu horizontalen Scrollbalken gezwungen?_

Mein Header (Graphik) ist genau 1000px breit. Der Button sollte dann rechts mit dem Header abschließen. Ich hoffe, das passt soweit.

2. Der Link darf ohnehin nicht so alleine da stehen, sondern muss in einen Container. Das wird ja wahrscheinlich ein Block-Element sein(hier: p oder zur Not vllt. evtl. auch div), das kann dann rechts floaten.

Wäre das so korrekt (siehe unten)? Anmerkung: Den Backslash habe ich nur eingefügt, damit wer-weiss-was meinen Link nicht zerschießt!

Button-Name

Das wäre großartig, weil mein Problem damit gelöst wäre!

P.S.: Du scheinst Zusatzinfos gerne aufzusaugen, also schmeiß ich Dir mal noch ein paar Brocken hin, guck mal, ob Du damit was anfangen willst.

Gerne, je sauberer die Seite gestaltet ist, desto mehr Ärger erspare ich mir hoffentlich langfristig.

_- Wenn HTML5, dann bitte aber auch mit HTML5-typischer Semantik.

  • Aber die Seite so ist ja ohnehin njoch nicht valide :smile:_

Ja, den „title“ Tag habe ich vergessen (mein Fehler). Ansonsten ist meine Seite UTF-8 kodiert, was ich im Beispiel nicht berücksichtigt habe. Dass HTML5 in Bezug auf die Semantik neue Elemente mit sich bringt, habe ich anscheinend verschalfen. Zumindest wird mir in nächster Zeit nicht fad :smile:

- font-size in Pixeln anzugeben, ist doof, weil es ältere IE-Browser gibt, die damit kein Skalieren zulassen. Außerdem sollte Fließtext immer in der Größe 1em geschrieben sein, weil das die Schriftgröße ist, die der Nutzer für sich als *ideal* eingestellt hat (auch wenn das die meisten nicht machen, die deren Augen es nötig machen, setzen darauf, dass die Websites das nicht verändern).

Die Angabe in Pixel habe ich nur verwendet, um zu zeigen, dass es sich bei meinem Button um kein Problem der Vererbung handelt. Mein Fließtext ist Verdana und 0.75em und scheint damit noch größer zu sein als auf den meisten anderen Seiten.

#13

Moin,

Mein Header (Graphik) ist genau 1000px breit. Der Button
sollte dann rechts mit dem Header abschließen. Ich hoffe, das
passt soweit.

Kürzere Header sind flexibler. Die können dann nach rechts in eine (Hintergrund)farbe übergehen und so bei breiteren Viewports trotzdem gut aussehen. Bei schmalen wird halt abgeschnitten.

Es ist nicht alles so einfach, das weiß ich, aber 1000px Breite ist schon ne Menge. Und horizontale Scrollbalken sind immer blöd, vor allem, wenn es nur an einer „zu“ breiten Headergrafik liegt, die letzten Endes ja sowieso uninteressant ist.

Wäre das so korrekt (siehe unten)?

Semantisch finde ich das in Ordnung.

Das wäre großartig, weil mein Problem damit gelöst wäre!

Denke ich mir.

Gerne, je sauberer die Seite gestaltet ist, desto mehr Ärger
erspare ich mir hoffentlich langfristig.

Wenn das nur jeder so sehen würde - leider macht sich die Mehrheit für schnelle Schein-Erfolge viel zu viel Arbeit und Barrieren für die Nutzer.

Dass HTML5 in Bezug auf die
Semantik neue Elemente mit sich bringt, habe ich anscheinend
verschalfen. Zumindest wird mir in nächster Zeit nicht fad :smile:

Nicht nur neue Element, auch die Bedeutung alter Elemente verändert sich. So ist ein nicht immer eine Überschrift erster Ordnung, sondern innerhalb einer eigenen rutscht sie eine Ordnungsstufe runter.
Deswegen ist es IMHO (bisher unbestätigt) ganz, ganz wichtig, dass der Doctype zur verwendeten HTML-Version passt und der HTML5-Doctype nicht nur verwendet wird, weil man dann weniger Tipparbeit hat.

Mein Fließtext ist Verdana und 0.75em und scheint
damit noch größer zu sein als auf den meisten anderen Seiten.

Damit ist er aber immer noch zu klein.

Stell Dir vor, Du hättest schlechte Augen und bräuchtest für Fließtext immer mindestens 28px. Was machst Du? Du stellst in Deinen Browsereinstellungen ein, dass der Text immer in 28px Größe angezeigt wird.
Jetzt kommst einer daher und setzt den auf 0.75em. Du kriegst somit nur noch 21px und kannst nichts mehr erkennen (dabei gehts nicht darum, OB das so ist, es sei angenommen, DASS der Nutzer hier nichts mehr erkennt).
Die Schriftgröße von Fließtext auf 1em zu setzen ist IMHO Pflicht und darf nicht irgendwelchen Designvorstellungen zum Opfer fallen. Weil der Fließtext ja für die Nutzer ist, nicht für den Webdesigner.

Liebe Grüße,
-Efchen

#14

Gut, wieder was gelernt. Meine Seite modernisiere ich ohnehin gerade, da kann etwas Info nie schaden. Ich setze mal das Erledigt-Häckchen unter diesen Thread, mit den restlichen Problemen komme ich vorerst gut zurecht :smile: Vielen Dank!