ABAKUS

Verfasst: **26.04.2006, 16:58**

Hi Leute,

ich suche eine Lösung für ein 3-spaltiges CSS-Layout mit Kopf- und Fußzeile über die ganze Breite, bei dem die Höhe aller 3 Spalten gleich ist und sich automatisch dem Inhalt der mittleren Spalte anpasst. Alternativ können sich auch die anderen beiden niedereren Spalten der Höhe der höchsten Spalte anpassen. Eine feste Höhe (in px, em oder sonstwas) kommt nicht in Frage. Also ein funktional vollwertiger Ersatz für ein klassisches Tabellenlayout. Wie ist das zu bewerkstelligen?

cu, Robo

Hochwertiger Linkaufbau bei ABAKUS:

Google-konformer Linkaufbau
nachhaltiges Ranking
Linkbuilding Angebote zu fairen Preisen
internationale Backlinks

Wir bieten Beratung und Umsetzung.
Jetzt anfragen: 0511 / 300325-0

Verfasst: **26.04.2006, 17:08**

https://www.alistapart.com/articles/holygrail

und wenns nützlich war bitte hier klicken und einloggen/bestätigen:
https://del.icio.us/post?url=https://ww ... de%20Board

danke

Verfasst: **26.04.2006, 17:08**

Die 100% Lösung ist es nicht (kein Footer) aber immerhin https://www.positioniseverything.net/th ... glong.html
oder
https://www.pixy.cz/blogg/clanky/css-3col-layout/
mit Footer

oder doch alles
https://www.ssi-developer.net/main/temp ... t-flex.htm

Alle gefunden, aber nicht getestet über https://css-discuss.incutio.com/?page=T ... umnLayouts

Verfasst: **26.04.2006, 17:09**

schau mal hier, da gibst genau was du suchst

https://de.selfhtml.org/css/layouts/meh ... #kopf_fuss

Verfasst: **26.04.2006, 17:14**

tingting hat geschrieben:schau mal hier, da gibst genau was du suchst

https://de.selfhtml.org/css/layouts/meh ... #kopf_fuss

Eben nicht, die Spalten sind ja unterschiedlich hoch. Das kenne ich schon.

Die anderen Sachen werde ich mir mal ansehen, danke dafür.

cu, Robo

Verfasst: **26.04.2006, 17:29**

nerd hat geschrieben:https://www.alistapart.com/articles/holygrail

Das isses auch nicht, die Spalten sind ja nicht gleich hoch. Gleich hoch heisst, dass der Hintergrund einer jeden Spalte bis zum Footer durchgehen muss. Trotzdem danke.

cu, Robo

Verfasst: **26.04.2006, 17:33**

mark hat geschrieben:oder doch alles
https://www.ssi-developer.net/main/temp ... t-flex.htm

Das sieht doch sehr gut aus.

mark hat geschrieben:Alle gefunden, aber nicht getestet über https://css-discuss.incutio.com/?page=T ... umnLayouts

Spitze! Genau das habe ich gesucht. Vielen Dank.

cu, Robo

Verfasst: **27.04.2006, 12:33**

Jetzt habe ich noch eine Frage zu einer Sache, die ich partout nicht verstehe. Erst der Code.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
 <head>
  <title>Test</title>
  <style type="text/css">
  
   #header &#123;
     height&#58; 40px;
     border-top&#58; 2px solid red;
     border-bottom&#58; 2px solid red;
   &#125;

   #wrapper &#123;
     border-top&#58; 2px solid blue;
     border-bottom&#58; 2px solid blue;
     background-color&#58; yellow;
   &#125;

   #leftcolumn &#123;
     float&#58; left;
     width&#58; 10em;
     background-color&#58; lightgreen;
   &#125;

   #rightcolumn &#123;
     float&#58; right;
     width&#58; 10em;
     background-color&#58; lightgreen;
   &#125;

   #clear &#123;
     clear&#58; both;
   &#125;

   #content &#123;
     margin&#58; 0px 10em 0px 10em;
     background-color&#58; magenta;
   &#125;

   #footer &#123;
     height&#58; 40px;
     border-top&#58; 2px solid red;
     border-bottom&#58; 2px solid red;
   &#125;
  
  </style>
 </head>
 <body>
 
  <div id="header">
   Header
  </div>
  
  <div id="wrapper">
   
   <div id="leftcolumn">
    <ul>
     <li><a href="#">Menue 1</a></li>
     <li><a href="#">Menue 2</a></li>
     <li><a href="#">Menue 3</a></li>
    </ul>
   </div>
  
   <div id="rightcolumn">
    <p>
     Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>
   </div>
  
   <div id="content">
    <h1>&Uuml;berschrift</h1>
    <p>
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>
    <p>
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
    </p>
   </div>
   
   <div id="clear">
   </div>
  
  </div>
  
  <div id="footer">
   Footer
  </div>
  
 </body>
</html>

Damit man das Problem sieht, habe ich alles bunt eingefärbt.

Wenn man jetzt den Wrapper-Container in der gleichen Farbe wie die beiden Spalten links und rechts einfärben würde, dann wüden die Spalten scheinbar bis nach unten durchgehen - wenn da nicht der Rand über und unter dem Content-Container wäre. Und der kommt von <h1> bzw. <p>. Und das verstehe ich nicht. <h1> und <p> sind doch im Content-Container drin, wieso wird dann der Rand vom Wrapper-Container ausgehend genommen? IE und Gecko liefern hier übrigens das gleiche Ergebnis ...

Gibt es eine Lösung für das Problem? Letztendlich soll der gelbe Hintergrund nur noch unterhalb der beiden Spalten links und rechts zum Vorschein kommen.

cu, Robo

Verfasst: **27.04.2006, 12:54**

der blaue wrapper rand hat schon seine richtigkeit, denn er umfasst ja die right, left und content.

aber vor der eigentlichen problematik das right und left runtergezogen angezeigt werden sollen stehe ich auch.

gruss till

btw: du solltest css immer auf firefox und opera entwickeln, denn das sind die standardtreusten browser.

Verfasst: **27.04.2006, 13:00**

tingeltangeltill hat geschrieben:der blaue wrapper rand hat schon seine richtigkeit, denn er umfasst ja die right, left und content.

Um den geht es ja gar nicht, es geht darum, dass oberhalb des Contents noch ein gelber "Rand" erscheint, der ja in Wirklichkeit der Wrapper-Hintergrund ist.

tingeltangeltill hat geschrieben:aber vor der eigentlichen problematik das right und left runtergezogen angezeigt werden sollen stehe ich auch.

Dann sind wir ja schon zu zweit.

tingeltangeltill hat geschrieben:btw: du solltest css immer auf firefox und opera entwickeln, denn das sind die standardtreusten browser.

Mache ich doch. Ich entwickle mit Seamonkey, der hat die Gecko-Engine und damit die gleiche Engine, wie Firefox.

cu, Robo

Verfasst: **27.04.2006, 13:22**

ach das ist dein problem, dass habe ich dann völlig falsch verstanden.

das sind die auswirkungen der block-elemente <h> und <p>.
mach die mal im content weg und du siehst, kein leer mehr.

Code: Alles auswählen

* &#123;
   margin&#58; 0;
   padding; 0;
&#125;

das solltest du am anfang der css-datei notieren, damit werden alle margin und padding auf 0 gesetzt (einheit nicht benötigt). das hat sich so eingebürgert --> vermeidet viele probleme, spart unnötigen code (muss nicht überall auf 0 gesetzt werden)

gruss till

Verfasst: **27.04.2006, 13:46**

tingeltangeltill hat geschrieben:ach das ist dein problem, dass habe ich dann völlig falsch verstanden.

das sind die auswirkungen der block-elemente <h> und <p>.
mach die mal im content weg und du siehst, kein leer mehr.
Code: Alles auswählen
* &#123;
   margin&#58; 0;
   padding; 0;
&#125;
das solltest du am anfang der css-datei notieren, damit werden alle margin und padding auf 0 gesetzt (einheit nicht benötigt). das hat sich so eingebürgert --> vermeidet viele probleme, spart unnötigen code (muss nicht überall auf 0 gesetzt werden)

Das kann's ja wohl nicht sein, oder? Ich will die Ränder nicht auf 0 haben, sonst könnte ich die Block-Elemente ja auch gleich ganz weglassen und alles würde ohne Abstände zusammengeklebt auf einem Haufen rumgammeln. Nein, die Überschrift soll ja einen kleinen Abstand nach oben haben, und zwischen den Absätzen soll es auch einen Abstand geben!

cu, Robo

Verfasst: **27.04.2006, 14:00**

einweg ist der beste weg zur besserung: ich glaub ich erzähl scheibenkleister

so hab ich das bei mir auch gemacht, ich muss mal schauen, wie ich den rest dann umgesetzt habe

Verfasst: **27.04.2006, 14:05**

So wie's aussieht, reicht es, margin auf 0 zu setzen und den Blockelementen dann stattdessen ein padding zuzuweisen ...

cu, Robo

Verfasst: **27.04.2006, 14:12**

Das kann's ja wohl nicht sein, oder? Ich will die Ränder nicht auf 0 haben, sonst könnte ich die Block-Elemente ja auch gleich ganz weglassen und alles würde ohne Abstände zusammengeklebt auf einem Haufen rumgammeln.

Das was du willst, ist aber ein padding und kein margin.

So etwas wie:

Code: Alles auswählen

h1 &#123;margin&#58; 0; padding&#58; 10px 0px;&#125;

liefert das Gewünschte

(Okay, zu langsam getippt...)

ABAKUS

3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten

3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten

3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten

3-spaltiges CSS-Layout mit gleicher Höhe der 3 Spalten