dynamische Bereichshöhen

[cmoke]

Hallo

Bin neu in diesem Forum und habe eine Frage zu einer komplexeren DIV-Anordnung. Dazu habe ich ein Bild hochgeladen.
Es geht um den unteren Bereich (HAUPTBEREICH). In diesem befinden sich die dynamischen Inhalte eingefügt durch Typo3. Ich möchte einfach, dass - egal welche der drei Spalten die höchste ist - sich unter allem ein weißer Hintergrund (CONTAINER) bis unten hin befindet. Durch die Dynamik der Inhalte ist das aber nicht so einfach, wie gedacht.

Der first-level-DIV soll mittig erscheinen (position:realtiv, margin:0 auto;). Der Hintergrund will sich, bei der von mir gewünschten Anordnung , nicht bis unten hin füllen. Sobald ich aus "relativ" ein "absolut" mache klappt´s. Nur liegt die komplette Sache dann woanders ...

Das gleiche Problem mit dem Bereich "INHALTE". Dieses sollte immer bis unten hin grau sein; egal, ob Inhalt oder keins enthalten ist.

Woran kann das liegen?

Zu der Anordnung der Elemente im HAUPTBEREICH könnte ich noch Hilfe gebrauchen: möchte alles "relativ" haben. Ob das geht...?

Danke.

[sejuma]

Entferne sämtliche absoluten und relativen Positionierungen.
Die sind für dein Layout nicht erforderlich und führen nur zu Problemen, je nach Fenstergrößen.
Positioniere besser und ausschließlich mit float und margin.

Gleiche Spaltenlängen erreichst du unabhängig vom Inhalt mit "Faux Columns":
http://www.ohne-css.gehts-gar.net/0005.php

[cmoke]

Danke für diese Antwort. Sie hat mir soweit weitergeholfen, dass ich mein Stylesheet deutlich kürzen konnte. Die Positionierung klappt auf diese einfachere Weise. Musste nur die zwei unteren DIVs (MENUE und EIGENANZEIGEN) in ein Neues zusammenfassen, damit die obere Kante auf gleicher Höhe abschließen kann. (lege ein aktuelles Bild des Aufbaus bei)

Bleibt noch das Problem mit der Farbe des Hintergrundes. Laut Beschreibung auf dem genannten Link müsste der Hintergrund meines CONTAINER-Bereiches mit einem sich vertikal wiederholenden Bild gefüllt werden. Das tut es aber nicht, obwohl ich den beschriebenen Aufbau und die PLatzierung adaptiert habe.

Was alternativ klappt, ist die Variante mit einem Hintergrundbild im body-Bereich (repeat-y). Ich möchte mich aber nicht damit zufrieden geben, dass es anders nicht klappt. Zumindest nicht ohne eindeutige Erklärung...

[sejuma]

Hast du vor dem Schließen von #container gecleart?
Ansonsten poste bitte einen Link zur Problemseite. Anhand von Grafiken kann man keinen Quelltext und damit auch keine Fehlerursachen erkennen.

[cmoke]

Ja, alles gecleart.
Einen Link zu einer in Konstruktion befindlichen Seite poste ich ungern. Aber die html und css-Codes lege ich hier bei.

Das HTML-Gerüst:

Code: Alles auswählen

<!--###DOKUMENT### start-->

<div id="container" style="clear: both;">

    <div id="kopf" style="clear: both;">
   
        <div id="schriftzug"><!--###LOGO###start-->LOGO<!--###LOGO###stop--></div>
        <div id="banner"><!--###BANNER###start-->BANNER<!--###BANNER###stop--></div>
        <div id="datum">###DATUM### </div>
        <div id="infozeile"><!--###INFOZEILE###start-->BlaBlaBlaBla<!--###INFOZEILE###stop--></div>
        <div id="bild"><!--###BILD###start-->BILD<!--###BILD###stop-->
            <div id="menuepunkt"><!--###MENUEPUNKT###start-->MENUEPUNKT<!--###MENUEPUNKT###stop--></div>
        </div>
    </div>
   
    <div id="hauptbereich" style="clear: both;">
   
        <div id="titelzeile"><!--###TITELZEILE###start-->TITELZEILE<!--###TITELZEILE###stop--></div>
       
        <div id="linkespalte">
           <div id="menue"><!--###HAUPTMENUE###start-->HAUPTMENUE<!--###HAUPTMENUE###stop--></div>
            <div id="eigenanzeigen"><!--###EIGENANZEIGEN###start-->EIGENANZEIGEN<!--###EIGENANZEIGEN###stop--></div>
        </div>
       
        <div id="inhalte"><!--###INHALTE###start-->INHALTE<!--###INHALTE###stop--></div>
        <div id="kundenanzeigen"><!--###KUNDENANZEIGEN###start-->KUNDENANZEIGEN<!--###KUNDENANZEIGEN###stop--></div>
    </div>
   
</div>       
<div id="fusszeile" style="clear: both;"><!--###FUSSZEILE###start-->FUSSZEILE<!--###FUSSZEILE###stop--></div>


<!--###DOKUMENT### stop-->

und hier der Haupt-CSS-Stylesheet (es geht hauptsächlich um #container, #hauptbereich und #inhalte) :

Code: Alles auswählen

   

body, td, ul, ol, a, p, table {   padding:0; margin:0;border:none; width:100%; height:100%;
   font-family:Verdana, Geneva, sans-serif; font-size:12px; font-style:normal; font-weight:normal; font-variant:normal;}

body {background-color:#dce491; /*background-image: url(../Bilder/body_HG.png); background-repeat:repeat-y ; background-position:center bottom;*/ }
a {color:#000000; text-decoration:none; list-style:none; font-weight:normal;}

html { padding:0px;  margin:0px;}

#container {width:972px; margin: 35px auto;
   padding:10px; clear:both;
   background-image: url(../Bilder/container_HG.png);
   background-position:center top;
   background-repeat:repeat-y;       
   background-color:#FFF; }

   #kopf {width:972px; float:left; background-color:#FFF;   }
#hauptbereich {width:972px; float:left; display:inline;   }
   
      #titelzeile {width:972px; height:36px;
         float:left; clear:both;
         line-height:30px; vertical-align:middle; text-align:left;

         font-family:Verdana, Geneva, sans-serif; font-size:20px; font-style:oblique;
         font-weight:bold; text-transform:capitalize; letter-spacing:0.2em; color:#000;}
      
      #linkespalte {width:194px; float:left; padding-right:10px;
         border-right-color:#f3f6d5; border-right-style:solid; border-right-width:2px;}
      
         #menue {width:194px;padding-bottom:30px;float:left;}
         
         #eigenanzeigen {/*z-index:2000;*/width:194px;float:left; clear:left;}
      
      #kundenanzeigen {z-index:2000;width:194px;float:right;}

      
      /*Parameter für alle geWrappten Inhalte in "Eigenanzeigen" und "Kundenanzeigen"*/
      .zufallsinhalte {
         padding:0px 0 15px 0;
      }
      /*nur für die eingebetteten-Dateien (SWF)*/
      .zufallsinhalte embed {
         /*border-style:solid; border-width:3px; border-color:#33F;
         background-color:#0FF;*/
      }
      
      #inhalte {z-index:3000;
         width:504px;
         float:left; /*display:inline;*/
         
         padding: 20px 20px 0 20px; margin-left:20px; margin-right:10px; margin-top:0px;
         
         /*border-left-width:1px; border-left-style:solid; border-left-color: #CCC;
         border-right-width:1px; border-right-style:solid; border-right-color: #CCC;*/
         
         background-color:transparent; background-image:url(../Bilder/Inhalte_HG.png); background-position:center top; background-repeat:repeat-y;
         background-color:#f3f6d5;}




[sejuma]

Der Nachteil vom reinen Code-Posten ist eben, dass die verwendeten Grafiken nicht enthalten sind.

Ich habe deshalb beim #container eine eigene Hintergrundgrafik eingebunden. Diese wird korrekt bis zum Containerende nach unten gekachelt.

Erscheint deine Grafik überhaupt nicht?
Dann überprüfe nochmal den korrekten Pfad (ausgehend vom "Standort" der CSS-Datei) sowie die korrekte Datei- und Pfadbeschreibung (Groß-/Kleinschreibung).

Wird die Grafik angezeigt, reicht jedoch nicht bis zum unteren Fensterrand, dann ist dieses Verhalten korrekt.
Ein Blockelement wie der #container breitet sich in der Länge seinem jeweiligen Inhalt entsprechend aus.
Falls die Grafik sich weiter nach unten ausbreiten soll, dann gib #container am besten einen min-width-Wert von 100%. Das ist dann allerdings mehr als das Bildschirmfenster, weil man noch margins und paddings hinzurechnen muss.
Für ein 100%-Layout siehe http://www.ohne-css.gehts-gar.net/0025.php

[cmoke]

Danke vorerst für die schnelle Antwort. Werde das prüfen. Muss jetzt zur Arbeit ....