XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Layout Probleme (http://xhtmlforum.de/showthread.php?t=53705)

MichaelJason 19.09.2008 12:05

CSS Layout Probleme
 
Hallo,

ich hab ein Problem mit Div layer die absolut gesetzt sind

Bsp:

#navi {
position: absolute;
height: 100%;
width: 100%
}

<div id="navi">
<div id="link0">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung
</div>
<div id="link1">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung
</div>
<div id="link2">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung
</div>
<div id="link3">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung
</div>
</div>

Mein Problem ist nun das wenn diese Layer übereinander liegen der Link nicht mehr anklickbar ist obwohl es keinen Hintergrund gibt. Man sieht also alle diese SVG oder VML Grafiken (Pfeile) aber man kann nur auf dem im obersten Layer klicken.

Gibt es eine Css Möglichkeit mit der man verlinkungen immer klickbar machen kann.

Was nicht gebrauchen kann ist...

z-index: 1;
position: relative;

Hat jemand eine Idee ?

netbenni 19.09.2008 13:04

Ist das der ganze CSS-Code :?.

Mit dem, was du gepostet hast, funktioniert es eigentlich (jedenfalls bei mir)

MichaelJason 19.09.2008 13:14

Wie hast du denn das gemacht wenn du einen Layer genau über die anderen legst und in jedem Layer eine Grafik (VML oder SVG) liegt auf der ein Link liegt ?
ich komme da nur an das oberste ran. (Im IE7/8 funktioniert es allerdings ohne Probleme im Firefox Opera Safari und im IE6 dagegen nicht ...


das ganze ist ein Mischung aus Java /javascript die Inhalte werden nur im DOM gezeigt :) Der code ist sehr lang :)


<table cellpadding="0" cellspacing="0" width="221" height="100%">
<tbody><tr valign="top" height="505">
<td colspan="6" style="padding: 4px; vertical-align: top; text-align: left;" valign="top">

<style type="text/css">
#NAVIBOX {
height: 505px;
width: 221px;
position: relative;
}
</style>

<div id="NAVIBOX">
<script type="text/javascript">
Event.observe (window, 'load', function () {
// Create an SVG renderer

$('NAVIBOX').insert('<div id="LINK0" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK0') : new Graphic.SVGRenderer ('LINK0');
var poly_0 = new Graphic.Polyline (renderer);
poly_0.setFill ({r: 204, g: 204, b: 204, a: 0});
poly_0.addPoints ([]);
poly_0.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 0});
renderer.add(poly_0);
var shape_0 = new Graphic.Polyline (renderer);
shape_0.setFill ({r: 204, g: 204, b: 204, a: 0});
shape_0.addPoints ([]);
shape_0.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 8});
renderer.add(shape_0);
var adjustment0 = new Graphic.Polyline (renderer);
renderer.add(adjustment0);
$('NAVIBOX').insert('<div id="LINK1" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK1') : new Graphic.SVGRenderer ('LINK1');
var poly_1 = new Graphic.Polyline (renderer);
poly_1.setFill ({r: 204, g: 204, b: 204, a: 0});
poly_1.addPoints ([[23,156],[13,146],[33,146]]);
poly_1.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 0});
renderer.add(poly_1);
var shape_1 = new Graphic.Polyline (renderer);
shape_1.setFill ({r: 204, g: 204, b: 204, a: 0});
shape_1.addPoints ([[23,119],[23,152]]);
shape_1.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 8});
renderer.add(shape_1);
var adjustment1 = new Graphic.Polyline (renderer);
renderer.add(adjustment1);
$('NAVIBOX').insert('<div id="LINK2" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK2') : new Graphic.SVGRenderer ('LINK2');
var poly_2 = new Graphic.Polyline (renderer);
poly_2.setFill ({r: 253, g: 197, b: 158, a: 0});
poly_2.addPoints ([[154,156],[144,146],[164,146]]);
poly_2.setStroke ({r: 253, g: 197, b: 158, a: 0, w: 0});
renderer.add(poly_2);
var shape_2 = new Graphic.Polyline (renderer);
shape_2.setFill ({r: 253, g: 197, b: 158, a: 0});
shape_2.addPoints ([[154,119],[154,152]]);
shape_2.setStroke ({r: 253, g: 197, b: 158, a: 0, w: 8});
renderer.add(shape_2);
var adjustment2 = new Graphic.Polyline (renderer);
renderer.add(adjustment2);
$('LINK2').setStyle({cursor: 'pointer'}).onclick = function() {
Dispatcher.forwardTo ("/accountinggenerator/-?$part=flexfinance.accounting.accounting_event_nav igator.interface_to_t_accounts.t_accounts&$event=i nitialize&$usecase=0");
}
$('NAVIBOX').insert('<div id="LINK3" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK3') : new Graphic.SVGRenderer ('LINK3');
var poly_3 = new Graphic.Polyline (renderer);
poly_3.setFill ({r: 204, g: 204, b: 204, a: 0});
poly_3.addPoints ([[23,257],[13,247],[33,247]]);
poly_3.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 0});
renderer.add(poly_3);
var shape_3 = new Graphic.Polyline (renderer);
shape_3.setFill ({r: 204, g: 204, b: 204, a: 0});
shape_3.addPoints ([[23,219],[23,253]]);
shape_3.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 8});
renderer.add(shape_3);
var adjustment3 = new Graphic.Polyline (renderer);
renderer.add(adjustment3);
$('NAVIBOX').insert('<div id="LINK4" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK4') : new Graphic.SVGRenderer ('LINK4');
var poly_4 = new Graphic.Polyline (renderer);
poly_4.setFill ({r: 253, g: 197, b: 158, a: 0});
poly_4.addPoints ([[79,257],[69,247],[89,247]]);
poly_4.setStroke ({r: 253, g: 197, b: 158, a: 0, w: 0});
renderer.add(poly_4);
var shape_4 = new Graphic.Polyline (renderer);
shape_4.setFill ({r: 253, g: 197, b: 158, a: 0});
shape_4.addPoints ([[79,119],[79,253]]);
shape_4.setStroke ({r: 253, g: 197, b: 158, a: 0, w: 8});
renderer.add(shape_4);
var adjustment4 = new Graphic.Polyline (renderer);
renderer.add(adjustment4);
$('LINK4').setStyle({cursor: 'pointer'}).onclick = function() {
Dispatcher.forwardTo ("/accountinggenerator/-?$part=flexfinance.accounting.accounting_event_nav igator.interface_to_accounting_event.accounting_ev ent&$event=initialize&$usecase=0");
}
$('NAVIBOX').insert('<div id="LINK5" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK5') : new Graphic.SVGRenderer ('LINK5');
var poly_5 = new Graphic.Polyline (renderer);
poly_5.setFill ({r: 204, g: 204, b: 204, a: 0});
poly_5.addPoints ([[23,357],[13,347],[33,347]]);
poly_5.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 0});
renderer.add(poly_5);
var shape_5 = new Graphic.Polyline (renderer);
shape_5.setFill ({r: 204, g: 204, b: 204, a: 0});
shape_5.addPoints ([[23,319],[23,353]]);
shape_5.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 8});
renderer.add(shape_5);
var adjustment5 = new Graphic.Polyline (renderer);
renderer.add(adjustment5);
$('NAVIBOX').insert('<div id="LINK6" style="position: absolute; height: 100%; width: 100%; margin: -38px 0px 0px 5px;">');
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('LINK6') : new Graphic.SVGRenderer ('LINK6');
var poly_6 = new Graphic.Polyline (renderer);
poly_6.setFill ({r: 204, g: 204, b: 204, a: 0});
poly_6.addPoints ([[23,456],[13,446],[33,446]]);
poly_6.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 0});
renderer.add(poly_6);
var shape_6 = new Graphic.Polyline (renderer);
shape_6.setFill ({r: 204, g: 204, b: 204, a: 0});
shape_6.addPoints ([[23,419],[23,452]]);
shape_6.setStroke ({r: 204, g: 204, b: 204, a: 0, w: 8});
renderer.add(shape_6);
var adjustment6 = new Graphic.Polyline (renderer);
renderer.add(adjustment6);
$('NAVIBOX').insert(new Element('div',{id: 'BOX_7'}));
$('BOX_7').setStyle({position: 'absolute', left: (32 - $('NAVIBOX').cumulativeOffset().left) + 'px', top: (130 - $('NAVIBOX').cumulativeOffset().top) + 'px', height: '70px', width: '202px', textAlign: 'center', verticalAlign: 'middle'});
$('BOX_7').insert(new Element('span').setStyle({position: 'absolute', textAlign: 'center', left: '2px', paddingTop: '10px', fontSize: '11px', fontFamily: 'Trebuchet MS', fontWeight: 'bold', zIndex: '11', color: '#000000', width: '197px'}).update('Finanzinstrumente<br>Geschäftsvo rfälle'));
$('BOX_7').insert(new Element('span').setStyle({fontSize: '11px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('1'));
$('BOX_7').insert(new Element('span').setStyle({fontSize: '11px', marginLeft: '15px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('DW-MM-HE-03'));

var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('BOX_7') : new Graphic.SVGRenderer ('BOX_7');
var rect_7 = new Graphic.Rectangle (renderer);
rect_7.setFill ({r: 103, g: 165, b: 223, a: 0});
rect_7.setStroke ({r: 253, g: 197, b: 158, a: 0, w: 3});
rect_7.setBounds (0, 0, 197, 65);
rect_7.setRoundCorner (2, 2);
rect_7.translate(2, 3);
rect_7.rotate (0);
rect_7.setRoundCorner(2, 2);
renderer.add(rect_7);
$('NAVIBOX').insert(new Element('div',{id: 'BOX_8'}));
$('BOX_8').setStyle({position: 'absolute', left: (32 - $('NAVIBOX').cumulativeOffset().left) + 'px', top: (230 - $('NAVIBOX').cumulativeOffset().top) + 'px', height: '70px', width: '98px', textAlign: 'center', verticalAlign: 'middle'});
$('BOX_8').insert(new Element('span').setStyle({position: 'absolute', textAlign: 'center', left: '2px', paddingTop: '10px', fontSize: '11px', fontFamily: 'Trebuchet MS', fontWeight: 'bold', zIndex: '11', color: '#cccccc', width: '93px'}).update('Verdichtung'));
$('BOX_8').insert(new Element('span').setStyle({fontSize: '11px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('2'));
$('BOX_8').insert(new Element('span').setStyle({fontSize: '11px', marginLeft: '15px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update(''));
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('BOX_8') : new Graphic.SVGRenderer ('BOX_8');
var rect_8 = new Graphic.Rectangle (renderer);
rect_8.setFill ({r: 221, g: 221, b: 221, a: 0});
rect_8.setStroke ({r: 103, g: 165, b: 223, a: 0, w: 3});
rect_8.setBounds (0, 0, 93, 65);
rect_8.setRoundCorner (2, 2);
rect_8.translate(2, 3);
rect_8.rotate (0);
rect_8.setRoundCorner(2, 2);
renderer.add(rect_8);
$('NAVIBOX').insert(new Element('div',{id: 'BOX_9'}));
$('BOX_9').setStyle({position: 'absolute', left: (32 - $('NAVIBOX').cumulativeOffset().left) + 'px', top: (330 - $('NAVIBOX').cumulativeOffset().top) + 'px', height: '70px', width: '98px', textAlign: 'center', verticalAlign: 'middle'});
$('BOX_9').insert(new Element('span').setStyle({position: 'absolute', textAlign: 'center', left: '2px', paddingTop: '10px', fontSize: '11px', fontFamily: 'Trebuchet MS', fontWeight: 'bold', zIndex: '11', color: '#000000', width: '93px'}).update('Buchungs-<br>vorfall'));
$('BOX_9').insert(new Element('span').setStyle({fontSize: '11px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('3'));
$('BOX_9').insert(new Element('span').setStyle({fontSize: '11px', marginLeft: '15px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update(''));
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('BOX_9') : new Graphic.SVGRenderer ('BOX_9');
var rect_9 = new Graphic.Rectangle (renderer);
rect_9.setFill ({r: 195, g: 220, b: 246, a: 0});
rect_9.setStroke ({r: 103, g: 165, b: 223, a: 0, w: 3});
rect_9.setBounds (0, 0, 93, 65);
rect_9.setRoundCorner (2, 2);
rect_9.translate(2, 3);
rect_9.rotate (0);
rect_9.setRoundCorner(2, 2);
renderer.add(rect_9);
$('NAVIBOX').insert(new Element('div',{id: 'BOX_10'}));
$('BOX_10').setStyle({position: 'absolute', left: (32 - $('NAVIBOX').cumulativeOffset().left) + 'px', top: (430 - $('NAVIBOX').cumulativeOffset().top) + 'px', height: '70px', width: '98px', textAlign: 'center', verticalAlign: 'middle'});
$('BOX_10').insert(new Element('span').setStyle({position: 'absolute', textAlign: 'center', left: '2px', paddingTop: '10px', fontSize: '11px', fontFamily: 'Trebuchet MS', fontWeight: 'bold', zIndex: '11', color: '#000000', width: '93px'}).update('Einzelumsätze<br>Buchungsatz'));
$('BOX_10').insert(new Element('span').setStyle({fontSize: '11px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('4'));
$('BOX_10').insert(new Element('span').setStyle({fontSize: '11px', marginLeft: '15px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update(''));
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('BOX_10') : new Graphic.SVGRenderer ('BOX_10');
var rect_10 = new Graphic.Rectangle (renderer);
rect_10.setFill ({r: 195, g: 220, b: 246, a: 0});
rect_10.setStroke ({r: 103, g: 165, b: 223, a: 0, w: 3});
rect_10.setBounds (0, 0, 93, 65);
rect_10.setRoundCorner (2, 2);
rect_10.translate(2, 3);
rect_10.rotate (0);
rect_10.setRoundCorner(2, 2);
renderer.add(rect_10);
$('NAVIBOX').insert(new Element('div',{id: 'BOX_11'}));
$('BOX_11').setStyle({position: 'absolute', left: (32 - $('NAVIBOX').cumulativeOffset().left) + 'px', top: (529 - $('NAVIBOX').cumulativeOffset().top) + 'px', height: '70px', width: '98px', textAlign: 'center', verticalAlign: 'middle'});
$('BOX_11').insert(new Element('span').setStyle({position: 'absolute', textAlign: 'center', left: '2px', paddingTop: '10px', fontSize: '11px', fontFamily: 'Trebuchet MS', fontWeight: 'bold', zIndex: '11', color: '#000000', width: '93px'}).update('Kontoauszug'));
$('BOX_11').insert(new Element('span').setStyle({fontSize: '11px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('5'));
$('BOX_11').insert(new Element('span').setStyle({fontSize: '11px', marginLeft: '15px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update(''));
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('BOX_11') : new Graphic.SVGRenderer ('BOX_11');
var rect_11 = new Graphic.Rectangle (renderer);
rect_11.setFill ({r: 195, g: 220, b: 246, a: 0});
rect_11.setStroke ({r: 103, g: 165, b: 223, a: 0, w: 3});
rect_11.setBounds (0, 0, 93, 65);
rect_11.setRoundCorner (2, 2);
rect_11.translate(2, 3);
rect_11.rotate (0);
rect_11.setRoundCorner(2, 2);
renderer.add(rect_11);
$('NAVIBOX').insert(new Element('div',{id: 'BOX_12'}));
$('BOX_12').setStyle({position: 'absolute', left: (136 - $('NAVIBOX').cumulativeOffset().left) + 'px', top: (230 - $('NAVIBOX').cumulativeOffset().top) + 'px', height: '70px', width: '98px', textAlign: 'center', verticalAlign: 'middle'});
$('BOX_12').insert(new Element('span').setStyle({position: 'absolute', textAlign: 'center', left: '2px', paddingTop: '10px', fontSize: '11px', fontFamily: 'Trebuchet MS', fontWeight: 'bold', zIndex: '11', color: '#000000', width: '93px'}).update('T-Konten'));
$('BOX_12').insert(new Element('span').setStyle({fontSize: '11px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update('6'));
$('BOX_12').insert(new Element('span').setStyle({fontSize: '11px', marginLeft: '15px', fontFamily: 'Trebuchet MS', color: '#332946', position: 'absolute', left: '7px', top: '48px', zIndex: '11'}).update(''));
var renderer = Prototype.Browser.IE ? new Graphic.VMLRenderer ('BOX_12') : new Graphic.SVGRenderer ('BOX_12');
var rect_12 = new Graphic.Rectangle (renderer);
rect_12.setFill ({r: 195, g: 220, b: 246, a: 0});
rect_12.setStroke ({r: 103, g: 165, b: 223, a: 0, w: 3});
rect_12.setBounds (0, 0, 93, 65);
rect_12.setRoundCorner (2, 2);
rect_12.translate(2, 3);
rect_12.rotate (0);
rect_12.setRoundCorner(2, 2);
renderer.add(rect_12);

});
</script>
<div id="LINK0" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="1" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="8" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div id="LINK1" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="23,156 13,146 33,146" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="1" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="23,119 23,152" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="8" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div id="LINK2" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%; cursor: pointer;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="154,156 144,146 164,146" fill-opacity="1" fill="rgb(253,197,158)" stroke-width="1" stroke-opacity="1" stroke="rgb(253,197,158)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="154,119 154,152" fill-opacity="1" fill="rgb(253,197,158)" stroke-width="8" stroke-opacity="1" stroke="rgb(253,197,158)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div id="LINK3" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="23,257 13,247 33,247" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="1" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="23,219 23,253" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="8" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div id="LINK4" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%; cursor: pointer;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="79,257 69,247 89,247" fill-opacity="1" fill="rgb(253,197,158)" stroke-width="1" stroke-opacity="1" stroke="rgb(253,197,158)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="79,119 79,253" fill-opacity="1" fill="rgb(253,197,158)" stroke-width="8" stroke-opacity="1" stroke="rgb(253,197,158)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div id="LINK5" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="23,357 13,347 33,347" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="1" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="23,319 23,353" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="8" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div id="LINK6" style="margin: -38px 0px 0px 5px; position: absolute; height: 100%; width: 100%;"><svg viewBox="0 0 221 505" preserveAspectRatio="none" height="505" width="221"><polyline points="23,456 13,446 33,446" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="1" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline points="23,419 23,452" fill-opacity="1" fill="rgb(204,204,204)" stroke-width="8" stroke-opacity="1" stroke="rgb(204,204,204)" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline><polyline fill-opacity="0" fill="none" stroke-width="0" stroke-opacity="0" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)" invmatrix="1,0,0,1,0,0" matrix="1,0,0,1,0,0"></polyline></svg></div><div style="position: absolute; left: 6px; top: 17px; height: 70px; width: 202px; text-align: center; vertical-align: middle;" id="BOX_7"><span style="position: absolute; text-align: center; left: 2px; padding-top: 10px; font-size: 11px; font-family: Trebuchet MS; font-weight: bold; z-index: 11; color: rgb(0, 0, 0); width: 197px;">Finanzinstrumente<br>Geschäftsvorfälle</span><span style="font-size: 11px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">1</span><span style="font-size: 11px; margin-left: 15px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">DW-MM-HE-03</span><svg viewBox="0 0 202 70" preserveAspectRatio="none" height="70" width="202"><rect ry="2" rx="2" height="65" width="197" y="0" x="0" fill-opacity="1" fill="rgb(103,165,223)" stroke-width="3" stroke-opacity="1" stroke="rgb(253,197,158)" transform="matrix(1, 0, 0, 1, 2, 3)" invmatrix="1,0,0,1,-2,-3" matrix="1,0,0,1,2,3"></rect></svg></div><div style="position: absolute; left: 6px; top: 117px; height: 70px; width: 98px; text-align: center; vertical-align: middle;" id="BOX_8"><span style="position: absolute; text-align: center; left: 2px; padding-top: 10px; font-size: 11px; font-family: Trebuchet MS; font-weight: bold; z-index: 11; color: rgb(204, 204, 204); width: 93px;">Verdichtung</span><span style="font-size: 11px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">2</span><span style="font-size: 11px; margin-left: 15px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;"></span><svg viewBox="0 0 98 70" preserveAspectRatio="none" height="70" width="98"><rect ry="2" rx="2" height="65" width="93" y="0" x="0" fill-opacity="1" fill="rgb(221,221,221)" stroke-width="3" stroke-opacity="1" stroke="rgb(103,165,223)" transform="matrix(1, 0, 0, 1, 2, 3)" invmatrix="1,0,0,1,-2,-3" matrix="1,0,0,1,2,3"></rect></svg></div><div style="position: absolute; left: 6px; top: 217px; height: 70px; width: 98px; text-align: center; vertical-align: middle;" id="BOX_9"><span style="position: absolute; text-align: center; left: 2px; padding-top: 10px; font-size: 11px; font-family: Trebuchet MS; font-weight: bold; z-index: 11; color: rgb(0, 0, 0); width: 93px;">Buchungs-<br>vorfall</span><span style="font-size: 11px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">3</span><span style="font-size: 11px; margin-left: 15px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;"></span><svg viewBox="0 0 98 70" preserveAspectRatio="none" height="70" width="98"><rect ry="2" rx="2" height="65" width="93" y="0" x="0" fill-opacity="1" fill="rgb(195,220,246)" stroke-width="3" stroke-opacity="1" stroke="rgb(103,165,223)" transform="matrix(1, 0, 0, 1, 2, 3)" invmatrix="1,0,0,1,-2,-3" matrix="1,0,0,1,2,3"></rect></svg></div><div style="position: absolute; left: 6px; top: 317px; height: 70px; width: 98px; text-align: center; vertical-align: middle;" id="BOX_10"><span style="position: absolute; text-align: center; left: 2px; padding-top: 10px; font-size: 11px; font-family: Trebuchet MS; font-weight: bold; z-index: 11; color: rgb(0, 0, 0); width: 93px;">Einzelumsätze<br>Buchungsatz</span><span style="font-size: 11px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">4</span><span style="font-size: 11px; margin-left: 15px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;"></span><svg viewBox="0 0 98 70" preserveAspectRatio="none" height="70" width="98"><rect ry="2" rx="2" height="65" width="93" y="0" x="0" fill-opacity="1" fill="rgb(195,220,246)" stroke-width="3" stroke-opacity="1" stroke="rgb(103,165,223)" transform="matrix(1, 0, 0, 1, 2, 3)" invmatrix="1,0,0,1,-2,-3" matrix="1,0,0,1,2,3"></rect></svg></div><div style="position: absolute; left: 6px; top: 416px; height: 70px; width: 98px; text-align: center; vertical-align: middle;" id="BOX_11"><span style="position: absolute; text-align: center; left: 2px; padding-top: 10px; font-size: 11px; font-family: Trebuchet MS; font-weight: bold; z-index: 11; color: rgb(0, 0, 0); width: 93px;">Kontoauszug</span><span style="font-size: 11px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">5</span><span style="font-size: 11px; margin-left: 15px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;"></span><svg viewBox="0 0 98 70" preserveAspectRatio="none" height="70" width="98"><rect ry="2" rx="2" height="65" width="93" y="0" x="0" fill-opacity="1" fill="rgb(195,220,246)" stroke-width="3" stroke-opacity="1" stroke="rgb(103,165,223)" transform="matrix(1, 0, 0, 1, 2, 3)" invmatrix="1,0,0,1,-2,-3" matrix="1,0,0,1,2,3"></rect></svg></div><div style="position: absolute; left: 110px; top: 117px; height: 70px; width: 98px; text-align: center; vertical-align: middle;" id="BOX_12"><span style="position: absolute; text-align: center; left: 2px; padding-top: 10px; font-size: 11px; font-family: Trebuchet MS; font-weight: bold; z-index: 11; color: rgb(0, 0, 0); width: 93px;">T-Konten</span><span style="font-size: 11px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;">6</span><span style="font-size: 11px; margin-left: 15px; font-family: Trebuchet MS; color: rgb(51, 41, 70); position: absolute; left: 7px; top: 48px; z-index: 11;"></span><svg viewBox="0 0 98 70" preserveAspectRatio="none" height="70" width="98"><rect ry="2" rx="2" height="65" width="93" y="0" x="0" fill-opacity="1" fill="rgb(195,220,246)" stroke-width="3" stroke-opacity="1" stroke="rgb(103,165,223)" transform="matrix(1, 0, 0, 1, 2, 3)" invmatrix="1,0,0,1,-2,-3" matrix="1,0,0,1,2,3"></rect></svg></div></div>
</td>
</tr>
<tr valign="top" height="100%"><td></td></tr>
</tbody></table>

MichaelJason 19.09.2008 13:40

Ich habs mal nochmal nachgestellt :-)
 
und selbst nochmal gestetet :) ich möchte also nun auf alle Links in allen ebenen zugreifen können...

<HTML><HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">


<SCRIPT TYPE="text/javascript" SRC="prototype.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="pgf-core.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" SRC="pgf-renderer.js"></SCRIPT>
<STYLE TYPE="text/css">
#NAVIBOX {
height: 505px;
width: 1000px;
position: absolute;
}

#link0 {
height: 100%;
width: 100%;
position: absolute;
}
</STYLE>

</HEAD>
<BODY>

<div id="NAVIBOX">
<div id="link0" STYLE="padding: 30px;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></div>
<div id="link0" STYLE="padding: 70px;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></div>
<div id="link0" STYLE="padding: 100px;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></div>
<div id="link0" STYLE="padding: 130px;"><A HREF="test">hier wird eine VML oder SVG Grafik gerendert mit
einer Verlinkung</A></div>
</div>

</BODY></HTML>


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:24 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023