Besonderes dreispaltiges Layout, geht wohl nicht

[berdn]

Hallo Forum

ich hakele an einem 3 spaltigen CSS Layout, das mittig im browserfenster
stehen soll.
Linke Spalte: Breite fix 120px
Rechte Spalte: Breitfix 180px;

Dort sind nur Bilder plaziert.

Mittlere Spalte: keine Breite, die Breite soll dort über ein bei Schriftvergrößerung wachsendes Blockelement definiert werden.

Die Seite wird dann immer bei mir links positioniert. Es floatet ja auch alles.

In Firefox bin ich schonmal weitergekommen das ich ein Umgebenes DIV auf display: table gesetzt habe.

Aber der IE

Liebe Grüße

Bernd

PS: Ich habe bis jetzt immer mittige Seite gesehen, wo ein Bereich mittwächst, wenn das Fenster skaliert wird. Oder alle drei Spalten statisch (feste Breite) sind ;-(

Hat jemand vielleicht eine Idee?

[Stefan M.]

Könntest du bitte einen kleinen Quellcode posten oder eine Demoseite auf deinen Webspace (sofern vorhanden) hochladen, damit man mal probieren kann? Danke.

[berdn]

Baue gerade eine kleine Testumgebung auf.

[berdn]

Das ganze ist mal anzuschauen unter:
http://www.strich-komma-work.de/dummy/index.html

der Inhalt sollte sich mittig zum Browserfenster ausrichten.
Und ich glaube ja, das geht nur mit einer breiten Angabe?!

Grüße

Berdn

[wahsaga]

hi,

Das ganze ist mal anzuschauen unter:
http://www.strich-komma-work.de/dummy/index.html

der Inhalt sollte sich mittig zum Browserfenster ausrichten.
Und ich glaube ja, das geht nur mit einer breiten Angabe?!

Nö, wieso?

Willst du denn die rechte Spalte nicht ganz rechts haben?

Mal bspw. das hier angeschaut: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig?

gruß,
wahsaga

[berdn]

Hallo Wahsaga

danke für den Link, kannte ich aber schon.

Nein die rechte Spalte soll nicht ganz rechts stehen.

Die mittlere Spalte soll eine mindestbreite, haben aber dann von Ihren "wachsenden" Inhalt z.B. bei einer Textvergrößerung durch den Browser die rechte spalte weiter nach rechts verschieben.

Dabei sollen aber alle Spalten zusammen weiter im Browserfernster mittig angezeigt werden.

... knifflig.

Gruß

Bernd

PS: ... und linke als auch rechte Spalte sind Pixelgenau breit ...

[berdn]

Hallo

ich denke ich mache es jetzt nicht über CSS.
Normal wird dann die Seite links im Browser angezeigt, und über JS mache ich die Zentrierung.

Und jut is

Gruß

Bernd

[berdn]

Vielen Dank

für die vielen Tipps, leider funktioniert keiner so richtig.

Da ich in etwa weiß wir breit meine Navigation sein wird, die die größe des mittleren Elements bestimmt und ja die äußeren Elemente FIX sind.

Gebe ich jetzt eine ca. breite für das umgebene Element in em an.

Damit sieht es ganz ordentlich ohne JS aus, und es funktioniert auch bei einer Schriftvergrößeung.

Dann biete ich noch eine JS-Lösung an, die das(?) offsetwidth des mittleren Blockes ausließt und dann das äußere Elemtent exakt skaliert.

Ich denke damit kann ich leben, ohne JS ist es halt nicht exakt mittig im Browserfenster ..., das ist aber eher marginal der rest sieht ja gut aus.

Gruß

Bernd

[stareagle]

Hallo,

versuch mal für Body margin-left:auto und margin-right:auto.

Fürs html-Element musst du event. noch width:100% angeben.

Gruß

Stareagle

[Carl]

Hi

Nein die rechte Spalte soll nicht ganz rechts stehen.

Die mittlere Spalte soll eine mindestbreite, haben aber dann von Ihren "wachsenden" Inhalt z.B. bei einer Textvergrößerung durch den Browser die rechte spalte weiter nach rechts verschieben.

Dabei sollen aber alle Spalten zusammen weiter im Browserfernster mittig angezeigt werden.

Es sollte eigentlich ausreichen, wenn du die Breitenangabe für das übergeordnete div, dass die anderen einschließt, weglässt und es mit margin: auto; zentrierst.

Gruß
Carl

[wahsaga]

hi,

Es sollte eigentlich ausreichen, wenn du die Breitenangabe für das übergeordnete div, dass die anderen einschließt, weglässt

Dann ist es so breit wie möglich.

und es mit margin: auto; zentrierst.

Wie willst du etwas zentrieren, was bereits die komplette Breite einnimmt?

gruß,
wahsaga

[Carl]

hi,

Hi,

Es sollte eigentlich ausreichen, wenn du die Breitenangabe für das übergeordnete div, dass die anderen einschließt, weglässt

Dann ist es so breit wie möglich.

Korrigiere mich bitte, wenn ich mich täusche, aber meiner Erfahrung nach nimmt ein Element, für das keine Breite vordefiniert ist immer so viel Platz ein, wie es braucht, um seinen Inhalt anzuzeigen. Es passt demnach seine Größe an. Was genau das Verhalten ist, dass er haben möchte.

und es mit margin: auto; zentrierst.

Wie willst du etwas zentrieren, was bereits die komplette Breite einnimmt?

Das sollte es eben nicht (zumindest tut es das auch bei mir im FF nicht.

gruß,
wahsaga

Gruß
Carl

[wahsaga]

hi,

Korrigiere mich bitte, wenn ich mich täusche, aber meiner Erfahrung nach nimmt ein Element, für das keine Breite vordefiniert ist immer so viel Platz ein, wie es braucht, um seinen Inhalt anzuzeigen. Es passt demnach seine Größe an.

Das gilt für inline-Elemente, nicht aber für block - und Div ist per Default nun mal block.

gruß,
wahsaga

[Detlef G.]

Hallo Bernd

Linke Spalte: Breite fix 120px
Rechte Spalte: Breitfix 180px;
Mittlere Spalte: keine Breite, die Breite soll dort über ein bei Schriftvergrößerung wachsendes Blockelement definiert werden.

Also die mittlere Spalte in em.

Hat jemand vielleicht eine Idee?

Vielleicht so?
HTML:

  <div id="mitte">  
   <div id="links">Das soll links stehen</div>  
   <div id="rechts">Das soll rechts stehen</div>  
   Und dies in der Mitte  
  </div>  

CSS:

body {  
 padding:0 180px 0 120px;  
 text-align:center;  
}  
  
#mitte {  
 text-align:left;  
 margin:0 auto;  
 width:20em;  
 position:relative;  
 background: red;  
}  
#links {  
 position:absolute;  
 width:120px;  
 left:-120px;  
 top:0;  
 background:green;  
}  
#rechts {  
 position:absolute;  
 width:180px;  
 right:-180px;  
 top:0;  
 background:blue;  
}  

Auf Wiederlesen
Detlef