Benötige Hilfe bei CSS Datei - Menütext verschiebt sich nach rechts

[Benjamin80]

Hallo,

bei mir hat sich das Menü nach rechts verschoben, da ich den Abstand zwischen den Worten und den Buchstaben geändert habe. Wenn ich den Cursor über das Menü bewege, sehe ich dass es eigentlich gar nicht verschoben ist: Der Menüeintrag lässt sich bereits weiter links anklicken, obwohl dort das Wort noch nicht beginnt.

Das Problem ist - glaube ich - nur, dass zwar Letter Spacing akzeptiert wird-- aber nicht Wordspacing:

Code Select Expand

#header {
background: #fff  0 0 repeat-x;
height: 235px;
}
#logo a {
float: left;
display: block;
width: 350px;
height: 156px;
background: url(../images/custom/logo.png) no-repeat;
        margin-top: 45px;
       
       
}
#header .user {
float: right;
width: 360px;
height: 70px;
margin-top: 10px;
padding: 10px;
color: #444;
        margin-top: 45px;

}
#header .user p {
float: left;
margin: 0 1em 1em 0;
padding: 0;
}
#header .user img.avatar {
width: 55px;
height: 55px;
}
#header .user ul {
margin: 0;
padding-left: 10px;
}
#header .user ul li {
margin-bottom: 2px;
}
#header .user ul li.greeting {
font-size: 12px;
font-weight: bold;
line-height: 12px;
}
#header .user input.input_text, #header .user input.input_password {
background: #cfebfa;
border: 1px solid #d0d0d0;
outline: none;
padding: 4px;
color: #fff;
}
#header .user input.button_submit {
background: #7d6c61;
border: 1px solid #d0d0d0;
color: #fff;
padding: 3px 6px;
margin: 0;
}
#guest_form {
text-align: right;
}
#guest_form .info {
padding: 6px 0;
}
#bar {
background: #316272 repeat-x;
        border-bottom: 40px solid #eef0dd;
height: 51px;
color: #fff;
font-weight: bold;
}
#navigation {
position: relative;
text-transform: uppercase;
font-weight: bold
color: #fff;
height: 40px;
z-index: 1000;
padding: 0;
margin: 0;
}
#navigation ul {
margin: 0 0 0 0px;
padding: 0 0 0 0px;


}
#navigation li {
float: left;
margin: 0 0 0 0px;
padding: 0 0 0 0px;
position: relative;
list-style: none;
}
#navigation li a {
display: block;
line-height: 50px;
padding: 0 0 0 45px;
color: #ffffff;
font-size: 14px;
letter-spacing: 2px;




}
#navigation li a.active {
background: #316272;
color: #fff;
font-weight: bold;
}
#navigationli a:hover, #navigation li:hover a, #navigation li.sfhover a {
background: #316272;
font-weight: bold;
font-color: #fff;
text-decoration: none;
}
#navigation li:hover li a, #navigation li ul li a:hover {
color: #333;
background: #fcfcfc;
}
#navigation li li {
width: 175px;
height: auto;
padding: 0;
}
#navigation li li a, #navigation li li a:hover, #navigation li li a, #navigation a.active li a, #navigation li:hover li a, #navigation li.sfhover li a {
background: none;
height: 30px;
line-height: 30px;
margin: 0;
font-weight: normal;
text-transform: uppercase;
font-size: 12px;
color: #fff;
}
#navigation li ul {
background: #316272;
position: absolute;
width: 175px;
left: -999em;
margin-left: -1px;
}
#navigation li ul ul {
margin: -27px 0 0 195px;
}
#navigation ul li li:hover, #navigation ul li li.hover {
position: static;
}
#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {
left: -999em;
}
#navigation li:hover ul, #navigation li.sfhover ul {
left: 3px;
}
#navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul {
left: 0;
}

Internetseite: hxxp:www.long-distance-pushing.de/ldp/index.php [nonactive]

[Tekkla]

Hi, ich sehe auf der verlinkten Seite gar kein SMF Menü. Ist das beabsichtigt?

[Benjamin80]

Hallo, doch das Menü ist da- ich habe nur das Design an Wordpress angeglichen.

long-distance-pushing.de/ldp/index.php =Hier ist das Menü des Forums

[Tekkla]

Wo genau ist das SMF Menü?

[Benjamin80]

Hallo,

Das SMF Menü ist unter hxxp:long-distance-pushing.de/ [nonactive]ldp/index.php,
erstellt mit Menu Editor Lite (SMF Plugin) - auf deinem Screenshot also alle Menü-Einträge -:
[Blog, Publish, Routes, Forum, Events]
Blog = External Link (verweist auf hxxp:long-distance-pushing.de/index.php [nonactive], dort ist der Blog installiert)
Publish = External Link (verweist auf hxxp:long-distance-pushing.de/sample-page/ [nonactive])
Routes = External Link (verweist auf hxxp:long-distance-pushing.de/routenplanung/ [nonactive])
Forum = Internal Link (verweist auf Übersicht, nach Login enthält es 4 Children Buttons)

Das identisch aussehende Wordpress Menü unter hxxp:long-distance-pushing.de [nonactive]:
[Blog, Publish, Routes, Forum, Events]
Blog = Internal
Publish = Internal
Routes = Internal
Forum = External Link (verweist auf  hxxp:long-distance-pushing.de/ [nonactive]ldp/index.php)


Wenn du an einem relativ großen Monitor hxxp:long-distance-pushing.de [nonactive] (und NICHT hxxp:long-distance-pushing.de/ [nonactive]ldp/index.php) aufrufst,
bewegst du dich auf dem Wordpress-Menü. Der erste Menü-Eintrag (Blog) ist relativ Bündig zum Banner und Webseiteninhalt.

Klickst du jetzt auf den Menü-Eintrag "Forum "(dabei wechselst du von Wordpress zu SMF) siehst du, dass der erste Menüeintrag (Blog) nicht mehr bündig ist.
Bei SMF verschiebt sich "Blog" etwas nach rechts.

Das liegt daran, dass der Link "Blog" nicht mit dem Buchstaben "B" beginnt.
Bewege mal die Maus ein wenig nach Links neben dem "B" von "Blog". Du wirst feststellen, der Hyperlink beginnt vor dem Buchstaben.
Das liegt daran, dass  ich mit

Code Select Expand

padding: 0 0 0 45px; arbeiten muss, weil

Code Select Expand

Word Spacing nicht akzeptiert wird (seltsamerweise aber

Code Select Expand

Letter Spacing ).


Wenn ich aus diesem CSS-Schnippsel:

Code Select Expand

#navigation li a {
display: block;
line-height: 50px;
padding: 0 0 0 45px;
color: #ffffff;
font-size: 14px;
letter-spacing: 2px;

folgendes mache:

Code Select Expand

#navigation li a {
display: block;
line-height: 50px;
padding: 0 0 0 0px;
color: #ffffff;
font-size: 14px;
letter-spacing: 2px;

Dann rutscht das SMF-Menü, so wie es sein soll, nach links.
Damit die Menü-Einträge dennoch so weit auseinander stehen, müsste ich dann folgendes einfügen:

Code Select Expand

#navigation li a {
display: block;
line-height: 50px;
padding: 0 0 0 0px;
color: #ffffff;
font-size: 14px;
letter-spacing: 2px;
word-spacing: 45px;

Genau dies funktioniert aber nicht.
Die Ergänzung

Code Select Expand

word-spacing: 45px;
wird einfach ignoriert.

Mit dem Trick

Code Select Expand

padding: 0 0 0 45px;
sieht nun das Menü von Wordpress völlig identisch aus, mit dem von SMF:
Aber beim Wechsel zwischen den beiden Menüs, tritt die optische Täuschung auf, dass sich das Menü leicht verschiebt.

[Benjamin80]

Code Select Expand

padding: 0 0 0 45px;
geändert auf

Code Select Expand

padding: 0 45px 0 0;

...und schon ist das Menü bündig. 

[Tekkla]

Die optische Täuschung ist keine Täuschung. Der Grund liegt darin, dass die .wrapper CSS Klasse aus SMF eine fixe Breite hat, während das WP Theme relative Breitenangaben nutzt.

SMF

Code Select Expand

.wrapper {
    width: 980px;
    margin: 0 auto;
}

Dein WP Theme

Code Select Expand

media="all"
#inner-header, .inner-nav {
    position: relative;
    width: 96%;
    margin: 0 auto;
    padding: 15px 2%;
    max-width: 1044px;
    max-width: 104.4rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}