Thommy F.: Warum wird die Größe nicht dynamisch angepasst

Hallo Forum,

ich bin wahrscheinlich wieder mal betriebsblind.

ich habe folgende CSS-Datei:

  
body  
{  
  background-color : #CCCCCC;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 12px;  
  color : #ED0000;  
}  
  
#main  
{  
  background-color: #FFFFFF;  
  margin-top: 0px;  
  margin-left: auto;  
  margin-right: auto;  
  margin-bottom: 0px;  
  width : 920px;  
  min-height: 100%;  
  padding-top: 10px;  
  padding-left: 10px;  
  padding-right: 10px;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 14px;  
  color : #ED0000;  
}  
  
  
#header_top  
{  
  padding-top: 30px;  
  height : 128px;  
  width : 940px;  
  margin-left: auto;  
  margin-right: auto;  
  margin-top: 0px;  
  padding-bottom : 0px;  
  background-image: url(images/bg_header_top_AH.png);  
  background-repeat: no-repeat;  
  background-position: top center;  
}  
  
  
  
#content  
{  
  margin-top: 0;  
  margin-bottom: 0px;  
  padding-top : 10px;  
  padding-bottom : 10px;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 15px;  
  color : #000000;  
}  
  
#footer  
{  
  height : 60px;  
  width : 940px;  
  margin-left: auto;  
  margin-right: auto;  
  margin-top: 0px;  
  padding-top: 0px;  
  padding-bottom : 0px;  
  background-image: url(images/bg_footer_AH.png);  
  background-repeat: no-repeat;  
  background-position: center center;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 12px;  
  color : #ED0000;  
  clear: both;  
  
}  
  
#headernav  
{  
  border-top: 2px groove #000000;  
  border-bottom: 2px ridge #000000;  
  margin-top: 2px;  
  padding-top: 2px;  
  padding-bottom: 2px;  
  clear: both;  
}  
  
  
#headernav a  
{  
  padding-left: 15px;  
  padding-right: 15px;  
  padding-bottom: 1px;  
  padding-top: 1px;  
  margin-left: 5px;  
  margin-right: 5px;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 16px;  
  color : #ED0000;  
  font-weight : bold;  
  text-decoration: none;  
}  
  
  
#headernav a:hover  
{  
  padding-left: 15px;  
  padding-right: 15px;  
  padding-bottom: 1px;  
  padding-top: 1px;  
  margin-left: 5px;  
  margin-right: 5px;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 16px;  
  color : #000000;  
  font-weight : bold;  
  text-decoration: none;  
  border-bottom: 2px solid #ED0000;  
}  
  
  
#subnav  
{  
  float: left;  
  width: 100px;  
  background-image: url(images/subnav_bg.jpg);  
  background-repeat: repeat-y;  
}  
  
  
#subnav a  
{  
  padding-left: 0px;  
  padding-right: 0px;  
  padding-bottom: 0px;  
  padding-top: 0px;  
  margin-top: 3px;  
  margin-bottom : 3px;  
  margin-left: 0px;  
  margin-right: 0px;  
  font-style: "AlphaHeadlineCE-Regular", "Arial";  
  font-size: 15px;  
  color : #ED0000;  
  font-weight : bold;  
  text-decoration: none;  
  width : 100px;  
  display: block;  
  border-bottom: 2px groove #000000;  
}  
  
  
#inhalt  
{  
  min-height: 100%;  
  margin-top: 0px;  
  margin-bottom: 0px;  
  width: 920px;  
  
}  

und dazu die folgende HTML-Datei

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  <html>  
    <head>  
      <title>  
        TEST.HTML  
      </title>  
      <meta name="robots" content="index, follow">  
      <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">  
      <meta name="description" content="">  
      <meta name="keywords" content="">  
      <meta name="author" content="***">  
      <meta name="language" content="de">  
      <link rel="stylesheet" type="text/css" href="style_ahk.css">  
      <link rel="shortcut icon" type="image/png" href="images/favicon.png">  
    </head>  
    <body>  
      <div id="header_top">  
        <img src="images/Banner.png" border="0" alt="" title="">  
      </div>  
      <div id="main">  
        <div id="headernav">  
          <table align="center" border="0" cellspacing="0" cellpadding="0">  
            <tr>  
              <td align="center" valign="middle">  
                <a href="index.html" target="_self">Home</a>  
                <a href="index_ah.html" target="_self">Aktuelles</a>  
                <a href="profile_ahk.html" target="_self" style="color: #000000; border-bottom: 2px solid #EA0104;">&Uuml;ber uns</a>  
                <a href="modelle_ahk.html" target="_self">Modelle</a>  
                <a href="service_ahk.html" target="_self">Service</a>  
                <a href="galerie_ahk.html" target="_self">Bilder</a>  
                <a href="links_ahk.html" target="_self">Links</a>  
                <a href="kontakt_ahk.html" target="_self">Kontakt</a>  
                <a href="impressum_ahk.html" target="_self">Impressum</a>  
              </td>  
            </tr>  
          </table>  
        </div>  
        <div id="content">  
          <div id="subnav">  
            <a href="oeffnungszeiten_ahk.html" target="_self">&Ouml;ffnungszeiten</a>  
            <a href="philosophie_ahk.html" target="_self">Philosophie</a>  
            <a href="anfahrt_ahk.html" target="_self">Anfahrt</a>  
            <a href="team_ahk.html" target="_self">Team</a>  
          </div>  
          <div id="inhalt">  
            test  
          </div>  
        </div>  
      </div>  
      <div id="footer">  
        <table align="center" border="0" cellspacing="0" cellpadding="0">  
          <tr>  
            <td align="center" valign="top">  
              <br><b>Anschrift</b> - Stra&szlig;e HausNr - PLZ Ort<br>  
              Tel: +++++ / ** ** ** * * Fax: ***** / ** ** * * Mail: mail@domain.de  
            </td>  
          </tr>  
        </table>  
      </div>  
    </body>  
  </html>  

aus mir unerfindlichen Gründen wird allerings die Höhe der main bzw. der content NICHT dynamisch angepasst. d.h. um das von mir gewünschte Resultat zu bekommen müsste ich den Content-Bereich mit leerzeilen auffüllen, da er nicht bis zum footer-bereich an die höhen der subnav und der inhalts-id angepasst wird. WO zum Geier ist der Denkfehler, bitte?

  1. Hallo,

    aus mir unerfindlichen Gründen wird allerings die Höhe der main bzw. der content NICHT dynamisch angepasst.

    ähm, ich denke doch: Dynamisch an den Inhalt angepasst.

    d.h. um das von mir gewünschte Resultat zu bekommen müsste ich den Content-Bereich mit leerzeilen auffüllen, da er nicht bis zum footer-bereich an die höhen der subnav und der inhalts-id angepasst wird. WO zum Geier ist der Denkfehler, bitte?

    Ich sehe nichts in deinem Stylesheet, das eine Höhe für #main oder #content vorgibt. Weder height, noch min-height, noch eine Kombination aus top und bottom (die dann noch absolute Positionierung erfordern würde).
    Was also erwartest du?

    So long,
     Martin

    --
    Ja, ja ... E.T. wusste schon, warum er wieder nach Hause wollte.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo,

      aus mir unerfindlichen Gründen wird allerings die Höhe der main bzw. der content NICHT dynamisch angepasst.

      ähm, ich denke doch: Dynamisch an den Inhalt angepasst.

      d.h. um das von mir gewünschte Resultat zu bekommen müsste ich den Content-Bereich mit leerzeilen auffüllen, da er nicht bis zum footer-bereich an die höhen der subnav und der inhalts-id angepasst wird. WO zum Geier ist der Denkfehler, bitte?

      Ich sehe nichts in deinem Stylesheet, das eine Höhe für #main oder #content vorgibt. Weder height, noch min-height, noch eine Kombination aus top und bottom (die dann noch absolute Positionierung erfordern würde).
      Was also erwartest du?

      So long,
      Martin

      ich hätte erwartet, dass, die "main" automatisch an ihren Inhalt angepasst wirdd, wenn ich eben KEINE height angaben mache. Heißt also, eigentlich müsste die doch so hoch werden, wie die Komponenten, die sie "beinhaltet, oder? und genau das tüt sie eben nicht...???

  2. Hallo Thommy,

    das relevante HTML-Fragment

    »         <div id="content">  
    
    >           <div id="subnav">  
    >           </div>  
    >           <div id="inhalt">  
    >             test  
    >           </div>  
    >         </div>  
    
    

    mit dem relevanten CSS

    » #content {  
    
    >   margin-top: 0;  
    >   margin-bottom: 0px;  
    >   padding-top : 10px;  
    >   padding-bottom : 10px;  
    >   font-style: "AlphaHeadlineCE-Regular", "Arial";  
    >   font-size: 15px;  
    >   color : #000000;  
    > }  
      
    /* Die Höhe des Elementes von #content ist somit automatisch */  
      
    
    > #subnav {  
    >   float: left;  
    >   width: 100px;  
    >   background-image: url(images/subnav_bg.jpg);  
    >   background-repeat: repeat-y;  
    > }  
      
    /* Das Element mit der id="inhalt" wird aus dem Fluss genommen  
       und trägt somit nichts zur Höhe seines Elternelemetes bei */  
      
    
    > #inhalt {  
    >   min-height: 100%;  
    >   margin-top: 0px;  
    >   margin-bottom: 0px;  
    >   width: 920px;  
    > }  
      
    /* Die Höhe dieses Elementes bestimmt somit die Höhe des Elementes mit der id="content" */  
    
    

    aus mir unerfindlichen Gründen wird allerings die Höhe der main bzw. der content NICHT dynamisch angepasst.

    doch, doch, das erfolgt schon - genauso, wie Du es vorgibst, nicht so, wie Du es erwartest ...

    Freundliche Grüße

    Vinzenz

  3. außerdem steht in der #main doch sowohl ein margin-top: 0 als auch ein margin-bottom: 0 und ein min-height: 100%; warum funzt dass denn aber nicht?

  4. Ok, danke für die Erklärung. Soweit leuchtet mir das jetzt also ein.

    Ich muss aber die Komponenten Inhalt und Subnav aus dem Fluss raus nehmen. Weil diese nebeneinander und nicht untereinander angeordnet werden sollen. Wie kann ich jetzt als in der CSS erreichen, dass die Höhe des höheren der beiden Elemente trotzdem berücksichtigt wird?

    Gibt's da ne Möglichkeit?

    1. Om nah hoo pez nyeetz, Thommy F.!

      Ok, danke für die Erklärung. Soweit leuchtet mir das jetzt also ein.

      Gibt's da ne Möglichkeit?

      Versuch es mal mit semantisch sinnvollem HTML ohne überflüssige Div-Elemente, ohne Tabellen.

      Deine Navigation ist eine Liste.

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. Om nah hoo pez nyeetz, Thommy F.!

        Versuch es mal mit semantisch sinnvollem HTML ohne überflüssige Div-Elemente, ohne Tabellen.

        <head>...charset utf-8 ...</head>  
          
        <body>  
           <img src="images/Banner.png" alt="Aussagekräftiger Text, falls keine Bilder geladen werden">  
           <div id="inhalt">  
            <p>Inhalte ...</p>  
            <ul class="subnav">  
              <li><a href="oeffnungszeiten_ahk.html"">Öffnungszeiten</a></li>  
              <li><a href="philosophie_ahk.html">Philosophie</a></li>  
              <li><a href="anfahrt_ahk.html">Anfahrt</a></li>  
              <li><a href="team_ahk.html">Team</a></li>  
            </ul>  
          </div>  
          <ul id="hauptnavigation">  
            <li><a href="index.html">Home</a></li>  
            <li><a href="index_ah.html">Aktuelles</a></li>  
            <li>Über uns</li>  
            <li><a href="modelle_ahk.html">Modelle</a></li>  
            <li><a href="service_ahk.html">Service</a></li>  
            <li><a href="galerie_ahk.html">Bilder</a></li>  
            <li><a href="links_ahk.html">Links</a></li>  
            <li><a href="kontakt_ahk.html">Kontakt</a></li>  
            <li><a href="impressum_ahk.html">Impressum</a></li>  
          </ul>  
          <address>  
            <b>Anschrift</b> - Straße HausNr - PLZ Ort  
            Tel: +++++ / ** ** ** * * Fax: ***** / ** ** * * Mail: mail@domain.de  
          </address>  
        </body>
        

        Beispielsweise so.

        Matthias

        --
        1/z ist kein Blatt Papier.

    2. Hi,

      Ich muss aber die Komponenten Inhalt und Subnav aus dem Fluss raus nehmen. Weil diese nebeneinander und nicht untereinander angeordnet werden sollen. Wie kann ich jetzt als in der CSS erreichen, dass die Höhe des höheren der beiden Elemente trotzdem berücksichtigt wird?

      http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen

      Arbeite bitte auch den Rest des Artikels aufmerksam durch. Das sind Grundlagen für das Layouten mit CSS.

      MfG ChrisB

      --
      RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?