hilfdirselbst.ch
Facebook Twitter gamper-media
Tipps und Tricks zu Adobe GoLive von Dirk Levy, GoLive FAQ's von Randolph Sterna
Felix
Beiträge: 16
30. Jun 2004, 18:27
Beitrag #1 von 8
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


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? Top
 
X
SabineP  M 
Beiträge: 7586
30. Jun 2004, 18:58
Beitrag #2 von 8
Beitrag ID: #94254
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Hallo Felix,

gibts einen Link zur Seite?
Mit diesem Javascript kann man nichts testen:
<script type="text/javascript" src="file:///Macintosh%20HD/Users/fvv/Library/Preferences/Adobe/GoLive/Settings/JScripts/GlobalScripts/CSScriptLib.js"></script>
Und das Forum bastelt zahlreiche Umbrüche in Deinen Javascript-Quellcode.

Gruß Sabine
als Antwort auf: [#94247] Top
 
Dirk Levy  A 
Beiträge: 9244
30. Jun 2004, 19:07
Beitrag #3 von 8
Beitrag ID: #94257
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Für den IE Mac wirst Du es ohne JavaScript-
Programmierung nicht richtig hinbekommen,
das Ding ist offiziell eingestellt und die
Bugs gerade hinsichtlich der Ebenen sind
bekannt. Auch nachzulesen auf der Entwickler-
seite von Apple USA.

Nimm lieber die MenuMachine, da werden solche
Sachen gleich abgefangen.
Gruß
Dirk

[Adobe GoLive Tipps & Tricks]
http://www.gltipps.de
als Antwort auf: [#94247] Top
 
Felix
Beiträge: 16
1. Jul 2004, 10:14
Beitrag #4 von 8
Beitrag ID: #94340
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Oops, das mit der Script-Library hatte ich eigentlich extra geändert, aber Golive war wohl damit nicht einverstanden...

Eine Testseite mit dem Problem befindet sich vorläufig hier:
http://homepage.mac.com/fvv/

Ich schätze mal, da ich nicht unbedingt ein CSS-Experte bin, dass das ganze auch einfacher gehen müsste und von mir etwas unsauber gelöst ist. Ich bin für alle Vorschläge offen. :-)

MenuMachine habe ich noch nie ausprobiert, aber nach besichtigen ihrer Website bezweifle ich stark, dass mir das hier helfen würde...
als Antwort auf: [#94247] Top
 
Dirk Levy  A 
Beiträge: 9244
1. Jul 2004, 10:34
Beitrag #5 von 8
Beitrag ID: #94349
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Dann hast Du scheinbar nicht richtig nachgeschaut,
eine browsergleiche Darstellung kann man nur mittels
eines zusätzlichen JavaScripts abfangen, das evtl.
Fehlpositionierungen ändert - aber mach mal wie
Du meinst...

Gruß
Dirk

[Adobe GoLive Tipps & Tricks]
http://www.gltipps.de
als Antwort auf: [#94247] Top
 
SabineP  M 
Beiträge: 7586
1. Jul 2004, 10:39
Beitrag #6 von 8
Beitrag ID: #94350
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Hi Felix,

schreib für jeden Layer position:absolute und laß die Angaben für die Position top und left einfach weg.

Beispiel:
#descriptionlayer{position:absolute; z-index:500; width: 478px; height: 480px; visibility: visible; display: block}

Das dürfte dann in vielen Browsern so funktionieren, aber sicher nicht in allen.

Das Problem ist, daß jeder Browser unter absolut und realtiv etwas anderes vesteht.

Gruß Sabine
als Antwort auf: [#94247] Top
 
Felix
Beiträge: 16
1. Jul 2004, 11:13
Beitrag #7 von 8
Beitrag ID: #94358
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Danke Sabine, super, das ist genau das was ich wollte, Problem gelöst! :-)

Dirk: Als ich sagte, ich glaube nicht dass MenuMachine mir etwas nützen würde, meinte ich damit, dass ich auf der Website nur etwas von DropDown-Menüs gelesen habe, aber nichts was annehmen lässt, dass sich damit auch ein Menü machen lässt, wie ich es benötige.
Aber wie gesagt, ich hab MenuMachine nie ausprobiert...
als Antwort auf: [#94247] Top
 
Dirk Levy  A 
Beiträge: 9244
1. Jul 2004, 11:17
Beitrag #8 von 8
Beitrag ID: #94361
Bewertung:
(1260 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

CSS: Relative, übereinanderliegende Layer – 2 Probleme


Dann schaue Dir mal die Musterseiten für die MM
an, damit kann man mehr machen, als so offensicht-
lich wird:

http://www.denijsdesign.de/menumachine/

und da sind auch gleich kleine Anleitungen
dabei...

BTW: die MM geht nicht nur mit Text,
sondern natürlich auch mit Bildern

Gruß
Dirk

[Adobe GoLive Tipps & Tricks]
http://www.gltipps.de
als Antwort auf: [#94247] Top
 
X