• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[3ColumnsLayout] Flexible, mittlere Spalte

Status
Für weitere Antworten geschlossen.
spacegaier

spacegaier

Neues Mitglied
Hallo zusammen,

ich bin gerade dabei mir ein Layout zu basteln.

Header und Footer stehen. Nun habe ich aber beim dreispaltigen Mittelteil Pobleme.

Ziel: Die mittlere Spalte (wo der Inhalt angezeigt wird) soll automatisch den Platz zwischen den beiden Menüs links und rechts füllen. Außerdem sollen alle drei Spalten immer die gleiche Höhe haben (also die Höhe des gerade höchsten Elements). Diese Höhe ist aber nicht fix.

Die Breiten der beiden Menüs sind in Pixeln festgelegt. Idealerweise sollten sich die Breiten aber dem größten Menüpunkt anpassen.

Komme hier aber einfach net weiter. Proviere jetzt seit gersern dran rum und hab mir zig Beispioele aus dem Netz angeschaut.

Brauche hier dringend Hilfe, bin echt am frustrieren.

Grüße - spacegaier
 
Hmm, also mir faellt jetzt spontan keine komplette Loesung ein.

Aber das hier sollte einen Teil deiner Problem loesen:
Code: 
div{
  border: 1px solid black;
  padding: 10px;
  position: absolute;
}
.navi{
  top: 10px;
  left: 10px;
  width: 150px;
  float: left;
}
.navi2{
  width: 150px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.content{
  position: absolute;
  top: 10px;
  left: 200px;
  right: 200px;  
}
Code: 
<div class="navi">
Navigation<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi<br />
navi</div>
<div class="content">
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text<br />
Text Text Text
</div>
<div class="navi2">
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi<br />
Navi Navi</div>
 
Kann man das auch mit float erreichen?

Oder ist diese Variante besser / flexibler als es die mit float wäre?

Edit:
Das Problem ist doch, wenn ich mit absoluten Werten arbeite, dass das Ganze unflexibler wird, oder?

Momentan habe ich es so:

Line Spalte per float:left und einem festen Wert als Breite in Pixeln.

Rechts dasselbe, nur halt mit float:right.

Wie kann ich jetzt erreichen, dass die mittlere Spalte den Raum zwischen den beiden Spalten ausfüllt? Widht:100% geht ja nicht, da ich ja die Breite der beiden äußeren Spalten in Pixeln angegeben habe, damit dort die Bilder, die ich z.B. für das NaviMenü nutze genau passen.

Kann mir da keiner helfen? Komm ich da um das unflexible absolute Positionieren nicht drumrum?
 
Zuletzt bearbeitet von einem Moderator:
Der erste Teil deiner Frage meint doch so etwas:
Testseite für spacegaier

Die Sache ist gar nicht so schwer:
CSS:
Code: 
#navi1
{
width: 150px;
background-color: #ffdddd;
float: left;
}

#inhalt
{
background-color: #ddffdd;
margin-left: 150px;
margin-right: 150px;
}

#navi2
{
background-color: #ffffdd;
width: 150px;
float: right;
}


navi1 klebst du mit
Code: 
float: left
ganz links an das Fenster, navi2 mit
Code: 
float: right
ganz rechts. inhalt soll sich dazwischenschieben. Damit es jedoch nicht unten rausquillt, sobald der Text darin länger ist als die Navigationen, brauchst du die margin-Angaben.

Was den Quelltext angeht, musst du erst die beiden Navigationsboxen hintereinander schreiben und dann erst die Inhaltsbox (sonst landet die rechte Box rechts unter den beiden anderen):
Code: 
<body>
<div id="navi1">
Navigation<br/>
Navigation<br/>
[...]
</div>

<div id="navi2">
Navigation<br/>
Navigation<br/>
[...]
</div>
<div id="inhalt">
Lorem ipsum [...]

</div>
</body>

All das steht aber auch auf SelfHtml:
SELFHTML: Stylesheets / CSS-basierte Layouts / Mehrspaltige Layouts

Und mach bitte keine Doppelposts, sondern editier in den letzten Post rein.:roll:
 
Danke, an der Reihenfolge der Spalten im html-Dokument lag es.

Ein Problem habe ich aber immer noch:Im IE7 und Opera wird das ganze jetzt 100%ig richtig dargestellt. Im FF aber sind alle Spalten kürzer und zwar alle nur so lange wie ihr Inhalt ist. Wie kann ich erreichen, dass alle Spalten gleich lang werden wie im IE7 oder Opera?
EDIT:
Ich habe jetzt in body height:100% gesetzt und in html auch -> auch im FF werden die Spalten jetzt länger, allerdings jetzt etwas zu lang, d.h. ise sind länger als der schwarze rahmen, der sie umgibt (ich habe die Spalten mal farblich hervorgehoben):

Was muss ich hier machen? Ich habe schon mal was von negativen Margins gehört? Ist das hier des Rätsels Lösung und wenn ja wie?

Außerdem wird beim IE7 zweischen den beiden äußeren Spalten un dem Mittelteil noch ein kleiner weißer Rand angezeigt bevor das Hintergrundbild der mittleren Spalte losgeht. Warum? Wie bekomme ich des weg (im FF und Opera ist dieser Abstand nicht da!)?
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben