Ich bastle gerade an einer Seite, in der es einen Bereich gibt in dem oben eine "tabbed" Navigationsleiste mit 5 verschiedenen Themenbereichen vorhanden ist. Direkt darunter soll sich der Content zu den jeweiligen Punkten befinden. Somit habe ich also fünf Layer (Floating Boxes) innerhalb einer normalen HTML-Zelle (relativ dazu positioniert), die übereinander liegen und die durch die "ShowHide"-Action von GoLive jeweils ein- und ausgeblendet werden können, wenn man auf einen der fünf Themenbereiche in der Navigationsleiste (ausserhalb der Layer) klickt.
Nach langem herumbasteln und experimentieren habe ich folgendes zustandegekriegt:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>TITEL</title>
<link href="stylesheets/styles.css" rel="stylesheet" media="screen">
<style type="text/css" media="screen"><!--
#descriptionlayer { position: relative; z-index: 500; top: 0px; left: 0px; width: 478px; height: 480px; visibility: visible; display: block }
#featureslayer { position: relative; z-index: 400; top: -480px; left: 0px; width: 478px; height: 480px; visibility: hidden; display: block }
#whatyougetlayer { position: relative; z-index: 300; top: -960px; left: 0px; width: 478px; height: 480px; visibility: hidden; display: block }
#requirementslayer { position: relative; z-index: 200; top: -1440px; left: 0px; width: 478px; height: 480px; visibility: hidden; display: block }
#comparelayer { position: relative; z-index: 100; top: -1920px; left: 0px; width: 478px; height: 480px; visibility: hidden; display: block }
--></style>
<csactions>
<csaction name="BD0894C519" class="ShowHide" type="onevent" val0="descriptionlayer" val1="0"></csaction>
<csaction name="BD0894C520" class="ShowHide" type="onevent" val0="whatyougetlayer" val1="0"></csaction>
<csaction name="BD0894C521" class="ShowHide" type="onevent" val0="requirementslayer" val1="0"></csaction>
<csaction name="BD0894C522" class="ShowHide" type="onevent" val0="comparelayer" val1="0"></csaction>
<csaction name="BD0894C523" class="ShowHide" type="onevent" val0="featureslayer" val1="1"></csaction>
<csaction name="BD0894EA24" class="ShowHide" type="onevent" val0="featureslayer" val1="0"></csaction>
<csaction name="BD0894EA25" class="ShowHide" type="onevent" val0="descriptionlayer" val1="0"></csaction>
<csaction name="BD0894EA26" class="ShowHide" type="onevent" val0="requirementslayer" val1="0"></csaction>
<csaction name="BD0894EA27" class="ShowHide" type="onevent" val0="comparelayer" val1="0"></csaction>
<csaction name="BD0894EA28" class="ShowHide" type="onevent" val0="whatyougetlayer" val1="1"></csaction>
<csaction name="BD0895EB64" class="ShowHide" type="onevent" val0="featureslayer" val1="0"></csaction>
<csaction name="BD0895EB65" class="ShowHide" type="onevent" val0="descriptionlayer" val1="0"></csaction>
<csaction name="BD0895EB66" class="ShowHide" type="onevent" val0="whatyougetlayer" val1="0"></csaction>
<csaction name="BD0895EB67" class="ShowHide" type="onevent" val0="comparelayer" val1="0"></csaction>
<csaction name="BD0895EB68" class="ShowHide" type="onevent" val0="requirementslayer" val1="1"></csaction>
<csaction name="BD08960D69" class="ShowHide" type="onevent" val0="featureslayer" val1="0"></csaction>
<csaction name="BD08960D70" class="ShowHide" type="onevent" val0="descriptionlayer" val1="0"></csaction>
<csaction name="BD08960D71" class="ShowHide" type="onevent" val0="whatyougetlayer" val1="0"></csaction>
<csaction name="BD08960D72" class="ShowHide" type="onevent" val0="requirementslayer" val1="0"></csaction>
<csaction name="BD08960D73" class="ShowHide" type="onevent" val0="comparelayer" val1="1"></csaction>
<csaction name="BD0884E23" class="ShowHide" type="onevent" val0="featureslayer" val1="0"></csaction>
<csaction name="BD08939111" class="ShowHide" type="onevent" val0="whatyougetlayer" val1="0"></csaction>
<csaction name="BD08947C12" class="ShowHide" type="onevent" val0="requirementslayer" val1="0"></csaction>
<csaction name="BD08948B13" class="ShowHide" type="onevent" val0="comparelayer" val1="0"></csaction>
<csaction name="BD0884F34" class="ShowHide" type="onevent" val0="descriptionlayer" val1="1"></csaction>
</csactions>
<csscriptdict import>
<script type="text/javascript" src="file:///Macintosh%20HD/Users/fvv/Library/Preferences/Adobe/GoLive/Settings/JScripts/GlobalScripts/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"><!--
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'descriptionbutton',/*URL*/'media/images/site_elements/navigation/linkbar/01_description.gif',/*URL*/'media/images/site_elements/navigation/linkbar/01_description_off.gif',/*URL*/'','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'featuresbutton',/*URL*/'media/images/site_elements/navigation/linkbar/02_features.gif',/*URL*/'media/images/site_elements/navigation/linkbar/02_features_off.gif',/*URL*/'','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'whatyougetbutton',/*URL*/'media/images/site_elements/navigation/linkbar/03_whatyouget.gif',/*URL*/'media/images/site_elements/navigation/linkbar/03_whatyouget_off.gif',/*URL*/'','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button6',/*URL*/'media/images/site_elements/navigation/linkbar/04_requirements.gif',/*URL*/'media/images/site_elements/navigation/linkbar/04_requirements_off.gif',/*URL*/'','');
CSInit[CSInit.length] = new Array(CSILoad,/*CMP*/'button7',/*URL*/'media/images/site_elements/navigation/linkbar/05_compare.gif',/*URL*/'media/images/site_elements/navigation/linkbar/05_compare_off.gif',/*URL*/'','');
CSAct[/*CMP*/ 'BD0894C519'] = new Array(CSShowHide,/*CMP*/ 'descriptionlayer',0);
CSAct[/*CMP*/ 'BD0894C520'] = new Array(CSShowHide,/*CMP*/ 'whatyougetlayer',0);
CSAct[/*CMP*/ 'BD0894C521'] = new Array(CSShowHide,/*CMP*/ 'requirementslayer',0);
CSAct[/*CMP*/ 'BD0894C522'] = new Array(CSShowHide,/*CMP*/ 'comparelayer',0);
CSAct[/*CMP*/ 'BD0894C523'] = new Array(CSShowHide,/*CMP*/ 'featureslayer',1);
CSAct[/*CMP*/ 'BD0894EA24'] = new Array(CSShowHide,/*CMP*/ 'featureslayer',0);
CSAct[/*CMP*/ 'BD0894EA25'] = new Array(CSShowHide,/*CMP*/ 'descriptionlayer',0);
CSAct[/*CMP*/ 'BD0894EA26'] = new Array(CSShowHide,/*CMP*/ 'requirementslayer',0);
CSAct[/*CMP*/ 'BD0894EA27'] = new Array(CSShowHide,/*CMP*/ 'comparelayer',0);
CSAct[/*CMP*/ 'BD0894EA28'] = new Array(CSShowHide,/*CMP*/ 'whatyougetlayer',1);
CSAct[/*CMP*/ 'BD0895EB64'] = new Array(CSShowHide,/*CMP*/ 'featureslayer',0);
CSAct[/*CMP*/ 'BD0895EB65'] = new Array(CSShowHide,/*CMP*/ 'descriptionlayer',0);
CSAct[/*CMP*/ 'BD0895EB66'] = new Array(CSShowHide,/*CMP*/ 'whatyougetlayer',0);
CSAct[/*CMP*/ 'BD0895EB67'] = new Array(CSShowHide,/*CMP*/ 'comparelayer',0);
CSAct[/*CMP*/ 'BD0895EB68'] = new Array(CSShowHide,/*CMP*/ 'requirementslayer',1);
CSAct[/*CMP*/ 'BD08960D69'] = new Array(CSShowHide,/*CMP*/ 'featureslayer',0);
CSAct[/*CMP*/ 'BD08960D70'] = new Array(CSShowHide,/*CMP*/ 'descriptionlayer',0);
CSAct[/*CMP*/ 'BD08960D71'] = new Array(CSShowHide,/*CMP*/ 'whatyougetlayer',0);
CSAct[/*CMP*/ 'BD08960D72'] = new Array(CSShowHide,/*CMP*/ 'requirementslayer',0);
CSAct[/*CMP*/ 'BD08960D73'] = new Array(CSShowHide,/*CMP*/ 'comparelayer',1);
CSAct[/*CMP*/ 'BD0884E23'] = new Array(CSShowHide,/*CMP*/ 'featureslayer',0);
CSAct[/*CMP*/ 'BD08939111'] = new Array(CSShowHide,/*CMP*/ 'whatyougetlayer',0);
CSAct[/*CMP*/ 'BD08947C12'] = new Array(CSShowHide,/*CMP*/ 'requirementslayer',0);
CSAct[/*CMP*/ 'BD08948B13'] = new Array(CSShowHide,/*CMP*/ 'comparelayer',0);
CSAct[/*CMP*/ 'BD0884F34'] = new Array(CSShowHide,/*CMP*/ 'descriptionlayer',1);
// --></script>
<csactions>
<csaction name="BD0881D80" class="ShowHide" type="onevent" val0="" val1=""></csaction>
</csactions>
</csactiondict>
<meta http-equiv="Content-Language" content="de">
</head>
<body onload="CSScriptInit();" bgcolor="white" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="black" width="1"></td>
<td align="left" valign="top" width="698">
<table width="699" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<td rowspan="3" width="30"></td>
<td valign="bottom" width="638" height="20"></td>
<td rowspan="3" width="30"></td>
</tr>
<tr>
<td align="left" valign="top" width="638">
<table width="638" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" width="150">
<p><img src="media/images/site_elements/misc_gifs/box_top_solutions.gif" alt="" height="20" width="150" border="0"></p>
</td>
<td align="left" valign="top" width="25"><img src="media/images/site_elements/misc_gifs/whitepixel.gif" alt="" height="5" width="25" border="0"></td>
<td align="left" valign="top" width="478">
<table width="478" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="media/images/content_pics/B100_products/BlueEyes_CP_DE.jpg" alt="" height="330" width="478" border="0"></td>
</tr>
<tr height="20">
<td colspan="3" height="20"></td>
</tr>
<tr height="15">
<td colspan="3" align="center" valign="top" height="15">
<table width="477" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><img src="media/images/site_elements/navigation/linkbar/00bar_left.gif" alt="" height="20" width="29" border="0"></td>
<td align="left" valign="top"><csobj csclick="BD0884E23,BD08939111,BD08947C12,BD08948B13,BD0884F34" h="20" ht="media/images/site_elements/navigation/linkbar/01_description_off.gif" t="Button" w="71"><a href="#" onmouseover="return CSIShow(/*CMP*/'descriptionbutton',1)" onmouseout="return CSIShow(/*CMP*/'descriptionbutton',0)" onclick="CSAction(new Array(/*CMP*/'BD0884E23',/*CMP*/'BD08939111',/*CMP*/'BD08947C12',/*CMP*/'BD08948B13',/*CMP*/'BD0884F34'));return CSClickReturn()"><img src="media/images/site_elements/navigation/linkbar/01_description.gif" width="71" height="20" name="descriptionbutton" border="0"></a></csobj></td>
<td align="left" valign="top"><img src="media/images/site_elements/navigation/linkbar/00bar_spacer.gif" alt="" height="20" width="26" border="0"></td>
<td align="left" valign="top"><csobj csclick="BD0894C519,BD0894C520,BD0894C521,BD0894C522,BD0894C523" h="20" ht="media/images/site_elements/navigation/linkbar/02_features_off.gif" t="Button" w="44"><a href="#" onmouseover="return CSIShow(/*CMP*/'featuresbutton',1)" onmouseout="return CSIShow(/*CMP*/'featuresbutton',0)" onclick="CSAction(new Array(/*CMP*/'BD0894C519',/*CMP*/'BD0894C520',/*CMP*/'BD0894C521',/*CMP*/'BD0894C522',/*CMP*/'BD0894C523'));return CSClickReturn()"><img src="media/images/site_elements/navigation/linkbar/02_features.gif" width="44" height="20" name="featuresbutton" border="0"></a></csobj></td>
<td align="left" valign="top"><img src="media/images/site_elements/navigation/linkbar/00bar_spacer.gif" alt="" height="20" width="26" border="0"></td>
<td align="left" valign="top"><csobj csclick="BD0894EA24,BD0894EA25,BD0894EA26,BD0894EA27,BD0894EA28" h="20" ht="media/images/site_elements/navigation/linkbar/03_whatyouget_off.gif" t="Button" w="69"><a href="#" onmouseover="return CSIShow(/*CMP*/'whatyougetbutton',1)" onmouseout="return CSIShow(/*CMP*/'whatyougetbutton',0)" onclick="CSAction(new Array(/*CMP*/'BD0894EA24',/*CMP*/'BD0894EA25',/*CMP*/'BD0894EA26',/*CMP*/'BD0894EA27',/*CMP*/'BD0894EA28'));return CSClickReturn()"><img src="media/images/site_elements/navigation/linkbar/03_whatyouget.gif" width="69" height="20" name="whatyougetbutton" border="0"></a></csobj></td>
<td align="left" valign="top"><img src="media/images/site_elements/navigation/linkbar/00bar_spacer.gif" alt="" height="20" width="26" border="0"></td>
<td align="left" valign="top"><csobj csclick="BD0895EB64,BD0895EB65,BD0895EB66,BD0895EB67,BD0895EB68" h="20" ht="media/images/site_elements/navigation/linkbar/04_requirements_off.gif" t="Button" w="79"><a href="#" onmouseover="return CSIShow(/*CMP*/'button6',1)" onmouseout="return CSIShow(/*CMP*/'button6',0)" onclick="CSAction(new Array(/*CMP*/'BD0895EB64',/*CMP*/'BD0895EB65',/*CMP*/'BD0895EB66',/*CMP*/'BD0895EB67',/*CMP*/'BD0895EB68'));return CSClickReturn()"><img src="media/images/site_elements/navigation/linkbar/04_requirements.gif" width="79" height="20" name="button6" border="0"></a></csobj></td>
<td align="left" valign="top"><img src="media/images/site_elements/navigation/linkbar/00bar_spacer.gif" alt="" height="20" width="26" border="0"></td>
<td align="left" valign="top"><csobj csclick="BD08960D69,BD08960D70,BD08960D71,BD08960D72,BD08960D73" h="20" ht="media/images/site_elements/navigation/linkbar/05_compare_off.gif" t="Button" w="49"><a href="#" onmouseover="return CSIShow(/*CMP*/'button7',1)" onmouseout="return CSIShow(/*CMP*/'button7',0)" onclick="CSAction(new Array(/*CMP*/'BD08960D69',/*CMP*/'BD08960D70',/*CMP*/'BD08960D71',/*CMP*/'BD08960D72',/*CMP*/'BD08960D73'));return CSClickReturn()"><img src="media/images/site_elements/navigation/linkbar/05_compare.gif" width="49" height="20" name="button7" border="0"></a></csobj></td>
<td align="left" valign="top"><img src="media/images/site_elements/navigation/linkbar/00bar_right.gif" alt="" height="20" width="31" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr height="15">
<td colspan="3" height="15"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top">
<div id="descriptionlayer">
Beschreibung</div>
<div id="featureslayer">
Features</div>
<div id="whatyougetlayer">
Lieferumfang</div>
<div id="requirementslayer">
Anforderungen</div>
<div id="comparelayer">
Vergleich</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="25">
<td width="638" height="25"></td>
</tr>
</table>
</td>
<td align="left" valign="top" bgcolor="black" width="1"></td>
</tr>
<tr height="1">
<td align="left" valign="top" bgcolor="black" width="1" height="1"></td>
<td align="left" valign="top" bgcolor="black" width="698" height="1"></td>
<td align="left" valign="top" bgcolor="black" width="1" height="1"></td>
</tr>
</table>
</div>
</body>
</html>
Dabei tauchen zwei Probleme auf:
1. Die Seite funktioniert in Safari/Mac wunderbar in IE/Mac versagt aber die Navigation teilweise.
2. Vermutlich durch mein "Schummeln" mit den Minuswerten bei den unteren Layern (-480, -960, -1440, usw.) verursacht, entsteht am unteren Rand der Seite ein rieser Space (wohl für alle 5 layer jeweils 480px.
Klar was ich meine oder hab ich das Problem zu kompliziert beschrieben?
Wie vermeide ich diese beiden Probleme?
Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.
