Problem mit höhe einer DIV Box

[teff]

Hi,

mein Problem:

Ich habe ein Seitenlayout mit einem Banner, einer linken und einer rechten Spalten und einem Footer. Dazwischen der Contentbereich. Das Ganze mit div-tags realisiert.

Soweit so gut..

Bis jetzt konnte ich den Text immer so weit reduzieren, dass ich mit dem Platz nach unten auskomme. Aber das ist mir zu dumm geworden. Habe mich lange herumgespielt um es irgendwie hinzubekommen, dass sich der Contentbereich dynamisch mit dem Text nach unten verlängert. Leider ohne Erfolg. Natürlich sollte sich der Footer auch mit nach unten bewegen, genauso, wie sich die beiden Spalten (links und rechts) ebenfalls mit verlängern sollten. Weiß jemand eine Lösung?

Will das Ganze nicht unbedingt mit tables realisieren.

thx teff

[D.R.]

Hallo,

Ich habe ein Seitenlayout mit einem Banner, einer linken und einer rechten Spalten und einem Footer. Dazwischen der Contentbereich. Das Ganze mit div-tags realisiert.

Soweit so gut..

Bis jetzt konnte ich den Text immer so weit reduzieren, dass ich mit dem Platz nach unten auskomme. Aber das ist mir zu dumm geworden. Habe mich lange herumgespielt um es irgendwie hinzubekommen, dass sich der Contentbereich dynamisch mit dem Text nach unten verlängert. Leider ohne Erfolg.

Du suchst http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_width@title=min-width

Natürlich sollte sich der Footer auch mit nach unten bewegen,

hierfür eignet sich http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear@title=clear

genauso, wie sich die beiden Spalten (links und rechts) ebenfalls mit verlängern sollten.

Das ist nicht so einfach. Vielleicht http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=so.

mfg. Daniel

[teff]

Danke für eure Tipps!

Habe es jetzt soweit hinbekommen, dass es sich, so wie ich wollte, dynamisch nach unten verlängert...

Habe nur noch ein Problem:

Es ist ein Abstand zwischen den Spalten. So zu sehen unter:

http://www.danielonline.at/css/xxx1.html

Weiß jemand wie ich das wegbekomme?

mein css:

body, p a {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

a,a:visited,a:link,a:hover{
 font-size:inherit;
 color:#464646;
 text-decoration:none;
}

div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 770px;
    padding: 0;
    background: #ffffdd url(hintergrund.gif);
    border: 1px solid silver;
  }

h1 {
    font-size: 10px;
 font-weight:lighter;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding-left:75%;
 padding-top:2px;
 height:110px;
 margin: 0 0 0;
 background: url(images/banner.png);
 background-color:#FFFFDD;
 background-position:left;
 background-repeat:no-repeat;
    text-align: center;
 border-bottom: 1px solid silver;
  }

span#Navigation {
    font-size: 0.83em;
    float: left; width: 120px;
    margin: 0 0 0 0; padding: 0em;
  }
  span#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }

span#Navigation h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  span#Navigation p {
    font-size: 12px;
    margin: 0.5em;
  }

div#Info {
    font-size: 10px;
    float: right; width: 120px;
    margin: 0 0 0 0; padding: 0em;
    border: 1px solid black;
  }
  div#Info p {
    font-size: 12px;
    margin: 0.5em;
  }

div#Inhalt {
    margin: 0 0 0 0;
    padding: 20px 20px 20px 28px;
    border-left: 1px solid silver;
 border-right: 1px solid silver;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Inhalt table {
    font-size: 12px;
    margin: 0 0 0 0;
  }
  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #FFFFDD; border-top: 1px solid silver;
  }

div.menu {
    padding-top:4px;
 padding-bottom:4px;
   font-size:14px;
 color:#ffffdd;
 text-align:center;
 border:1px solid #666666;
 background-color:#CC0000;

}

[teff]

habe vergessen dazu zu sagen, dass es nur im IE ned richtig funktioniert... wie immer hald... :/

[D.R.]

Hallo,

Danke für eure Tipps!

Habe es jetzt soweit hinbekommen, dass es sich, so wie ich wollte, dynamisch nach unten verlängert...

Habe nur noch ein Problem:

Es ist ein Abstand zwischen den Spalten. So zu sehen unter:

http://www.danielonline.at/css/xxx1.html

Weiß jemand wie ich das wegbekomme?

Auch wenn es sich hier um den IE dreht, solltest du vielleicht erstmal versuchen, validen Code zu erstellen. Validome fand jedenfalls eine Menge Fehler.

Außerdem solltest du dich evtl. mal entscheiden, ob du lieber HTML 4 oder XHTML 1 verwenden möchtest. Geschlossene Tags (<Tag />) sind nur in XHTML-Dokumenten erlaubt.

Wenn du den Validator zufriedengestellt hast, ist die Chance auf Erfolg größer.

mfg. Daniel

[teff]

Hallo,

Danke für eure Tipps!

Habe es jetzt soweit hinbekommen, dass es sich, so wie ich wollte, dynamisch nach unten verlängert...

Habe nur noch ein Problem:

Es ist ein Abstand zwischen den Spalten. So zu sehen unter:

http://www.danielonline.at/css/xxx1.html

Weiß jemand wie ich das wegbekomme?

Auch wenn es sich hier um den IE dreht, solltest du vielleicht erstmal versuchen, validen Code zu erstellen. Validome fand jedenfalls eine Menge Fehler.

Außerdem solltest du dich evtl. mal entscheiden, ob du lieber HTML 4 oder XHTML 1 verwenden möchtest. Geschlossene Tags (<Tag />) sind nur in XHTML-Dokumenten erlaubt.

Wenn du den Validator zufriedengestellt hast, ist die Chance auf Erfolg größer.

mfg. Daniel

hello,

zu deinem validator und dass ich das anpassen soll... hast du dir das auch mal angeschaut was er beanstandet? das sind alles keine relevaten fehler... weil der i und der b tag werden zugemacht, nur ned in der selben zeile... weiters ob der br tag so <br /> oder <br> so geschrieben wird ist vielleicht nicht validiert, wird aber vom browser genau gleich interpretiert... alle fehler die er angezeigt hat, haben mit meinem problem nichts zu tun... validieren kann ich die ganze sache wenn sie so funktioniert wie ich will, weil zur zeit ist es ja nur ein test!!! Der tipp mit dem validome ist sicher nicht schlecht nur hat er keine relevanten fehler gefunden... ein tipp wie ich das ändern könnte wäre mir lieber gewesen, aber trotzdem danke

[D.R.]

Hallo,

zu deinem validator und dass ich das anpassen soll... hast du dir das auch mal angeschaut was er beanstandet? das sind alles keine relevaten fehler... weil der i und der b tag werden zugemacht, nur ned in der selben zeile...

Damit hätte der Validator aber kein Problem.

weiters ob der br tag so <br /> oder <br> so geschrieben wird ist vielleicht nicht validiert, wird aber vom browser genau gleich interpretiert...

Trotzdem ist diese Schreibweise unsinnig (und im Grunde auch falsch), wenn du HTML (nicht XHTML) verwendest.

alle fehler die er angezeigt hat, haben mit meinem problem nichts zu tun... validieren kann ich die ganze sache wenn sie so funktioniert wie ich will, weil zur zeit ist es ja nur ein test!!!

Die Erfolgschancen sind bei validem Quelltext aber höher.

Der tipp mit dem validome ist sicher nicht schlecht nur hat er keine relevanten fehler gefunden…

Was spricht eigentlich dagegen, die Fehler zu beheben?

ein tipp wie ich das ändern könnte wäre mir lieber gewesen

Das ist mir schon klar, nur ist eine Fehlerbehebung bei fehlerhaftem Quelltext nicht so einfach…

Trotzdem werde ich's mir nochmal anschauen…

mfg. Daniel

[D.R.]

Hallo,

Trotzdem werde ich's mir nochmal anschauen…

Habe ich gerade gemacht. Auch dieser Effekt hat mal wieder mit dem 3-Pixel-Bug zu tun, da der Workaround gegen den 3-Pixel Bug die Box nur glättet.

Beheben kannst du das, indem du einfach:

  
* html div#Info  
 {margin-left:-3px;}  
* html span#Navigation  
 {margin-right:-3px;}  

in deine CSS-Datei schreibst.

mfg. Daniel

[Struppi]

.... genauso, wie sich die beiden Spalten (links und rechts) ebenfalls mit verlängern sollten. Weiß jemand eine Lösung?

Will das Ganze nicht unbedingt mit tables realisieren.

Wieso nicht?
Du hast zwei Spalten in einer Reihe und woraus besteht eine Tabelle?
Aus Spalten und Reihen, also ist ein Tabelle die richtige semantische Wahl

Struppi.