Herumrutschende divs !

Ich versuche gerade ein tabellenloses layout zu machen… das problem ist nur, dass die div-elemente immer untereinander rutschen,wenn ich das browserfenster verkleinere.
Außerdem kann ich keine absoluten und prozentualen angaben kombinieren.
Beispiel:

Dreispaltiges Layout
1.spalte links: 200 pixel breit
3.spalte rechts: 100 pixel breit

die 2. mittlere Spalte für den Inhalt, soll den Rest des Fensters einnehmen. Wenn ich aber width:100% eingebe, rutscht sie nach unten weg und nimmt die ganze Breite des Fensters ein.

Habe auch schon versucht divs zu schachteln - erfolglos.
Alles möchte ich nicht in prozent angeben, da die linke Menüleiste (1. Spalte) bei hohen Auflösungen sonst sehr verloren aussehen würde. (sehr breit aber kleine schrift)

Kann mir jemand helfen?

Hallo,

Ich versuche gerade ein tabellenloses layout zu machen… das
problem ist nur, dass die div-elemente immer untereinander
rutschen,wenn ich das browserfenster verkleinere.

  1. Man braucht für ein tabellenloses Layout (lobenswert!) nicht zwangsläufig divs. Ein gutes semantisches Markup ist die notwendige Basis.
  2. Wenn zwei Blockelemente (z.B. ein div) nicht mehr nebeneinander passen, weil kein Platz ist, rutschen sie logischerweise untereinander.

Außerdem kann ich keine absoluten und prozentualen angaben
kombinieren.

Ja, Du kannst nicht sagen, dass Du zwei Elemente nebeneinander
haben willst, das eine sei 20px breit, das andere 100%-20px. Das geht in der Tat nicht. In der Regel braucht man das aber auch nicht.

Dreispaltiges Layout
1.spalte links: 200 pixel breit
3.spalte rechts: 100 pixel breit

die 2. mittlere Spalte für den Inhalt, soll den Rest des
Fensters einnehmen. Wenn ich aber width:100% eingebe, rutscht
sie nach unten weg und nimmt die ganze Breite des Fensters
ein.

Klar, Du hast ihr ja auch gesagt, sie soll 100% breit sein.
Die Lösung ist ganz einfach: Gibt der mittleren Spalte gar keine Breite. Wenn Du die anderen beiden left und right floaten lässt, steht die dritte Spalte dazwischen (ist zwar faktisch immer noch 100% (mit Abzug von margins und so) breit, aber Inhalte floaten ja um die anderen Spalten rum).

Habe auch schon versucht divs zu schachteln - erfolglos.

Wozu auch.

Alles möchte ich nicht in prozent angeben, da die linke
Menüleiste (1. Spalte) bei hohen Auflösungen sonst sehr
verloren aussehen würde. (sehr breit aber kleine schrift)

Die Auflösung hat damit auch gar nichts zu tun.

Kann mir jemand helfen?

Ich hoffe doch, ich konnte es.

Gruß,
-Efchen

Bin für weitere Hilfe SEHR dankbar!!! Mein Projekt ist dringend.

Hallo Efchen!
Danke für die Antwort. … Leider habe ich das auch schon ausprobiert und es funktioniert nicht. Das mittlere Div rutscht ohne Breitenangabe dennoch unter das linke und recht div. Auch margin nützt nichts. …

Wegen der fixen Breiten: Tatsächlich hat das nichts mit der Auflösung zu tun. Jedoch mit der Größe des Bildschirms. Wenn das menü-div z.b. 14% breit ist und der Bildschirm sehr groß, dann sind die 14% viel zu breit für den Text der drin steht und dann sieht das verloren aus.
Gruß Eule

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Hi,

hast du schon Style-Formatierung mit CSS probiert?

Positionierung mit position: absolute (relativ gemessen am Elternelement) und dann einfach Breite und Lage angeben.

Test ich bin links

ich bin mitte

ich bin rechts

Bin für weitere Hilfe SEHR dankbar!!! Mein Projekt ist
dringend.

Dann ist es dringend erforderlich, dass Du uns einen Link
zu Deinem Problem gibt, denn sonst wird alles weitere reine
Spekulation!

Danke für die Antwort. … Leider habe ich das auch schon
ausprobiert und es funktioniert nicht.

Dann machst Du wohl was falsch oder hast was übersehen.
Oder Du hast Dein Problem nicht richtig beschrieben.
Ohne einen Link wird das nichts.

Das mittlere Div
rutscht ohne Breitenangabe dennoch unter das linke und recht
div. Auch margin nützt nichts. …

Wenn Du natürlich mit „unter“ die z-Ebene meinst, da hast Du
recht. Links und rechts gefloatet schiebt sich das mittlere div
unter (z-Ebene) die anderen. Mit margin kann man aber auch das
abstellen.

Wegen der fixen Breiten: Tatsächlich hat das nichts mit der
Auflösung zu tun. Jedoch mit der Größe des Bildschirms.

Nein, auch die Größe des Bildschirms ist beim Erstellen von
Webseiten irrelevant.

Wenn
das menü-div z.b. 14% breit ist und der Bildschirm sehr groß,

Wenn der Bildschirm sehr groß ist, muss das doch noch nicht
heißen, dass auch das Browserfenster sehr groß ist, oder der
Dir zur Verfügung stehende Platz (bedenke: Sidebars, Toolbars, etc.).

dann sind die 14% viel zu breit für den Text der drin steht
und dann sieht das verloren aus.

Und über die Größe des vom Benutzer eingestellten Fonts weißt
Du auch nichts, es könnte also auch bei einem Besucher mit großer
Schrift weniger Platz für Deine Seite vorhanden sein, als bei
einem Besucher mit kleinem Monitor und sehr kleiner Schrift.

Gruß Eule

Schuhuh zurück :wink:
-Efchen

Es geht auch mit der Angabe . Dazu unten mehr, aber jetzt erst mal was anderes:

Völlig klar, dass Du keine absoluten Werte mit relativen mischen kannst. Macht auch keinen Sinn, wenn man sich das mal überlegt.

Stell dir vor, Du gibst für das innere DIV an, dass es - sagen wir mal - 50% der Seite einnehmen soll. Das würde funktionieren, solange die festen Breiten des äußeren DIVs zufällig zusammen ebenfalls 50% des Fensters ausmachen (2 x 25% + 50% = 100%). Was aber wenn Du das Fenster verkleinerst?
Die äußeren DIVs können aufgrund der festen Angabe nicht flexibel sein.

Ein weiteres Problem hierbei bilden Außen-, und Innenabstände, sowie Ränder. Wie gibt man die an, wenn die angaben absolut und relativ gemischt sind?

Da Du ja schon selbst angibst, dass Du der mittleren Spalte 100% zuweist, was soll sie also anderes machen, als die komplette Breite für sich zu beanspruchen? Sie macht genau das was Du sagst, nämlich 100% des Fensters füllen.
Folglich bleibt für die anderen kein Platz mehr und sie müssen ausweichen.

Eine Lösung kann sein, indem Du allen DIVS prozentuale Werte zuweist. Die beiden äußeren bekommen 25% und der innere 50%.
Bedenke auch hier wieder Abstände. Bekommt der innere DIV links und recht Außenabstände von 5%, müssen diese abgezogen werden:

falsch wäre:

50% + 5% (linker Abstand) + 5% (rechter Abstand) = 60%

60% + 50% (die beiden äußeren) = 110% = unmöglich

richtig wäre:

40% + 5% (linker Abstand) +5% (rechter Abstand) = 50%

50% + 50% (die beiden äußeren) = 100%

Fazit: Die Gesamtbreite inklusive aller Abstände und Ränder muss zusammen 100% Prozent ergeben.

Du kannst folgendes versuchen:

  • Umschließe den den linken und den mittleren DIV mit einem weiteren Div

  • Gib dem linken DIV eine Breite von - sagen wir mal - 30% und floate ihn links.

  • Gib den rechten DIV eine Breite von 70% und floate ihn rechts.

  • Gib den umschließenden DIV eine Breite von 75% und floate ihn links

  • Dem rechten DIV gibst Du eine Breite von 25% und floatest ihn rechts

Insgesamt also 4 Divs.

Dem verschachteln würde ich also trotzdem nochmal ins Auge fassen. Und denk dran, es gibt auch andere, relative Angaben wie etwa em, wenn dir alles in Prozent nicht gefällt. Das setzt allerdings voraus, dass Du dem Text keine feste Größe zuteilst, was ja ohnehin nicht besonders günstig wäre.

Gib mal Laut, ob das geklappt hat. Andernsfalls werde ich versuchen mit einem Praktischen Beispiel zu kommen.

Gruß Marcus :smile:

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Hallo zusammen!

Ich danke sehr für die Hilfe! Ich habs jetzt mit folgender Methode hinbekommen: Links ein div mit 220 pixeln, rechts ein div mit 13% und in der mitte einfach ohne Breitenangabe. Musste dann allerdings im mittleren div margin-left:220px (oder mehr) angeben, sonst rutschte der Text hinter das Menü links. (Ist das richtig?)
Es ist manchmal nicht ganz einfach zu durschauen, auf was sich die verschiedenen Breitenangaben beziehen. Ich bin auch kein Profi, sondern mach das alles in meiner Freizeit. Und ich habe auch noch viele andere Hobbys. :wink:

eine Seite des Projekts habe ich testweise unter:
http://feli.pytalhost.de/test/210_termine.html (CSS-Datei unter design/formatediv.css
upgeloadet.

Ich hoffe mal man kanns „durchgehen“ lassen. Hat mir nun sehr viel Zeit und Nerven gekostet, da ich im CSS-Layouten Anfängerin bin.

Aber mir gefällts so. :smile:

Liebe Grüße
Eule

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Ich versuche gerade ein tabellenloses layout zu machen… das
problem ist nur, dass die div-elemente immer untereinander
rutschen,wenn ich das browserfenster verkleinere.

Hi Du.
Vielleicht hilft es Dir grundsätzlich auch weiter, wenn Du mit der CSS-Angabe „float“ experimentierst.
Werte dafür sind left, right, top, bottom (also z.B. div style=„float:left;“)

Viele Grüße
Claudia

Musste dann allerdings im mittleren div margin-left:220px
(oder mehr) angeben, sonst rutschte der Text hinter das Menü
links. (Ist das richtig?)

Ja, das ist richtig. Wenn Du Deine Seiten floatest, liegt der mittlere Bereich unterhalb (z-Achse) Deiner gefloateten, da Blockelemente ohne weitere Angabe immer 100% der zur Verfügung stehenden Breite einnehmen. Du kannst Dir das Verhalten mal ansehen, indem Du Deinen drei Bereichen (ohne margin-left) verschieden farbige Rahmen gibst.

Es ist manchmal nicht ganz einfach zu durschauen, auf was sich
die verschiedenen Breitenangaben beziehen.

Nein, das ist ganz einfach. Die Breite gilt immer für das Element, für das sie angegeben wird, und die relative Größe bezieht sich auf das Elternelement. Gibst Du einem Element 13% Breite, bezieht sich das auf „13% von der Breite des Elternelements“, und das ist bei Dir wahrscheinlich der body. Gib Deinem body eine Breit von 50% (oder eine feste) und sieh Deinen 13%-Bereich schrumpfen.

Das ist immer so, Ausnahmen gibts hier nicht. CSS ist leichter und konsequenter als z.B. Layout mit Tabellenvergewaltigung.

Gruß,
-Efchen