Div-Höhe Problem

Dieses Thema im Forum "Webdesign" wurde erstellt von Vergamer, 8. Juni 2011 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 8. Juni 2011
    Hi alle

    Ich hab da so ein echt mühsames Problem:

    Ich hab in einem stylesheet meine divs definiert. Im oberen Bereich stimmt auch alles schön.

    Nun in der mittleren Div-Reihe wo auch der Content ist, hab ich 3 divs nebeneinander: bg_left, content und bg_right. bg_left und bg_right haben jeweils eine Hintergrundgrafik drin (je 2px hoch). Nun wollte ich die Höhe des Contentbereiches (also aller 3 divs) variabel je nach Höhe des Inhalts machen. Dazu wollte ich die Anweisung "height: auto" verwenden.

    Da ist auch schon das Problem: Sobald ich beim bg_left height: auto reinmach, verziehts mir das komplette Design, es sieht so aus als würde der div irgendwie gar nicht angezeigt...

    Definiere ich jedoch eine Pixelhöhe, so funktionierts ohne Probleme, das Design stimmt und die definierte Höhe greift...

    Hat jemand eine Idee wieso das so ist? Was mach ich falsch? Und wie krieg ich den Contentbereich variabel hoch?

    Danke schonmal für eure Hilfe!

    Hier noch mein Stylesheet (jajaja, ich bin Anfänger, zerreist mich nicht ^^ Solangs funktioniert isses für mich ok ):

    Spoiler
    HTML:
    @charset "utf-8";
    /* CSS Document */
    
    body {
     margin: 0 auto;
     background: #5daef9; }
    
    * { color:black; 
     font-family:Verdana,Tahoma,Arial,sans-serif;
     }
    
    h1 { font-size:200%;
     font-style:italic;
     border-bottom:solid thin black;
     margin-left:10px;
     margin-right:10px;
     }
    
    h2 { font-size:70%;
     font-variant:small-caps;
     color:#F90;
     text-decoration:underline;
     }
    
    h3 { font-weight:bold;
     font-style:italic;
     font-size:100%;
     }
     
    h4 { font-weight:normal;
     font-size:90%;
     }
     
    h5 { font-style:italic;
     font-weight:normal;
     }
    
    h6 { color:white;
     font-size: 60%;
     font-weight:bold;
     }
    
    
     #container {
     margin: 0 auto;
     width: 1024px;
     height: 768px;
     text-align: left;
     }
     #header {
     background-image: url(Bilder/img_01.png);
     width: 100%;
     height: 212px;
     }
     #navigation {
     width: 100%;
     height: 32px;
     }
     #bg_left {
     float: left;
     width: 176px;
     height: 455px;
     background-image: url(Bilder/img_09.png);
     }
     #bg_right {
     float: left;
     width: 140px;
     height: 455px;
     background-image: url(Bilder/img_11.png);
     }
     #content {
     background: #FFFFFF;
     float: left;
     width: 708px;
     height: 455px;
     }
     #footer_left {
     background-image: url(Bilder/img_12.png);
     float: left;
     width: 176px;
     height: 69px;
     }
     #footer_center {
     background-image: url(Bilder/img_13.png);
     float: left;
     width: 711px;
     height: 69px;
     }
     #footer_right {
     background-image: url(Bilder/img_14.png);
     float: left;
     width: 137px;
     height: 69px;
     }
    

    *edit* sorry, gerade gesehn dass es im falschen Bereich ist... bitte mal moven ^^

    *edit2* danggööööööö ^^
     
  2. 9. Juni 2011
    AW: Div-Höhe Problem

    hi,

    guck mal unter punkt 4:
    FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten - XHTMLforum

    so wie ich dich verstehe, willst du das die bg-grafik deiner 2 spalten (links, rechts)
    immer gleich zum inhalt mitwächst.
    das muß gefakt werden.
    d.h.
    HTML:
    <div id="main">
     <div id="left"></div>
     <div id="content"></div>
     <div id="right"></div>
     <div style="clear:both;"></div>
    </div>
    
    in main liegt dein bg-grafik auf voller breite.
    left, content und right floaten (die haben ihre eigene höhe).
    clear ist nötig um main auf höhe zu bringen.
    nun solltest du dein 100% anmuhtung haben.
     
  3. 9. Juni 2011
    AW: Div-Höhe Problem

    hmmm würde erstmal float:right float left benutzen ;-)
    wenn ichs richtig verstehe willst du das der inhaltsbereich nach unten hin mitwächst?
    bei mir hat das hier funktioniert

    padding-bottom: 32767px;
    margin-bottom: -32767px;

    shalom
     
  4. 9. Juni 2011
    AW: Div-Höhe Problem

    Also, ich möchte dass der Inhalt grundsätzlich so lang wie möglich sein kann, also das Design nach unten variabel hoch ist...

    Nun ist es so, wenn ich für den bg_left-div eine Höhe in px definiere, funktioniert das ohne Probleme... Sobald ich aber height: auto; mache, blendets den Div irgendwie aus oder so, auf jeden Fall zerreists das Design völlig...

    Ich hab das mit dem clear: both ausprobiert und hat auch nicht funktioniert...

    ebenso hats mit stropharias Vorschlag nicht geklappt...

    hoffe irgendwer kann mir damit noch helfe, ich raste gleich aus xD
     
  5. 10. Juni 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Div-Höhe Problem

    geht ohne probleme
    egal welche spalte den meisten inhalt hat und somit die höhe vorgibt, das bg-img wächst mit.
    wenn noch fragen offen sind, frag.

    // edit
    alle .floatl elemente haben ein border-bottom um dir zu zeigen wie hoch diese element in wahrheit sind.
     
  6. 10. Juni 2011
    AW: Div-Höhe Problem

    Ha! Habs doch noch geschafft mittels "min-height: 455px"... So wird das Design richtig angezeigt, ist aber in der Höhe variabel wenns mehr zum anzeigen gibt...

    Danke trotzdem für eure Hilfe!

    @onip: ich hab aus deiner html immerhin 2 floats gemacht (für content-streifen und für footer-streifen) und die auch als class definiert... Danke also

    .closed
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.