nicht angemeldet
Hallo liebe HTML-Profis,
Baue gerade an meiner ersten Website und stosse gerade an meine Grenzen! Das Grundgerüst ist soweit fertig und funktioniert auch gut! Jetzt wollte ich ein CSS-Manü (div innerhalb einer Tabelle) in das Layout integrieren! Auch das klappt ganz gut, öffnet man die Seite im IE! Verkleinert man jedoch den Browser bleibt dieses Menü an der gleichen Stelle und "springt" erst wieder in die richtige Position, wenn man mit der Maus drüberfährt! Sehr seltsam das ganze...
Hier mal der Code mit entsprechendem Menübutton:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
[code lang=css]
.tabs {list-style:none; padding:0px 0 0 0px; margin:0px 0px 0px 0; height:26px;}
.tabs li {float:left; margin-right:-29px;}
.tabs li a {display:block; position:relative; text-decoration:none;}
.tabs li a em {display:block; height:26px; float:left; padding:0 39px 0 10px; background:url(tab3.gif) right top; position:relative; z-index:100; font-size:11px; font-weight:normal; font-style:normal; color:#fff; line-height:25px; font-family:verdana;}
.tabs li a b {display:block; float:left; width:29px; height:26px; background:url(tab3.gif) left top; position:relative; z-index:200;}
.tabs li a.m1 {z-index:600;}
.tabs li a.m2 {z-index:500;}
.tabs li a.m3 {z-index:400;}
.tabs li a.m4 {z-index:300;}
.tabs li a:hover {border:0; z-index:700; cursor:pointer;}
.tabs li a:hover b {background-position: left center;}
.tabs li a:hover em {background-position: right center; color:#050;}
.tabs li a.selected, .tabs li a.selected:hover {border:0; z-index:800; cursor:default;}
.tabs li a.selected b, .tabs li a.selected:hover b {background-position: left bottom;}
.tabs li a.selected em, .tabs li a.selected:hover em {background-position: right bottom; color:#000;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="Width : 100%; Height : 100%;">
<tr>
<td align="center" valign="middle">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 545px;">
<tr>
<td align="center" valign="top">
<div style="Margin-Top: 10px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px;">
<tr>
<td width="159" align="left" valign="bottom"></td>
<td align="center" valign="bottom"></td>
<td width="167" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div>
<div style="Margin-Top: 1px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px;">
<tr>
<td width="160" align="left" valign="bottom"></td>
<td width="437" align="center" valign="bottom"></td>
<td width="167" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div>
<div style="Margin-Top: 7px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 21px;">
<tr>
<td height="21">
<div id="info">
<ul class="tabs">
<li><a href="gif_overlap.html?current=one" class="m1"><b></b><em>Ausstattung</em></a></li>
<li><a href="gif_overlap.html?current=two" class="m2"><b></b><em>Grundriss</em></a></li>
<li><a href="gif_overlap.html?current=three" class="m3"><b></b><em>Lage</em></a></li>
<li><a href="gif_overlap.html?current=four" class="m4"><b></b><em>Preise</em></a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div style="Margin-Top: 0px;">
<table cellpadding="0" cellspacing="0" border="0" style="Width : 764px; Height : 279px;">
<tr>
<td width="433" align="left" valign="bottom"></td>
<td width="331" height="20" align="right" valign="bottom"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[/code]
Bitte berücksichtigen, dass ich absoluter Neuling bin und vielleicht die ein oder andere Sache im Code suboptimal gelöst ist!
Hoffe, mir kann jemand weiterhelfen!
Vielen lieben Dank schon einmal,
Gruß Manu