Lösung gesucht

SpecialFighter · #1 (**permalink**) 04.12.2010, 22:57

Guten Abend

ich habe ein kleines Problem bei meiner Homepage-Optik.
Schaut euch doch bitte Bild 1 an. Es geht um den roten Bereich.

So soll er aussehen.
Hat ein Benutzer eine sehr hohe Auflösung (größer als 1680 x 1050) oder z.B. den Internet Explorer 9, bei dem die Leiste oben nicht so hoch ist dann sieht der untere Bereich so aus wie auf Bild 2.

Aussehen soll es in so einem Fall aber dann wie in Bild 3.
Gibt es eine Möglichkeit das sich die Höhe des roten Bereichs so anpasst, das dieses immer bis zum Rand des Browserfensters geht?

folgende CSS Anweisung ist im Moment dafür aktiv:

Code:

.footer_bg {
    background: url("../images/bg_bot.gif") repeat scroll left top #6F6F6F;
    height: 50px;
    position: absolute;
    top: 809px;
    width: 100%;
    z-index: -1;
}

ArcVieh · #2 (**permalink**) 04.12.2010, 23:04

In der Regel verwendet man dazu die Footer-Stick-Alt-Methode.

Da wird der Footer unter einen Wrapper mit einer mindest-Höhe von 100% gesetzt. Der Footer hat eine feste Höhe und wird um seine eigene Höhe (mit einem negativen-top-margin) über den Wrapper gezogen.

EDIT: Wenn es dir nur darum geht, diesen grauen Streifen da unten zu haben, ohne dass der dunkel-graue Footer darüber ist, kannst Du den Streifen auch einfach als Grafik abspeichern und auf body anwenden mit background-position 0 100%;.

SpecialFighter · #3 (**permalink**) 04.12.2010, 23:37

das ist alles sehr schön.
ich seh bei deinen Links überall eine Demo, aber nicht wie ich dies umsetze ^^
oder habe ich was übersehen?

ArcVieh · #4 (**permalink**) 04.12.2010, 23:47

Nein, da ist keine Beschreibung, die ergibt sich eigentlich aus dem Quellcode.

Folgende HTML-Struktur (auf einige wichtige Elemente wurde verzichtet):

HTML-Code:

<body>
	<div id="wrapper">
		<div id="content">
			<p>Text usw ...</p>
		</div>
		<div id="sidebar">
			<p>Navigation, Werbung, etc ..</p>
		</div>
	</div>
	<div id="footer">
		<p>Dein Footer...</p>
	</div>
</body>

Der #wrapper muss die volle Höhe des Browsers ausnutzen, dazu bekommt er min-height:100%; - prozentuale Größen beziehen sich aber auf Ihr Elternelement, daher muss zuvor body & html auf eine Höhe von 100% gesetzt werden.

Code:

html, body {
	height:100%;
}

#wrapper {
	min-height:100%;
}

* html #wrapper {
           height:100%; /* IE 6 fix */
}

Der #footer sitzt aber dann unter dem sichtbaren Bereich und die Seite bekommt einen "unnötigen" Scrollbalken.

Um das zu verhindern wird der #footer um seine eigene Höhe hochgezogen:

Code:

#footer {
	height:150px;
	margin-top:-150px;
}

Damit sich #footer aber nicht über #sidebar und #content setzt, gibt es verschiedene Möglichkeiten:
- beiden Elementen einen padding-bottom von 150px geben
- ein weiteres umschließendes Element mit padding-bottom von 150px

Ich hoffe, das hilft dir weiter.

SpecialFighter · #5 (**permalink**) 04.12.2010, 23:57

ich habe das jetzt einfach Mal testweise mit deinem Code probiert.
ein unnötiger scrollbalken ist bei mir trotzdem zu sehen

Unbenanntes Dokument

fricca · #6 (**permalink**) 05.12.2010, 00:32

Das sind Default-Abstände. FAQ "CSS-Prolog"

heiko_rs · #7 (**permalink**) 05.12.2010, 00:32

FAQ CSS-Prolog

Edit:

fricca · #8 (**permalink**) 05.12.2010, 00:35

Noch nachgeschoben: Die Erklärung zu Footer Stick Alt befindet sich unter eben diesem Namen (Link!) unter FAQ Punkt 7.

SpecialFighter · #9 (**permalink**) 05.12.2010, 01:21

sry aber ich werde da nicht schlau drauß.
egal wie ich es mache, ich habe immer einen scrollbalken

fricca · #10 (**permalink**) 05.12.2010, 01:25

Zitat:

Zitat von SpecialFighter

sry aber ich werde da nicht schlau drauß.

Woraus?

Zitat:

egal wie ich es mache, ich habe immer einen scrollbalken

Wie du was machst? Wo ist dein aktueller Code?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
My one love - The IE: Kleines Anzeigeproblem (dringende Lösung gesucht)	Sp33dy G0nz4l3s	CSS	0	04.02.2011 19:08
WBB3 Rahmen als Grafik Lösung gesucht.	mcfly12345	CSS	3	18.04.2008 11:35
Bessere Lösung gesucht - Eliminierung von <br />	Lone Wolf	(X)HTML	15	29.06.2007 11:23
Lösung gesucht: dynamische Einbindung von Soundobjekten	betrazivis	Javascript & Ajax	5	28.02.2007 15:56
Lösung gesucht!! Höhe eines CSS-Menue ermitteln	absyss	CSS	2	11.01.2005 12:13