css zwei spalten layout

**cybercrow** · 14-01-2006, 14:06

Hi!
ich bin gerade dabei etwas css zu lernen und komme nicht weiter.
Ich will eine einfache zweifspaltige Seite: links eine Menu und rechts der Inhalt.
Das Menu soll jetzt so schmal wie möglich sein, aber trotzdem immer so breit werden, dass auch die längste Zeile noch rein passt.
Momentan kann ich den Spalten nur feste Größen geben und wenn ein menu eintrag diese größe überschreitet, dann schreibt er in den rechten Teil rein.

**Turbohummel** · 14-01-2006, 17:27

Zeig uns doch am besten mal, was du schon hast.

**Pingu** · 14-01-2006, 20:44

Ich weiß ja nicht wirklich was Du vor hast. Ich selber bin auch nicht wirklich der Designexperte. Aber sollte nicht ein Menü eine feste Breite haben? Ein Anwender sollte sich doch auf einer Seite recht schnell zurecht finden. Dazu gehören auch die Wiederekennbarkeit (Form, Farbe und Größe) wichtiger Navigationselemente.

Ansonst hat mir persönlich auch immer das geholfen: *grml* mein Link ist mir abhanden gekommen.

Aber hier habe ich auch noch zwei gute, wenn auch ältere Artikel zum Thema:
- http://www.alistapart.com/articles/fauxcolumns
- http://www.alistapart.com/articles/elastic

Pingu

**cybercrow** · 15-01-2006, 16:33

Hi!
danke für eure Antworten.
Ich habe es in der zwischenzeit hinbekommen:

Code:

#menu {
  text-align:right;
  float: left;
  width: 40%
  overflow: auto;
}

#inhalt {
  float: left;
  width: 60%;
  margin-left: 50px;
  overflow: auto;
}

es kann zwar immer noch Situationen geben wo es nicht passt, aber zumindest für meine bisherigen Fälle funktioniert es.

Der Hintergrund, die Seite ist prinzipiell so aufgebaut: links menu, rechts inhalt. Die Menupunkt ändern sich aber von html Seite zu HTML Seite. Eine allgemeine menu-Klasse sollte also immer links sein, immer gleich aussehen aber eben abhängig von der Seite/menu-einträgen immer minimal sein.

**Pingu** · 16-01-2006, 07:19

Ich würde das Grundgerüst nicht mit Hilfe von float generieren. Denn langfristig verbaust Du Dir damit die Möglichkeit im normalen Fließtext float zu verwenden, um Bilder, Boxen oder was auch immer rechts oder links mit umfließenden Text zu positionieren.

Besser ist es die divs für das Grundgerüst absolut zu positionieren und Margins zu definieren.

Wie schon oben angedeuted, ich bin nicht der Designprofi (deswegen gefällt mir meine Website so wie sie z. Zt. ist nicht wirklich). Aber trozdem als Grundgerüst kannst Du Die einmal meine Site ansehen: http://www.pingu.info
Insbesondere hier findest Du dann auch ein Beispiel wie dann float trotzdem funktioniert: http://www.pingu.info/ts/travel/

Pingu

**cybercrow** · 16-01-2006, 14:16

so langsam treibt mich das ganze echt zur verzweiflung.

Folgende Situation:
-oben ein paar Zeilen über die volle breite
-dann aufteilung in links=menu, rechts=inhalt
-unten wieder ein paar zeilen über die ganze breite

folgender css code:

Code:

#links {
 position: absolute; 
  text-align:right;
  width: 20%
}


#rechts {
  width: 75%;
  margin-left: 25%;
}

#unten{ 
   margin-top:1em;
}

beim ersten laden ist jetzt das menu (#links) aber ganz oben, d.h. es überdeckt die oberen Zeilen die über die ganze breite gehen. Ein reload bringt das menu dann in die richtige position.
Der untere Teil der wieder über die ganze breite gehen soll (#unten) hängt sich immer ans Ende des Inhalts(#rechts), d.h. wenn der Inhalt(#rechts) kürzer ist als das Menu, dann schreibt die Fußzeile (#unten) in das Menu rein.

Was mache ich denn jetzt schon wieder falsch?

**jeebee** · 16-01-2006, 15:03

vielleicht helfen dir die beispiele im unten geposteten link weiter

http://www.css4you.de/wslayout1/index.html

**cybercrow** · 16-01-2006, 16:58

langsam zweifel ich daran, ob das überhaupt geht, was ich vor habe. Aber eigentlich kann es doch nicht so schwer sein...

Ich habe jetzt nämlich dieses Tutorial gefunden:
http://www.bigbaer.com/css_tutorials...der-footer.htm

und es hat genau das gleiche Problem wie mein code. Der "footer" setzt sich direkt unter das rechte css-element und kommt dadurch dem Menu in die quere.
Es muß doch auch möglich sein, dass der "footer" unter dem Menu und unter dem "Inhalt-frame" ist.

**jeebee** · 18-01-2006, 19:09

also ich weiss nicht genau was du meinst... aber evtl. funktioniert folgendes:

HTML-Code:

<body>
<div id="box">
  <div id="header">
  </div>
  <div id="main">
    <div id="menu">
    </div>
    <div id="content">
    </div>
    <br style="clear:both;" /> <!-- nötig um das float-layout aufzuheben! -->
  </div>
  <div id="footer">
  </div>
</div>
</body>

und mit folgenden css-rules:

Code:

#box {
  /* hier breite für das ganze design, zb */
  width:760px;
}

#header {
  /* format für den header falls gewünscht (sonst das ganze div weglassen) */
}

#main {
  /* formatierung für den normalen teil */
}

#menu {
  float:left /* links ausrichten */
  width:25%; /* gew. breite: absolut oder relativ */
  /* eventuell weiter angaben */
}

#content {
  float:right; /* rechts daneben ausrichten */
  width: 70%; /* dann gehts sicher in allen browsern nebeneinander vorbei... an die beim menu gewählte breite anpassen! */
}

#footer {
  margin-top:5em; /* etwas abstand schaffen */
}

bei allen divs kann zusätzlich noch ein Rahmen angezeigt werden, damit man genau sieht wo die "div"-Grenzen sind. Ich mache meine "debug"-Rähmen meist mit

Code:

border:1px blue dotted;

was einen blauen gepunkteten Rahmen um die jew. Elemente gibt.

hoffe geholfen zu haben :-)

mfg jeebee

edit:
der gepostete code ist nicht getestet... ich habs aber schon mehrmals erfolgreich eingesetzt.

**bischi** · 18-01-2006, 19:21

Uiuiui - dreifachverschachtelte div's. Damit hab ich persönlich sehr schlechte Erfahrungen gemacht... (von falscher Anzeige bist 20 Sekunden Ladezeit - vielleicht ists ja heutzutage besser)

MfG Bischi

**jeebee** · 18-01-2006, 19:34

also ich weiss nicht, aber bei mir läufts relativ gut und negative Rückmeldungen habe ich bisher noch keine erhalten.

Thema: css zwei spalten layout

Themen-Optionen

Thema bewerten

Anzeige

css zwei spalten layout

Lesezeichen

Lesezeichen

Berechtigungen