it-swarm.com.de

Inline-Elemente werden verschoben, wenn sie im Schwebeflug fett dargestellt werden

Ich habe ein horizontales Menü mit HTML-Listen und CSS erstellt. Alles funktioniert so wie es sollte, außer wenn Sie über die Links fahren. Sie sehen, ich habe einen kühnen Schwebeflug für die Verknüpfungen erstellt, und jetzt verschieben sich die Menü-Verknüpfungen aufgrund des Fettunterschieds.

Ich stoße auf dasselbe Problem wie diesen SitePoint-Beitrag . Die Post hat jedoch keine richtige Lösung. Ich habe überall nach einer Lösung gesucht und kann keine finden ... Ich kann nicht der einzige sein, der versucht, dies zu tun.

Hat jemand irgendwelche Ideen?

PS: Ich kenne die Breite des Textes in Menüelementen nicht, daher kann ich nicht einfach die Breite der Li-Elemente festlegen.

Das ist mein Code:

HTML:

<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

CSS:

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #ffffff; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }
156
Billy

li, a {
    display:inline-block;
    text-align:center;
    font: normal 14px Open Sans;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Überprüfen Sie das Funktionsbeispiel auf JSfiddle . Die Idee ist, Platz für fettgedruckte (oder beliebige :hover-Statusstile) in :after-Pseudoelement zu reservieren und das title-Tag als Quelle für den Inhalt zu verwenden.

327
350D

Eine kompromittierte Lösung besteht darin, Fett mit Text-Schatten zu fälschen, z.

text-Schatten: 0 0 0,01px Schwarz;

Zum besseren Vergleich habe ich folgende Beispiele erstellt: 

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}
<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

Wenn Sie an text-shadow einen wirklich niedrigen Wert für blur-radius übergeben, wird der Unschärfeeffekt nicht so offensichtlich.

Je öfter Ihre Wiederholung text-shadow desto kühner wird Ihr Text, verliert jedoch gleichzeitig die ursprüngliche Form der Buchstaben.

Ich sollte Sie warnen, dass die Einstellung von blur-radius auf Brüche nicht in allen Browsern gleich ist! Safari zum Beispiel benötigt größere Werte, um es auf dieselbe Weise wie Chrome zu rendern.

29
Stefan J

Wenn Sie die Breite nicht einstellen können, bedeutet dies, dass sich die Breite ändert, wenn der Text fett dargestellt wird. Es gibt keine Möglichkeit, dies zu vermeiden, außer durch Kompromisse wie das Ändern der Auffüllung/Ränder für jeden Zustand.

27
Andrew Vit

Eine andere Idee ist letter-spacing 

a {
  letter-spacing: 0.05px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}
19
John Magnolia

Eine Zeile in Jquery:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

edit: Obwohl dies die Lösung bewirken kann, sollte man erwähnen, dass es nicht mit dem Code im ursprünglichen Beitrag zusammenarbeitet. "display: inline" muss durch Floating-Parameter ersetzt werden, damit eine Breiteneinstellung wirksam wird und das horizontale Menü wie gewünscht funktioniert.

17
Alex

Sie könnten so etwas verwenden 

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

und dann in Ihrem CSS setzen Sie einfach den Span Inhalt fett und verstecken es mit Sichtbarkeit: versteckt, damit es seine Dimensionen behält. Dann können Sie die Ränder der folgenden Elemente anpassen, damit sie richtig passen.

Ich bin nicht sicher, ob dieser Ansatz SEO-freundlich ist.

5
monk

Ich habe gerade das Problem mit der "Schatten" -Lösung gelöst .. _. Es scheint das einfachste und effektivste.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

Keine Notwendigkeit, den Schatten dreimal zu wiederholen (Ergebnis war für mich das gleiche).

5
Daniele B

Ich hatte ein ähnliches Problem wie Sie. Ich wollte, dass meine Links fett werden, wenn Sie über sie schweben, aber nicht nur im Menü, sondern auch im Text. Wie Sie sich vorstellen können, wäre es eine echte Aufgabe, all die verschiedenen Breiten herauszufinden. Die Lösung ist ziemlich einfach:

Erstellen Sie ein Feld, das den Linktext in Fettdruck enthält, jedoch farbig wie der Hintergrund und der eigentliche Link darüber. Hier ist ein Beispiel von meiner Seite:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

Natürlich müssen Sie # FFFFE0 durch die Hintergrundfarbe Ihrer Seite ersetzen. Die Z-Indizes scheinen nicht notwendig zu sein, aber ich setze sie trotzdem ein (da das "hypo" -Element nach dem "hyper" -Element im HTML-Code erscheint). Um nun einen Link auf Ihre Seite zu setzen, fügen Sie Folgendes hinzu:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

Das zweite "hier" wird unsichtbar und unter Ihrem Link verborgen. Da dies eine statische Box mit Ihrem Linktext in Fettdruck ist, wird der Rest Ihres Textes nicht mehr verschoben, da er bereits verschoben wird, bevor Sie über den Link fahren.

Hoffe, ich konnte helfen :).

So lange

4
kay

CSS3-Lösung - experimentell

(Falsche Kühnheit)

Ich dachte an eine andere Lösung, die hier nicht vorgeschlagen wurde. Es gibt eine Eigenschaft namens text-stroke, die dafür praktisch sein wird.

p span:hover {
  -webkit-text-stroke: 1px black;
}
<p>Some stuff, <span>hover this,</span> it's cool</p>

Hier ziele ich auf den Text im span-Tag, und wir streicheln ihn mit black um ein Pixel, das den bold-Stil für diesen bestimmten Text simuliert.

Beachten Sie, dass diese Eigenschaft derzeit nicht allgemein unterstützt wird (beim Schreiben dieser Antwort). Nur Chrome und Firefox scheinen dies zu unterstützen. Weitere Informationen zur Browserunterstützung für text-stroke finden Sie unter CanIUse .


Sie können -webkit-text-stroke-width: 1px; verwenden, wenn Sie keine color für Ihren Strich festlegen möchten.

3
Mr. Alien

Ich würde davon abraten, Schriftarten (°) beim Schweben zu wechseln. In diesem Fall bewegen sich nur die Menüpunkte etwas, aber ich habe Fälle gesehen, in denen der gesamte Absatz neu formatiert wurde, da die Erweiterung einen zusätzlichen Zeilenumbruch verursacht. Sie möchten dies nicht sehen, wenn Sie nur den Cursor bewegen. Wenn Sie nichts tun, sollte sich das Seitenlayout nicht ändern.

Die Umschaltung kann auch beim Umschalten zwischen Normal und Kursiv erfolgen. Ich würde versuchen, die Farbe zu ändern oder die Unterstreichung umzuschalten, wenn Sie Platz unter dem Text haben. (Unterstreichung sollte von der unteren Grenze frei bleiben)

Ich wäre enttäuscht, wenn ich Schriftarten für meine Formularklasse gewechselt habe :-)

(°) Die Word-Schriftart wird häufig missbraucht. "Verdana" ist eine Schrift , "Verdana normal" und "Verdana fett" sind unterschiedliche Schriftarten der gleichen Schrift.

2
stevenvh

Sie können mit der Eigenschaft "margin" arbeiten:

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

Stellen Sie nur sicher, dass der linke und der rechte Rand groß genug sind, damit der zusätzliche Platz den fetten Text enthalten kann. Bei langen Wörtern können Sie andere Ränder wählen ... Es ist nur eine weitere Problemumgehung, aber die Arbeit für mich erledigen.

2
Martin Horvath

Ich benutze lieber Textschatten. Vor allem, weil Sie Übergänge verwenden können, um Textschatten zu animieren.

Alles was Sie wirklich brauchen, ist:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

Eine vollständige Navigation finden Sie in diesem jsfiddle: https://jsfiddle.net/831r3yrb/

Browserunterstützung und weitere Informationen zu text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

1
Lightningsoul

Dies ist die Lösung, die ich bevorzuge. Es erfordert ein wenig JS, aber Sie müssen Ihre title-Eigenschaft nicht genau gleich sein und Ihr CSS kann sehr einfach bleiben.

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});
li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

0
lurkit

Ich habe eine Reihe der oben genannten Techniken kombiniert, um etwas zu bieten, das bei abgeschaltetem Js nicht völlig saugt und mit jQuery noch besser ist. Nun, da Browser die Unterstützung für Subpixel-Buchstabenabstände verbessern, verbessert sich die Verwendung von Nischen.

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});
ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

0
squarecandy

Ein alternativer Ansatz wäre, fetten Text über Textschatten zu "emulieren". Dies hat den Bonus (/ malus, abhängig von Ihrem Fall), um auch an Schriftart-Symbolen zu arbeiten.

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

Ein bisschen abgedreht, obwohl es Sie davon abhält, Text zu duplizieren (was nützlich ist, wenn es viel ist, wie es in meinem Fall war).

0
EdoardoSchnell

Es ist besser, a :: before statt a :: after wie folgt zu verwenden:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

Für weitere Informationen: https://jsfiddle.net/r25foavy/

0
clisima

ul {
  list-style-marker: none;
  padding: 0;
}

li {
  display: inline-block;
}

li + li {
  margin-left: 1em;
}

a {
  display: block;
  position: relative;
  text-align: center;
}

a:before, a:after {
  content: attr(aria-label);
  text-decoration: inherit;
}

a:before {
  font-weight: bold;
  visibility: hidden;
}

a:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

a:hover:before {
  visibility: visible;
}

a:hover:after {
  display: none;
}
<ul>
  <li>
    <a href="" aria-label="Long-long-long"></a>
  </li><li>
    <a href="" aria-label="or"></a>
  </li><li>
    <a href="" aria-label="Short"></a>
  </li><li>
    <a href="" aria-label="Links"></a>
  </li><li>
    <a href="" aria-label="Here"></a>
  </li>
</ul>

0
Qwertiy

Nicht sehr elegante Lösung, aber "funktioniert":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
0
Świeżu

Was ist damit? Eine Javascript - CSS3 freie Lösung.

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>
0
user10099

Ich verwende Text-Schatten-Lösung, wie einige andere hier erwähnt:

text-shadow: 0 0 0.01px;

der Unterschied ist, dass ich die Schattenfarbe nicht spezifiziere. Daher ist diese Lösung für alle Schriftfarben universell.

0
jabko87