hilfdirselbst.ch
Facebook Twitter gamper-media
Tipps und Tricks zu Adobe GoLive von Dirk Levy, GoLive FAQ's von Randolph Sterna
max
Beiträge: 111
29. Jun 2002, 22:05
Beitrag #1 von 13
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo,
habe folgendes Proiblem: Habe eins Seite mit Tabellenlayout. In den Zellen liegen Layer mit Text, die immer an der gleichen Stelle erscheinen sollen. Wenn das Fenster in der Größe verändert wird oder bei einer anderen Bildschirmauflösung verschiebt sich der Layer jedoch an eine andere Position. Ich vermute das liegt daran, daß man ja den Abstand von links definiert und der je nach Fenstergröße immerwieder neu berechnet wird. Wie kann ich dieses Problem umgehen?
hier der code:
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 5">
<title>Willkommen bei Adobe GoLive 5</title>
<style media="screen" type="text/css"><!--
#home { position: absolute; top: 109px; left: 649px; width: 229px; height: 237px; visibility: visible }
--></style>
</head>

<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%"></td>
<td width="778" background="../grafik/hg/home_lang.gif" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="../grafik/blindgif778x10.gif" height="300">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="../grafik/blindgif10x10.gif" width="515" height="14" border="0"></td>
<td rowspan="6" width="250">
<table border="1" cellpadding="0" cellspacing="2" width="100%" height="400">
<tr height="10">
<td height="10"><img src="../grafik/blindgif10x10.gif" width="250" height="8" border="0"></td>
</tr>
<tr height="300">
<td height="300">
<div id="home">
<p>text layer</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="2" width="100%">
<tr>
<td></td>
<td width="160"></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>

</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="50%"></td>
</tr>
</table>
<p></p>
</body>

</html>
Top
 
X
SabineP  M 
Beiträge: 7586
29. Jun 2002, 22:54
Beitrag #2 von 13
Beitrag ID: #6257
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo Max,

Die linke obere Ecke Deines Layers hat immer eine festen Abstand, 109 Pixel vom oberen und 649 Pixel vom linken Browserrand aus gemessen, egal wie groß das Browserfenster ist:

#home { position: absolute; top: 109px; left: 649px; width: 229px; height: 237px; visibility:visible }

Das kannst Du deutlich sehen, wenn Du den Layer mit einer Hintergrundfarbe füllst (rot):

#home { background-color:ff0000; position: absolute; top: 109px; left: 649px; width: 229px; height: 237px; visibility:visible }

Ändere einfach die CSS-Angaben für den Layer "home":
#home { width: 229px; height: 237px; visibility:visible }

Jetzt hat der Layer "home" keine feste Position mehr in Bezug auf den Browserrand. Der Layer befinet sich jetzt immer vertikal zentriert in der Zelle, egal wie groß das Browserfenster ist.

Grüße von Sabine
als Antwort auf: [#6255] Top
 
max
Beiträge: 111
30. Jun 2002, 09:09
Beitrag #3 von 13
Beitrag ID: #6263
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


wenn ich diesen code eingebe:
<style media="screen" type="text/css"><!--
#home { width: 229px; height: 237px; visibility: visible }
--></style>

dann ist mein layer plötzlich ganz weg. Wenn ich Fenster>Rahmen öffne, dann wird auch kein layer angezeigt.
Irgendetwas muß also falsch sein am code??
als Antwort auf: [#6255] Top
 
Buzzbomb
Beiträge: 1252
30. Jun 2002, 11:04
Beitrag #4 von 13
Beitrag ID: #6266
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


hallo,
wenn du den layer in der css-ansicht anklickst,brauchst du nur auf den reiter "position" gehen und dort deine einstellungen vornehmen.

mfg
als Antwort auf: [#6255] Top
 
SabineP  M 
Beiträge: 7586
30. Jun 2002, 11:24
Beitrag #5 von 13
Beitrag ID: #6267
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo Max,
der Code ist nicht falsch nur weil Golive den Rahmen nicht mehr anzeigen kann.

Gib dem Rahmen eine Hintergrundfarbe, dann siehst Du den Rahmen im Browser:
#home { background-color:ff0000; width: 229px; height: 237px; visibility: visible }

Golive kann damit nicht umgehen, aber alle Browser ab Version 4 können das.

Grüße von Sabine
als Antwort auf: [#6255] Top
 
max
Beiträge: 111
30. Jun 2002, 21:40
Beitrag #6 von 13
Beitrag ID: #6278
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


dann schließt sich daran für mich folgende Frage an: Meine Layer auf der Seite haben die Funktion, wenn die Maus über 3 bestimmte Bilder fährt ein- bzw. ausgeblendet zu werden (Aktion/Multimedia/Sichtbarkeit. Da Golive mir jetzt keine Rahmen mehr anzeigt kann ich diese auch nicht mit einer Aktion verknüpfen. Auf einer ähnlichen Seite hatte ich da mal einen code, der sah so aus:
onmouseover="CSAction(new Array(/*CMP*/'3D71290',/*CMP*/'3DCC0B1'));return true;" csover="3D71290,3DCC0B1" onmouseout="CSAction(new Array(/*CMP*/'3E08762',/*CMP*/'3E31053'));" csout="3E08762,3E31053" title="Leistungen" target="body"><img src="bild.JPG" width="160" height="85" border="0" alt="Leistungen"></a>

Wie kriege ich den denn mit GL wieder hin?
als Antwort auf: [#6255] Top
 
SabineP  M 
Beiträge: 7586
1. Jul 2002, 01:20
Beitrag #7 von 13
Beitrag ID: #6280
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Max, wie das mit Golive hinzukriegen ist, kann ich Dir leider nicht sagen.

Schau Dir mal das Beispiel an:
http://sperner.50free.net/forum/einaus.html



Das Javascript im Head enthält die beiden Funktionen

Layer einblenden:

function ein(divid)

und Layer ausblenden:

function aus(divid)



Im Body wird mit:

OnMouseOver="ein('home')

der Layer home eingeblendet und mit

OnMouseOut="aus('home')

der Layer home ausgeblendet.



Du kannst jetzt im Body mehrere Links definieren, die verschieden Layer ein- oder ausblenden.



Beispiel für einen zweiten Layer:



im Head das CSS für den zweiten Layer hinzufügen

#zweiterlayer { position:relative; width: 100px; height: 100px; visibility: hidden; }



im Body einen Link hinzufügen mit Javascript:

<a href="#" OnMouseOver="ein('zweiterlayer');return false;" OnMouseOut="aus('zweiterlayer');return false;">den zweiten Layer bei Mouseover über diesen Link einblenden</a>



und den zweiten Layer

<div id="zweiterlayer">

text im zweiten layer

</div>



Grüße von Sabine
als Antwort auf: [#6255]
(Dieser Beitrag wurde von SabineP am 3. Feb 2004, 14:10 geändert)
Top
 
max
Beiträge: 111
1. Jul 2002, 11:30
Beitrag #8 von 13
Beitrag ID: #6292
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo Sabine,
danke ersteinmal für deine Hilfe !
jetzt habe ich die Seite nach Deiner Vorlage umgebaut und unter IE scheint auch alles prächtig zu laufen nur unter NN 4.75 einiges daneben: Bilder werden nicht angezeigt und der Text der layer wird immer nach links oben gesetzt. Woran kann denn nun das schon wieder liegen? Wenn wir das Problem noch beseitigen habe ich glaube ich meine Lösung!

hier der code:
<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 5">
<title>Willkommen bei Adobe GoLive 5</title>
<style media="screen" type="text/css"><!--
#home { position:absolute; width: 229px; height: 237px; visibility: hidden; }
#zweiterlayer { position: absolute; width: 229px; height: 237px; visibility: hidden }
#dritterlayer { position: absolute; width: 229px; height: 237px; visibility: hidden }
#vierterlayer { position: absolute; width: 229px; height: 237px; visibility: visible }
--></style>

<script type="text/javascript">

<!--

ns = document.layers ? true : false;
ie = document.all ? true : false;
dom = document.getElementById ? true : false;

function ein(divid){
if(ns){document.layers[divid].visibility="show";}
if(ie){document.all[divid].style.visibility="visible";}
if(dom){ document.getElementById(divid).style.visibility="visible";}
}
function aus(divid){
if(ns){document.layers[divid].visibility="hide";}
if(ie){document.all[divid].style.visibility="hidden";}
if(dom){ document.getElementById(divid).style.visibility="hidden";}
}

// -->

</script>

</head>

<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%"></td>
<td width="778" background="../grafik/hg/home_lang.gif" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="../grafik/blindgif778x10.gif" height="300">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="../grafik/blindgif10x10.gif" width="515" height="14" border="0"></td>
<td rowspan="6" width="250">
<table border="1" cellpadding="0" cellspacing="2" width="100%" height="400">
<tr height="10">
<td height="10"><img src="../grafik/blindgif10x10.gif" width="250" height="8" border="0"></td>
</tr>
<tr height="300">
<td height="300" valign="top">
<div id="home">
<p>text layer</p>
</div>
<div id="zweiterlayer">
<p>zweiterlayer</p>
</div>
<div id="dritterlayer">
<p>dritterlayer</p>
</div>
<div id="vierterlayer">
<p>begruessungstext</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="2" width="100%">
<tr>
<td></td>
<td width="160"></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><a href="#" onmouseover="ein('home');aus('vierterlayer');return false;" onmouseout="aus('home');ein('vierterlayer');return false;"><img src="../../../../Internet/Galeriebilder/Seka/g_se_2_kl.jpg" width="120" height="81" border="0"></a></td>
</tr>
<tr>
<td><a href="#" onmouseover="ein('zweiterlayer');aus('vierterlayer');return false;" onmouseout="aus('zweiterlayer');ein('vierterlayer');return false;"><img src="../../../../Internet/Galeriebilder/Seka/g_se_4_kl.jpg" width="120" height="81" border="0"></td>
</tr>
<tr>
<td><a href="#" onmouseover="ein('dritterlayer');aus('vierterlayer');return false;" onmouseout="aus('dritterlayer');ein('vierterlayer');return false;"><img src="../../../../Internet/Galeriebilder/Seka/g_se_6_kl.jpg" width="120" height="81" border="0"></td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="50%"></td>
</tr>
</table>
<p></p>
</body>

</html>
als Antwort auf: [#6255] Top
 
SabineP  M 
Beiträge: 7586
1. Jul 2002, 18:16
Beitrag #9 von 13
Beitrag ID: #6320
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo Max,

wenn die Layer innerhalb der Tabelle relativ zur Zelle positioniert werden sollen, dann geht das im Netscape 4 nur mit position:relative

#home { position:relative; visibility:hidden; }
So werden die Layer beim Einblenden untereinander dargestellt. Breiten- und Höhenangaben kannst Du auch weglassen.

position:absolute funktioniert nur in Netscape 4, wenn sich die Divs außerhalb der Tabelle befinden, also rechts daneben oder unter der Tabelle.

#home { position:absolute; visibility:hidden; }
So werden die Layer beim Einblenden immer an der gleichen Position dargestellt.

Das ist zwar keine optimale Lösung für Deine Tabelle, aber vielleicht kannst Du damit etwas anfangen.

Du hast noch zwei schließende Tags </a> bei Deinen Links <a href="#" vergessen.

Ich weiß nicht welche Bilder warum nicht angezeigt werden, ohne Link zu Deiner Seite kann man dazu nicht viel sagen.

Grüße von Sabine

[ Diese Nachricht wurde geändert von: SabineP am 2002-07-01 18:17 ]
als Antwort auf: [#6255] Top
 
Dirk Levy  A 
Beiträge: 9214
1. Jul 2002, 19:15
Beitrag #10 von 13
Beitrag ID: #6322
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hi,

wenn die Rahmen ohne Inhalt sind,
ist das für NS4.x normal, da hilft dann
ein Blindgif weiter....

Falls es dieses Problem ist:

http://www.totd.de/totd040.html

Ansonsten ist es auch wichtig den Rahmen
soweit sie überlappen eine Staffelung zu
geben. Steht auch in der GoLive-Online-Hilfe...
So weit ich weiß.

Gruß
Dirk
als Antwort auf: [#6255] Top
 
max
Beiträge: 111
2. Jul 2002, 09:28
Beitrag #11 von 13
Beitrag ID: #6341
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo zusammen,
habe es nun geschafft, daß alles auch unter nn läuft aber mein Ursprungsproblem damit nicht lösen können. Ich möchte, daß der Text in den Layern immer genau in dieser einen Tabellenzelle erscheint. Da sich diese Zelle aber verschiebt, wenn man im IE z.B. die Favoriten öffnet müßte sich der Layer entsprechend mitverschieben was er aber nicht tut (da ich ja seine position auch als absolut vom linken Rand definiert habe. Gibt es denn überhaupt eine Lösung dafür, daß man Layer fest in Tabellenzellen verankert? Gibt es eventuell eine andere Lösung dafür die Funktionalität zu erreichen, daß beim Überfahren von Grafiken mit der Maus der Text immer an der selben Stelle erscheint?
als Antwort auf: [#6255] Top
 
SabineP  M 
Beiträge: 7586
2. Jul 2002, 15:15
Beitrag #12 von 13
Beitrag ID: #6372
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo Max, habe doch noch eine Lösung für Deine Tabelle gefunden

https://perner.hypermart.net/forum/layer.html

Schau Dir mal die CSS im Head an.

Mit top:minuspixelanzahl verschiebst Du jeden einzelnen Layer nach oben(minus). Wieviel Pixel Du für jeden Layer angeben mußt hängt ab von Deiner Schriftgröße, Zeilenabstand und Anzahl der Textzeilen jedes einzelnen Layers.

Das Beispiel funktioniert übrigens in allen Browsern.

Grüße von Sabine
als Antwort auf: [#6255] Top
 
max
Beiträge: 111
2. Jul 2002, 16:05
Beitrag #13 von 13
Beitrag ID: #6376
Bewertung:
(3173 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

layer in Tabellen


Hallo Sabine,
1000 Dank !!! ich glaub damit komme ich ersteinmal klar,
als Antwort auf: [#6255] Top
 
X