Zum Inhalt springen

Spalten: variable Breite


Scherzkeks

Empfohlene Beiträge

Hallo,

folgendes Problem: Ich habe eine Seite(HTML) mit vier Spalten. Eine Spalte, die linke Spalte ist eine ausklappbare Nav-Leiste. Die anderen drei Spalten(alle gleich groß) sollen immer den vorhandenen Platzt ausfüllen d.h. ihre Größe in Abhängigkeit von der Nav-Leiste(ein,-ausgeklappt) verändern.

Etwas deutlicher: wenn die Nav-Leiste ausgeklappt ist, werden die drei weiteren Spalten alle etwas kleiner. Wenn die Nav-Leiste jedoch eingeklappt ist, sollen sich die Splaten über den gesamten Bildschirm ausbreiten.

Gruß

Scherzkeks

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hm, dass habe ich mir schon gedacht, dass es nicht so einfach zu begreifen ist. Ich mache hier einfach mal einen Codebeispiel, damit es verständlicher wird.


 ....

1 <body>

2  <div id="mainframe">

3    <div id="nav_leiste"></div>

4    <div id="spalte2"></div>

5    <div id="spalte3"></div>

6    <div id="spalte4"></div>

7  </div>

8 </body>

...

Die spalten 2-4 sollen die gleiche Größe haben. Wenn die nav_leiste ausgeklappt wird, sollen die sich dem rest des Bildschirms anpassen. Wenn die nav_leiste jedoch eingeklappt wird, sollen die drei Spalten alle größer werden und den gesamten Bildschirmbereich einnehmen.

Mit der Prozentangabe habe ich es auch schon versucht und keinen Erfolg gehabt.

PS: Ich habe in dem div nav_leiste eine liste(ul). Diese Liste klappe ich dann immer ein bzw. aus. Das mache ich mit Effect.BlindDown und Effect.BlindUp des Frameworks script.aculo.us.

Gruß

Scherzkeks

Link zu diesem Kommentar
Auf anderen Seiten teilen

PS: Ich habe in dem div nav_leiste eine liste(ul). Diese Liste klappe ich dann immer ein bzw. aus. Das mache ich mit Effect.BlindDown und Effect.BlindUp des Frameworks script.aculo.us.

Da du das ganze eh über Javascript machst, kannst du nicht zur "Laufzeit" die Breite per Javascript beeinflussen? Einfach: Breite = Breite_mainframe / 3 für alle Spalten.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Oh, hab ganz vergessen mein Ergebnis zu posten. Folgendermaßen habe ich es gelöst:


var first = document.getElementById("first");

first.style.width = "26.6%"; 

Darüber kann ich dann wie gewünscht, die Größe beim Ein,- Ausklappen verändern.

Nochmals großen Dank an JesterDay :bimei

Gruß

Scherzkeks

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...