YourWBB

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » DIV's unten abgeschnitten

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

2.948 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen

DIV's unten abgeschnitten

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Syrws
Mitglied

Dabei seit: 20.08.10
Beiträge: 3

DIV's unten abgeschnitten

Antworten Zitieren Editieren Melden UP

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

21.08.10 02:40

E-Mail Finden Als Freund hinzufügen

xundy

Mitglied

Dabei seit: 16.01.04
Beiträge: 817
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

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

__________________
Fragen kostet nichts, nicht fragen kann teuer werden!

21.08.10 08:56

E-Mail WWW Finden Als Freund hinzufügen

Dizzy.w3 Dizzy.w3 ist männlich

Brain Damage

Dabei seit: 18.07.07
Beiträge: 1.431
Herkunft: Österreich
Forenversion: 3.0

Antworten Zitieren Editieren Melden UP

Hi,

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

__________________
Gruß Dizzy

the rest is silence

21.08.10 12:37

E-Mail Finden Als Freund hinzufügen

MSN Passport-Profil von Dizzy.w3 anzeigen

Syrws
Mitglied

Dabei seit: 20.08.10
Beiträge: 3

Themenstarter Thema begonnen von Syrws

Antworten Zitieren Editieren Melden UP

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.

Dateianhang:

Unbenannt.png (59,49 KB, 110 mal heruntergeladen)

21.08.10 17:37

E-Mail Finden Als Freund hinzufügen

Dizzy.w3 Dizzy.w3 ist männlich

Brain Damage

Dabei seit: 18.07.07
Beiträge: 1.431
Herkunft: Österreich
Forenversion: 3.0

Antworten Zitieren Editieren Melden UP

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.

Dateianhang:

test.html (795 Byte, 15 mal heruntergeladen)

__________________
Gruß Dizzy

the rest is silence

Dieser Beitrag wurde 4 mal editiert, zum letzten Mal von Dizzy.w3: 21.08.10 19:24.

21.08.10 17:51

E-Mail Finden Als Freund hinzufügen

xundy

Mitglied

Dabei seit: 16.01.04
Beiträge: 817
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

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

__________________
Fragen kostet nichts, nicht fragen kann teuer werden!

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von xundy: 21.08.10 18:50.

21.08.10 18:50

E-Mail WWW Finden Als Freund hinzufügen

Syrws
Mitglied

Dabei seit: 20.08.10
Beiträge: 3

Themenstarter Thema begonnen von Syrws

Antworten Zitieren Editieren Melden UP

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?

21.08.10 20:28

E-Mail Finden Als Freund hinzufügen

xundy

Mitglied

Dabei seit: 16.01.04
Beiträge: 817
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

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

__________________
Fragen kostet nichts, nicht fragen kann teuer werden!

21.08.10 20:35

E-Mail WWW Finden Als Freund hinzufügen

Dizzy.w3 Dizzy.w3 ist männlich

Brain Damage

Dabei seit: 18.07.07
Beiträge: 1.431
Herkunft: Österreich
Forenversion: 3.0

Antworten Zitieren Editieren Melden UP

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.

__________________
Gruß Dizzy

the rest is silence

21.08.10 22:13

E-Mail Finden Als Freund hinzufügen

Baumstruktur | Brettstruktur

Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » DIV's unten abgeschnitten