✔ Spalte ausblenden (Toggle) mit DIVs simulieren

U

uprocka

Grünschnabel
Hallo,

ich schaffe es nicht 3 DIV-Elemente so nebeneinander zu positionieren, dass wenn ich per Javascript das 1. Element ausblende die anderen beiden nach links "rutschen".

Analog dazu habe ich es mit einer dreispaltigenTabelle realisiert wobei per Javascript die erste ausgeblendet wird.

Dachte jedoch das es per DIV und CSS eleganter wäre - sofern es überhaupt möglich ist.

hat Jemand eine Idee?
 
Hi,

versuch es mal hiermit:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
.box {
float: left;
width: 100px;
margin: 0 10px;
border: 1px solid #000;
}
-->
</style>

<script type="text/javascript">
<!--
function toggle(divid) {
obj = document.getElementById(divid);

obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
}
//-->
</script>

</head>
<body>

<ul>
    <li><a href="#" onclick="toggle('box1')">Box 1</a></li>
    <li><a href="#" onclick="toggle('box2')">Box 2</a></li>
    <li><a href="#" onclick="toggle('box3')">Box 3</a></li>
</ul>

<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>
<div id="box3" class="box">Box 3</div>

</body>
</html>
 
Mir ist gerade aufgefallen, dass man eine feste Breite (width:400px) angeben muss.

Bei width:auto; funktioniert es nicht.

Also wenn ich eine der Boxen/Spalten den maximalen Platz ausfüllen lassen möchte, muss ich wohl wieder auf die altbewährte Tabelle zurückgreifen. Oder?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück