[Tagträumer]

Hallo,

wie man unschwer sehen kann, bin ich hier ganz neu. Ich bin ein Anfänger, was CSS betrifft und probiere mich diesbezüglich gerade etwas aus. Nun bin ich an einem Punkt, an dem ich selber nicht mehr weiter weiß und hoffe, dass ihr mir weiterhelfen könnt (wollt ).

Im Grunde bastle ich an einem einfachen Layout, das letztlich in etwa so aussehen soll:



Leider verweigern mir die Browser derzeit die Ausgabe der schattierten Seitenrahmen des "Textfeldes". Nur weiß ich nicht warum? Meines erachtens ist der Code richtig (ja, ich weiß, ist er nicht....sonst würde es ja funktionieren) - habt ihr eventuell eine Idee?

Hier der derzeitige Stand...

...und hier die CSS Datei.

Schonmal vorab meinen Dank.

Gruß Tagträumer

[Schneemann]

Habs mir nicht genau angeschaut, könnte mir aber vorstellen, dass du da bisschen floatest und vergisst einen "clear: both;" zu setzen.

[heiko_rs]

Deine exzessive absolute Positionierung ist dafür verantwortlich. Wirf alle Positionierungen (auch relative) raus, nichts davon ist nötig.

Außerdem wirf sämtliches visibility: visible; sowie z-index raus, stelle die Navigation als Liste (ul) dar, ohne JS (stattdessen background-image), und schau Dir in den FAQ im CSS-Forum "FooterStickAlt" an, um zu verstehen, wie die gewünschte 100%-Höhe funktioniert.

[Tagträumer]

Vielen Dank, werde ich mich morgen gleich mal mit auseinandersetzen.

[Tagträumer]

So, hab mich nun gestern und heute noch drangemacht, alles rausgeschmissen und (fast) nochmal neu aufgearbeitet

Das ganze sieht nun so aus: zur Seite

Jetzt habe ich allerdings wieder 2 Probleme. Die Seite wird in dieser Form im Firefox anständig angezeigt, im IE allerdings verschwindet mein Menü hinter der Grafik des Headers. Das kann ich nur dann lösen, wenn ich doch wieder absolute Positionierungen einsetze. Oder gibt es da eine bessere Lösung? Habt ihr eventuell einen Tipp?

Problem Nummer 2: ich habe nun auch den "FooterStickAlt" mit eingesetzt, allerdings vergrößert sich der "nonFooter" nicht proportional mit meinem Text, wie hier zu sehen ist. Ich finde allerdings meinen Fehler nicht

Die CSS Datei dazu ist hier zu finden

Gruß Tagträumer

[fricca]

Das Hintergrundbild muss im Container mit min-height sein. Entweder #bgline oder #nonFooter ist überflüssig.

edit: warum arbeitest du bei der Navigation mit negativer Verschiebung?

edit2: Jetzt seh ich's ja erst. Validier deinen Code! Deine Liste ist keine Liste.
Du brauchst keine leeren Elemente für Hintergrundbilder missbrauchen (closer!?). Setz das Rest-Hintergrundbild ins ul-Element der Navigation.

[Tagträumer]

Zitat von fricca

Das Hintergrundbild muss im Container mit min-height sein. Entweder #bgline oder #nonFooter ist überflüssig.

Das hab ich nun endlich hinbekommen...ihr mögt lachen, mich hats fast verzweifeln lassen

Zitat von fricca

Jetzt seh ich's ja erst. Validier deinen Code! Deine Liste ist keine Liste.

Hab ich nun auch gemacht und sollte jetzt passen.

Zitat von fricca

Du brauchst keine leeren Elemente für Hintergrundbilder missbrauchen (closer!?). Setz das Rest-Hintergrundbild ins ul-Element der Navigation.

Du hast ja recht und ich habs auch probiert, nur leider schiebt es mir dann das ganze Menü zusammen und ich hab nicht die geringste Idee, warum.

Auch passt sich die Seitenhöhe nach wie vor nicht an die größe des Haupttextes an. Ich versteh es einfach nicht. Ich bin der Meinung, dass ich den "FooterStickAlt" richtig gesetzt habe. Scheinbar aber nicht

aktueller Stand der Seite

aktueller Stand CSS


Vielleicht könnte der Admin auch freundlicher Weise den Thread ins CSS verschieben, denn da gehört er wohl nun eigentlich hin. Danke

[heiko_rs]

Zitat von Tagträumer

Das hab ich nun endlich hinbekommen

Nein, Du hast immer noch #bgline und #nonFooter (und ersteres hat height statt min-height).

Und was bitte ist das?

#nonFooter
{
	position: relative;
	min-height: 100%;
	background: url('img/taup.jpg') no-repeat;
	width: 750px;
	height: 230px;
	margin: 0 auto;
}

Außerdem solltest Du sinnvollere Namen verwenden. z.B. dient #nonFooter in dem Artikel nur zur Veranschaulichung.

[Tagträumer]

Ok, hab doch wieder zu lange vor der Kiste gesessen. Naja, Wald und Bäume...

Das diese Variante zustande gekommen ist, hängt damit zusammen, dass ich die den Rahmen verlängernde Grafik wie auch den Header in den Hintergrund haben wollte. Funzt natürlich so nicht - habt ihr einen Vorschlag, wie ich es dann am besten lösen kann?

Mein Problem vorher war ja, dass wenn ich den Header als Container setze, dieser das Menü so weit nach unten drückt (zumindest im IE) - dafür hab ich leider keine rechte Lösung

Auf jeden Fall nochmal danke für die Tipps.

Ach, und die anderen Hinweise werde ich natürlich berücksichtigen....soviel zu copy and paste.

Tagträumer

[heiko_rs]

Zitat von Tagträumer

dass ich die den Rahmen verlängernde Grafik wie auch den Header in den Hintergrund haben wollte.

Was ich tun würde: Nimm ein div, das 100%-Mindesthöhe hat sowie den sich bis unten fortsetzenden Schatten, und stelle folgende Elemente hinein: h1 mit Image-Replacement (erhält die Headergrafik bis direkt unter den Schriftzug), und dann ein div, das den restlichen (unteren) Teil der Headergrafik erhält. In diesem div befinden sich dann alle übrigen Elemente, d.h. ul#navigation (ohne umgebendes div!) und Content etc.

Es wäre sogar möglich, auf das zweitgennante div zu verzichten, dann würde h1 die komplette Headergrafik (d.h. genauso hoch, wie sie momentan ist) bekommen und die Navigation per negativem margin-top "hochgeschoben" (Content etc. würden "automatisch" folgen).