tag:forum.selfhtml.org,2005:/self CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden – SELFHTML-Forum 2020-05-14T11:05:24Z https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770446?srt=yes#m1770446 ebody 2020-05-13T12:13:56Z 2020-05-13T12:13:56Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Hallo,</p> <p>bei <code>:hover</code> verwende ich <code>font-weight: bold</code>. Dadurch wird die umgebene Box vergrößert. Diese soll aber gleich bleiben. Die Box soll keine feste <code>width, height</code> Angaben haben, sondern durch <code>padding</code> ihre Größe erhalten.</p> <p><a href="https://codepen.io/ebody/pen/jObpaZx" rel="noopener noreferrer">https://codepen.io/ebody/pen/jObpaZx</a></p> <p><strong>Wie erreicht man es, dass die Box sich bei :hover nicht vergrößert?</strong></p> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770447?srt=yes#m1770447 Rolf B 2020-05-13T12:26:24Z 2020-05-13T12:28:41Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Hallo ebody,</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Klick<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Du hast bestimmt gemeint</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Klick<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Den kannst Du so stylen, dass er wie dein div aussieht. Aber das löst dein Problem nicht.</p> <p>Wenn sich der Button an die Größe des Texts anpassen soll, dann tut er das eben. Und wenn der Text sich verändert, ändert sich der Button mit.</p> <p>Du könntest schauen, ob Du einen Font findest, dessen Dickten<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> bei Änderung des font-weight gleich bleiben.</p> <p>Abraten würde ich von Spielereien mit letter-spacing. Das geht in deinem Fall, mit letter-spacing:-1.2px bleibt die Breite visuell unverändert, aber wehe der Font ist nicht da oder irgendwelche andere Skalierungseffekte schlagen zu. Das ist zu spröde.</p> <p>Eine Idee könnte sein, statt font-weight einen Schatten zu nutzen:</p> <pre><code class="block language-css"> <span class="token selector">#btn:hover</span><span class="token punctuation">{</span> <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0px 0px 2px #fff<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Nein, nicht <a href="https://de.wikipedia.org/wiki/Dickten" rel="nofollow noopener noreferrer">diese</a>. Sondern <a href="https://de.wikipedia.org/wiki/Dickte" rel="nofollow noopener noreferrer">jene</a>. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770448?srt=yes#m1770448 JürgenB https://www.j-berkemeier.de 2020-05-13T12:26:58Z 2020-05-13T12:28:24Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Hallo,</p> <p>denk bitte an die Tastaturbenutzer, wo hover steht, muss auch focus hin.</p> <p>Wenn eine Box keine Breitenangabe hat, richtet sich ihre Größe nach dem Inhalt. Da fette Schrift meistens breiter ist als normale, hilft evtl. ein negatives <code>letter-spacing</code>:</p> <pre><code class="block language-css"> <span class="token selector">#btn:hover</span><span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span>-.073em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die -0.73em habe ich empirisch ermittelt, ob das bei anderen Schriftgrößen oder Zoomstufen funktioniert, weiß ich nicht.</p> <p>Ich würde eine feste Breite für den Button nehmen und die Schrift zentrieren.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770449?srt=yes#m1770449 Der Martin 2020-05-13T12:31:31Z 2020-05-13T12:31:31Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Hi,</p> <blockquote> <p>bei <code>:hover</code> verwende ich <code>font-weight: bold</code>. Dadurch wird die umgebene Box vergrößert. Diese soll aber gleich bleiben. Die Box soll keine feste <code>width, height</code> Angaben haben, sondern durch <code>padding</code> ihre Größe erhalten.</p> </blockquote> <p>das ist IMO ein Widerspruch. Wenn du <em>keine</em> feste Größe angibst, richtet sich die tatsächliche Größe nach dem Platzbedarf des Inhalts, und fette Schrift ist nun einmal etwas breiter.</p> <blockquote> <p><strong>Wie erreicht man es, dass die Box sich bei :hover nicht vergrößert?</strong></p> </blockquote> <p>Eine Krücke fällt mir ein: Javascript. Lies nach dem Laden der Seite mit getComputedStyle() die tatsächliche Höhe und Breite des Elements, und setze die dann fest auf style.height bzw. style.width.</p> <p>Alle Angaben ohne Gewähr.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770450?srt=yes#m1770450 Rolf B 2020-05-13T12:35:15Z 2020-05-13T12:35:15Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Hallo Der,</p> <p>kann man auch machen, aber dann sollte man etwas Zuschlag bei der Breite geben und text-align:center setzen, damit der Text Platz hat zum fetter werden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770451?srt=yes#m1770451 ebody 2020-05-13T13:24:21Z 2020-05-13T13:24:21Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Wenn ich eine feste Größe vergebe und z.B. ein Menü erstelle, dann wären die Abstände aber alle unterschiedlich, weil die Textlänge der Menüpunkte unterschiedlich ist.</p> <p>Ich müsste jeder Box von jedem Menüpunkt eine unterschiedliche Breite geben, so dass die Abstände immer gleich sind, zwischen den Menüpunkten.</p> <p><strong>Oder gibt es da eine einfache Lösung, um die Abstände automatisch gleich hin zu bekommen?</strong></p> <p>Gruß ebody</p> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770452?srt=yes#m1770452 Rolf B 2020-05-13T13:31:37Z 2020-05-13T14:11:32Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Hallo ebody,</p> <p>wenn Du nur ein Fragment in den Ring wirfst, dann musst Du Dich nicht wundern, wenn Die Antwort nicht hilfreich ist.</p> <p>Du möchtest ein Menü bauen bei dem die Menüpunkte untereinander stehen? Und die Menübuttons (oder Links, wenn's ein Menü ist) alle gleich breit sind?</p> <p>Möglichkeit 1: Mein Vorschlag mit text-shadow statt font-weight. CSS Only, klappt ab IE 10, sollte sich fast überall einfügen.</p> <p>Möglichkeit 2: In der JavaScript-Lösung die maximale Breite des Rahmen-DIV (bzw. ul) des Menüs bestimmen - das richtet sich ja nach dem breitesten Menüpunkt, etwas Zuschlag geben und das als Breite setzen.</p> <p>Möglichkeit 3: Feste Breite vergeben und auf Kopfschmerzen verzichten.</p> <p>Aber vielleicht passt das immer noch alles nicht, weil Du uns noch nicht alles verraten hast (z.B. Submenüs die aufgeblendet werden oder das ganze Menü ist ein Popup Menü).</p> <p>Nachtrag: In der JS Lösung muss man gar keinen Zuschlag berechnen. Wenn der Container der Menüpunkte feste Breite hat, vergrößert sich zwar der Text, aber der Rahmen in dem er steht, bleibt fix.</p> <p>Wenn die Navigations-Links untereinander in einem nav Element stehen: Einfach die Breite annageln.</p> <pre><code class="block language-js"><span class="token keyword">let</span> navigation <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>navigation<span class="token punctuation">)</span> <span class="token punctuation">{</span> navigation<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> navigation<span class="token punctuation">.</span>clientWidth <span class="token operator">+</span> <span class="token string">"px"</span> <span class="token punctuation">}</span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770454?srt=yes#m1770454 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-05-13T14:10:21Z 2020-05-13T14:10:21Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>@@ebody</p> <blockquote> <p>Oder gibt es da eine einfache Lösung, um die Abstände automatisch gleich hin zu bekommen?</p> </blockquote> <p><a href="https://www.youtube.com/watch?v=Pj-qBUWOYfE" lang="en" rel="nofollow noopener noreferrer">More input!</a></p> <p>Die Menüpunkte sind horizontal angeordnet? Dann <code>display: inline</code> oder <code>display: inline-block</code> mit <code>margin</code> und/oder <code>padding</code>. Oder Flexbox.</p> <p>Dann verbietet sich aber die Änderung der Schriftstärke bei <code>:hover</code>/<code>:focus</code>.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> https://forum.selfhtml.org/self/2020/may/13/css-bei-hover-soll-box-durch-font-weight-bold-nicht-grosser-werden/1770479?srt=yes#m1770479 ebody 2020-05-14T11:05:24Z 2020-05-14T11:05:24Z CSS - Bei Hover soll Box durch font-weight: bold nicht größer werden <p>Jo, die Info bzgl. horizontales Menü hätte ich direkt mitteilen sollen. Ich verzichte jetzt auf Bold, dennoch Danke für die Tipps.</p> <p>Gruß ebody</p>