Grazioli: Div in Div 100% höhe?!

SELF-Forum

Div in Div 100% höhe?!

Grazioli
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe ein Problem mit den Div's!

Weiss, Topmenü und Spacer ist kein Problem!

Das Problem liegt bei Menuleft und Inhalt. Wie Ihr sehen könnt, ist beides nicht gleich 100% des Schwarzen Rahmen. Es sollte aber so sein! Wie bringe ich es jetzt hin?

<div id="zentrum">
<div id="gesamtrahmen">

<div id="Seite">
  <div id="logo">WEISS</div>

<div id="topmenu">TOPMEN&Uuml;</div>
</div>

<div id="hauptmenuerahmen">Spacer</div>

<div id="Seite_inhalt">
  <div id="navigation">Menuleft</div>
  <div id="inhalt_box">
  <div id="Inhalt">Inhalt</div>
  </div>
  </div>

</div>

</div></div>

div#zentrum
   {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 0px;
   width: 100%;
   height: 1px;
   overflow: visible;
   visibility: visible;
   display: block
   }
div#gesamtrahmen {
 border: 1px solid #000000;
 background-color: #FFFFFF;
 margin-left: -410px;
 position: absolute;
 top: -240px;
 left: 50%;
 width: 820px;
 height: 480px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
}
div#inhalt_box {
 width: 639px;
 margin-left: 180px;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 height: 100%;
 position: absolute;
 float: left;
 visibility: inherit;
 background-color: #33FF00;
}
div#Seite {
 width: 820px;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
  }
div#Seite_inhalt {
 width: 820px;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 position: absolute;
  }
div#topmenu {
 margin-left: 180px;
 border: 1px dashed silver;
 padding-top: 0;
 padding-bottom: 0;
 text-align: center;
 height: 60px;
 min-height: 60px;
 background-color: #FF0000;
 vertical-align: middle;
  }
div#Inhalt {
 margin-left: 0.5em;
 border: 1px dashed silver;
 padding-top: 0;
 padding-bottom: 0;
 text-align: right;
 height: 100%;
 position: absolute;
 overflow: visible;
 visibility: visible;
 background-color: #FFFF99;
  }
div#logo {
 font-size: 0.91em;
 float: left;
 width: 180px;
 margin: 0;
 padding: 0;
 border: 1px dashed silver;
 text-align: center;
 height: 60px;
 min-height: 60px;
 background-color: #FFFFFF;
 vertical-align: middle;
  }
div#navigation {
 font-size: 0.91em;
 float: left;
 width: 180px;
 margin: 0;
 padding: 0;
 border: 1px dashed silver;
 text-align: left;
 text-indent: 5px;
 overflow: hidden;
 background-color: #0000FF;
 color: #FFFFFF;
  }
div#logorahmen {
 BORDER-RIGHT: #666 1px solid;
 BORDER-TOP: #666 1px solid;
 MARGIN-TOP: 20px;
 BORDER-LEFT: #666 1px solid;
 BORDER-BOTTOM: #666 0px;
 HEIGHT: 61px;
 TEXT-ALIGN: left
}
div#hauptmenuerahmen {
 BACKGROUND-COLOR: #B6B6A5;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-color: #000000;
 border-bottom-color: #000000;
 border-top-style: solid;
 border-bottom-style: solid;
 height: 20px;
 right: 0px;
}

Bedanke mich im voraus für Eure Hilfe!!

Gruss Grazioli

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div in Div 100% höhe?!

    tattergreis
    – Informationen zu den Bewertungsregeln

    Hi Grazioli

    »»Das Problem liegt bei Menuleft und Inhalt. Wie Ihr sehen könnt, ist beides nicht gleich 100% des Schwarzen Rahmen. Es sollte aber so sein! Wie bringe ich es jetzt hin?

    Junge, der Inhalt war nichtmal zu sehen ;).

    Also erstmal ein kleiner Tipp: Formatiere deine HTML Dateien übersichtlicher. Man braucht ja nur ein bisschen einzurücken. Grad wenn man soviel divs ineinander verschachtelt und das Projekt dann noch bisserl grösser wird, wirds sonst unübersichtlich und die Suche nach Fehlern zu ner mehrstündigen Qual.
    Deine Gebastelei ist ein totales Chaos (ich wunder mich grad, dass ich mich trotzdem Deinem Problem angnommen hab). Ich hab erstma ne Minute gebraucht um überhaupt schlau zu werden welche Div nun wo beginnt und wo endet. Und Du hast einen div-tag mehr geschlossen (</div>) als du überhaupt eröffnet hast ;) (kein schlimmer Fehler, aber nur ein kleines Beispiel dafür, wie schnell sowas mit ner unübersichtlichen darstellung passieren kann). Hier mal wie es sauberer wäre.

    <div id="zentrum">
      <div id="gesamtrahmen">
        <div id="Seite">
          <div id="logo">WEISS</div>
          <div id="topmenu">TOPMEN&Uuml;</div>
        </div>
        <div id="hauptmenuerahmen">Spacer</div>
        <div id="Seite_inhalt">
          <div id="navigation">Menuleft</div>
          <div id="inhalt_box">
             <div id="Inhalt">Inhalt</div>
          </div>
        </div>
      </div>
    </div>

    Dann zu den Fehlern die dazu führen, dass das ganze nicht so angezeigt wird wie Du's gerne hättest.
    1. Du hast für die DIVs navigation, inhalt_box und Inhalt jeweils position:absolute; angegeben gehabt. Schau Dir dazu doch mal das hier an http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position.
    2. Du hast für die DIV inhalt_box ein float:left; definiert...was dir das ganze nach rechts verschiebt. navigation ist float:left;... nicht inhalt_box
    3. Du musst die Rahmen (border), margins, paddings etc in die Berechnung der Breite bzw. Höhe miteinberechnen, denn width gilt nur für den Inhalt selber. Such dafür mal bei selfhtml nach dem Boxmodel.

    hmm..weiss nicht mehr alles, aber ich füg die CSS Definition nachher ein. Siehst schon was ich geändert hab.

    wozu ist die css definition für logorahmen (wurde nicht verwendet)? Und wieso machst Du eigentlich um die DIV inhalt noch eine DIV inhalt_box und um die DIV seite eine DIV gesamtrahmen (ginge doch in einem)?!

    Und nochmal ein kleiner Tipp: Gestalte auch die CSS Definition übersichtlich. Am besten definierst die einzelnen DIV's auch in der Reihenfolge wie sie dann in der HTML Datei auftreten. So findest Deinen Kram auch viel schneller. Ich hab nur das wesentliche gesagt/geändert, damit Deine Seite (ungefähr) so angezeigt wird wie Du's gerne hättest. Das ganze ist aber noch sehr unschön und da sind  noch ein paar "überflüssige" Angaben oder ähnliches. Aber das überlass ich mal Dir das zu verfeinern... learning by doing ;).

    Hier noch die CSS-Definition:
    div#zentrum {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
       }
    div#gesamtrahmen {
     border: 1px solid #000000;
     background-color: #FFFFFF;
     margin-left: -410px;
     position: absolute;
     top: -240px;
     left: 50%;
     width: 820px;
     height: 480px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bold;
    }
    div#Seite {
     width: 100%;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
      }
    div#logo {
     font-size: 0.91em;
     float: left;
     width: 180px;
     margin: 0;
     padding: 0;
     border: 1px dashed silver;
     text-align: center;
     height: 60px;
     min-height: 60px;
     background-color: #FFFFFF;
     vertical-align: middle;
      }
    div#topmenu {
     margin-left: 180px;
     border: 1px dashed silver;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
     height: 60px;
     min-height: 60px;
     background-color: #FF0000;
     vertical-align: middle;
      }
    div#hauptmenuerahmen {
     BACKGROUND-COLOR: #B6B6A5;
     border-top-width: 1px;
     border-bottom-width: 1px;
     border-top-color: #000000;
     border-bottom-color: #000000;
     border-top-style: solid;
     border-bottom-style: solid;
     height: 20px;
     right: 0px;
    }
    div#Seite_inhalt {
     width: 100%;
     height:396px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
      }
    div#navigation {
     font-size: 0.91em;
     position:relative;
     float: left;
     width: 180px;
     height: 100%;
     margin: 0;
     padding: 0;
     border: 1px dashed silver;
     text-align: left;
     text-indent: 5px;
     overflow: hidden;
     background-color: #0000FF;
     color: #FFFFFF;
      }
    div#inhalt_box {
     width: 635px;
     margin-left: 180px;
     margin-top: 0;
     margin-right: auto;
     margin-bottom: 0;
     height: 100%;
     visibility: inherit;
     background-color: #33FF00;
    }
      div#Inhalt {
     margin-left: 0.5em;
     border: 1px dashed silver;
     padding-top: 0;
     padding-bottom: 0;
     text-align: right;
     height: 100%;
     overflow: visible;
     visibility: visible;
     background-color: #FFFF99;
      }

    div#logorahmen {
     BORDER-RIGHT: #666 1px solid;
     BORDER-TOP: #666 1px solid;
     MARGIN-TOP: 20px;
     BORDER-LEFT: #666 1px solid;
     BORDER-BOTTOM: #666 0px;
     HEIGHT: 61px;
     TEXT-ALIGN: left
    }

    gruss
    tattergreis

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln