[HTML] Menü über Bild anzeigen

Departet

Lieutenant
Registriert
Sep. 2008
Beiträge
716
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
 
z-index funktioniert nur bei positionierten Element. "position: static" ist der Standardwert = unpositioniertes Element.
 
Wieso nimmst kein DIV-Container und legst dort im background das Bild ab.
 
Was soll das denn ändern? O.o
 
Code:
#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?
 
Zuletzt bearbeitet:
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>
 
trialgod schrieb:
Code:
#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 :D Hätee man eher drauf kommen können. Danke an Alle.


Mfg Styler
 
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>)...
 
Zurück
Oben