nicht angemeldet
div und td probleme
Hallo miteinander
habe das forum jetzt lange genug gequält und werde mein problem jetzt doch posten:
Ich überarbeite im moment einen ortsplan der bisher in einen frame geladen wurde .nach der umgestaltung haben wir aber nun keine frames mehr sonder nur tabellen und da liegt der hund begraben.es gibt ein strassenverzeichniss wennman eine strasse auswählt wird der entsprechende kartenausschnitt in der die strasse liegt rot umrandet .diese umrandung wird mittels eines divs erzeugt . gesteuert wird das ganze mittels absoluter positionierung nun habe ich den kompletten plan aber in eine tabellenzeile gepackt die in der mitte sitzt nun stimmen aber die absoluten angaben zur strasse nicht mehr da er sich ja am browserfenster orientiert und nicht am tabellenfeld in dem es nun alees liegt.
nun die frage ist es möglich die positionierung nicht am browserfenster auszurichten sonder an dem tabellenfeld .
ich hoffe ich habe es relativ verständlich ausgedrückt!
greets blackmeets
-
hi!
du kannst die positionierung der grafik per javascript auslesen und so das div daran anpassen, werde mal grade was suchen.
gruss philipp
-
hi!
du kannst die positionierung der grafik per javascript auslesen und so das div daran anpassen, werde mal grade was suchen.
also:
leftPos = document.div[id].pageX;
topPos = document.div[id].pageY;so solte es funktionieren!
Gruß Philipp
-
-
leider nicht habe wahrscheinlich vergessen zu sagen das der ortsplan schon mittels javascript gesteuert wird ich poste ihn mal damits klarer wird
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <SCRIPT language=JavaScript> <!-- hide //neues fenster oeffnen
function fenster(gSeite){ window.open (gSeite,'new','scrollbars=auto,status=no,width=500,height=500,menubar=no,left=150,top=150,location=no,resizable=no,directories=no') } // ********************************************************************** // ****************** beispiel ***************** // ******************************************************
var gSeite = "zoom.htm"; var gPos = "nichts"; var NS = (document.layers) ? 1:0; // Netscape var IE = (document.all) ? 1:0; // MSIE var GECKO = (parseInt(navigator.appVersion) >=5 && navigator.appName == "Netscape") ? 1 : 0; // poserNS muss für Gecko unten versteckt werden
var gRandL = document.div[id].pageX; // abstand links var gRandT = document.div[id].pageY; // abstand oben
function PoserInit(){ // alles zuruecksetzen... if(IE) { document.all.poser.style.visibility = "hidden";} if(NS) { document.layers.poserNS.visibility = "hide"; } if(GECKO) { myPoser = document.getElementById("poser"); myPoser.style.top = 0; myPoser.style.left = 0; } }
function PopStrasse(pos){
PoserInit();
// Liste, welches planquadrat wo if (pos == "A1") gTop=0, gLeft=0; if (pos == "A2") gTop=60, gLeft=0; if (pos == "A3") gTop=120, gLeft=0; if (pos == "A4") gTop=180, gLeft=0; if (pos == "A5") gTop=240, gLeft=0; if (pos == "A6") gTop=300, gLeft=0; if (pos == "A7") gTop=360, gLeft=0;
if (pos == "B1") gTop=0, gLeft=60; if (pos == "B2") gTop=60, gLeft=60; if (pos == "B3") gTop=120, gLeft=60; if (pos == "B4") gTop=180, gLeft=60; if (pos == "B5") gTop=240, gLeft=60; if (pos == "B6") gTop=300, gLeft=60; if (pos == "B7") gTop=360, gLeft=60;
if (pos == "C1") gTop=0, gLeft=120; if (pos == "C2") gTop=60, gLeft=120; if (pos == "C3") gTop=120, gLeft=120; if (pos == "C4") gTop=180, gLeft=120; if (pos == "C5") gTop=240, gLeft=120; if (pos == "C6") gTop=300, gLeft=120; if (pos == "C7") gTop=360, gLeft=120;
if (pos == "D1") gTop=0, gLeft=180; if (pos == "D2") gTop=60, gLeft=180; if (pos == "D3") gTop=120, gLeft=180; if (pos == "D4") gTop=180, gLeft=180; if (pos == "D5") gTop=240, gLeft=180; if (pos == "D6") gTop=300, gLeft=180; if (pos == "D7") gTop=360, gLeft=180;
if (pos == "E1") gTop=0, gLeft=240; if (pos == "E2") gTop=60, gLeft=240; if (pos == "E3") gTop=120, gLeft=240; if (pos == "E4") gTop=180, gLeft=240; if (pos == "E5") gTop=240, gLeft=240; if (pos == "E6") gTop=300, gLeft=240; if (pos == "E7") gTop=360, gLeft=240;
if (pos == "F1") gTop=0, gLeft=300; if (pos == "F2") gTop=60, gLeft=300; if (pos == "F3") gTop=120, gLeft=300; if (pos == "F4") gTop=180, gLeft=300; if (pos == "F5") gTop=240, gLeft=300; if (pos == "F6") gTop=300, gLeft=300; if (pos == "F7") gTop=360, gLeft=300;
if (pos == "G1") gTop=0, gLeft=360; if (pos == "G2") gTop=60, gLeft=360; if (pos == "G3") gTop=120, gLeft=360; if (pos == "G4") gTop=180, gLeft=360; if (pos == "G5") gTop=240, gLeft=360; if (pos == "G6") gTop=300, gLeft=360; if (pos == "G7") gTop=360, gLeft=360;
gPos = pos;
// Aufruf if(IE){ document.all.poser.style.visibility = "visible"; document.all.poser.style.pixelTop = gTop+gRandT; document.all.poser.style.pixelLeft = gLeft+gRandL; } if(NS) { document.layers.poserNS.visibility = "show"; document.layers.poserNS.top = gTop+gRandT; document.layers.poserNS.left = gLeft+gRandL; } if(GECKO) { myPoser = document.getElementById("poser"); myPoser.style.visibility = "visible"; myPoser.style.top = parseInt(myPoser.style.top) +gTop+gRandT; myPoser.style.left = parseInt(myPoser.style.left) +gLeft+gRandL;
} }
// --> </SCRIPT>
<SCRIPT language=javascript1.2> <!-- // steuerung via tastatur fuer msie: function doKeys() { if(!NS){ var key = (String.fromCharCode(window.event.keyCode).toUpperCase()) switch (key) { case ",": fenster(gSeite); break; } } }
function doLoad() { document.onkeypress = doKeys }
//
window.onload = doLoad; //--> </SCRIPT></HEAD> <BODY > <FORM name=auswahl action=# method=get> <TABLE height=30 cellSpacing=0 cellPadding=3 width=450 border=0> <TBODY> <TR> <TD vAlign=top background=/ortsplan-Dateien/_balk_gelb.jpg bgColor=#fad20a><B class=redfett>Ortsplan</B> <b><font size="2">ort</font></b></TD> </TR></TBODY></TABLE> <TABLE height=30 cellSpacing=0 cellPadding=0 width=450 border=0> <TBODY> <TR> <TD align=right width="60%"><B class=blacknormal>Wählen Sie aus dem Straßenverzeichnis: </B> </TD> <TD align=right width="40%"><SELECT style="FONT-SIZE: 9pt; WIDTH: 200px; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica,sans-serif; BACKGROUND-COLOR: #28a050" onchange=PopStrasse(document.auswahl.strassen.options[document.auswahl.strassen.options.selectedIndex].value) name=strassen width="200"> <option value="">..........</option> <option value="C5">Ahornstraße</option> <option value="C5">Akazienstraße</option> <option value="D3">Alte Heinrieter Straße</option> <option value="E4">Amselweg</option> <option value="C6">Auensteiner Straße</option> <option value="E5">Bäckergasse</option> <option value="E5">Baumannshof</option> <option value="D7">Beilsteiner Straße</option> <option value="D6">Benzengasse</option> <option value="F5">Bergstraße</option> <option value="C6">Birkenweg</option> <option value="C6">Buchenweg</option> <option value="C2">Carl-Berberich-Straße</option> <option value="E4">Drosselweg</option> <option value="C4">Erlenweg</option> <option value="C6">Eschenweg</option> <option value="C2">Etrastraße</option> <option value="F6">Fabrikstraße</option> <option value="D6">Fechenwiesen</option> <option value="E4">Finkenweg</option> <option value="C6">Friedhofstraße</option> <option value="E4">Gartenstraße</option> <option value="D5">Goldschmiedstraße</option> <option value="C6">Grundstraße</option> <option value="C4">Gruppenbacher Straße</option> <option value="C3">Happenbacher Straße</option> <option value="F7">Hauffstraße</option> <option value="C5">Hausener Weg</option> <option value="E4">Heilbronner Straße</option> <option value="D4">Heinrieter Straße</option> <option value="F6">Helfenberger Straße</option> <option value="C1">Hellmuth-Koos-Straße</option> <option value="F7">Herzog-Ulrich-Straße</option> <option value="D4">Hofäckerstraße</option> <option value="C4">HölderlinStraße</option> <option value="C6">Holderstraße</option> <option value="E6">Höllwiesen</option> <option value="B2">Im Deboldsacker</option> <option value="G4">Im Lämmerberg</option> <option value="F7">Im Landgraben</option> <option value="F3">Im Mitteltal</option> <option value="E6">Im Wehracker</option> <option value="D4">Jägerhausstraße</option> <option value="C4">Kastanienweg</option> <option value="D3">Kernerstraße</option> <option value="F6">Landhausstraße</option> <option value="F7">Landwehr</option> <option value="C5">Lehmgrube</option> <option value="F7">Lembergerweg</option> <option value="E4">Lerchenring</option> <option value="F5">Lindenstraße</option> <option value="F4">Lindenweg</option> <option value="E3">Meisenweg</option> <option value="D4">Mörikestraße</option> <option value="E5">Mühlhofstraße</option> <option value="G4">Obere Drittelgasse</option> <option value="D5">Oststraße</option> <option value="C5">Pappelweg</option> <option value="D5">Place de Lehon</option> <option value="C5">Platanenweg</option> <option value="C4">Radäckerweg</option> <option value="D4">Rathausstraße</option> <option value="C2">Rauheckstraße</option> <option value="F7">Rieslingstraße</option> <option value="D1">Robert-Bosch-Allee(IP)</option> <option value="F1">Rudolf-Diesel-Straße(IP)</option> <option value="D4">Schillerstraße</option> <option value="F4">Schozachstraße</option> <option value="E4">Schrebergarten</option> <option value="D1">Seestraße</option> <option value="F7">Silvanerweg</option> <option value="E5">Sportplatzstraße</option> <option value="E3">Starenweg</option> <option value="C6">Steinstraße</option> <option value="C6">Talstraße</option> <option value="G7">Trollingerweg</option> <option value="E4">Tummelwiesen</option> <option value="C4">Uhlandstraße</option> <option value="C4">Ulmenring</option> <option value="D6">Untere Drittelgasse</option> <option value="B1">Unteres Feld</option> <option value="E5">Vohenloher Straße</option> <option value="C4">Weidenweg</option> <option value="F6">Weinstraße</option> <option value="C7">Weststraße</option> <option value="F5">Winzerstraße</option> <option value="E6">Wunnensteinstraße</option> </SELECT> </TD></TR></TBODY></TABLE></FORM><!-- plan ----------------------------------------------> <DIV id=plan style="left: 40px; VISIBILITY: visible; POSITION: absolute; TOP: 100px; width: 1px; height: 431px"><IMG height=431 src="ortsmitte_abstatt/ortsplan-Dateien/plan.jpg" width=420 border=0> </DIV> <!-- copyright verlag -----------------------------------------> <!-- // hinweis zur steuerung via tastatur fuer msie: ----------> <!-- positionfinder MSIE -------------------------------> <DIV id=poser style="LEFT: 140px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px"><A href="javascript:fenster(gSeite)"><IMG height=62 alt="" src="/ortsplan-Dateien/pos.gif" width=60></A> </DIV><!-- positionfinder Netscape ---------------------------><BR><!-- liegt im MSIE dahinter --> <LAYER id=poserNS left="140px" top="0px" visibility="hide" position="absolute" z-index="1"><A href="javascript:fenster(gSeite)"><IMG height=62 alt="" src="/ortsplan-Dateien/pos.gif" width=61></A> </LAYER> <!-- fusszeile -----------------------------------------> <SCRIPT language=javascript1.2> <!-- if(GECKO) document.getElementById("poserNS").style.visibility = "hidden"; //--> </SCRIPT> <!---------------------------------------></BODY></HTML>
dies soll nun in einem tabellenfeld in der mitte der seite funktionieren aber wie
greets blackmeets
-
Sehe ich das richtig, dass alle Planquadrate eigene Grafiken sind?
Dann ermittle doch wie schon geschrieben die Position deines einen Planquadrates?!-
Sehe ich das richtig, dass alle Planquadrate eigene Grafiken sind?
Dann ermittle doch wie schon geschrieben die Position deines einen Planquadrates?!ne aber schau dir mal das schlime orginal an unter
http://www.abstatt.de/de/ortsplan/ortsmitte_abstatt/ortsmitte_abstatt.html
das ist die orginalversion mit der ich nichts zu tun hab wir sollen sie aber übernehemen
greets blackmeets
-
-
-
hi,
nun die frage ist es möglich die positionierung nicht am browserfenster auszurichten sonder an dem tabellenfeld .
absolute positionierung bezieht sich immer auf das nächsthöhere elternelement, dessen positionierung vom default (static) abweicht - erst wenn ein solches im dokumentbaum nicht vorhanden ist, dann wird in bezug auf den body positioniert.
im klartext: wenn du deiner tabellenzelle position:relative verpasst, ändert sichan ihrer lage erstmal nichts.
alle _innerhalb_ dieser tabellenzelle absolut positionierten elemente beziehen ihre position dann aber auf die tabellenzelle, und nicht mehr auf den body.gruss,
wahsaga-
thats it
vielen dank
greets blackmeets
-