Problem mit Text in Navigation

[n3012]

Hallo Leute,
ich hab hier ein kleines Problem und finde keine richtige Lösung dafür. ich hoffe ihr könnt mir helfen.

ALSO:
Senio-Vital | Persönlichkeit und Vitalität bewahren HIER ist die Index. Es geht um die Navigation. Diese habe ich mit CSS gemacht und die Positionen des Hintergrundbildes verschoben. Mein problem is das der Text soweit oben klebt, und wenn ich ihn zwecks margin oder padding runtersetze nimmt er den background gleich mit runter. was ja auch logisch ist da der link und der background ja in der selben klasse sind

hier die CSS:
http://www.aightysix.de/badboys/test/shrd/stylesheet.css

es betrifft den bereich:

#rollovermenu a.link {
float:left;
height: 32px;
padding-left:10px;
padding-right:10px;
color:#4284b4;
text-decoration:none;
font-weight:bold;
background: url("../img/menu_over.jpg") repeat;
}

#rollovermenu a.link:hover {
background-position: 0px -32px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

 

[Efchen]

Mein problem is das der Text soweit oben klebt, und wenn ich ihn zwecks margin oder padding runtersetze nimmt er den background gleich mit runter. was ja auch logisch ist da der link und der background ja in der selben klasse sind

Naja, dann musst Du Dein Hintergrundbild halt auch an die richtige Größe den Links anpassen. Wenn Du noch ein padding hinzufügst, wird das Element natürlich größer. Ich sehe keinen Fehler, nur ein Verständnisproblem zum Thema "Box Model".

Höhe = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Gruß,
-Efchen

 

[n3012]

ja das habe ich durch zufall auch gerade herrausgefunden... da hat mir die logik gefehlt danke

ich sitz einfach schon zu lange hier

 

[koslowski]

Hi,

das Problem mit dem verschieben der HG-Grafik per background-position und das der Linktext dann oft zu weit oben ist kenne ich.

Eine mögliche Lösung ist:

Das ist ein einfaches Beispiel eines grafischen Menüs. In diesem Fall ohne Gilder/Levin, da der Linktext nicht in der Grafik hockt sondern nur normal im Quelltext steht, d.h. die Grafik bildet nur den Hintergrund zum Linktext.
Das span wird benötigt um den Linktext später auch vertikal per padding in der Grafik richtig zu positionieren.

Quelltext:

[COLOR=black]<ul id="navigation">[/COLOR]
  [COLOR=black]<li id="navi01"><strong><span>Startseite</span><strong></li>[/COLOR]
  [COLOR=black]<li id="navi02"><a[/COLOR][COLOR=black]href="leistungen.htm"><span>Leistungen</span>[/COLOR]
[COLOR=black]  </a></li>[/COLOR]
  [COLOR=black]<li id="navi03"><a href="kontakt.htm"><span>Kontakt</span></a></li>[/COLOR]
    [COLOR=black]</ul>[/COLOR]

a wurde auf der aktuellen Seite durch strong ersetzt, damit der Link der akt. Seite nicht auf sich selber zeigt.
[FONT=&quot]Die Menügrafik ist 190x100px groß und beeinhaltet in der oberen Hälfte den Normalzustand der Links und in der unteren Hälfte den hover/focus-Zustand der Links.
Sollte der active-Zustand auch noch mit drauf, wäre die Grafik 190x150px groß und würde vertikal alle drei Zustände beherbergen.
Dann müsste aber dieser Zustand natürlich auch noch extra deklariert werden.

[/FONT]Die ul bekommt eine feste Breite.

#navigation  {
      width:240px;

Die Listenpunkte bekommen Breite und Höhe entsprechend den Abmessungen der Grafik bezogen auf einen Linkzustand.

#navi01,
#navi02,
#navi03 {
    width:190px;
    height:50px;
}

a und strong bekommen display:block und die volle Größe des Elternelements ( li! ) zugewiesen. Durch text-align:center wird die Schrift horizontal in der Grafik ausgerichtet

#navi01 a,
#navi01 strong,
#navi02 a,
#navi02 strong,
#navi03 a,
#navi03 strong   {
     display:block;
     width:100%;
     height:100%;
     text-align:center;
}

Damit der aktuelle Menüpunkt immer hervorgehoben ist bekommt strong die Deklaration des hover/focus-Zustandes zugewiesen:

#navi01 strong,
#navi02 strong,
#navi03 strong   {
    background:url(grafik.gif) no-repeat 0px -50px;
}

Der Normalzustand der Links wird deklariert:

#navi01 a,
#navi02 a,
#navi03 a   {
    background:url(grafik.jpg) no-repeat 0 0;
}

Deklaration des hover/focus-Zustandes. Der untere Teil der Grafik wird per background-position nach oben geschoben:

#navi01 a:hover,
#navi01 a:focus,
#navi02 a:hover,
#navi02 a:focus,
#navi03 a:hover,
#navi03 a:focus   {
    width:100%;
    height:100%;
    color:#2e5c89;
    background:url(../images/navi.jpg) no-repeat 0px -50px;
}

span bekommt display:block und entsprechendes padding-top damit der Linktext auch vertikal in der Grafik richtig positioniert wird:

#navigation #navi01 a span,
#navigation #navi01 strong span,
#navigation #navi02 a span,
#navigation #navi01 strong span,
#navigation #navi03 a span,
 #navigation #navi01 strong span, {
    display:block;
    padding-top:15px;
}

Sollte auch im IE funktionieren, da alles "Layout" hat.;-)
Werte sind nur Beispielwerte, mußt du noch für dich anpassen.

koslowski

edit. sorry das der Quelltext in einer Reihe steht. Umbrüche hatte ich eingefügt. Sehr seltsam.