[HTML] Menü über Bild anzeigen

[Departet]

Hey,

ich wollte heute ein Menü über ein Bild anzeigen lassen, wie man es von Suchboxen und einigen Headern findet. Es wird das Menü aber IMMER unter dem Bild angezeigt.. was mache ich falsch ?

css:

ul#menu2 {
background: #E2E2E2;
text-align: center;
margin-left: 500px;
margin-top: 100px;
padding: 0;
position:static;
display: block;
padding: 8px 20px;
width: 200px;
z-index: 2;
-moz-border-radius:15px;
-khtml-border-radius:15px;

.bild {

z-index: 1;
position:static;


html:

<table width="800" bgcolor="#F8F8F8"#" align="center" border="0">

<tr>
<td height="200" align="center"><br><img src="Bilder/header.jpg" border="0" class="bild" />
<ul id="menu2">
<li><a href="#" title="Infos" target="haupt">Infos</a></li>
<li><a href="#" title="Bilder" target="haupt">Bilder</a></li>
<li><a href="#" title="Anfahrt" target="haupt">Anfahrt</a></li>
</ul>
</td>
.....
........

mit position absolute wird alles zerschossen, aber bei SelfHTML steht der z-index kann nur mit position benutzt werden. So wie ich das aber sehe brauche ich den z-index um das Menü über dem Bild anzuzeigen, oder ?



Mfg Styler

 

[Crizzo]

z-index funktioniert nur bei positionierten Element. "position: static" ist der Standardwert = unpositioniertes Element.

 

[biloa]

Wieso nimmst kein DIV-Container und legst dort im background das Bild ab.

 

[Crizzo]

Was soll das denn ändern? O.o

 

[trialgod]

#menu2 {
    height: 200px;
    width: 800px;
    margin: 0 auto;
    background: #F8F8F8 'Bilder/header.jpg' no-repeat;
}

<ul id="menu2">
    <li><a href="#" title="Infos" target="haupt">Infos</a></li>
    <li><a href="#" title="Bilder" target="haupt">Bilder</a></li>
    <li><a href="#" title="Anfahrt" target="haupt">Anfahrt</a></li>
</ul>

Wozu die Tabelle?

 

[biloa]

CSS

<style type="text/css">
#content {
background-image: ../header.jpg);
}
</style>


<div id="content">
<ul id="menu2">
<li><a href="#" title="Infos" target="haupt">Infos</a></li>
<li><a href="#" title="Bilder" target="haupt">Bilder</a></li>
<li><a href="#" title="Anfahrt" target="haupt">Anfahrt</a></li>
</ul>
</div>

 

[Departet]

#menu2 {
    height: 200px;
    width: 800px;
    margin: 0 auto;
    background: #F8F8F8 'Bilder/header.jpg' no-repeat;
}

<ul id="menu2">
    <li><a href="#" title="Infos" target="haupt">Infos</a></li>
    <li><a href="#" title="Bilder" target="haupt">Bilder</a></li>
    <li><a href="#" title="Anfahrt" target="haupt">Anfahrt</a></li>
</ul>

Wozu die Tabelle?

Ich habe für das Layout eine Tabelle genommen. Mit css sind nur die Menüs gemacht. Das mit dem Hintergrundbild einfach in css ist mir gar nicht eingefallen Hätee man eher drauf kommen können. Danke an Alle.


Mfg Styler

 

[trialgod]

Tabellendesigns sind aber schon seit 5 Jahren out.

In Zeiten von Smartphones, Tablets, Notebooks, Desktops und Internet-fähigen Fernsehern sollte sowas dringend vermieden werden.

Jedes Element sollte als das benutzt werden, was es darstellt.

Tabellen sind Tabellen, Listen sind Listen, Absätze sind Absätze und für den Rest nimmt man Container (inline <span>, block <div>)...