[HTML] Probleme mi Div-Tags

[Prototypjack]

Guten Morgen!

Ich habe da einige Probleme mit Div-Tags:
Ich will (zur Navigation) eine Leiste am linken Rand (und zwar ganz dort, ohne Zwischenräume realisieren) mit zwei Boxen (obere Box, untere Box).
Das ganze sieht in etwas so aus:

Delphi-Quellcode:

 _
| |
 -
| |
| |
| |
 -

Man sieht also: Die untere Box ist erheblich größer als die Obere. In der Tat hat die obere Box festgelegte Größen, während ich (und jetzt kommen wir zu meinem Problem) die untere Box dazu bringen will festgelegt in der Breite aber variable in der Höhe zu sein. Das heißt: Ich will, solange die Box kleiner als der Rest der Seite ist, sie bis zum Ende zeichnen, wenn der Inhalt größer ist, dann natürlich auch darüber hinaus.

Hmm, ich hoffe ihr habt einigermaßen verstanden was ich hier plane ;)

Grüße & Danke,
Max

[ibp]

meinst du in etwa so... beispiel?

[Prototypjack]

Zitat:

Zitat von ibp

meinst du in etwa so... beispiel?

Ja das trifft die Idee. Aber wenn zu wenig Text in der Box ist, muss sie trotzdem der Seitenlänge entsprechen, und das ist eigentlich das größte Problem.

Ich schau mir mal an wie die das gelöst haben (oder, ob die das gelöst haben ;) ).

Grüße,
Max

[Matze]

Ich werfe mal ein Stichwort in die Runde: faux columns oder du kannst auch nach [google]div "gleiche höhe"[/google] suchen.

Eine wirklich saubere Lösung gibt es meines Wissens für dieses Problem nicht, auch wenn dies sehr oft gefragt wird. Aber Workarrounds gibt's zahlreiche.

Edit: Speziell das könnte interessant sein: Faux CSS Layouts.

[Prototypjack]

Zitat:

Zitat von Matze

Ich werfe mal ein Stichwort in die Runde: faux columns oder du kannst auch nach [google]div "gleiche höhe"[/google] suchen.

Eine wirklich saubere Lösung gibt es meines Wissens für dieses Problem nicht, auch wenn dies sehr oft gefragt wird. Aber Workarrounds gibt's zahlreiche.

Edit: Speziell das könnte interessant sein: Faux CSS Layouts.

Ok, wirklich schön ist das aber echt nicht.
Edit: Aber danke! Du hast mir sehr weitergeholfen.

Ob ich wohl wieder (zumindest in diesem Fall) weg von den tollen Div-Tags und zurück zu den Blinden-Tabellen, mit denen ich früher sowas gelöst habe, gehen soll?

Grüße,
Max

[arbu man]

Sonst gibt es auch noch http://yaml.de als Layout Framework.

[Prototypjack]

Moin,

Zitat:

Zitat von arbu man

Sonst gibt es auch noch http://yaml.de als Layout Framework.

Hmm, ein Framework will ich auch nicht ubedingt benutzen.

Zitat:

Zitat von Matze

Ich werfe mal ein Stichwort in die Runde: faux columns oder du kannst auch nach [google]div "gleiche höhe"[/google] suchen.

Eine wirklich saubere Lösung gibt es meines Wissens für dieses Problem nicht, auch wenn dies sehr oft gefragt wird. Aber Workarrounds gibt's zahlreiche.

Edit: Speziell das könnte interessant sein: Faux CSS Layouts.

Damit bringe ich zwar alle auf eine gleiche Höhe, aber ich kann ja nicht einmal sicher sein ob eines der Divs aus dem Main-Bereich die 100% Höhe erreicht. Ich würde damit nur ein Div vom anderen abhängig machen, aber dennoch könnte ich keinem der beiden das gewünschte befehlen.

Mit blinden Tabellen würde es zwar gehen (height: 100%;) und ich glaube es geht auch mit Divs, aber nur in dem Moment, wenn man die Doctype angabe entfernt, dann wird die Seite zumindest im FireFox so dargestellt wie ich es will. Aber das kann es doch auch nicht sein.

Was ist denn das für eine Darstellungssprache wenn man nicht einmal sowas realisieren kann?

Hrm, langsam bin ich mit meinem Latein am Ende.. Ich hoffe ihr seid's noch nicht

Grüße,
Max

[quendolineDD]

Wie wärs wenn du unter deinem Inhalt in dem DIV eine blinde Tabelle mit height: 100%; reinhaust?

[TurboMartin]

Meinst du so?

Code:

<div style="left: 213px; overflow: visible; width: 100px; position: absolute; bottom: 100px;">Inhalt</div>

[quendolineDD]

Wieso arbeitest du mit inline-CSS?

Ich mein eher:

Delphi-Quellcode:

<div>
  .
  .
  .
  <table height='100%' cellspacing='0px' cellpadding='0px' border='0'>
    <tr><td>
</td></tr>
  </table>
</div>

[Die Muhkuh]

Faux schummelt aber auch und bindet ein Hintergrundbild ein. Ohne das, wächst der Rand auch nicht mit ;-)

[edit]Wer FireBug im FireFox installiert hat, kann es ganz schnell selbst nachprüfen: FireBug öffnen, auf "Inspect" klicken, dass div mit der ID "faux" aussuchen und rechts (im FireBug) die Regel für den Hintergrund deaktivieren.[/edit]

[Prototypjack]

Zitat:

Zitat von quendolineDD

Wie wärs wenn du unter deinem Inhalt in dem DIV eine blinde Tabelle mit height: 100%; reinhaust?

So in der Art habe ich es nun gelöst.
Ich kämpfe nur noch etwas mit dem IE.

Danke an alle!

Grüße,
Max

[OG Karotte]

Hier sind auch immer interessante Ansätze / Lösungen zu finden...

[alcaeus]

Zitat:

Zitat von quendolineDD

Wieso arbeitest du mit inline-CSS?

Warum nicht? Die direkten height und width-Properties der Tags sind in den strict-Varianten der neueren HTML-Versionen deprecated, Styling geschieht immer mit CSS - egal ob inline oder per Stylesheet-Datei.

Greetz
alcaeus

[quendolineDD]

Es geht aber um die Bequemlichkeit beim ändern. Wenn du die Klassen immer einzeln definierst, wird das eine heiden Arbeit, diese dann wieder jeweils einzeln zu ändern.

[Die Muhkuh]

Nö. Die Klasse ändere ich einmal und alle divs, die die Klasse benutzen sind davon betroffen.

Beim Inline-CSS muss man das soviel mal ändern, wie es divs gibt, die das gleiche brauchen. ;-)

Ich verwende Inline-CSS um nur mal ein Attribut zu verändern, ansonsten Klassen.