Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

Spaltenlayout ohne Tabellen - Eine Lösungsansatz

stareagle / 4 Antworten / Baumansicht Nickles

Hallo,

vor einiger Zeit gab es hier mal die Frage, wie man das klassische 2 Spaltenlayout (links Navigation, rechts Inhalt) für Websiten ohne Tabellen hinbekommen kann. Das Problem an den vorgeschlagenen Lösungen, die alle mit float arbeiteten war, dass man eine feste Breite angeben mußte. Dadurch passierte es, dass das Layout ein wenig durcheinander geriet, wenn der User den Schriftgrad skaliert hat.

Ich bin jetzt auf eine relativ einfache Lösung gestoßen, die ich euch nicht vorenthalten möchte;-).
Der Trick ist einfach, die Breiten nicht in Pixeln oder Prozent sondern in der Maßeinheit em einzugeben. Diese ist relativ und bezieht sich auf die Schriftgröße. D.h., wenn der User die Schriftgröße verändert, verändert sich die Breite der Spalte mit.

Ein Beispiel gibts hier: www.stareagle.de/sonstiges/spalten.html
Nichts besonderes, soll nur zur verdeutlichungen dienen.

Anregungen und Kritik sind willkommen.

MfG

Stareagle

bei Antwort benachrichtigen
xafford stareagle „Spaltenlayout ohne Tabellen - Eine Lösungsansatz“
Optionen

Das Problem bei deiner Lösung ist, wie auch bei anderen Lösungsansätzen, die ohne feste Vorgabebreite funktionierten, daß der Inhalt das linke Element umfließt, also darunter weiter läuft (zumindest in Mozilla).

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Borlander xafford „Antwort“
Optionen

Wobei ich für das Umfließen inzwischen eine halbwegs brauchbare Lösung gefunden habe:

Link 1
Link 2

Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...



body {
  background-color:#ffffff;
  font-family:Arial;
}

.cols, .nav, .content {
  margin:0em;
  padding:0em;
}

.nav, .content {
  padding:0.4em;
}

.cols {
  background-color:#cccccc; /* =: .nav {background-color} */
}
.nav {
  float:left;
  /* background-color := .cols {background-color} */
}
.content {
  position:relative;
  background-color:#cccccc; /* := body {background-color} */
  border-left:0.15em solid #ffffff;
  margin-left:3.4em;
}

<div class="cols"><div class="nav">
  <a href="#">Link 1</a><br />
  <a href="#">Link 2</a><br />
</div><div class="content">
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
  Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
</div></div>



Leider rückt der IE hier allerdings den Text leiht ein (ohne sinnigen Grund). Siehe rote Linen:



Gruß
Borlander
bei Antwort benachrichtigen
Borlander stareagle „Spaltenlayout ohne Tabellen - Eine Lösungsansatz“
Optionen

Hallo stareagle,
das dürfte auf mein Posting Tabellenlayout durch CSS ersetzen - wer schafft das? vom 03.03.2005 bezogen sein...

Erst mal vielen Dank für diese späte Rückmeldung, ich hatte nicht mehr damit gerechnet das da noch was nachkommt :-)

Das Problem an den vorgeschlagenen Lösungen, die alle mit float arbeiteten war, dass man eine feste Breite angeben mußte.
Das war nicht umbedingt das einzige Problem. Das andere Problem was auch in diesem Beispiel wieder gut sichtbar wird:

Der Text fließt unter der Navigationsleiste weiter (sieht man mal vom IE ab, bzw. dort auch wieder sobald der Inhalt länger ist als das Browserfenster)

Ein weiteres "Problem" ergibt sich auch bei der Breitenangabe:

Wird die Breite zu knapp angegeben, wird bei veränderten Schriftgrößen u.U. unsinnig umgebrochen - das sollte sich durch einen "Sicherheitszuschlag" allerdings verhindern lassen.

Ich muß zugeben das ich auch schon mal über diese Möglichkeit, diese allerdings u.A. aus diesem Grund verworfen / nicht weiter verfolgt hatte. Bei dynamisch generierten Seiten würde sich dann noch das Problem der Breitenberechnung auftun, da wäre einiges an Feintuning erforderlich. Insgesamt scheint die Breitenangabe mit em hier allerdings der vielversprechendeste Ansatz zu sein - werde da gleich noch mal ein bisschen experimentieren...

Anregungen und Kritik sind willkommen.
Schön, ich bin mir nämlich durchaus bewusst das ich hier sehr kritisch war ;-)


Gruß
Borlander

bei Antwort benachrichtigen
stareagle Nachtrag zu: „Spaltenlayout ohne Tabellen - Eine Lösungsansatz“
Optionen

Hallo,

einen hätte ich noch:

http://www.stichpunkt.de/css/2-box1.html

Nätürlich bei den Breiten mit em arbeiten;-). Dann sieht das ganze so ähnlich aus:

www.stareagle.de/sonstiges/spalten2.html

MfG

Stareagle

bei Antwort benachrichtigen