zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Links in Menüleiste schwimmen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.06.2016, 15:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2016
Beiträge: 5
Eldri befindet sich auf einem aufstrebenden Ast
Standard Links in Menüleiste schwimmen

Hallo,

ich habe ein eigenartiges Problem. Ich habe eine funktionierende Menüleiste. Wenn ich mit der Maus über die Einträge gehe werden diese auch fett geschrieben. Allerdings "schwimmt" die Navigation, sprich die anderen Einträge "rücken beiseite" das der fett geschriebene Eintrag mehr Platz benötigt. Dieses Phänomen habe ich in der Menüleiste im Firefox, wenn ich mit die ganze Sache im Chrome anschaue, sind die Einträge fest, auch wenn ich mit der Maus drüber fahre.
Ich habe versucht mittels padding und margin die Abstände zu vergrößern, aber das Schwimmen bleibt. Wie kann ich das Problem lösen?

Vielen Dank im voraus.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.06.2016, 15:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Deine Angaben sind sehr mager. Wenn du ein Anfänger bist werden dir allgemeine Angaben kaum weiterhelfen, da du sie wahrscheinlich nicht umsetzen kannst.

Ich versuch's trotzdem mal: Verwende Flexbox. Die Flex-Items reagieren nicht auf Größenänderungen durch hover-Effekte.

Ansonsten brauchen wir einen Link zu deiner Seite oder, als zweitbeste Lösung, den gesamten HTML- und CSS-Quelltext.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.06.2016, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2016
Beiträge: 5
Eldri befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

einen Link auf die Seite kann ich leider nicht bieten, da im Moment noch intern entwickelt wird. Ich hoffe ich kann mit einigen Code-Auszügen das Problem etwas beleuchten.
btw: Ich bin zwar kein CSS-Neuling, aber manchmal blond.
Ich habe bootstraps als Grundlage genommen.

HTML-Code:
<ul id="w6" class="navbar-nav navbar-right nav">
<li><a href="/site/index">Start</a></li>
<li><a href="/site/todo">Blog</a></li>
<li><a href="/site/about">Über uns</a></li>
<li><a href="/site/todo">Team</a></li>
<li><a href="/site/contact">Kontakt</a></li>
</ul>
Code:
.navbar-inverse .navbar-nav > li > a {
	color: grey;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.2em;
}

.navbar-inverse .navbar-nav > li.active > a, 
.navbar-inverse .navbar-nav > li.active > a:hover, 
.navbar-inverse .navbar-nav > li.active > a:focus {
    color: red;
    font-weight: bold; 
    background-color: transparent; 
}

.navbar-nav > li > a:hover:not(.active)
{
	 color: red;
	 font-weight: bold;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 13.06.2016, 12:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

[QUOTE=Eldri;549291]Ich hoffe ich kann mit einigen Code-Auszügen das Problem etwas beleuchten. /QUOTE]

Nein, nicht wirklich. Gehe auf jsfiddle.com und füge dort deinen Code ein, dann sieht man (zumindest ich persönlich nicht, vielleicht übersehe ich auch etwas, möchte ich nicht ausschließen) nicht wirklich ein Problem. Alle Links sind untereinander und auch nach :hover noch schön untereinander.

So kann man nur weiter raten und die Kristallkugel befragen: Das "Schwimmen" kommt vom nicht-fett auf fett schreiben, dann brauchen Elemente nun mal mehr Platz. Ist ja auch logisch, da fette Buchstaben breiter sind. Lösung dazu: Keine fetten Buchstaben verwenden. Oder fixe Breiten. Oder sonst etwas, was man bei einem besseren Beispiel eventuell sagen kann.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.06.2016, 12:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2016
Beiträge: 5
Eldri befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich war gerade auf der Seite http://jsfiddle.com/ aber wo kann ich da Code eingeben. Das ist doch nur Werbung.

Die fetten Buschstaben werden von Designer und Kunden gewünscht. Ich wäre ja auch für einfache Schrift, aber ich bin "nur" der Entwickler. Ich weiß halt nicht an welchen Stelle ich die Eintragungen für die fixe Breite eintragen sollte. Was wird denn vom Code noch benötigt, um hier Tipps zu geben.

Dank, Eldri
Mit Zitat antworten
  #6 (permalink)  
Alt 13.06.2016, 12:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Mein Fehler, es ist jsfiddle.net Verzeihung!
Mit Zitat antworten
  #7 (permalink)  
Alt 13.06.2016, 12:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2016
Beiträge: 5
Eldri befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich habe es getestet und gefunden. Ja es schwimmt, wenn man es fett schreibt, weil eben die fetten Buchstaben mehr Platz benötigen. Ich habe es jetzt mal mit Flexbox getestet. Aber irgendwie kommt das nicht hin, es schwimmt immer noch.

Hier der CSS-Code mit der Flexbox. Der HTML-Code bleibt unverändert.

Code:
body {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

.nav {
   list-style: none;
	padding: 10px;
	margin: 10px;
	-webkit-flex: 1 100%;
	flex: 1 100%;
}

.navbar-nav > li {
    float: left;
}

.navbar-inverse .navbar-nav > li > a {
	color: grey;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.2em;
}


.navbar-inverse .navbar-nav > li.active > a, 
.navbar-inverse .navbar-nav > li.active > a:hover, 
.navbar-inverse .navbar-nav > li.active > a:focus {
    color: red;
    font-weight: bold; 
    background-color: transparent; 
}

.navbar-nav > li > a:hover:not(.active)
{
	 color: red;
	 font-weight: bold;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-left: 3px;
    margin-right: 3px;
}
Beitrag bearbeiten/löschen
Mit Zitat antworten
  #8 (permalink)  
Alt 14.06.2016, 01:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Ich habe bootstraps als Grundlage genommen.
Die Information wäre bereits vor meiner ersten Antwort sinnvoll gewesen. Damit ist meine Antwort leider sinnfrei, da das CSS von Bootstrap natürlich auch bedacht werden muss.

Lass Flexbox weg und füge dem CSS mal folgende Anweisung hinzu:

Code:
      .navbar-inverse .navbar-nav > li {
         width: 140px;
      }
Probehalber auch mal

Code:
      .navbar-inverse .navbar-nav > li {
         text-align: center;
         width: 140px;
      }
Du musst schauen was dir besser gefällt.

Gruss

MrMurphy
Mit Zitat antworten
  #9 (permalink)  
Alt 14.06.2016, 10:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2016
Beiträge: 5
Eldri befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke hab das doch gleich mal probiert, und es funktioniert. Leider wird dann die Navigationsleiste zu lang und fällt aus dem Layout raus, da die Breite der Leiste zu breit wird. Sind dann zu viele Punkte, und einer ist sogar zu lang, so dass er zweizeilig wird. das ist auch nicht gewünscht. Also auch nicht DIE Lösung. Schade.

Ich versuche gerade mit dem Designer zu klären, dass wir es in einfacher Schrift lassen, das scheint mir hier die sinnvollere Alternative zu sein. Denn dann schwimmt es auch nicht, da ein Farbwechsel keinen zusätzlichen Platz benötigt.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.06.2016, 10:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Leider wird dann die Navigationsleiste zu lang und fällt aus dem Layout raus, da die Breite der Leiste zu breit wird. Sind dann zu viele Punkte, und einer ist sogar zu lang, so dass er zweizeilig wird
Dann hast du uns offensichtlich einen falschen Quellcode mitgeteilt. Mit deinem oben genannten Quellcode und Bootstrap 3 funktioniert meine Lösung. Schade.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. Picasso CSS 36 03.01.2011 20:41
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20
Probleme mit 3 spalten luk CSS 3 08.06.2005 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:58 Uhr.