✔ Navigation mit Bildern

Die Grafik menu.png habe ich angehängt gehabt. Ich möchte wie man in der Clipboard-Bilddatei sieht, von oben ausgesehen nur die fünfte Pixelzeile dauernd wiederholen. Die hat eine Höhe von einem Pixel.
 
Dann versteh ich deine Frage nach der einzelnen Grafikdatei nicht.

Und wie ich vorhin schon zu deinem Versuchsballon erläutert hatte, lässt sich ein vertikal zu wiederholendes Bild nicht zusätzlich vertikal positionieren.

Definier mal für das Element zusätzlich einen Rahmen, damit du deutlich siehst, dass der zweite background-position-Wert "5px" vom Browser ignoriert wird.

mfg Maik
 
Genau deswegen, weil du meinst, dass das nicht geht... dann muss es doch eine einzelne Grafikdatei sein?
 
Jo, dieses 1px-Segment, dass du aus dieser Grafikdatei wiederholen willst - jetzt ist bei mir der Groschen gefallen :p

"Rein theoretisch" hättest du aber "0 -5px" deklarieren müssen, um diesen Bildausschnitt an den oberen Elementrand zu hieven :-)

mfg Maik
 
Weil du in der Grafik die fünfte Pixel-Zeile von oben nutzen willst, die doch sicherlich am oberen Elementrand beginnen soll - darum "-5px", um diesen Ausschnitt des Hintergrundbildes nach oben zu verrücken ;-)

Aber lassen wir es hier mit einer weiteren Diskussion ob der Gründe, da dies so aus besagtem Grunde eh nicht möglich ist.

Es sollte von mir auch nur ein allgemeiner Hinweis sein, wie es theoretisch technisch umzusetzen ist, um einen tiefer gelegenen Bildausschnitt am oberen Rand des Elements zu positionieren.

mfg Maik
 
Zum Gegenvergleich darfst du die beiden nachfolgenden Varianten im Browser betrachten - beachte hierbei meine entfernte repeat-y-Angabe, damit die vertikale Position greift. Zur Visualisierung der Boxengrenzen hab ich zusätzlich einen dünnen durchgezogenen roten Rahmen definiert.

  • "5px"
HTML: 
<li style="height:20px; background: url(images/menu.png) 0 5px; border:thin solid red;">a</li>
  • "-5px"
HTML: 
<li style="height:20px; background: url(images/menu.png) 0 -5px; border:thin solid red;">a</li>

mfg Maik
 
Ich hab nochmal eine Frage und wollte keinen neuen Thread machen.

Kann ich beim Hover über ein Bild, ein anderes Element ebenfalls CSS-Eigenschaften zuweisen?

Ich habe nämlich eine Grafik, die ich splitten musste und die jeweils in verschiedenen Container sind, jedoch trotzdem optisch gesehen zueinander gehören.
 
Hi,

das wäre nur möglich, wenn beide Elemente im HTML-Code unmittelbar benachbart sind - also z.B.:

HTML: 
<img src="bild1.jpg" alt="">
<img src="bild2.jpg" alt="">

In diesem Fall steht dir der Selektor für benachbarte Elemente zur Verfügung.

Andernfalls mußt du dein Vorhaben mit Javascript lösen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück