Zur Navigation

css Layout mit bottom-kasten

1 Domenika

Neuer Tag, neue Frage :)

css treibt mich gerade mal wieder in den Wahnsinn! Also:

Ich will folgendes Layout bauen:
Einen Header-Kasten oben quer rüber
Links eine Navi
Rechts das Contentfenster, das natürlich scrollbar sein muss
Unten einen Bottom-Kasten quer rüber

Problem: Nun verschwindet der Content-Text hinter dem Bottom-Kasten und schneidet damit unten den Text ab.
Wie kann ich dem Contentfenster sagen, dass es bis zur oberen Bottom-Kante reichen soll? Geht das?

Hier mal zum angucken: http://www.persoenliche-entfaltung.com/neu/
Zur Übersicht hübsch farblich markiert.

Danke für Tipps, die mich aus den Klauen des Wahnsinns reißen!

Domenika

24.05.2007 17:10

2 Jörg

Hallo Domenika,

unter Windows beschränkt sich dieses Problem wohl auf Firefox, Opera und der IE7 scrollen bis nach unten.

Dieser Hack scheint dafür verantwortlich zu sein:

html div#Inhalt {
   height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }

Falls der Workaround nur für den IE6 gedacht ist (bin grad selbst nicht sicher, ob im IE7 diesen Bug behoben wurde), würde ich noch ein >body einfügen:

html>body div#Inhalt {
   height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }

Andernfalls mithilfe eines Conditional Comment die Korrektur vornehmen arbeiten

24.05.2007 18:22 | geändert: 24.05.2007 18:24

3 Jörg

Nachtrag / Korrektur:

Der Hack für alle IEs sieht folgendermaßen aus:

* html div#Inhalt {
  height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
 }

... also html und * in umgekehrter REihenfolge...

24.05.2007 18:28 | geändert: 24.05.2007 18:28

4 Domenika

Hi Jörg

danke Dir für die schnelle Antwort! Mensch, also wieder mal ein Browser/Mac/PC-Problem.

Aufm Mac macht der Safari das richtig, der Firefox nicht.
Hauptsache ist ja immer, dass es aufm PC IE läuft. Den Hack hab ich jetzt umgeschrieben.

Dann muss ich wohl den Ekel-Trick machen und unten am Text einfach Leerzeilen einfügen, damit er es auf jeden Fall überall vollständig anzeigt. Hier hab ich das schon gemacht: http://www.persoenliche-entfaltung.com/neu/avatar_termine.html
Könntest Du mir Feedback geben, wie das aufm PC aussieht?

Danke Dir!

domenika

24.05.2007 18:40

5 Jörg

In Firefox ist jetzt ok - aber im IE 6 fängt der Inhalt erst unterhalb der Navigation an, und diese wird oben auch etwas vom HEader abgeschnitten...

24.05.2007 18:55

6 Domenika

*grrrr* Noch eine Baustelle! Ich dachte, oben wäre alles ok...
Nun gut, da kümmer ich mich am Montag drum, da hab ich einen PC vor der Nase. Danke Dir auf jeden Fall! :)
domenika

24.05.2007 18:56

7 Domenika

Update:
Ich hab das jetzt mit Hilfe und etwas Javascript gelöst:

<script>
	function setzeScrollHoehe()
	{
		obenAbstand=80;
		untenAbstand=50;
		neueHoehe = document.body.clientHeight - obenAbstand - untenAbstand;
		scrollerObjekt = document.getElementById('Inhalt');
		scrollerObjekt.style.height = neueHoehe+'px';
	}
	
</script>

<div id="Inhalt" style="overflow:auto;">

Und die Navi hab ich mit position:absolute festgesetzt, so dass sie jetzt auch im PC richtig läuft.

Danke!

25.05.2007 12:51

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]