Objekt geht immer über den Layoutrahmen hinüber

**raytracer** · 01.04.2013 14:19

Hallo,
ich bin gerade dabei einen code in den Layoutrahmen einer Webseite einzufügen.
Nur irgendwie klappt das nicht. Und zwar geht das Objekt immer über den Rahmen drüber bis zum Master Rahmen.
Egal ob ich den text am Ende,Anfang oder im Body einfüge. Auch wenn ich noch mal einen extra Rahmen einfüge, geht das Objekt immer an die selbe stelle über (Siehe Bild). Weis jemand weiter ?

[Bild: jhi2efeguaqw.jpg]

**Delta 38** · 01.04.2013 18:23

Ohne Code wird dir kaum jemand helfen können (Ich denke raten ist nicht so sinnvoll, wenn man den Code haben könnte

).
Am besten Html und Stylesheet (Du kannst ja zum Beispiel Text, etc. rausnehmen).

Gruß Delta

EDIT: evtl. liegt es an dem position-Attribute?

**raytracer** · 01.04.2013 18:56

Hier ist der Code + dem Code den ich eingefügt habe:

Spoiler:(zum lesen bitte Text markieren)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>



<head>
<title>
Musiker in OF
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Generator" content="NetObjects 12 (http://www.netobjects.com)">









<script type="text/javascript">

</script>
<script type="text/javascript" src="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/rollover.js">
</script>
<link rel="stylesheet" type="text/css" href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/fusion.css">
<link rel="stylesheet" type="text/css" href="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/style.css">
<link rel="stylesheet" type="text/css" href="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/site.css">



</head>



<body style="margin: 0px;">


</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
#Kopfbereich { position:absolute; top:20px; left:30px; }
#Tabelle { position:absolute; top:100px; left:30px; }
body { background-color:#FFFFFF; }
h1,h2,h3,p,ul,ol,li,td,th { font-family

rial,sans-serif; color:black; }
h1 { font-size:24px; margin-top:4px; margin-bottom:4px; margin-left:6px; }
p,ul,ol,li,td,th { font-size:13px; color:#000000; }
th,td { padding:1px; }
</style>
<script type="text/javascript">




<table border="0" cellspacing="0" cellpadding="0" width="1075">
<tr valign="top" align="left">
<td height="99" width="280">



<img id="Banner1" height="99" width="280" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Musiker-in-OF_NBanner.jpg" border="0" alt="Musiker in OF" title="Musiker in OF" NOFINSIDE=~! !~>



</td>
<td>
</td>
<td colspan="3" width="565">



<table id="NavigationBar1" border="0" cellspacing="0" cellpadding="0" NOFINSIDE=~! !~ width="565">
<tr valign="top" align="left">
<td width="113">
<a href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/nolinks.gif" class="nof-navButtonAnchor" onmouseover="F_loadRollover('Navigationsschaltflaeche1','',0);F_roll('Navigation sschaltflaeche1',1)" onmouseout="F_roll('Navigationsschaltflaeche1',0)">
<img id="Navigationsschaltflaeche1" name="Navigationsschaltflaeche1" height="99" width="113" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Home_Np_Regular.jpg" onmouseover="F_loadRollover(this,'Home_NRp_RegularOver.jpg',0)" border="0" alt="Home" title="Home">
</a>
</td>
<td width="113">
<a href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/nolinks.gif" class="nof-navButtonAnchor" onmouseover="F_loadRollover('Navigationsschaltflaeche2','',0);F_roll('Navigation sschaltflaeche2',1)" onmouseout="F_roll('Navigationsschaltflaeche2',0)">
<img id="Navigationsschaltflaeche2" name="Navigationsschaltflaeche2" height="99" width="113" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Kontakt_Np_Regular.jpg" onmouseover="F_loadRollover(this,'Kontakt_NRp_RegularOver.jpg',0)" border="0" alt="Kontakt" title="Kontakt">
</a>
</td>
<td width="113">
<a href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/nolinks.gif" class="nof-navButtonAnchor" onmouseover="F_loadRollover('Navigationsschaltflaeche3','',0);F_roll('Navigation sschaltflaeche3',1)" onmouseout="F_roll('Navigationsschaltflaeche3',0)">
<img id="Navigationsschaltflaeche3" name="Navigationsschaltflaeche3" height="99" width="113" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Veranstaltungen_Np_Regular.jpg" onmouseover="F_loadRollover(this,'Veranstaltungen_NRp_RegularOver.jpg',0)" border="0" alt="Veranstaltungen" title="Veranstaltungen">
</a>
</td>
<td width="113">
<a href="./musiker-in-of.html" class="nof-navButtonAnchor" onmouseover="F_loadRollover('Navigationsschaltflaeche4','',0);F_roll('Navigation sschaltflaeche4',1)" onmouseout="F_roll('Navigationsschaltflaeche4',0)">
<img id="Navigationsschaltflaeche4" name="Navigationsschaltflaeche4" height="99" width="113" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Musiker-in-OF_Hp_Highlighted.jpg" onmouseover="F_loadRollover(this,'Musiker-in-OF_HRp_HighlightedOver.jpg',0)" border="0" alt="Musiker in OF" title="Musiker in OF">
</a>
</td>
<td width="113" height="99">
<a id="Navigationsschaltflaeche5A" href="http://andreshop.de" onmouseover="F_loadRollover('Navigationsschaltflaeche5','',0);F_roll('Navigation sschaltflaeche5',1)" onmouseout="F_roll('Navigationsschaltflaeche5',0)">
<img id="Navigationsschaltflaeche5" name="Navigationsschaltflaeche5" height="99" width="113" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Shop_Np_Regular.jpg" onmouseover="F_loadRollover(this,'Shop_NRp_RegularOver.jpg',0)" border="0" alt="Shop" title="Shop">
</a>
</td>
</tr>
</table>



</td>
<td colspan="2">
</td>
</tr>
<tr valign="top" align="left">
<td height="1">
</td>
<td width="4">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="4" height="1" border="0" alt="">
</td>
<td width="470">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="470" height="1" border="0" alt="">
</td>
<td width="25">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="25" height="1" border="0" alt="">
</td>
<td width="70">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="70" height="1" border="0" alt="">
</td>
<td width="220">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="220" height="1" border="0" alt="">
</td>
<td width="6">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="6" height="1" border="0" alt="">
</td>
</tr>
<tr valign="top" align="left">
<td height="145" colspan="7" width="1075">



<img id="Bild46" height="145" width="1075" src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/Header.jpg" border="0" alt="Header" title="Header" NOFINSIDE=~! !~>



</td>
</tr>
<tr valign="top" align="left">
<td colspan="7" height="647">
</td>
</tr>
<tr valign="top" align="left">
<td colspan="3">
</td>
<td width="25" class="TextObject">



<p style="margin-bottom: 0px;">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
#Kopfbereich { position:absolute; top:20px; left:30px; }
#Tabelle { position:absolute; top:100px; left:30px; }
body { background-color:#FFFFFF; }
h1,h2,h3,p,ul,ol,li,td,th { font-family

rial,sans-serif; color:black; }
h1 { font-size:24px; margin-top:4px; margin-bottom:4px; margin-left:6px; }
p,ul,ol,li,td,th { font-size:13px; color:#000000; }
th,td { padding:1px; }
</style>
<script type="text/javascript">

 
</p>



</td>
<td colspan="3">
</td>
</tr>
<tr valign="top" align="left">
<td colspan="7" height="104">
</td>
</tr>
<tr valign="top" align="left">
<td height="84" colspan="6" width="1069">



<table border="0" cellspacing="0" cellpadding="0" width="1069" style="background-image: url('file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Styles/Wave - Blue/Images/Footer.jpg'); background-repeat: no-repeat; height: 84px;" NOFINSIDE=~! !~>
<tr align="left" valign="top">
<td>
<table border="0" cellspacing="0" cellpadding="0" NOFINSIDE=~! !~>
<tr valign="top" align="left">
<td width="8" height="27">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="8" height="1" border="0" alt="">
</td>
<td width="97">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="97" height="1" border="0" alt="">
</td>
<td width="4">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="4" height="1" border="0" alt="">
</td>
<td width="652">
<img src="file:///C:/Dokumente und Einstellungen/Alcan/Desktop/Kopie von Musikhaus André/Preview/Autogen/clearpixel.gif" width="652" height="1" border="0" alt="">
</td>
</tr>
<tr valign="top" align="left">
<td height="30">
</td>
<td colspan="2" rowspan="2" width="101" class="TextObject">



<p style="margin-bottom: 0px;">
<span style="color: rgb(255,255,255);">
2013           Marc Geimer
</span>
</p>



</td>
<td>
</td>
</tr>
<tr valign="top" align="left">
<td height="12">
</td>
<td colspan="2" rowspan="2" width="656" class="TextNavBar" style="text-align: right;">



<a class="nof-navPositioning" href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/nolinks.gif" >
[Home]
</a>

<a class="nof-navPositioning" href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/nolinks.gif" >
[Kontakt]
</a>

<a class="nof-navPositioning" href="file:///C:/Programme/NetObjects/NetObjects Fusion 12.0/NetObjects System/nolinks.gif" >
[Veranstaltungen]
</a>
[Musiker in OF]


</td>
</tr>
<tr valign="top" align="left">
<td colspan="2" height="5">
</td>
</tr>
</table>
</td>
</tr>
</table>



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






</body>



</html>

Und hier ist noch mal noch nur den code den ich einfügen möchte. es ist eine Tabelle die der user sortieren kann:

Spoiler:(zum lesen bitte Text markieren)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
#Kopfbereich { position:absolute; top:20px; left:30px; }
#Tabelle { position:absolute; top:100px; left:30px; }
body { background-color:#FFFFFF; }
h1,h2,h3,p,ul,ol,li,td,th { font-family

rial,sans-serif; color:black; }
h1 { font-size:24px; margin-top:4px; margin-bottom:4px; margin-left:6px; }
p,ul,ol,li,td,th { font-size:13px; color:#000000; }
th,td { padding:1px; }
</style>
<script type="text/javascript">
<!--
var Tabellendaten = new Array(
"Baden-Württemberg","28305","6793","32312",
"Bayern","28746","4863","31285",
"Hessen","29998","9466","30070",
"Niedersachsen","22259","10416","29686",
"Nordrhein-Westfalen","25166","11022","31960",
"Rheinland-Pfalz","22400","10958","29353",
"Saarland","22413","13087","29295",
"Schleswig-Holstein","22304","12486","30119",
"Brandenburg","16084","10978","25855",
"Mecklbg.-Vorp","16037","10497","24682",
"Sachsen","16266","6871","25883",
"Sachsen-Anhalt","15783","12471","25149",
"Thüringen","16082","11130","25709",
"Berlin","22143","27757","27757",
"Bremen","33062","33978","33978",
"Hamburg","42097","32121","32131",
"Deutschland gesamt","24658","10053","30078"
);

var sortierte_Tabellendaten = new Array(Tabellendaten.length);

var Spaltenueberschriften = new Array(
"Land",
"Brutto-Inlands-produkt pro Einwohner (in Euro)",
"Öffentliche Schulden pro Einwohner (in DM)",
"Einkommen pro Einwohner 1999 (DM)"
);

var Spalten = Spaltenueberschriften.length;
var Zeilen = Tabellendaten.length / Spalten;

var Spaltenueberschriftformatierungen = new Array(
"width=\"250\" valign=\"top\" style=\"text-align:left; border:solid 1px #808080\"",
"width=\"100\" valign=\"top\" style=\"text-align:right; border:solid 1px #808080\"",
"width=\"100\" valign=\"top\" style=\"text-align:right; border:solid 1px #808080\"",
"width=\"100\" valign=\"top\" style=\"text-align:right; border:solid 1px #808080\""
);

var Spaltenformatierungen = new Array(
"width=\"250\" style=\"text-align:left; border:solid 1px #808080\"",
"width=\"100\" style=\"font-family:Courier New,courier; text-align:right; border:solid 1px #808080\"",
"width=\"100\" style=\"font-family:Courier New,courier; text-align:right; border:solid 1px #808080\"",
"width=\"100\" style=\"font-family:Courier New,courier; text-align:right; border:solid 1px #808080\""
);

var Spaltensortierungen = new Array(
"alphabetisch","numerisch","numerisch","numerisch"
);

var Tabellenformatierung = "border=\"1\" style=\"border:solid 1px #808080\" cellspacing=\"0\"";
var Ordinalzahlenspalte = 1;
var Ordinalzahlenspaltenformatierung = "width=\"20\" style=\"border:solid 1px #808080\"";

var IconNormalAuf = "<img src=\"normal_auf.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">";
var IconNormalAb = "<img src=\"normal_ab.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">";
var IconSortiertAuf = "<img src=\"sortiert_auf.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">";
var IconSortiertAb = "<img src=\"sortiert_ab.gif\" width=\"14\" height=\"12\" border=\"0\" alt=\"\">";

var Sortierzeile = "";

function Erzeuge_Sortierzeile(Nummer,Richtung) {
Sortierzeile = "<tr>";
if(Ordinalzahlenspalte)
Sortierzeile += "<th " + Ordinalzahlenspaltenformatierung + "> <\/th>";
for(var j = 0; j < Spalten; ++j) {
Sortierzeile += "<th " + Spaltenformatierungen[j] + ">";
if(Richtung == "aufsteigend" && j == Nummer) {
Sortierzeile += IconSortiertAuf + " ";
Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','absteigend')\">" + IconNormalAb + "</a>";
}
else if(Richtung == "absteigend" && j == Nummer) {
Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','aufsteigend')\">" + IconNormalAuf + "</a>";
Sortierzeile += " " + IconSortiertAb;
}
else {
Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','aufsteigend')\">" + IconNormalAuf + "</a> ";
Sortierzeile += "<a href=\"javascript:Sortiere_nach_Spalte(" + j + ",'" + Spaltensortierungen[j] + "','absteigend')\">" + IconNormalAb + "</a><\/td>";
}
Sortierzeile += "<\/th>";
}
Sortierzeile += "<tr>";
}

function Sortiere_nach_Spalte(Nummer,Art,Richtung) {
var Spaltendaten = new Array();
var Vergleichsdaten = new Array();
var SortierIndex = new Array();
for(var i = 0; i < Zeilen; ++i)
Spaltendaten[i] = Vergleichsdaten[i] = Tabellendaten[i * Spalten + Nummer];
if(Art == "alphabetisch") Spaltendaten.sort();
if(Art == "numerisch") Spaltendaten.sort(Numsort);
if(Richtung == "absteigend") Spaltendaten.reverse();
for(i = 0; i < Zeilen; ++i)
for(var j = 0; j < Zeilen; ++j)
if(Spaltendaten[i] == Vergleichsdaten[j])
SortierIndex[i] = j;
var Speicher;
for(i = 0; i < Zeilen; ++i)
for(j = 0; j < Spalten; ++j)
sortierte_Tabellendaten[i * Spalten + j] = Tabellendaten[SortierIndex[i] * Spalten + j];
Erzeuge_Sortierzeile(Nummer,Richtung);
Schreibe_Tabelle(sortierte_Tabellendaten);
}

function Schreibe_Tabelle(Array) {
var Tabelleninhalt = "";
Tabelleninhalt += "<table " + Tabellenformatierung + ">";
Tabelleninhalt += "<thead><tr>";
if(Ordinalzahlenspalte)
Tabelleninhalt += "<th " + Ordinalzahlenspaltenformatierung + "> <\/th>";
for(var j = 0; j < Spalten; ++j)
Tabelleninhalt += "<th " + Spaltenueberschriftformatierungen[j] + ">" + Spaltenueberschriften[j] + "<\/th>";
Tabelleninhalt += "<\/tr>";
Tabelleninhalt += Sortierzeile;
Tabelleninhalt += "<\/thead>";
Tabelleninhalt += "<tfoot><\/tfoot>";
Tabelleninhalt += "<tbody>";
for(var i = 0; i < Zeilen; ++i) {
Tabelleninhalt += "<tr>";
if(Ordinalzahlenspalte)
Tabelleninhalt += "<td " + Ordinalzahlenspaltenformatierung + ">" + (i+1) + ".<\/td>";
for(var j = 0; j < Spalten; ++j)
Tabelleninhalt += "<td " + Spaltenformatierungen[j] + ">" + Array[i * Spalten + j] + "<\/td>";
Tabelleninhalt += "<\/tr>";
}
Tabelleninhalt += "<\/tbody>";
Tabelleninhalt += "<\/table>";
if(document.getElementById)
document.getElementById("Tabelle").innerHTML = Tabelleninhalt;
else if(document.all)
document.all.Tabelle.innerHTML = Tabelleninhalt;
else if(document.layers) {
document.Tabelle.document.open();
document.Tabelle.document.write(Tabelleninhalt);
document.Tabelle.document.close();
}
}

function Numsort(a,b)
{ return a-b; }
</script>
<title>Tabelle</title>
</head>
<body onLoad="Erzeuge_Sortierzeile(-1,''); Schreibe_Tabelle(Tabellendaten);">
<div id="Kopfbereich">
<h1>Bundesländer im Vergleich</h1>

<noscript>
<p>Die Daten auf dieser Seite lassen sich nur mit JavaScript-fähigen Browsern und mit eingeschaltetem JavaScript anzeigen!</p>
</noscript>
</div>
<div id="Tabelle"></div>
</body>

</html>

**Delta 38** · 01.04.2013 21:57

Wenn ich das richtig sehe, dann hat sich meine Vermutung bestätigt:

Code:

...
#Kopfbereich { position:absolute; top:20px; left:30px; }
#Tabelle { position:absolute; top:100px; left:30px; }
...

Hier weist du dem Element mit den ID's 'Kopfbereich' und 'Tabelle' eine absolute Position zu. Absolute Positionen beziehen sich nicht auf das Parent-Element, sondern auf das unterste Element (also das body-Element bzw. das html-Element).
Versuch das ganze mal so:

Code:

#Kopfbereich { position:relative; margin-top:20px; margin-left:30px; }
#Tabelle { position:relative; margin-top:100px; margin-left:30px; }

Gruß Delta

**raytracer** · 02.04.2013 13:45

Danke, hat geklappt.
Nun stehe ich aber vor dem nächsten Problem.
Und zwar, wenn ich die Wörter in der Tabelle ändere, bleiben die alten trotzdem noch erhalten. Auch wenn ich die Komplette Tabelle lösche ist die immer noch da, auch wenn ich es nochmal lokal Publiziere. Wie kann so etwas denn gehen ? Es ist ja nicht mehr im Code enthalten, wird aber trotzdem angezeigt.
Edit: wenn ich den kompletten html code aufrufe, ist der code tatsächlich noch da, aber wenn ich den zum editieren aufrufe nicht mehr.

**Delta 38** · 03.04.2013 13:02

Ich versteh ehrlich gesagt nicht ganz, was du meinst. Wie änderst du die Wörter denn? Per Hand oder mittels eines Skriptes?

**raytracer** · 03.04.2013 15:59

Also: Ich habe die Werte der Tabelle im Code geändert und mich gewundert wieso es nicht übernommen wird. Daraufhin habe ich den Code für die Tabelle rausgenommen. Die Tabelle wird aber TROTZDEM noch angezeigt. Auch wenn ich den code compiliere !! Dann habe ich in dem Kompletten HTML Code gesucht und die Tabelle gefunden, konnte den Code der Tabelle aber nicht aus dem HTML Code entfernen. Als ich ebend wieder geschaut habe war der Code auf einmal weg, die Tabelle ist aber immer noch da. Wie kann mir die Tabelle angezeigt werden, wenn die doch nicht mehr im HTML code zu finden ist ????
EDIT: jetzt ist der Code wieder aufgetaucht und zwar hier: [Bild: vtg71g3aug37.jpg]

EDIT: hat sich doch wieder erledigt: War als "Code" auf der Seite verlinkt, und musste den einfach von der Arbeitsfläche löschen

**Delta 38** · 03.04.2013 16:45

Also hat sich das ganze jetzt erledigt?

**raytracer** · 05.04.2013 21:54

jap. danke für die hilfe !

Objekt geht immer über den Layoutrahmen hinüber

Themen-Optionen

Objekt geht immer über den Layoutrahmen hinüber

Berechtigungen