Markus: Links um und im Div-Bereich

SELF-Forum

Links um und im Div-Bereich

Markus
– Informationen zu den Bewertungsregeln

Hallo zusammen,

hoffe mir kann jemand helfen.
Für besseres Verständnis habe ich die Seite mal hochgeladen:
http://www.stardev.de/test/csstest1.html

Ich habe 2 Probleme mit der Seite:

  • klicke ich im ie auf das 'i' oder auf das '+' so wird die Msgbox 'txTop1' bzw. 'txBtm1' angezeigt (so will ich es auch haben), mache ich nun das gleiche im FF, so wird die Msgbox 'big box' angezeigt.

  • klicke ich auf den Text bzw. Link "txTop" so wird die Msgbox "txTop2" angezeigt und aber leider auch die Msgbox "big box", eigentlich will ich aber nur die Msgbox "txTop2" haben.

Das ganze soll eine Art Button sein, d.h. klicke ich auf einen Link mit Text, so soll dieser ausgeführt werden, klicke ich ausserhalb des Textes auf dem Div-Bereich, so soll dann der dort hinterlegte Link ausgeführt werden.

Hoffe mir kann jemand helfen oder vielleicht kennt jemand ein entsprechendes Beispiel, das mir weiterhilft.... Habe schon mit z-index usw. gespielt... leider ohne Erfolg.

Gruß und guten Rutsch
Markus

hier noch der code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<style>
html,body{
background-color:#22292C;
color : #FFFFFF ;
font: 16px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
}
A {
color : #FFFFFF ;
text-decoration: none;
}
.filecontainer{
margin-top:10px;
background-color:#273033;
height:46px;
border: 1px solid #1C2325;
overflow:hidden;
white-space:nowrap;
vertical-align:middle;
position:relative;
z-index:1;
}

.filecontainer:hover{
background-color:#576D75;
z-index:3;
}

.filecontainer .lbox {
float:left;
width: 22px;
text-align: center;
background-color: #A5B6BD;
margin-right:10px;
z-index:3;
}
.filecontainer .rbox {
height:100%;
vertical-align: middle;
position:relative;
z-index:2;
}

.filecontainer .txTop{
margin-top:3px;
height:20px;
z-index:99;
}

.filecontainer .txBtm{
height:20px;
z-index:99;
}

.filecontainer .lbox .txTop a{
padding-right:3px;
padding-left:3px;
z-index:98;
}

.filecontainer .rbox .txTop a{
color: #A5B6BD;
height:50%;
position:relative;
z-index:98;
}
</style>
<BODY>
<div class=filecontainer>
<div class=lbox>
<div class=txTop><a href="#" onclick="alert('txTop1');">i</a></div>
<div class=txBtm><a href="#" onclick="alert('txBtm1');">+</a></div>
</div>
<div class=rbox onclick="alert('big box');">
<div class=txTop><a href="#" onclick="alert('txTop2');">txTop</a></div>
<div class=txBtm><a href="#" onclick="alert('txBtm2');">txBtm</a></div>
</div>
</div>
</BODY>
</HTML>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Links um und im Div-Bereich

    Markus
    – Informationen zu den Bewertungsregeln

    Hallo,
    habe etwas gefunden und bin gerade am lesen:
    http://www.quirksmode.org/js/events_order.html

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln