[HTML] Menü über Bild anzeigen

Departet

Lieutenant
Dabei seit
Sep. 2008
Beiträge
609
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

Commander
Dabei seit
Juli 2005
Beiträge
2.946
z-index funktioniert nur bei positionierten Element. "position: static" ist der Standardwert = unpositioniertes Element.
 

biloa

Cadet 2nd Year
Dabei seit
Jan. 2006
Beiträge
31
Wieso nimmst kein DIV-Container und legst dort im background das Bild ab.
 

Crizzo

Commander
Dabei seit
Juli 2005
Beiträge
2.946
Was soll das denn ändern? O.o
 

trialgod

Lt. Commander
Dabei seit
Feb. 2008
Beiträge
1.540
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:

biloa

Cadet 2nd Year
Dabei seit
Jan. 2006
Beiträge
31
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

Lieutenant
Ersteller dieses Themas
Dabei seit
Sep. 2008
Beiträge
609
Zitat von trialgod:
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
 

trialgod

Lt. Commander
Dabei seit
Feb. 2008
Beiträge
1.540
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>)...
 
Top