DIV's unten abgeschnitten

Syrws

Moin =)
Ich als absoluter Anfänger bastel seit ein paar Tagen an einem einfach Forendesign, folgendes Problem:
Der Hintergrund besteht aus 2-3 DIV's, die übereinanderliegen müssen.
-> nun gab ich ihnen position:absolute, habe sie platziert und sie liegen mit height 100% schön aufeinander.
Allerdings, wenn sich nun der Inhalt des Forum vergrößert (zb Thema öffnen) ist das Design unten abgeschnitten wenn ich scrolle - trotz height:100% oder/und bottom:0.
Laut google soll

code:
1:	html, body { height: 100%; }

das beheben, funzt aber natürlich nicht...
Was mach ich nun?
Wenn ich position:relative angeben würde, würde es angeblich funktionieren, allerdings würden die Lieben auch nicht mehr übereinander liegen...
Zusammenschnibbeln kann ich da auch nichts, da ein DIV ein gradient-farbverlauf ist.

Html-Code
<div class="design_group">
<div class="design_backside"> </div>
<div class="design_gradient"> </div>
<div class="design_border"> </div>
<div class="design_bottom"> </div>
<div class="design_top"> </div>
<div class="design_logo"> </div>
</div>

CSS-Code:
.design_backside {
background-image: url(images/test/backside.png);
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
z-index: -100;
}

.design_gradient {
background: -moz-linear-gradient(top, #5A8CC8, #EFB4C8);
background: -webkit-gradient(linear, left top, left bottom, from(#5A8CC8), to(#EFB4C8));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5A8CC8', EndColorStr='#EFB4C8', GradientType=0);
position: absolute;
width: 992px;
height: 100%;
bottom: 0px;
z-index: -99;
}

Gruß,
Syrws

xundy

height 100% funktioniert einfach nicht da muß schon ein absoluter Wert hinein, wenn der Inhalt entsprechend geringer ist als die Fenstergröße.
Daher wäre es am simpelsten die Fenstergröße per JS zu ermitteln, und die Höhe dann per JS zuzuweisen, was aber natürlich wieder zu Problemen führt wenn der User in seinem Browser kein JS erlaubt, auch wenn es dazu heute sicher keinen wirklich vernüftigen Grund gibt.

Du kannst aber dann mit einem noscript-Tag eine entsprechende Meldung einblenden, dann kann sich der Besucher entscheiden ob er mit den Anzeigefehlern leben will oder JS aktiviert, wobei heutzutage kaum eine Seite wirklich ohne JS auskommt, wenn die Bedienung einigermaßen komfortabel und schnell von Statten gehen soll.

mfg

Dizzy.w3

Hi,

ich finde die Loesung sehr unsauber, koenntest du mir bitte ein Bild zeigen, wie es aussehen soll?

Syrws

Schonmal danke für eure Antworten =)

Es sind inzwischen sogar noch mehr als 2 DIV's, die übereinander müssen....

Ich habe es testweise mal mit
<script>
function getPageHeight(){
pageHeight = document.getElementById('tpl{$templateName|ucfirst}').offsetHeight;
alert("the page is " + pageHeight + " pixels high");
}
</script>
im Head und
onload="getPageHeight();"
im Body probiert, in den Dateien index.tlp, board.tlp und thread.tlp.
Wo fügt man sowas ein? Hat jedenfalls funktioniert, nur kommt jedesmal die Meldung, dass die Seite 829px hoch wäre -> der Inhalt ist aber deutlich größer, Bild ist angehängt.

Dizzy.w3

Soll dir als Vorlage dienen, Werte musst du natuerlich erst anpassen.

Edit: Habe auch gleich eine Vorschau hochgeladen.

Edit #2: Habs hier auch angehaengt. (funktioniert sowas?)

Edit #3: Hab das Beispiel etwas erweitert.

Edit #4: Pardon, ich hatte dein Problem missverstanden; dachte der Balken soll abschliessen. Der neue Anhang fuellt auf die ganze Laenge aus.

xundy

Also erstmal ist offsetHeight nicht der richtige Weg!
Hier mal ein Ansatz

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Dieser Code soll nur verdeutlichen wie man die Höhe und die Breite des Browserfensters zuverlässig emittelt in möglichst allen Browsern!
Wichtig ist das deine Divs eindeutige IDs haben somit kannst Du über document.getElementById die gewünschten Styleeigenschaften setzen.

Nur mit CSS alleine geht dies nur zufriedenstellend bei festen Werten für die Breite und Höhe, dynamisch ist das aber nur mit der Unterstützung von JS möglich.

mfg

Syrws

thx thx, probiere ich direkt aus.
wo fügt man die html/javascript-Codes eigentlich am besten ein =)?
Bisher habe alles in die header.tlp geschoben, da kann man aber kein js ausführen weils hier kein <head> und <body> gibt, richtig?

xundy

Also am saubersten ist es natürlich dies im Kopfbereich<head> der Seite zu tun, es funktioniert aber natürlich auch überal anders auf der Seite.

Also suche das Template wo der Kopfbereich ausgegeben wird und packe es dort hinein.

mfg

Dizzy.w3

Hi,

meine oben gepostete Loesung ist rein in CSS und funktioniert auch in den von mir getesteten Browsern einwandfrei (hierzu habe ich auch Browsershots anfertigen lassen. Auf eine JS-Loesung wuerde ich nicht zurueckgreifen, unnoetig unsauber.

Noch eine Loesung waere es, wenn du eine Hintergrundgrafik erstellst, die den Mittelteil einer Spalte hat, per absoluter Positionierung definierst du dann das obere und untere Randstueck.

Und auf jeden Fall interessant sind fuer dich die Faux Columns.

Forensoftware: Burning Board, entwickelt von WoltLab GmbH