divs mit textfeldern ausblenden

[willi]

Hallo Leute,

ich habe folgendes Problem... ich habe 2 divs mit css übereinandergeschmissen, die jeweils 3 textareas enthalten. Mithilfe von Javascript switche ich zwischen den beiden divs und bekomm somit entweder textarea1-3 oder textarea4-6 angezeigt.
Das klappt auch alles wunderbar, nur kann ich in die textareas1-3 nichts reinschreiben... meiner Vermutung nach aus dem Grund, dass das div mit textarea4-6 der Positionierung nach über dem anderen div liegt und somit verhindert, dass ich in die textareas reinklicken kann.

Hier ein Auszug aus dem html code:

<!-- Auswahl (Horizontal/Vertikal) -->

<div id="richtung">
 <a href="javascript:reihe1()">[Reihe1]</a>&nbsp;<a href="javascript:reihe2()">[Reihe2]</a>&nbsp;<a href="javascript:unternander()">[vertikal]</a>&nbsp;
</div>

<br />

<!-- Eingabefelder -->

<form name="eingabe">

<div id="reihe1" class="reihe1">

<div id="feld1" class="da"><textarea name="textarea1">Feld 1</textarea></div>
 <div id="feld2" class="da"><textarea name="textarea2">Feld 2</textarea></div>
 <div id="feld3" class="da"><textarea name="textarea3">Feld 3</textarea></div>

</div>

<div id="reihe2" class="reihe2">

<div id="feld4" class="weg"><textarea name="textarea4">Feld 4</textarea></div>
 <div id="feld5" class="weg"><textarea name="textarea5">Feld 5</textarea></div>
 <div id="feld6" class="weg"><textarea name="textarea6">Feld 6</textarea></div>

</div>

Und hier das Javascript:

<script language="JavaScript">
function reihe1()
{
 document.getElementById('feld1').className = 'da';
 document.getElementById('feld2').className = 'da';
 document.getElementById('feld3').className = 'da';
 document.getElementById('feld4').className = 'weg';
 document.getElementById('feld5').className = 'weg';
 document.getElementById('feld6').className = 'weg';
 document.getElementById('reihe1').className = 'reihe1';
 document.getElementById('reihe2').className = 'reihe2' ;
}

function reihe2()
{
 document.getElementById('feld1').className = 'weg';
 document.getElementById('feld2').className = 'weg';
 document.getElementById('feld3').className = 'weg';
 document.getElementById('feld4').className = 'da';
 document.getElementById('feld5').className = 'da';
 document.getElementById('feld6').className = 'da';
 document.getElementById('reihe1').className = 'reihe1';
 document.getElementById('reihe2').className = 'reihe2';
}

function unternander()
{
 document.getElementById('feld1').className = 'unternander';
 document.getElementById('feld2').className = 'unternander';
 document.getElementById('feld3').className = 'unternander';
 document.getElementById('feld4').className = 'unternander';
 document.getElementById('feld5').className = 'unternander';
 document.getElementById('feld6').className = 'unternander';
 document.getElementById('reihe1').className = 'spalte_oben';
 document.getElementById('reihe2').className = 'spalte_unten';
}
</script>

Und zuguter letzt noch das css (die Definitionen die relevant sind:

.da {
float: left;
visibility: visible;
z-index: 50;
width: 33%;
text-align: center;
display: block;
}

.weg {
float: left;
visibility: hidden;
z-index: 1;
width: 33%;
text-align: center;
display: none;
}

.unternander {
clear:both;
visibility: visible;
float: none;
width: 794px;
height:60px;
text-align:center;
display: block;
}

[wahsaga]

hi,

Das klappt auch alles wunderbar, nur kann ich in die textareas1-3 nichts reinschreiben... meiner Vermutung nach aus dem Grund, dass das div mit textarea4-6 der Positionierung nach über dem anderen div liegt und somit verhindert, dass ich in die textareas reinklicken kann.

Mache die Elemente nicht über visibility "unsichtbar", sondern blende sie mit display:none aus.

gruß,
wahsaga

[willi]

Mache die Elemente nicht über visibility "unsichtbar", sondern blende sie mit display:none aus.

Erstmal danke für die schnelle Antwort, doch ich muss sagen... klappt leider auch nicht :(

.da {
float: left;
z-index: 50;
width: 33%;
text-align: center;
display: block;
}

.weg {
float: left;
z-index: 1;
width: 33%;
text-align: center;
display: none;
}

.unternander {
clear:both;
float: none;
width: 794px;
height:60px;
text-align:center;
display: block;
}

bewirkt bei mir das gleiche.... textarea 1-3 lassen sich nicht beschreiben...

gruß willi

[wahsaga]

hi,

Mache die Elemente nicht über visibility "unsichtbar", sondern blende sie mit display:none aus.

Erstmal danke für die schnelle Antwort, doch ich muss sagen... klappt leider auch nicht :(

Ja, jetzt ist mir klar, warum:
Du blendest nur die Textareas aus, aber nicht die Divs.

Also steht ein Div, in welchem jetzt nichts mehr zu sehen ist, immer noch lustig über den anderen Textareas.

Blende das jeweilige Div-Element aus - dann brauchst du auch nicht mehr die Textareas einzeln ausblenden.

gruß,
wahsaga

[willi]

Blende das jeweilige Div-Element aus - dann brauchst du auch nicht mehr die Textareas einzeln ausblenden.

Vieeeeeeelen Dank,

jetzt klappts. Bei längerem Überlegen fällt mir auf, dass ich da eigentlich auch hätte selber drauf kommen können :D

Gruß Willi