[css&html]Tabel met links over een menu

[Verwijderd]

Ik ben bezig met een website waarbij ik aan de linkerkant een plaatje heb. Over dit plaatje wil ik een tabel laden met links erin. Ik probeer doormiddel van de z-index probeer in het menu voor de afbeelding te krijgen. Alleen het menu blijft achter de afbeelding verdwijnen, behalve als ik het plaatje op -1 zet, maar dan verdwijnt deze in firefox in het niets.

De HTML:

HTML:

<div class="navigation">
<table class="navigation">
<tr><td class="linkkopje">&nbsp;Next rallies:</td></tr>
<tr><td class="navigation">
<a href="rallies/55th.html" class="main_link_double" target="mainframe">&nbsp;- 55th Slovakia&nbsp;</a>
</td></tr>
<tr><td class="navigation">
<a href="rallies/56th.html" class="main_link_double" target="mainframe">&nbsp;- 56th Portugal&nbsp;</a>
</td></tr>
<tr><td class="navigation">
<a href="rallies/57th.html" class="main_link_double" target="mainframe">&nbsp;- 57th South Korea&nbsp;</a>
</td></tr></table>
</div>


<div class="imageleft">     
    <img src="images_template1/rallies.jpg" alt="Rallies" height="350" width="150">
</div>

de CSS

Cascading Stylesheet:

div.imageleft {
    position:fixed;
    left:0px; 
    top:0px; 
    width:150px; 
    height:350px; 
    z-index:0;
}

table.navigation {
width:150px;
border: 0px;
}

td.linkkopje {
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    color: #FFFFFF;
    line-height: 20px;
    background-color: #000000;
    text-align:left;

    width:150px; 
    height: 20px;
    vertical-align: middle;
    z-index:2;
    background-color: #000000;
    filter:alpha(opacity=60);
    opacity: .6;
    -moz-opacity: .6;

}

div.navigation {
    z-index:1;
}

td.navigation {
    width:150px; 
    height: 20px;
    vertical-align: middle;
    background-color: #000000;
    filter:alpha(opacity=60);
    opacity: .6;
    -moz-opacity: .6;
}

a.main_link_double:active,a.main_link_double:visited,a.main_link_double:link{
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    color: #FFFFFF;
    line-height: 20px;
    background-color: #000000;
    text-align: left;


}
a.main_link_double:hover{
    background-color:#333333;
    color: #FFFFFF;
    text-align: left;
}

Ik hoop dat iemand er een oplossing voor heeft.

[crisp]

Voor dat soort dingen is nou een image-map...

[Verwijderd]

nee, dat is niet precies wat ik zoek, voor latere doeleinden is dat niet dynamisch genoeg. Om even snel een link aan te passen (de tekst ervan) moet je het origineel van het plaatje hebben en met dezelfde stijl er een tekst in kunnen zetten.

[Rekcor]

Kun je het niet beter anders aanpakken?

Bijv. bij de <div class="navigation"> als background-image 'images_template1/rallies.jpg' instellen, en <div class="imageleft"> verwijderen?

Moet <div class="navigation"> wel minstens 350x150 zijn natuurlijk

[ Voor 9% gewijzigd door Rekcor op 02-03-2007 11:19 ]

[Verwijderd]

Rekcor schreef op vrijdag 02 maart 2007 @ 11:18:
Kun je het niet beter anders aanpakken?

Bijv. bij de <div class="navigation"> als background-image 'images_template1/rallies.jpg' instellen, en <div class="imageleft"> verwijderen?

Moet <div class="navigation"> wel minstens 350x150 zijn natuurlijk

ja dat werkt wel..

Dank je wel

[Rekcor]

Succes!