Text über Bild (z-index)

[jlow_69]

Hallo zusammen,


Beim Arbeiten mir eine weitere Frage aufgetaucht.
Ich möchte gerne eine Art 'Menüleiste' visualisieren. Dazu habe ich ein Bild (Sidebar.png) welches, wie der Name sagt, eine Sidebar darstellt.

Auf diesem Bild möchte ich verlinkten Text darstellen lassen, welcher dann zu den einzelnen Menüs führt. Z.B:

Home
Page 1
Page 2
Page 3


Mein momentaner Code dafür sieht so aus:



HTML:

<img id="sidebar" src="../Images/sidebar.png">
 <!--- Subs --->            
<p id="Sub_1">Basics</p>

CSS:

#sidebar {position: absolute;
top: 138px;
z-index: 1;
}


#Sub_1 {
position: absolute;
left: 0px;
top: 148px;
z-index: 2;
}

Leider leider funktioniert das nicht.
Der 'String' 'Basic' wird neben der Sidebar.png angezeigt. Als würde sie eben auf der gleichen 'Eben' wie der Text liegen, und somit eine Begrenzung sein.

Wo liegt der Fehler?

Grüsse,

jlow_69

 

[Tronjer]

Denk mal nach!

Woran werden sich die beiden Elemente wohl ausrichten, wenn sie nicht in einem Wrapper verpackt werden? Nur weil du sie im HTML untereinander setzt, bedeutet es nicht zwangsläufig, dass der Browser das genauso sieht. Außerdem verwendet man für Navigationsleisten Listen und keine Absätze.

Lösungansatz:
- Nach Tutorials für vertikale Navigation suchen.
- Eigenes Menü erstellen.
- Menü in ein Div stellen und das Bild als background-image definieren.

 

[jlow_69]

Denk mal nach!

Woran werden sich die beiden Elemente wohl ausrichten, wenn sie nicht in einem Wrapper verpackt werden? Nur weil du sie im HTML untereinander setzt, bedeutet es nicht zwangsläufig, dass der Browser das genauso sieht. Außerdem verwendet man für Navigationsleisten Listen und keine Absätze.

Lösungansatz:
- Nach Tutorials für vertikale Navigation suchen.
- Eigenes Menü erstellen.
- Menü in ein Div stellen und das Bild als background-image definieren.

Danke für die Antwort.
Ich bin noch Neuling in HTML, also entschuldige mich bitte.. ^^
Von einem Wrapper habe ich noch nie etwas gehört. Jedoch ist mir bewusst dass die Reihenfolge der Syntax meistens keinen Einfluss auf die schlussendliche Ausführung hat.

Das Bild kann ich auch nicht als background-image nehmen da ich bereits ein 'richtiges' background-image habe.

Trotzdem danke für die Lösungsansätze.