nicht angemeldet
div in tabelle
guten tag,
ich habe folgendes problem:
ich möchte eine slideshow, die ich hier http://dynamicdrive.com/dynamicindex14/bookflip.htm gefunden habe in eine tabelle einbauen:
<tr><td class="H"> </td></tr>
<tr>
<td with="100%" align="center">
<div id="Book" align="center" style="position:relative">
<img src="../pics/m_krae/placeholder.gif" width="454" height="302">
</div>
</td>
</tr>
<tr><td class="H"> </td></tr>
<tr>
<td class="ue2">wir arbeiten zur Zeit noch daran</td>
</tr>
das pic placeholder erscheint an der richtigen stelle, die pics der slideshow aber links bündig, außer halber der tabellenzelle. beim firefox erscheint dann auch die folgende tabellenzeile mit dem text "wir arbeite..." nicht.
hier der quelltext des javascripts, das koreekt im body mit onload="ImageBook()" aufgerufen wird:
// 7 variables to control behavior
var Book_Image_Width=225;
var Book_Image_Height=300;
var Book_Border=false;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;
// array to specify images and optional links. At least 4
// If Link is not needed keep it ""
Book_Image_Sources=new Array(
"../pics/m_fuss/m_fuss_006.jpg","",
"../pics/m_fuss/m_fuss_008.jpg","",
"../pics/m_fuss/m_fuss_018.jpg","", //this slide isn't linked
"../pics/m_fuss/m_fuss_023.jpg","" // NOTE No comma after last line
);
/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);
function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}
function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}
function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}
function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
Da ich schier am verzweifeln bin, wäre ich sehr dankbar wenn mir jemand einen tipp geben könnte, wie diesse slideshow in der vorgesehenen tabellenspalte angezeigt werden kann und die weiteren tabellenzeilen auch sicchtbar bleiben.
wer sich diese mühe macht, mir zzu helfen ist meines herzlichstenn dankes sicher.
-
Lieber radames,
div in tabelle
Du hast drei große Probleme:
1.) Der Code Deiner Seite ist ein Graus! Du verwendest HTML-Elemente nicht dafür, wofür sie gedacht sind, sondern dafür, wie sie in den meisten Browsern aussehen. Dabei möchtest Du doch so gerne einen klar gegliederten und sauberen (X)HTML-Code haben...
2.) Du benutzt ein besonders eklig gebasteltes Script. Die Teile bei dynamicdrive sind uralt und oft nicht besonders sinnvoll aufgebaut. Dafür kannst Du aber nix.
3.) Du hast von 1.) und 2.) noch nicht gewusst.
Wenn Du nun 3.) verbesserst, dann sollte 1.) repariert werden können, was dann eine sehr gute Voraussetzung dafür ist, dass Du 2.) mit etwas besserem ersetzt.
Und wenn Dir dieser "Umblätter"-Effekt so wichtig ist, dann kannst Du vielleicht nach dem Studium des oben verlinkten Artikels diesen selbst umsetzen. In einer wesentlich besseren Art und Weise, als das bei dem aktuellen Script von dynamicdrive der Fall ist.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber radames,
div in tabelle
Du hast drei große Probleme:
1.) Der Code Deiner Seite ist ein Graus! Du verwendest HTML-Elemente nicht dafür, wofür sie gedacht sind, sondern dafür, wie sie in den meisten Browsern aussehen. Dabei möchtest Du doch so gerne einen klar gegliederten und sauberen (X)HTML-Code haben...
2.) Du benutzt ein besonders eklig gebasteltes Script. Die Teile bei dynamicdrive sind uralt und oft nicht besonders sinnvoll aufgebaut. Dafür kannst Du aber nix.
3.) Du hast von 1.) und 2.) noch nicht gewusst.
Wenn Du nun 3.) verbesserst, dann sollte 1.) repariert werden können, was dann eine sehr gute Voraussetzung dafür ist, dass Du 2.) mit etwas besserem ersetzt.
Und wenn Dir dieser "Umblätter"-Effekt so wichtig ist, dann kannst Du vielleicht nach dem Studium des oben verlinkten Artikels diesen selbst umsetzen. In einer wesentlich besseren Art und Weise, als das bei dem aktuellen Script von dynamicdrive der Fall ist.
Liebe Grüße,
Felix Riesterer.
Lieber Felix,
danke für deine niederschmetternde Antwort.
es ist mir wohl nicht gelungen mein hauptanliegen deutlich zu machen.ich denke, dass ich zumindest was das programmieren mit tabellen in html einigermassen fit bin, die seiten sind stets valide.
ich habe mich abe rnoch nie mit div's beschäftigt und habe bei der o.g. bildershow, wie auch bei deiner ein positionierungsproblem.
die bilder erscheinen nicht in der tabellenspalte, in der das div steht, sondern stets links oben.vielleicht ist es möglich mir da zu helfen, ohne dass ich einen mehrwöchigen kurs besuchen muss.
liebe grüße
radames-
Lieber radames,
danke für deine niederschmetternde Antwort.
die Antwort ist aus der Überzeugung heraus entstanden, dass eine Abkehr von Deinem bisherigen Vorgehen eine wesentliche Verbesserung Deiner Seite(n) bewirken muss. Auch ich habe eine solche Entwicklung durchgemacht und habe einsehen müssen, dass mein damaliger Ansatz alles andere als zukunftstauglich war.
Wenn meine Antwort Dich niedergeschmettert hat, dann tut mir das im Grunde genommen leid, ist aber anscheinend nicht ganz vermeidbar. Mein Wechsel zu semantischem Code ist immerhin schon vier Jahre her, was in Sachen Internet und wie man Seiten schreibt eine regelrechte Epoche darstellt.
So gesehen war ich etwa sechs Jahre der aktuellen Vorgehensweise hinterher - bei Dir sind es nunmehr zehn, denn Tabellenlayouts waren zuletzt 1998 "best practice", da es damals nichts besseres gab. Heute sieht das völlig anders aus.
es ist mir wohl nicht gelungen mein hauptanliegen deutlich zu machen.
Im Grunde schon, nur hast Du noch nicht einsehen können, dass dieses Anliegen tatsächlich erst im zweiten Schritt sinnvoll umsetzbar ist, nachdem Du Deine Altlasten erfolgreich entsorgt hast. Von den Leuten, die hier schon länger mitschreiben, bin ich mit Sicherheit nicht der einzige, der das so sieht.
ich denke, dass ich zumindest was das programmieren mit tabellen in html einigermassen fit bin, die seiten sind stets valide.
An der Validität habe ich auch nicht gezweifelt. Da hast Du mich nicht verstanden. Mir ging es um Sinnhaftigkeit. Dein Code sollte so gestaltet sein, dass die Natur der Inhalte sich in den verwendeten HTML-Elementen widerspiegelt. Demnach ist eine Überschrift eben eine Überschrift (h1 - h6), ein Textabsatz ist ein Textabsatz (p) und eine Liste ist eine Liste (ul, ol, dl). Und Tabellen benutzt man, um tabellarische Daten auszuzeichnen, nicht aber, um Seitenbereiche zu layouten. Dazu sind sie das falsche Mittel - spätestens seit 1999 und der Empfehlung des W3C, dafür CSS zu benutzen.
ich habe mich abe rnoch nie mit div's beschäftigt und habe bei der o.g. bildershow, wie auch bei deiner ein positionierungsproblem.
Bitte gewöhne Dir den "Deppenapostroph" schnell wieder ab, dazu bist Du zu gebildet.
Und was die Verwendung von div-Elementen angeht, kannst Du hier http://de.selfhtml.org/html/text/bereiche.htm#block@title=nachlesen, dass ein div-Element zur Gruppierung anderer Elemente gedacht ist. Wenn Du dazu noch Klassen und IDs verwendest, dann kannst Du prima ohne Tabellen Deine Seite layouten. Steht ja auch in SELFHTML: <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS-basierte Layouts>.
die bilder erscheinen nicht in der tabellenspalte, in der das div steht, sondern stets links oben.
Zuerst solltest Du wirklich Deine Layout-Tabellen abschaffen. Dann erkennst Du, dass Dein div-Element nicht mehr "von alleine" dort angezeigt wird, wo Du es gerne haben möchtest, sondern musst es mit den in CSS vorhandenen Möglichkeiten dort hinpositionieren (zunächst einmal egal, wie). Wenn dann Dein div-Element entweder mittels http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float oder http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position neu positioniert ist, dann sollten auch die absoluten Positionierungen Deiner Bilder zum gewünschten visuellen Ergebnis führen.
vielleicht ist es möglich mir da zu helfen, ohne dass ich einen mehrwöchigen kurs besuchen muss.
Du kriegst von mir keine fertige Lösung. Erstens müsstest Du die mir bezahlen und zweitens will ich das nicht. Außerdem kenne ich Deinen Kenntnisstand in Sachen CSS nicht, der mit eine Grundvoraussetzung ist, wenn man seine Seite damit layouten will. Und CSS lernt sich nicht in allen Belangen "über Nacht" - da wirst Du schon eine Weile damit Erfahrungen sammeln müssen. Aber das Grundprinzip solltest Du in wenigen Stunden begriffen haben und anwenden können.
Was den Einsatz von JavaScript angeht, da wirst Du noch viel mehr an Erfahrung sammeln müssen, um eine Animation wie die von Dynamicdrive angebotene selbst erstellen zu können. Wenn Du die Grundlagen von JavaScript hier in SELFHTML einigermaßen verstanden hast, dann kann Dir mein Artikel weiterhelfen, diesen Krampf von Code in ein modernes und zeitgemäßes Script umzuwandeln.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-