nicht angemeldet
Probleme mit em
0 0 
Matthias Apsel
0 0 
Gunnar Bittersmann
0 
Rolf b
0 Rolf b
0 Gunnar Bittersmann
Probleme mit em
marctrix
Auge
Tabellenkalk
MudGuardHallo an alle,
ich habe mir probeweise mal einen sehr einfachen HTML-Bereich gebaut und ihn mit Testsätzen gefüllt damit ich was zum scrollen habe. Der body-Bereich sieht wie folgt aus:
<body>
<img id="logo" src="images/therminator2.png" />
<nav class="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">bla bla</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Videos</a></li>
</ul>
</nav>
<section id="main">
<?php
for($i=1; $i<=100; $i++){
echo "Dies ist ein cooler Test! Nummer: ".$i."<br>";
}
?>
</section>
</body>
Das ganze habe ich hiermit in einen sehr simplen Style gepackt:
body{
background:#777;
font-size:100%;
margin:0;
padding:0;
}
.nav{
background:red;
margin:0 15% 0 15%;
}
.nav ul{
display:block;
padding:0;
margin:2em 0 0 0;
height:3em;
}
.nav ul li{
display:inline-block;
background:green;
margin-right:0.3em;
padding:1em;
}
.nav ul li a{
font-size:1em;
text-decoration:none;
color:black;
}
#Main{
background:white;
margin:0 15% 2em 15%;
}
Und da taucht dann auch schon mein Problem auf. Wenn ich dem nav-Bereich eine Höhe von 3em gönne, die Textgröße auf 1em setze und das padding auch, wieso hab ich dann überstehende Ränder?
Ich wäre echt dankbar für eine Lösung denn ich habe keine und ich vermute mal auch nicht dass die Lösung so aussieht, dass man die Seite auf maximale Größe zoomt und dann rumprobiert, oder?
-
Hallo
Das Beste wäre ein Link zu der Seite. Grade php-Quelltexte mindern die Hilfsbereitschaft extrem. Zudem haben wir weder Zugriff noch irgendwelche Informationen zu dem Bild.
Deine Problembeschreibung ist zudem zu allgemein. Ich kann nicht nachvollziehen welche überstehenden Ränder du meinst. Und wie die Seite im Endeffekt aussehen soll.
Bei der Schriftgröße em musst du bedenken dass sie weitervererbt wird.
Gruss
MrMurphy
-
Hi,
ich hatte wohl vergessen das Bild zu entfernen. Für die Problematik ist es völlig belanglos. Und was den PHP-Teil angeht. Der sorgt nur für 100 mal den selben Satz. Ich hätte auch Lorem Ipsum nehmen können, aber so ist es übersichtlicher.
[Vollzitat entfernt]
-
Hej bleumi85,
Dein CSS erzeugt einen 3em hohen Kasten, davon gehen oben und unten je 1em ab für den Innenabstand. Bleibt 1em übrig. Du gibst zwar der Schrift eine Größe von 1em - was auf den ersten Blick passen sollte - aber die Größe der Schrift ist für den Platz, den die Schrift benötigt, vollkommen unerheblich. Entscheidend ist hierfür die Höhe der Zeile. Du kannst riesigen Schriften eine Zeilenhöhe von nur einem Pixel zuweisen - dann bekommen die großen Buchstaben freilich zu wenig Platz und alles wird unleserlich - sie beanspruchen aber tatsächlich nur einen Pixel Höhe für sich und würden in Deine Box passen.
Auch eine Zeilenhöhe von 1em ist für 1em große Schriften noch ungegeignet, weil je nach Schriftart sich die hohen Buchstaben der unteren Zeile mit den Unterlängen der oberen Zeile treffen oder gar überlappen. Im allgemeinen gibt man eine Zeilenhöhe mit, die ungefähr der eineinahlbfachen Schriftgröße entspricht. Man gibt die dann tatsächlich so an:
line-height: 1.5;
Das heißt ohne Maßeinheit - die würde zwar funktionieren, aber so macht man sich bewusst, dass es sich tatsächlich nur um einen Multiplikator und nicht um eine feste Größe handelt. Außerdem kann man sich nicht vertippen und es ist auch schneller geschrieben.
Dein Browser bringt ja sinnvolle Vorgaben in seinem eigenen CSS mit (sonst wären die Überschriften ja nicht groß und fett oder Links standardmäßig blau und unterstrichen). Im Browser-CSS steht auch ein Faktor für die Zeilenhöhe (kenne die aus dem Kopf nicht, müsste 1.4 oder so sein, ist auch nicht identisch in allen Browsern).
Für Dein problem bedeutet das: du hast in Deiner Box 1em padding oben, 1em padding unten und eine Zeile mit einer Höhe von ungefähr 1.4em. ;-)
Marc
-
@@marctrix
Dein CSS erzeugt einen 3em hohen Kasten, davon gehen oben und unten je 1em ab für den Innenabstand. Bleibt 1em übrig.
Wenn nirgends
box-sizing: border-boxim Spiel ist, ist das nicht der Fall. Es sei denn, du verwendest einen IE im Quirks-Modus.Auch eine Zeilenhöhe von 1em ist für 1em große Schriften noch ungegeignet,
Das kommt drauf an. Für Überschriften, Buttonbeschriftungen u.ä. könnte eine Zeilenhöhe von 1(em) durchaus passend sein.
Im allgemeinen gibt man eine Zeilenhöhe mit, die ungefähr der eineinahlbfachen Schriftgröße entspricht.
Ungefähr. Im Allgemeinen dürfte 1.5 etwas zu groß sein. Eher so 1.3 bis 1.4 – abhängig von Schriftart und Zeilenlänge.
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hej Gunnar,
Dein CSS erzeugt einen 3em hohen Kasten, davon gehen oben und unten je 1em ab für den Innenabstand. Bleibt 1em übrig.
Wenn nirgends
box-sizing: border-boxim Spiel ist, ist das nicht der Fall. Es sei denn, du verwendest einen IE im Quirks-Modus.Ups - genau. Aber dennoch dürfte ihm genau das das Layout zerschießen, dann kommt das ja sogar noch dazu. Danke für die Korrektur, das hätte nur Verwirrung gestiftet.
Auch eine Zeilenhöhe von 1em ist für 1em große Schriften noch ungegeignet,
Das kommt drauf an. Für Überschriften, Buttonbeschriftungen u.ä. könnte eine Zeilenhöhe von 1(em) durchaus passend sein.
Jetzt kommst du mir mit Ausnahmen? ;-)
Marc
-
-
-
-
-
Hallo bleumi85,
<nav class="nav">Das scheint mir doppelt gemoppelt.
<li><a href="#" class="active">Home</a></li>Der Link zur aktuellen Seite ist immer noch klickbar. Verwende besser ein
a-Element ohnehref-Attribut.<section id="main">Ich möchte lieber ein
main-Element sein.Das ganze habe ich hiermit in einen sehr simplen Style gepackt:
Und da taucht dann auch schon mein Problem auf. Wenn ich dem nav-Bereich eine Höhe von 3em gönne, die Textgröße auf 1em setze und das padding auch, wieso hab ich dann überstehende Ränder?
Link bitte. Und definiere „überstehende Ränder“.
Bis demnächst
Matthias -
Hallo bleumi85,
ohne Seitenansicht schlecht zu beurteilen, aber das könnte helfen:
... .nav ul{ padding-left:0; margin:2em 0 0 0; } .nav ul li{ display:inline-block; background:green; margin-right:0.3em; } .nav ul li a{ text-decoration:none; padding:1em; line-height:3em; color:black; } ...Grüße, Martl
(Wenn Plan A nicht funktioniert: Keine Panik, das Alphabet hat noch weitere 25 Buchstaben)
-
@@bleumi85
<img id="logo" src="images/therminator2.png" /> <nav class="nav"> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">Bilder</a></li> <li><a href="#">Videos</a></li> </ul> </nav>Das Logo und die Navigation würden gut in einem
headergruppiert sein.<section id="main">sectionist für (mehrere) Unterabschnitte. Für den einen(!) Hauptinhalt dient – wie Matthias schon sagte – dasmain-Element. Womöglich brauchst du dafür keine ID.Apropos ID:
#Main{ background:white; margin:0 15% 2em 15%; }Das kann nicht wirken; der Selektor
#Mainpasst nicht zur ID"main".
<?php for($i=1; $i<=100; $i++){ echo "Dies ist ein cooler Test! Nummer: ".$i."<br>"; } ?>Ich würde niemals™ Markup mit PHP generieren, sondern PHP in HTML schachteln – mit der alternativen Syntax für Kontrollstrukturen:
<?php for($i=1; $i<=100; $i++): ?> Dies ist ein cooler Test! Nummer: <?php echo $i; ?><br> <?php endfor; ?>
.nav ul li{…} .nav ul li a{…}Die Selektoren sind überspezifiziert. Mache Selektoren nur so spezifisch wie nötig:
.nav liund.nav a.Aber wie Matthias schon sagte, brauchst du die Klasse
"nav"nicht. Du kannst auch per Elementtypnav,nav ul,nav liundnav aselektieren.
Wenn ich dem nav-Bereich eine Höhe von 3em gönne, die Textgröße auf 1em setze und das padding auch, wieso hab ich dann überstehende Ränder?
Was heißt „überstehende Ränder“? Online-Beispiel, bitte.
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Überstehend heißt: Die LI hängen um 1-2 Pixel unten aus dem UL heraus.
-
-
Hallo bleumi,
ich habe mir das mal in ein Fiddle kopiert, und der entscheidende Punkt ist: eine Höhe von 1em auf dem a Element wird nicht exakt akzeptiert. Chrome zeigt mir 16px Margin/Padding an, und 17px Zeilenhöhe für das a. Besser wird es, wenn du für die Parent-Elemente der Links überhaupt keine Höhe angibst, dann passt sich alles den Links an und gut ist.
Und dann finde ich, dass Du viele redundante Margins setzt. Ich habe das html mal so umgestaltet wie von Matthias vorgeschlagen (nav Element ohne class, main Element statt section id="main"; Gunnar hat parallel zu mir gepostet, dieses Optimierungspotential kannst Du dann selbst nutzen ;-) ) und schlage dieses CSS vor:
/* Einmal zentral die Margins und Paddings für die randfrei gewünschten Elemente löschen */ body, nav ul, main { margin: 0; padding: 0; } body { background:#ccc; padding:0 15%; /* Randbereich per Padding setzen, danach nirgends mehr nötig */ } nav { background: red; margin-top: 2em; border-bottom: 0.5em solid black; } nav ul li { list-style: none; /* inline-block scheint das zu implizieren, aber wer weiß... */ display:inline-block; margin-right: 0.3em; border-radius: 1em 1em 0 0; background:green; } nav ul li a { display:inline-block; /* wichtig, damit das a Element das ganze li ausfüllt */ line-height:3em; /* sorgt für vertikale Zentrierung und legt Höhe des a fest */ padding: 0em 1em; /* sorgt für Abstand vom Menütext zum LI Rand */ text-decoration:none; color:black; } nav ul li a:hover { /* Effektanzeige wenn Maus den Link berührt */ background-color: #ff7; } main { background:white; }Dadurch, dass nav, ul und li keine Höhenangabe haben, ist die Höhe auto, und damit die Höhe der a Elemente.
Ich würde dir aber noch eine Border unterhalb des Menüs empfehlen, um eine Absetzung von Menü und Inhalt zu bekommen. Ich habe mal eine hingeschrieben, und als Gag noch die oberen Ecken der Menüs abgerundet.
Falls Du das Menü zentrieren willst, kannst Du ein text-align:center in das nav Element setzen, solltest dann aber den margin-right: 0.3em aus dem li entfernen und statt dessen einen neuen Style machen der nur zwischen den li einen Margin setzt, denn sonst hat das rechteste Menüitem auch einen Margin und die Zentrierung ist eine Spur daneben. Sicher, das ist Mikrodesign, aber mich stört sowas :)
nav ul li+li { /* margin-left erst ab dem 2. li */ margin-left: 0.3em }Hoffe, dass dir das etwas geholfen hat.
Rolf
-
@@Rolf b
ich habe mir das mal in ein Fiddle kopiert
Warum nicht verlinkt?
/* Einmal zentral die Margins und Paddings für die randfrei gewünschten Elemente löschen */ body, nav ul, main { margin: 0; padding: 0; }Das willst du für
nav lisicher auch tun.nav ul li a:hover { /* Effektanzeige wenn Maus den Link berührt */ background-color: #ff7; }Du hast den Fokus verloren.
Merke: Wann immer
:hoverim Stylesheet steht, sollte auch:focusdastehen. Die Seite soll ja auch per Tastatur benutzbar sein.[Ergänzung] Und wie ich schon sagte, den Selektor nicht so spezifisch.
nav a:hover, nav a:focus.LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Warum nicht verlinkt?
Weil's ein unansehnlicher Bastelmüllhaufen war. War zu faul zum Aufräumen und das CSS sollte eh hierher, Fiddle ist kein Archiv.
(Margins/Paddings löschen) Das willst du für
nav lisicher auch tun.Hatte ich getan, hab ich wieder gelöscht, schien nicht nötig. Aber hast recht, das mag Brauserspezifisch gewesen sein.
Du hast den Fokus verloren. (...) Die Seite soll ja auch per Tastatur benutzbar sein.
Und ich dachte, ich bräuchte eine Brille 8-)
Allerdings ist die Kombination von :hover und :focus etwas nervig. Wenn ein a den Fokus hat, und ich dann die Maus herumschubse, habe ich zwei hervorgehobene Elemente.
[Ergänzung] Und wie ich schon sagte, den Selektor nicht so spezifisch.
Ja. Hab mich doch schon für entschuldigt, dass ich nicht nach Antworten gesucht habe, die parallel zu meiner geschrieben wurden :) Wo ist eigentlich der Nachteil von überspezifischen Selektoren?
Gruß Rolf
-
Hallo
[Ergänzung] Und wie ich schon sagte, den Selektor nicht so spezifisch.
Wo ist eigentlich der Nachteil von überspezifischen Selektoren?
Um im Spezialfall™ CSS-Regeln zu überschreiben musst du noch spezifischer werden, als du es ohnehin bist. Bist du ohne Spezialfall schon unnötig spezifisch …. Irgendwann ist halt Ende der Fahnenstange.
Tschö, Auge
--
Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
Wolfgang Schneidewind *prust*-
Hallo Auge,
Um im Spezialfall™ CSS-Regeln zu überschreiben musst du noch spezifischer werden, als du es ohnehin bist. Bist du ohne Spezialfall schon unnötig spezifisch …. Irgendwann ist halt Ende der Fahnenstange.
Und das Grau^WEnde der Fahnenstange hat einen Namen: !important
Bis demnächst
Matthias-
Hallo,
Und das Grau^WEnde der Fahnenstange hat einen Namen: !important
Und wenn das nicht reicht hilft nur noch Bier
Gruß
Kalk-
Hi,
Und wenn das nicht reicht hilft nur noch Bier
Stimmt:
(gesehen im Fiddler's Green, Portaferry, Co. Down, North Ireland)
cu,
Andreas a/k/a MudGuard
-
-
@@Matthias Apsel
Und das Grau^WEnde der Fahnenstange hat einen Namen: !important
“Never use
!importantin anger!” —Harry RobertsSoll heißen: Nicht versuchen, mit
!importantin die Spezifitätsschlacht zu ziehen, sondern die Sünden der Vergangenheit beheben.LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
-
-
-
