Dynamische Breite ohne Tabelle

[zeussi]

Hallo Leute,

mein Layout erfordert Textboxen mit dynamischer Breite.

Unter folgendem Link seht ihr zuerst die Version mit der Tabelle, wie es funktionieren soll. Sprich, die orange Box soll dynamisch an die Breite des Browserfensters angepasst werden.

http://zeussi.bplaced.net/test-css.htm

Im zweiten Beispiel habe ich das Ganze ohne Tabelle versucht. Nur leider schaffe ich es nicht das Ganze auf eine dynamische Breite zu bekommen.
Wenn ich die Breite auf 100% setze, dann geht es über die Browserfenstergrenze hinaus und wird durch das overflow: hidden; versteckt.

Ich denke das der von mir im Link gezeigt Ansatz eher falsch ist. Aber was Besseres fällt mir nicht ein. Weiß jemand einen Ansatz zu dem Problem?

[Klawischnigg]

Hi there,

Im zweiten Beispiel habe ich das Ganze ohne Tabelle versucht. Nur leider schaffe ich es nicht das Ganze auf eine dynamische Breite zu bekommen.
Wenn ich die Breite auf 100% setze, dann geht es über die Browserfenstergrenze hinaus und wird durch das overflow: hidden; versteckt.

Ich versteh' Dein Problem nicht. Bei mir (Seamonkey 1.7) sind beide Beispiele gleich lang. Ausserdem, wenn Du meinst, daß 100% zuviel sind, dann verwend halt nur 90%, wichtig für die "Dynamik" Deiner Breite ist lediglich die Prozentangabe...

[Malcolm Beck´s]

hi,

Ich versteh' Dein Problem nicht. Bei mir (Seamonkey 1.7) sind beide Beispiele gleich lang.

Gibt es einen Grund, warum du nicht auf 2.01 updatest?
Bei mir sieht es jedenfalls so aus (Firefox 3.5)

mfg

[zeussi]

Es sieht so aus wie bei Malcolm Beck´s Screenshot. Danke für's hochladen :-)

Noch zu ergänzen ist, dass der rote und der grüne Bereich gleich hoch seien sollen und der orange und der grüne Bereich dynamisch in die Breite gehen sollen.

Und bei meinem Ansatz geht der Content ÜBER das Browserfenster hinaus bei width=100% - auch bei width=90% ... da funktioniert es bei einer bestimmten Browserbreite, macht man diesen aber kleiner, so verschiebt es sich nach rechts außen und ein horizontaler Scrollbalken ensteht (wenn overflow deaktiviert ist), auch wenn die Box durch ihren Inhalt kleiner sein könnte.

Sprich, der Code ist einfach falsch für dieses Vorhaben... und ich suche einen Besseren da ich ratlos bin imho :/

[Malcolm Beck´s]

hi,

Sprich, der Code ist einfach falsch für dieses Vorhaben... und ich suche einen Besseren da ich ratlos bin imho :/

Vielleicht hilft dir ja Molilys Artikel zu Mehrspaltigkeit mit CSS.

mfg

[zeussi]

hi,

Sprich, der Code ist einfach falsch für dieses Vorhaben... und ich suche einen Besseren da ich ratlos bin imho :/

Vielleicht hilft dir ja Molilys Artikel zu Mehrspaltigkeit mit CSS.

mfg

http://www.pixy.cz/blogg/clanky/css-3col-layout/

Dieses Template konnte mir helfen. Geht zwar über eine Grafik links, aber es funktioniert :-)

[Klawischnigg]

Hi there,

Ich versteh' Dein Problem nicht. Bei mir (Seamonkey 1.7) sind beide Beispiele gleich lang.

Gibt es einen Grund, warum du nicht auf 2.01 updatest?

Afaik ist der noch im Betastadium und zweitens ist es egal, weil ich mit dem Teil ohnehin keine sicherheitsrelevanten Seiten besuche. Ausserdem geht mir ständige Neukonfigurierenmüssen nach einem größeren Update auf die Nerven. Neue Browser verwend ich immer nur zum Testen...

[Malcolm Beck´s]

hi,

Gibt es einen Grund, warum du nicht auf 2.01 updatest?

Afaik ist der noch im Betastadium

Ok, dass hatte ich nicht geprüft, ich hatte mir neulich mein System neu aufgesetzt und bei der Gelegenheit veraltete Software neu installiert, da habe ich bei Seamonkey einfach das neueste gezogen, dass da in der Liste stand.

Ausserdem geht mir ständige Neukonfigurierenmüssen nach einem größeren Update auf die Nerven.

Das ist echt nervig, vor allem wenn man keine möglichkeit hat, alte Profile in die neue Software zu importieren.

mfg

[nemoinho]

Moin aus Hamburg,

ich würde das Problem etwas anders angehen,
darum hier erst mal dein html:

<div id="header"><p>Header</p></div>  
<div id="main">  
  <div id="menu"><p>Menu</p></div>  
  <div id="content"><p>Content[...]</p></div>  
</div>  
<div id="footer"><p>Footer</p></div>  

und dann gehts an's css, erstmal alle margin und padding auf 0 setzen, damit es keine komischen Verschiebungen gibt...

* {margin:0;padding:0;}  
#header {}  
#footer {}  
#main {}  
#menu {}  
#content {}  
#content div {}

Denn was weißt du, dass der header ist die komplette seite breit ist, ebenso wie der footer, jedoch ist dass egal, weil ein div eh immer die volle mögliche Breite einnimmt, außer man stellt etwas anderes ein.
Außerdem weißt du, dass der Inhalt komplett zu sehen sein soll,
sprich:
#main {overflow:hidden}
so und damit das menu auch schön links bleibt, lässt man es nach links floaten:
#menu {float: left;}
zu guter letzt weist du das der Inhalt 200 px weit rechts sein soll:
#content {margin-left:200px;}
so und damit das dann noch mit diesem Innenabstand vom content hinhaut geben wir dem content halt ein entsprechendes padding:
#content {margin-left:200px;padding:20px;}

Ich hoffe ich konnte dir ein bisschen helfen, hier noch mal das ganze css (inkl. deiner farbwahl ;-)):

* {margin:0; padding:0;}  
#header {background-color: blue;}  
#footer {background-color: blue;}  
#wrapper {background: red; overflow: hidden;}  
#menu {float: left;}  
#content {background: green; margin-left: 200px; padding: 20px;}  
#content div {background: orange;}

mfG Felix Nehrke

P.S.: Besuche unseren Blog:  http://www.pommes-blog.de

[zeussi]

Morgen nemoinho!

Danke für die Antwort und dass Du dir so viel Mühe gegeben hast (:
Was daran fehlt ist, dass sich der linke Block und der rechte Block (Menü / Content) automatisch in der Höhe erweitern sollen. Stichwort Faux Columns.. nur leider bringt mir der Ansatz mit der Hintergrundgrafik nicht viel da dann das Problem mit der automatischen Breite auftritt, wie hier vorhergehend beschrieben :-(

So siehts bei mir im Browser mit Deiner Lösung aus:

Noch den Menü Block hervorgehoben:

Ja, die Farbwahl ist doch schön, so wunderbar kontrastreich (:

Schöne Grüße,

Zeussi

[Gunther]

Hallo Leut!

Im zweiten Beispiel habe ich das Ganze ohne Tabelle versucht. Nur leider schaffe ich es nicht das Ganze auf eine dynamische Breite zu bekommen.
Wenn ich die Breite auf 100% setze, dann geht es über die Browserfenstergrenze hinaus und wird durch das overflow: hidden; versteckt.

Overflow:hidden ist zum Testen und erarbeiten keine hilfreiche Sache.

Weiß jemand einen Ansatz zu dem Problem?

Du schaffst dir u.a. durch die unnötige relative Positionierung in Verbindung mit Width-Angaben ja selber erst die Probleme.
Ersten Container mit prozentualer oder fester Width-Angabe left floaten und dem zweiten (daneben) dann diesen Wert als margin-left verpassen - fertig.

Gleichhohe Spalten lassen sich per reinem CSS nur durch display:tabel(-...) erreichen, was aber erst vom IE ab Version 8 verstanden wird (benutze die Forums-Suche, gabe es erst neulich wieder das Thema).

Gruß Gunther