Positionierung von Divs und Scrollbalken

[FrankS]

Hallo!

Ich habe mal wieder 2 Probleme mit CSS. Die sind nicht dramatisch, aber unschön, wenn jemand mit kleiner Bildschirmauflösung kommt.

1. Ich habe mit CSS einigen Divs positioniert. Wenn ich das Browserfenster genügend verkleinere, bekomme ich einen vertikalen Scrollbalken, aber keinen horizontalen, obwohl einige Divs nicht mehr im sichtbaren Bereich sind. Warum?

2. Am unteren Ende der Seite habe ich eine Fußzeile, die würde ich gern mit "position:fixed" positionieren, leider kann der IE kein "fixed". Jetzt positioniere ich mit "absolute", damit wandert die Fußzeile aber mit nach oben, wenn gescrollt wird.

Habt Ihr Ideen zur Lösung? Für Punkt 1 habe ich keine, Punkt 2 ließe sich über Javascript realisieren (Fußzeile dynamisch positionieren), gefällt mir aber nicht. Gehts nicht mit "reinem" CSS?

Die Testseite findet Ihr hier: http://www.scharu.de/layout.htm

Danke, Gruß Frank

Gruß Frank

[Elya]

Hallo Frank,

2. Am unteren Ende der Seite habe ich eine Fußzeile, die würde ich gern mit "position:fixed" positionieren, leider kann der IE kein "fixed". Jetzt positioniere ich mit "absolute", damit wandert die Fußzeile aber mit nach oben, wenn gescrollt wird.

Punkt 2 ließe sich über Javascript realisieren (Fußzeile dynamisch positionieren), gefällt mir aber nicht. Gehts nicht mit "reinem" CSS?

Tabellen ;-) - nein im Ernst: unter http://www.alistapart.com/articles/footers/ habe ich Hilfreiches dazu gefunden, obwohl mein Safari das noch nicht so ganz mag.

Gruß aus Köln-Ehrenfeld,

Elya

[FrankS]

Moin.

Tabellen ;-) - nein im Ernst: unter http://www.alistapart.com/articles/footers/ habe ich Hilfreiches dazu gefunden, obwohl mein Safari das noch nicht so ganz mag.

Tabellen???? Davon wollte ich eigentlich weg, obwohl ich sie an einigen Stellen immer wieder gern nehme ;)

Danke,
Gruß Frank

P.S. Der Artikel ist gut, werde ich mal testen.

[Ingo Turski]

Hi,

1. Ich habe mit CSS einigen Divs positioniert. Wenn ich das Browserfenster genügend verkleinere, bekomme ich einen vertikalen Scrollbalken, aber keinen horizontalen, obwohl einige Divs nicht mehr im sichtbaren Bereich sind. Warum?

genau deshalb vermutlich. Über absolute Positionierung kannst Du ein Element natürlich auch außerhalb des Anzeigebereiches platzieren. Besonders übel sind in diesem Zusammenhang auch negative margins.

freundliche Grüße
Ingo

[FrankS]

Moin.

genau deshalb vermutlich. Über absolute Positionierung kannst Du ein Element natürlich auch außerhalb des Anzeigebereiches platzieren.

Hmm. Klingt logisch. Aber warum bekomme ich dann einen vertikalen Scrollbalken? Das Element, welches beim "Verlassen" des sichtbaren Bereiches den vertikalen Balken verursacht, ist auch absolut positioniert...

Gruß Frank

[Ingo Turski]

Hi,

Aber warum bekomme ich dann einen vertikalen Scrollbalken? Das Element, welches beim "Verlassen" des sichtbaren Bereiches den vertikalen Balken verursacht, ist auch absolut positioniert...

aber von top aus gesehen und in der horizontalen von right.

Mal ein Tip: bis auf den Footer kannst und solltst Du hier auf die absolute Positionierung verzichten. float, margin und ggfls. text-align reichen völlig und verursachen keine Probleme dieser Art.

Übrigens zum Quelltext:
Deine Menüs wären in einer Liste besser aufgehoben.
<div class="title">Titel</div> wäre sinnvoller Weise <h1>Titel</h1>.
<div class="bottomLine"> könnte über <p id="bottomLine"> sinnvoller ausgezeichnet sein.

freundliche Grüße
Ingo

[FrankS]

Moin.

aber von top aus gesehen und in der horizontalen von right.

Genau das ist der Grund. Es ist wirklich abhängig von der "Richtung, von der positioniert wird". Hier hilft ein div-Container mit entsprechender Ausrichtung, den man mit min-height und min-width auf die richtigen Größe bringt (siehe http://www.scharu.de/layout.htm). Hat den Nachteil, daß man eben genau wissen muß, wie groß der Cointainer sein muß.

Mal ein Tip: bis auf den Footer kannst und solltst Du hier auf die absolute Positionierung verzichten. float, margin und ggfls. text-align reichen völlig und verursachen keine Probleme dieser Art.

Danke, das werde ich mir mal ansehen. An margin habe ich auch schon gedacht, aber irgendwie hat es nicht geklappt, da muß ich nochmal ran.

Übrigens zum Quelltext:
Deine Menüs wären in einer Liste besser aufgehoben.

Eine Liste? Eigentlich habe ich dort eine Tabelle (siehe Original http://www.scharu.de), obwohl ich eigentlich ein tabellenloses Layout wollte ;)

<div class="title">Titel</div> wäre sinnvoller Weise <h1>Titel</h1>.

Stimmt, aber im eigentlich ist dort nur eine Grafik und kein Text.

<div class="bottomLine"> könnte über <p id="bottomLine"> sinnvoller ausgezeichnet sein.

Sehe ich mir auch nochmal an.

Vielen Dank für Eure Hilfe, schönes Wochenende,
Gruß Frank

[Ingo Turski]

Hi,

<div class="title">Titel</div> wäre sinnvoller Weise <h1>Titel</h1>.
Stimmt, aber im eigentlich ist dort nur eine Grafik und kein Text.

dann brauchst Du möglicherweise überhaupt kein zusätzliches Element: <img class="titel">.

freundliche Grüße
Ingo

[FrankS]

Hi.

dann brauchst Du möglicherweise überhaupt kein zusätzliches Element: <img class="titel">.

das Leben kann soooo einfach sein ;)

Danke!

Gruß Frank

P.S. Was ist eigentlich besser:

css-Definitionen mit

.bla{
}

und Benutzung mit <div class="bla">

oder

#bla{
}

und Benutzung mit <div id="bla">

Zweites hat den Vorteil, daß ich über die ID auch gleich per JavaScript auf das Element zugreifen kann und im Element nicht class und id notieren muß. Gibst sonst noch weitere Vor/Nachteile?

[at]

Hallo.

Gibst sonst noch weitere Vor/Nachteile?

• Ein Element darf nur eine ID haben, aber mehreren Klassen zugeordnet werden.
• Jede einzelne ID darf in einem Dokument nur einem einzigen Element zugewiesen werden, während die Anzahl von Elementen, die einer Klasse zugehörig sind, nicht begrenzt ist.
  MfG, at

[FrankS]

Hallo.

Hallo zurück!

• Ein Element darf nur eine ID haben, aber mehreren Klassen zugeordnet werden.
• Jede einzelne ID darf in einem Dokument nur einem einzigen Element zugewiesen werden, während die Anzahl von Elementen, die einer Klasse zugehörig sind, nicht begrenzt ist.

Hmm, mit'n bischen Nachdenken hätte ich ja auch drauf kommen können. Es ist eben Freitag nach einer langen Arbeitswoche...

Schönes Wochenende!
Gruß Frank

[Ingo Turski]

Hi,

P.S. Was ist eigentlich besser:
Benutzung mit <div class="bla">
oder
Benutzung mit <div id="bla">

Abgesehen von den unterschiedlichen Möglichkeiten ist dies auch eine Frage der Logik und Übersichtlichkeit.
Dein <img class="titel"> dürfte wohl nur einmalig im Dokument vorkommen und genau das würde eine ID hier auch aussagen. Bei einer (viel späteren) Änderung wüßtest Du dann sofort, daß diese Definition einmalig ist, während Du bei einer Klasse vielleicht erst prüfen müßtest, ob diese noch an anderen Stellen verwendet wurde.

freundliche Grüße
Ingo