✔ Problem mit DIVs

[Biergamasda]

1. bin mir nicht ganz sicher ob das hier der richtige bereich ist, hoffe aber dass es passt
2. sry für den titel, mir fällt nix "treffenderes" ein

also, nun zum Problem

ich bin grad dabei, mir eine kleine HP zu basteln. siehe http://www.freepages.at/masda/index.htm

mein Problem ist, dass ich rechts und links balken habe, diese von der höhe her jedoch nicht so angepasst werden, wie ich es haben will. Wenn der Inhalt des mittleren divs zu groß ist, entsteht ein spalt zwischen boden und seitenrand, wenns zu klein ist passts.

den Code der Site kann man sich ja per quelltext ansicht anschauen - ist nichts in externen dateien

währe dankbar, wenn mir jemand sagen könnte, wie ich das machen kann, dass sich die höhe des Balkens mit der Inhaltsgröße ändert

danke schon im Voraus


PS:
habs bis jetzt nur im mozilla probiert - bin mir ziemlich sicher, dass andere browser ihre probleme damit haben dürften

 

[Quaese]

Hi,

sollen sich die Rahmen dynamisch an den Inhalt anpassen, solltest du sie als Hintergrundgrafiken
einbinden - den linken in content, den rechten in inhalt. Das Element für den rechten
Rahmen wird damit überflüssig.

Ausserdem musst du beim Floaten aufpassen, da im IE eine 3-Pixel-breite Lücke (3-Pixel-Gap-Bug)
auftritt, wenn daneben ein Element ohne float angeordnet wird.

Geändertes CSS:

div#page
{
    width: 100%;
    margin: 0;
    padding: 0;
}
div#header
{
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 80px;
}
div#lefthead
{
    float: left;
    width: 30px;
    height: 80px;
    background-image: url("../bilder/lefthead.jpg");
}
* html div#lefthead{ margin-right: -3px;}
div#righthead
{
    float: right;
    width: 30px;
    height: 80px;
    background-image: url("../bilder/righthead.jpg");
}
* html div#righthead{ margin-left: -3px;}
div#navileiste
{
    height: 80px;
    margin-left: 30px;
    margin-right: 30px;
}
* html div#navileiste{ margin-right: -3px; margin-left: -3px; }
div#bottom
{
   width: 100%;
   height: 35px;
   margin: 0;
}
div#leftbottom
{
    float: left;
    width: 35px;
    height: 35px;
    margin-top: 0;
    background-image: url("http://www.freepages.at/masda/images/leftbottom.jpg");
}
* html div#leftbottom{ margin-right: -3px;}
div#rightbottom
{
    float: right;
    width: 35px;
    height: 35px;
    margin-top: 0;
    background-image: url("http://www.freepages.at/masda/images/rightbottom.jpg");
}
* html div#rightbottom{ margin-left: -3px;}
div#bottomleiste
{
    height: 35px;
    margin-top: 0;
    margin-left: 35px;
    margin-right: 35px;
}
* html div#bottomleiste{ margin-right: -3px; margin-left: -3px;}
div#content
{
    clear: both;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: url(../bilder/leftborder.jpg) 0 0 repeat-y;
}
div#leftborder
{
    float:left;
    width: 20px;
    height: 100%;
}
* html div#leftborder{ margin-right: -3px;}
div#rightborder
{
    float: right;
    width: 20px;
    height: 100%;
}
div#inhalt
{
    background: url(../bilder/rightborder.jpg) 100% 0 repeat-y;
    padding-right: 30px;
}
* html div#inhalt{ margin-left: -3px;}

Die Pfade zu den Bildern musst du wieder anpassen!

Der geänderte HTML-Bereich:

<div id="content">
  <div id="leftborder">&nbsp;</div>
  <div id="inhalt">
    <div style="height: 1500px;">Element zum Erzwingen von Höhe</div>
  </div>
</div>

Ich hoffe, du kannst damit etwas anfangen.

Ciao
Quaese

 

[Biergamasda]

den 3px bug kenne ich, aber danke für den Hinweis.

erstmals danke für deine Hilfe, aber, soweit ich weis, wird ein background-image nicht auf die größe des Elements angepasst, sondern so oft wiederholt, bis es den gesamten div ausfüllt.
Genau aus diesem Grund habe ich es mit einem img tag gemacht, welches das darin befindliche Bild auf die aktuelle größe skaliert, und dadurch kein repeat hat. Da ein "Farb"Verlauf schräg über die Seite gelegt ist würde das mit repeat eigenartig aussehen, da es dann von den Proportionen etc nicht passt.

Ich hoffe du verstehst, was ich meine
sollte ich mich irren bitte ich darum, mir das mitzuteilen

lg

 

[Quaese]

Hi,

nein, du irrst nicht. Das Wiederholen mit Farbverlauf sieht tatsächlich nicht gut aus.

Eine weitere Möglichkeit:
Wiederhole in content und inhalt jeweils einen wenige Pixel hohen Teil des jeweiligen
Rahmens von ganz unten. Dieser sollte in etwa die gleiche Farbe besitzen und nicht so sehr auffallen.
Der linke Rahmen bleibt als Bild wie zu Beginn erhalten. Der rechte wandert in das inhalt-Element.
Wird nun das Ende einer Grafik erreicht, wird der farblich passende Rahmen vervollständigt.

Ich hab dir das Ganze als ZIP-File in den Anhang gepackt.

Ciao
Quaese

 

[Biergamasda]

nochmals vielen Dank für deine Bemühungen, jedoch habe ich noch eine Frage

funktioniert das Skalieren des img Tags nur mit width oder auch mit height ?

lg

/edit
hab da nochn bissl rumprobiert, und bin zum Schluss gekommen, dass es mit deiner Lösung am besten aussieht, danke nochmal