3 spaltiges DIV, das mittlere soll eine flexible breite haben

Oregano · 23.04.09

irgendwie richtet der die 3 spalten "col3a, col3b und col3c" immer links aus, ich will aber das diese 3 spalten mittig zentriert sind und die mittlere dieser 3 spalten die rechte und linke im notfall nach außen drückt. any idea?

so soll das aussehen:

klappt aba nich...

<html>
<head>

<style type="text/css">
#menue {
position:relative;
top:377px;
width:946px;
height:79px;
z-index:2;
text-align:center;
margin:0 auto;
}
.col3a {
background:#009933;
width:100px;
float: left;
}
.col3b {
background:#FF9966;
overflow: auto;
width:auto;
float:left;
}
.col3c {
background: #CC33CC;
width:100px;
float:left;
}
-->
</style>

</head>
<body>
<div id="menue">
<div align="center">
<div class="col3a">col3a</div>
<div class="col3b">col3b - hier kommen dann die menuepunkte rein</div>
<div class="col3c">col3c</div>
</div>
</div>
</body>
</html>

Micha K · 23.04.09

Guck Dir mal den Quellcode von der Onlinebankingseite der Postbank an...

eyecandy · 23.04.09

http://intensivstation.ch/templates/

Oregano · 23.04.09

eyecandy schrieb:
http://intensivstation.ch/templates/

klar kenn ich, aber da ist nicht das dabei was ich brauche...

eyecandy · 23.04.09

pardonez moi

gKar · 23.04.09

Oregano schrieb:
.col3a {
background:#009933;
width:100px;
float: left;
}
.col3b {
background:#FF9966;
overflow: auto;
width:auto;
float:left;
}
.col3c {
background: #CC33CC;
width:100px;
float:left;
}

Und warum floaten die alle links?
Ich würde sagen: Col a mit fixer Breite und float:left,
gefolgt von Col c mit fixer Breite und float:right,
gefolgt vom Content, der dann den Platz dazwischen füllt.

Dann sollte man sich noch um die Höhen kümmern etc.

Bzw, wenn z.B. in Col b viel mehr Content sein könnte, der nicht unterhalb von Col a wieder an den linken Seitenrand rutschen darf, dann würde ich zunächst nur zwei DIVs erstellen, eines mit float left, eines mit float right, und in einem der beiden DIVs wiederum eine solche Unterteilung in einen links und einen rechts schwebenden Teil einfügen. Der ganze Content steht dann in diesen drei "floating divs", dann hat man durchgehende Spalten.

Oregano · 23.04.09

das löst das problem nicht das diese 3 spalten nicht mittig stehen wollen.
ich glaub du hast mich falsch verstanden, was du mir zeigst ist ein klassisches 3-spalten layout, aber ich will halt ein 3-spalten layout in dem der inhalt der mittleren spalte die beiden äußeren im bedarfsfall nach außen drückt und alle 3 sollen dabei mittig in einem div sein.

Nathea · 23.04.09

Das ist tatsächlich nicht leicht zu verstehen.

Du willst also quasi die "gesamte Seite breiter machen", wenn der Inhalt der mittleren Spalte "die beiden Spalten rechts und links nach außen drückt"? Oder sollen dann die linke und rechte Spalte im selben Maße schmaler werden, wenn die mittlere Spalte breiter wird?

Wovon wird die Breite der mittleren Spalte abhängen? Von Text? Von Bildern?

gKar · 23.04.09

Mal ins Blaue gedacht (ohne jetzt etwas ausprobiert zu haben):
Wenn ich Dich richtig verstanden habe, könnte die Lösung u.U. wie folgt sein:
Du hast ein DIV #1, innerhalb dessen Dein 3-Spalten-Dings zentriert und mit variabler Breite sein soll.
Dann würde ich in DIV #1 eben ein zentriertes DIV #2 einfügen (das sollte doch eigentlich gehen), wobei DIV #2 eine variable Breite hat und selbst wiederum diese drei Spalten enthält.

Oregano · 23.04.09

gKar schrieb:
Mal ins Blaue gedacht (ohne jetzt etwas ausprobiert zu haben):
Wenn ich Dich richtig verstanden habe, könnte die Lösung u.U. wie folgt sein:
Du hast ein DIV #1, innerhalb dessen Dein 3-Spalten-Dings zentriert und mit variabler Breite sein soll.
Dann würde ich in DIV #1 eben ein zentriertes DIV #2 einfügen (das sollte doch eigentlich gehen), wobei DIV #2 eine variable Breite hat

soweit so gut...

gKar schrieb:
und selbst wiederum diese drei Spalten enthält.

und da tritt das problem auf: die 3 spalten lassen sich nicht zentrieren in dem DIV #2!

denn genau das was du hier gerade beschreibst habe ich ja gemacht (siehe quellcode oben):
<div id="menue">
<div align="center">
<div class="col3a">col3a</div>
<div class="col3b">col3b - hier kommen dann die menuepunkte rein</div>
<div class="col3c">col3c</div>
</div>
</div>

so soll das aussehen:

aber so sieht es leider aus:

werd bald affich

sieht so einfach aus aber es geht einfach nicht...

MasterofDistres · 23.04.09

Erstell' mal statt des „div align = center“ einen Container, der die col3 a,b,c enthält und versuch's mit einem „margin: auto“.

Oregano · 23.04.09

MasterofDistres schrieb:
Erstell' mal statt des „div align = center“ einen Container, der die col3 a,b,c enthält und versuch's mit einem „margin: auto“.

soweit war ich schon... klappt auch nicht.

gKar · 23.04.09

Habe gerade mal mein Standard-Nachschlagewerk SelfHTML konsultiert.
Demnach scheint es kein "align" zu geben, was erklären würde, warum es nicht funktioniert.
Laut http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align gibt es nur text-align, welches Inline-Elemente zentriert. Aber ein DIV ist ja kein Inline-Element. Für Inline-Elemente steht dort, man solle identische Margins für links und rechts nehmen, um eine Zentrierung zu erreichen. Das wiederum steht aber Deinem Ziel im Wege, die Menübreite nicht fix, sondern inhaltsabhängig zu gestalten. Spontan finde ich daher auch keine Lösung.

Aber was anderes: Wozu brauchst Du die linke und rechte „DIV-Spalte“? Ich würde hier einfach den Text im Menü mit entsprechendem Padding ausstatten.

BigR · 23.04.09

Schon mal was von YAML gehört?
Schau dir das mal genauer an:

Beispiel:
http://www.yaml.de/fileadmin/examples/01_layouts_basics/3col_standard.html

Dokumentation dazu:
http://www.yaml.de/de/dokumentation.html

Oregano · 23.04.09

gKar schrieb:
Habe gerade mal mein Standard-Nachschlagewerk SelfHTML konsultiert.
Demnach scheint es kein "align" zu geben, was erklären würde, warum es nicht funktioniert.
Laut http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align gibt es nur text-align, welches Inline-Elemente zentriert. Aber ein DIV ist ja kein Inline-Element. Für Inline-Elemente steht dort, man solle identische Margins für links und rechts nehmen, um eine Zentrierung zu erreichen. Das wiederum steht aber Deinem Ziel im Wege, die Menübreite nicht fix, sondern inhaltsabhängig zu gestalten. Spontan finde ich daher auch keine Lösung.

ja leider, ist wohl so. habs befürchtet

gKar schrieb:
Aber was anderes: Wozu brauchst Du die linke und rechte „DIV-Spalte“? Ich würde hier einfach den Text im Menü mit entsprechendem Padding ausstatten.

na da sollen die runden ecken rein.

Oregano · 23.04.09

BigR schrieb:
Schon mal was von YAML gehört?
Schau dir das mal genauer an:

Beispiel:
http://www.yaml.de/fileadmin/examples/01_layouts_basics/3col_standard.html

Dokumentation dazu:
http://www.yaml.de/de/dokumentation.html

ja, nette sache, aber macht bei meinen seiten keinen sinn. für portale oder seiten mit viel text etc. sicher ne geile sache...

BigR · 23.04.09

DIVs kann man wie folgt zentrieren:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>DIV zentrieren</title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        background-color:#fff;
      }
      div {
        margin: 0 auto;
        width: 300px;
        height: 200px;
        background-color: #f00;
      }
    </style>		
  </head>
  <body>
    <div>Hallo Welt</div>
  </body>
</html>

die wichtigste Zeile hierbei ist das margin: 0 auto;.

BigR · 23.04.09

Oregano schrieb:
ja, nette sache, aber macht bei meinen seiten keinen sinn. für portale oder seiten mit viel text etc. sicher ne geile sache...

Es geht ja nicht um das ganze YAML Framework sondern darum, dass du du mal sehen kannst wie
man ein 3 spaltiges Layout mit variabler mittlerer Spalte erstellen kann.

Die dort eingesetzte Technik kannst du ja dann übernehmen.

Oregano · 23.04.09

BigR schrieb:
die wichtigste Zeile hierbei ist das margin: 0 auto;.

das klappt aber auch nur solange man in dieses div nicht auch wieder 3 divs packen will.

hier die baustelle meiner seite:

http://www.de-signed.com/test/sport/sdfjsfjsdfsfsf.html

das menü unten soll halt zentriert sein. vielleicht mach ich auch nen totalen denkfehler und muss ganz anders an die sache rangehen... o_O

sausehuhn · 23.04.09

Wieso nicht einfach eine DIV und darein dann links das Bild für die linke Ecke, dann der Text, dann das Bild für die Rechte Ecke?

3 spaltiges DIV, das mittlere soll eine flexible breite haben

Bismarckapfel

Anhänge

Zuccalmaglios Renette

Graue Französische Renette

Bismarckapfel

Graue Französische Renette

Maunzenapfel

Bismarckapfel

Admin

Maunzenapfel

Bismarckapfel

Anhänge

Kleiner Weinapfel

Bismarckapfel

Maunzenapfel

Gloster

Bismarckapfel

Bismarckapfel

Gloster

Gloster

Bismarckapfel

Lambertine

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)