YourWBB

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » div-Layout

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

3.582 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen

div-Layout

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

[kamui]
~

Dabei seit: 27.04.05
Beiträge: 2.992

div-Layout

Antworten Zitieren Editieren Melden UP

Hallo,

habe ein Problem mit einem div-Layout.

Es besteht grundsätzlich aus drei Teilen:
#header
#content
#footer

Das ganze ist so designt, dass der Footer am unteren Browserrand kleben soll (nicht fixed!). Wenn der Content lang genug ist, ist das auch kein Problem, aber wenn er zu kurz ist, steht er über dem unteren Rand ...

Gibt es da irgendwelche Codelösungen?

Grüße, kamui

07.12.08 12:59

Finden Als Freund hinzufügen

Häfner Häfner ist männlich

Sarkast³

Dabei seit: 24.07.04
Beiträge: 1.047
Fähigkeiten: WBB2 Fortgeschritten
Herkunft: Gelnhausen, DE.
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

Zeig mal nen Screen ich raff net was du meinst^^

__________________

Ich geb mir nochn Becks auf die Milch von meinen Kelloggs Smacks.
Ja, meine Festplatte hat den Laufwerksbuchstaben W!

24.07.2004 - 24.07.2009 = 5 Jahre y******

2-Step-Web.de

07.12.08 13:15

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,

weils mir gerade einfiel:

code:
1: 2: 3: 4: 5: 6:	// some css commands #footer { position: absolute; bottom: 0px; }

__________________
Gruß Dizzy

the rest is silence

07.12.08 13:29

E-Mail Finden Als Freund hinzufügen

MSN Passport-Profil von Dizzy.w3 anzeigen

[kamui]
~

Dabei seit: 27.04.05
Beiträge: 2.992

Themenstarter Thema begonnen von [kamui]

Antworten Zitieren Editieren Melden UP

Stimmt XD Danke, Dizzy Ehren

07.12.08 14:12

Finden Als Freund hinzufügen

codingnoob
Don't hit 'em boon.

Dabei seit: 16.01.04
Beiträge: 2.756

Antworten Zitieren Editieren Melden UP

dizzy, das wird nicht gehen. Dann wird der Footer bei längerem Content unten sein, wenn du ganz nach oben gescrollt hast und damit irgendwo quer über dem Content

__________________
… mfG, cn …
– Siehe auch: last.fm wBB-User-Group

Vorsicht! User bringt gefährliches Halbwissen in Umlauf!

Kein Support per PN! Dafür ist das Forum da. Auch keine Hinweise auf Threads per PN!

Meine Kritik an deinem Forum, Style, … ist hart? Oh. … das Positive siehst du als Erschaffer ja selbst.

11.12.08 17:12

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

Stümmt, hoffentlich merkt kui das nicht.

__________________
Gruß Dizzy

the rest is silence

11.12.08 17:57

E-Mail Finden Als Freund hinzufügen

[kamui]
~

Dabei seit: 27.04.05
Beiträge: 2.992

Themenstarter Thema begonnen von [kamui]

Antworten Zitieren Editieren Melden UP

Nana, zum Glück habe ich das Thema abonniert =P

11.12.08 18:37

Finden Als Freund hinzufügen

~~Hawkes~~
gesperrt 10/01/10

Dabei seit: 31.03.04
Beiträge: 213

Antworten Zitieren Editieren Melden UP

Das ist zwar eine JS Lösung, aber vielleicht geht das für dich in Ordnung. Das ist aus einem WBB3 Plugin bei dem ich mitgeholfen habe. Das {FIXED_FOOTER_DIV} muss durch die ID des Footer Divs ausgetauscht werden.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

<script type="text/javascript">
			//<![CDATA[
			function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {					
					var footerElement = document.getElementById('{FIXED_FOOTER_DIV}');
					var footerHeight  = footerElement.offsetHeight;
					var contentHeight = document.getElementById('page').offsetHeight-footerHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'relative';
						footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		onloadEvents.push(function() {
			setFooter();
		});
		if(IS_IE) {
			window.attachEvent('onresize', function() { setFooter();} );
		}
		else {
			window.addEventListener('resize', function() { setFooter();}, false );
		}
			//]]>
		</script>

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Hawkes: 23.12.08 13:58.

23.12.08 13:58

Finden Als Freund hinzufügen

Maniac_81 Maniac_81 ist männlich

PHP Profi

Dabei seit: 27.06.06
Beiträge: 2.087
Fähigkeiten: WBB3 Anfänger; WBB2 Profi
Herkunft: localhost/
Forenversion: 2.3; Lite 2.0

Antworten Zitieren Editieren Melden UP

Zitat:

Original von Admiral_Hawkes
Das ist zwar eine JS Lösung, aber vielleicht geht das für dich in Ordnung. Das ist aus einem WBB3 Plugin bei dem ich mitgeholfen habe. Das {FIXED_FOOTER_DIV} muss durch die ID des Footer Divs ausgetauscht werden.

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:

<script type="text/javascript">
			//<![CDATA[
			function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {					
					var footerElement = document.getElementById('{FIXED_FOOTER_DIV}');
					var footerHeight  = footerElement.offsetHeight;
					var contentHeight = document.getElementById('page').offsetHeight-footerHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'relative';
						footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		onloadEvents.push(function() {
			setFooter();
		});
		if(IS_IE) {
			window.attachEvent('onresize', function() { setFooter();} );
		}
		else {
			window.addEventListener('resize', function() { setFooter();}, false );
		}
			//]]>
		</script>

also bei mir funzt das nicht. wollte das testen, hab die id des footers eingetragen aber footer klebt ganz oben im IE und im FF.

__________________
zufrieden mit meinem Support? dann hier bitte bewerten!

Sie haben 3 gelbe Bananen gewählt!

ÄPFEL! 3!!!

09.01.09 12:29

E-Mail WWW Finden Als Freund hinzufügen

MSN Passport-Profil von Maniac_81 anzeigen

GolddWu
Mitglied

Dabei seit: 05.10.08
Beiträge: 115
Fähigkeiten: WBB2 Anfänger; WBB Lite 1 Profi
Forenversion: 2.2

Antworten Zitieren Editieren Melden UP

das aller beste wäre einfach dem content eine mindest-größe zu verpassen,dann würde der footer auch immer unten bleiben Augenzwinkern

sonst hätte ich kp wie man das macht Augenzwinkern

__________________
Mein neues Projekt "Poké Energie" wird in geraumer Zeit online gehen,dann wird hier mein Mini-Banner/Button und Link zum Forum und meiner Hp sein!^^

09.01.09 13:33

E-Mail Finden Als Freund hinzufügen

[kamui]
~

Dabei seit: 27.04.05
Beiträge: 2.992

Themenstarter Thema begonnen von [kamui]

Antworten Zitieren Editieren Melden UP

Zitat:

Original von GolddWu
das aller beste wäre einfach dem content eine mindest-größe zu verpassen,dann würde der footer auch immer unten bleiben Augenzwinkern

sonst hätte ich kp wie man das macht Augenzwinkern

Dann muss man aber irgendwie mit JS mit Mathemagie rumrechnen, dass es bei allen Auflösungen anders ist und trotzdem nicht blöd aussieht ^^'

09.01.09 14:50

Finden Als Freund hinzufügen

codingnoob
Don't hit 'em boon.

Dabei seit: 16.01.04
Beiträge: 2.756

Antworten Zitieren Editieren Melden UP

Oder einen 700 Pixel hohen Footer und einen 500 Pixel hohen Header benutzen. Dann brauchst du nicht mehr viel Content, um das alles hinzukriegen großes Grinsen

__________________
… mfG, cn …
– Siehe auch: last.fm wBB-User-Group

Vorsicht! User bringt gefährliches Halbwissen in Umlauf!

Kein Support per PN! Dafür ist das Forum da. Auch keine Hinweise auf Threads per PN!

Meine Kritik an deinem Forum, Style, … ist hart? Oh. … das Positive siehst du als Erschaffer ja selbst.

10.01.09 00:44

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-Layout