Torsten: Höhe div-Container anpassen

SELF-Forum

Höhe div-Container anpassen

Torsten
– Informationen zu den Bewertungsregeln

Hallo Forum,

ich habe es immer noch nicht geschafft eine Lösung zu meinem Problem zu finden. Ich weiß das es eigentlich nicht erwünscht ist ein vorhandenen Thread mit dem selben Thema neu zu eröffnen, aber in meinem alten Thread(http://forum.de.selfhtml.org/archiv/2005/3/t103483/) war meine Problembeschreibung nicht ganz verständlich, dadurch konnte mir auch nicht geholfen werden. Ich möchte mein Problem jetzt versuchen besser zu erklären. Ich hoffe mir kann einer helfen.

erstmal code:

  
<!-- index.htm: -->  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head><title>testseite</title>  
<link rel="STYLESHEET" type="text/css" href="styles.css">  
</head>  
<body>  
<div class="center">  
  <div class="nav">  
    <div class="bla">  
      <div class="content">  
       div-Container rechts  
       viel text<br>  
       viel text<br>  
       viel text<br>  
       viel text<br>  
       viel text<br>  
       viel text<br>  
      </div>  
    </div>  
      div-Conatiner links  
      <a href="#">button1</a><br>  
      <a href="#">button2</a><br>  
    </div>  
</div>  
</body>  
</html>  


  
/* styles.css: */  
div.nav {  
width:148px;  
float:left;  
text-align:left;  
background-color:#FF0000;  
border-left:1px solid black;  
border-right:1px solid black;  
}  
div.bla {  
  width:900px;  
}  
div.content {  
  width:743px;  
  float:right;  
  margin-top:5px;  
  border:1px solid black;  
}  
div.center {  
  width:900px;  
  margin:0px auto;  
  text-align:center;  
  margin-top:25px;  
}

das Ergebnis im Firefox:

das Ergebnis im IE:

Wenn jetzt weniger oder mehr Text im <div class="content">-Container(rechts) ist, verändert sich die Höhe dieses Containers, diese Höhe wird dann dem <div class="nav">-Container(links) angepasst. Dies Funktioniert soweit im Firefox!

Das Ergebnis im Firefox ist genau das was ich will, im IE völlig falsch. Für den IE bekomme ich es einfach nicht hin, ich weiß nicht was ich noch machen soll. Seid dem ich Webseiten mache, verfluche ich den IE!!!
Wenn es mit CSS nicht machbar ist, vielleicht mit JS? Über Beispielcode würde ich mich sehr freuen.

Gruß
Torsten

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Höhe div-Container anpassen

    Torsten
    −1 Informationen zu den Bewertungsregeln

    Hallo,

    jetzt hab ich mir die Mühe mit Bildchen und Code-Highlighting gemacht, und es kann mir immer noch keiner helfen? Hab ich wieder was falsch gemacht? Ist noch was unverständlich? Oder gibts keine Erfahrene CSS'ler mehr?

    Gruß
    Torsten

    Beitrag melden
    −1
    Informationen zu den Bewertungsregeln

  2. Höhe div-Container anpassen

    Ingo Turski Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich möchte mein Problem jetzt versuchen besser zu erklären.

    Leider immer noch ohne Online-Beispiel, aber dafür wenigstens ein paar Illustrationen...

    Deine DIV-Konstriktion ist unsinnig.

    <div class="center">
      <div class="nav">

    wozu zwei DIVs?

    <div class="bla">
          <div class="content">

    Du packst ein 743px breites DIV in ein 148px breites?

    </div>
    </div>

    hier fehlt wohl noch was.

    Nimm ein DIV für die zentrierte Gesamtbreite und setze hierin das DIV für die Navigation und den Inhalt. Darunter brauchst Du dann noch ein (evtl. leeres) clearendes Element.
    Sofern der Inhalt stets höher als die Navigation ist, gebe dem äußeren DIV einfach den Hintergrund für die Navigation. Ansonsten müßtest Du eine in y-Achse gekachelte Hintergrundgrafik für das äußere DIV verwenden.

    freundliche Grüße
    Ingo

    --
    [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Höhe div-Container anpassen

      Torsten
      – Informationen zu den Bewertungsregeln

      Hi,

      Ich möchte mein Problem jetzt versuchen besser zu erklären.
      Leider immer noch ohne Online-Beispiel, aber dafür wenigstens ein paar Illustrationen...

      dafür sind die Screenshots da, als Online-Beispiel würde es nicht anders aussehen.

      ...

      </div>
      </div>
      hier fehlt wohl noch was.

      eigentlich nicht, weiß nicht was du meinst!?

      Nimm ein DIV für die zentrierte Gesamtbreite und setze hierin das DIV für die Navigation und den Inhalt. Darunter brauchst Du dann noch ein (evtl. leeres) clearendes Element.

        
<body>  
  <div class="center">  
  <div class="nav">  
     div-Container links<br>  
     <a href="#">button1</a><br>  
      <a href="#">button2</a><br>  
    </div>  
      <div class="content">  
          div-Container rechts<br>  
         blablabla<br>  
        blablabla<br>  
        blablabla<br>  
        blablabla<br>  
        blablabla<br>  
        blablabla<br>  
        </div>  
    <div class="bottom"></div>  
  </div>  
</body>  


        
div.nav {  
   width:148px;  
    float:left;  
    text-align:left;  
    background-color:#FF0000;  
  }  
 div.content {  
   width:743px;  
  float:right;  
    margin-top:5px;  
    border:1px solid black;  
 }  
  div.bottom {  
    width:900px;  
    height:50px;  
    background-color:blue;  
    clear:right;  
  }  
  div.center {  
   width:900px;  
    margin:0px auto;  
    text-align:center;  
    margin-top:25px;  
    border:1px solid black;  
  }

      wenn ich dich richtig verstanden habe sollte es so sein, komme dazu aber nicht zu meinem ergbenis:

      Sofern der Inhalt stets höher als die Navigation ist,...

      Nein, das wird nicht der fall sein.

      Ich muss davon ausgehen das es mit reinem CSS nicht möglich ist. Werde wohl doch auf JS zurück greifen müssen, schade, falls jemand noch ne Idee hat...

      Gruß
      Torsten

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Höhe div-Container anpassen

        Ingo Turski Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Leider immer noch ohne Online-Beispiel, aber dafür wenigstens ein paar Illustrationen...
        dafür sind die Screenshots da, als Online-Beispiel würde es nicht anders aussehen.

        aber ein Online-Beispiel kann man ggfls. editieren.

        </div>
        </div>
        hier fehlt wohl noch was.
        eigentlich nicht, weiß nicht was du meinst!?

        ein </div> - oder Deine Einrückung ist fehlerhaft.

        Nimm ein DIV für die zentrierte Gesamtbreite und setze hierin das DIV für die Navigation und den Inhalt. Darunter brauchst Du dann noch ein (evtl. leeres) clearendes Element.

        Du hast den HTML-Code zwar so umgesetzt, aber die Farbzuweisungen vergessen.

        Sofern der Inhalt stets höher als die Navigation ist,...
        Nein, das wird nicht der fall sein.

        Dann hilft Dir die andere angesprochene Methode über eine Hintergrundgrafik.

        freundliche Grüße
        Ingo

        --
        [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Höhe div-Container anpassen

          Torsten
          – Informationen zu den Bewertungsregeln

          Hi,

          aber ein Online-Beispiel kann man ggfls. editieren.

          dafür habe ich doch den Code gepostet, naja is ja auch egal.

          ein </div> - oder Deine Einrückung ist fehlerhaft.

          Ein Erfahrener Webdesigner sollte das eigentlich erkennen können.

          Du hast den HTML-Code zwar so umgesetzt, aber die Farbzuweisungen vergessen.

          Was hat den die Farbzuweisung mit meiner dynamisch veränderte Höhe zu tun? Wie gesagt, ich möchte dass die Höhe des linken Containers sich der Höhe des rechten Containers anpasst, sprich beide Container zu jeder Zeit dieselbe Höhe haben.

          Dann hilft Dir die andere angesprochene Methode über eine Hintergrundgrafik.

          das geht leider auch nicht.

          werde wohl doch auf JS zurück greifen müssen. Schade das man allein mit CSS in manchen fällen nicht auskommt.

          Gruß
          Torsten

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Höhe div-Container anpassen

            Ingo Turski Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi,

            aber ein Online-Beispiel kann man ggfls. editieren.
            dafür habe ich doch den Code gepostet, naja is ja auch egal.

            nur daß man den Code erst lokal speichern muß, während das CSS in einem Online-Beispiel direkt editiert werden kann.

            ein </div> - oder Deine Einrückung ist fehlerhaft.
            Ein Erfahrener Webdesigner sollte das eigentlich erkennen können.

            ... und die Einrückungen korrekt machen können. ;-)

            Was hat den die Farbzuweisung mit meiner dynamisch veränderte Höhe zu tun? Wie gesagt, ich möchte dass die Höhe des linken Containers sich der Höhe des rechten Containers anpasst, sprich beide Container zu jeder Zeit dieselbe Höhe haben.

            Das geht nicht! Aber man kann dies optisch simulieren - deshalb die Farbzuweisungen bzw. die umständlichere Lösung über eine Hintergrundgrafik.

            Dann hilft Dir die andere angesprochene Methode über eine Hintergrundgrafik.
            das geht leider auch nicht.

            Doch. Warte noch ein wenig und Du siehst in Selfhtml ein entsprechendes Beispiel-Layout.

            werde wohl doch auf JS zurück greifen müssen. Schade das man allein mit CSS in manchen fällen nicht auskommt.

            Man kommt - meistens jedenfalls, so auch in Deinem Fall.

            freundliche Grüße
            Ingo

            --
            [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Höhe div-Container anpassen

              Torsten
              – Informationen zu den Bewertungsregeln

              Hi,

              Man kommt - meistens jedenfalls, so auch in Deinem Fall.

              Leider nicht, da es mein bestehendes Layout vernichten würde.

              Hab es mal mit JS probiert, leider auch ohne Erfolg. Vielleicht kannst Du mir diesbezüglich weiter helfen?

              Code:

                
<!-- index.htm -->  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head><title>testseite</title>  
<link rel="STYLESHEET" type="text/css" href="styles.css">  
<script language="JavaScript">  
<!--  
 var dynheight = document.getElementById("content").offsetHeight;  
 document.getElementById("nav").style.height = dynheight;  
//-->  
</script>  
</head>  
<body>  
<div class="center">  
  <div id="nav">  
    div-Container links<br>  
    <a href="#">button1</a><br>  
    <a href="#">button2</a><br>  
  </div>  
  <div id="content">  
    div-Container rechts<br>  
    blablabla<br>  
    blablabla<br>  
    blablabla<br>  
    blablabla<br>  
    blablabla<br>  
    blablabla<br>  
  </div>  
</div>  
</body>  
</html>  


                
/* sytles.css */  
#nav {  
  width:148px;  
  float:left;  
  background-color:#FF0000;  
}  
#content {  
  width:743px;  
  float:right;  
  height:auto;  
  margin-top:5px;  
  background-color:#00FFFF;  
}  
div.center {  
  width:900px;  
  margin:0px auto;  
  text-align:center;  
  margin-top:25px;  
}
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Höhe div-Container anpassen

                Maxx Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hallo,

                <head><title>testseite</title>
                <link rel="STYLESHEET" type="text/css" href="styles.css">
                <script language="JavaScript">
                <!--
                var dynheight = document.getElementById("content").offsetHeight;
                document.getElementById("nav").style.height = dynheight;

                ^^^
                                                           hier fehlt noch was

                //-->
                </script>
                </head>

                zu diesem Zeitpunkt existiert weder "nav" noch "content". Die werden ja erst später geladen. Packe das Script in eine Funktion die du im
                <body onLoad="deinefunktion()"> aufrufst.

                Grüße,

                Jochen

                --
                Heute schon gescribbelt?
                Scribbleboard
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Höhe div-Container anpassen

                  Torsten
                  – Informationen zu den Bewertungsregeln

                  Hi Jochen,

                  ok funktioniert, aber wozu dient +"xp"; ?

                  Gruß
                  Torsten

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Höhe div-Container anpassen

                    Torsten
                    – Informationen zu den Bewertungsregeln

                    ok funktioniert, aber wozu dient +"xp"; ?

                    ach schon klar, das ja die px-Angabe, ich depp, peinlich...

                    Gruß
                    Torsten

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

  3. Höhe div-Container anpassen

    Maxx Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo  Torsten,

    div.nav {
    width:148px;

    ist ein bischen knapp. width:900px; scheint mir geeigneter.

    <div class="center">
      <div class="nav">
        <div class="bla">
          <div class="content">

    welchen Sinn hat bla? Du bringst damit das floating von "nav" und "content" durcheinander. Lass es weg und es funktioniert wie gewünscht.

    Grüße,

    Jochen

    --
    Heute schon gescribbelt?
    Scribbleboard
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln