4 Probleme: Fixer Kopf, DropDown Menü, Scrollen und Bildebene

[Jörg]

Hallo zusammen,

ich versuche mich gerade im Bau einer HP unter Einsatz von CSS.
Da ich mit CSS noch nicht so große Erfahrungen sammeln konnte, hab ich mir einige Codeschnippsel zusammengesucht und versucht zu integrieren.
Leider habe ich dabei nicht alle Probleme lösen können... :-(

Hier der Stand der Dinge: CSS-Seite

Meine Probleme sind dabei:
1)  Warum kann ich die Höhe des feststehenden Headbereiches nicht festlegen? Ich habe es mit HEIGHT im CSS-Bereich für HEADER probiert, aber das hat nichts gebracht. :(
2) Warum werden beim FF teilweise Astände in den DropDown-Menüs zwischen den Punkten gezeigt?
3) Warum scrollt der IE nicht, der FF schneidet dafür Text OBEN ab?!?
4) Was muss ich machen, damit beim runterscrollen das Bild nicht ÜBER die Navigation geschoben wird?

Kann mir wer helfen eines oder alle Probleme zu lösen?

Ich danke schon mal vorab für Euer Feedback.

Jörg

[Volker]

4. Was muss ich machen, damit beim runterscrollen das Bild nicht ÜBER die Navigation geschoben wird?

Zumindest hier kann ich dir helfen. Der Fehler liegt beim CSS-Eintrag position:fixed bei #header.
Da der Grün-Weiß-Übergang des Menüs als Hinter(!)grundbild definiert ist, wird das Bild natürlich darübergelegt.
Lösung: Das sollte dir weiterhelfen.

Gruß, Volker

[Jörg]

Hallo Volker.
Danke für Deine Infos...

Zumindest hier kann ich dir helfen.

Richtig, habe das gecheckt und dem Header insgesamt einen z-index zugewiesen, nun funktioniert es! :-D

Mein Problem mit dem nicht scrollenden IE zu lösen, indem ich den feststehenden Kopf weglasse ist nicht das was ich eigentlich möchte.
Problem beheben indem ich einfach die Funktion weglasse.
Mein Problem dabei ist ja, wenn ich in der CSS Datei Angaben für die Höhe des Content_Container mache scrollt der IE, aber dort kann ich nur fixe Angaben machen (z.B. 80%) und nichts was sich der Fenstergröße oder dem Contentinhalt anpasst! Dadurch verschwindet das Ende des Scrollbalkens unten raus. Besonders zu sehen, wenn man mal das Browserfenster verkleinert...

  
* html #content_container  
{  
padding:0.0em;  
height:80%;  
overflow:auto;  
}  

Und zuletzt zur unterschiedlichen Anzeige FF/IE:
Der IE macht es doch korrekt (also wie ich es eigentlich möchte) und hängt den Content_Container unter den Header. Der FF nicht, wie bekomme ich das hin?

Danke nochmal,
Jörg

P.S. Habe meine Testseite schon bezügl. des Bildes angepasst.

[Volker]

• html #content_container
  {
  padding:0.0em;
  height:80%;
  overflow:auto;
  }

  
Warum lässt du die Angabe overflow und height nicht einfach weg? Der content-container passt sich ja selbstständig dem Inhalt an.  
  

> Und zuletzt zur unterschiedlichen Anzeige FF/IE:  
> Der IE macht es doch korrekt (also wie ich es eigentlich möchte) und hängt den Content\_Container unter den Header. Der FF nicht, wie bekomme ich das hin?  
  
Nun, der IE macht dies nicht "korrekt" ;-). Korrekt ist die ANzeige der Gecko-Engine (FF). Um das zu lösen, kannst du den content-container ja per  
position:absolute; top:\*\*menue-hoehe\*\*;  
unter dem Menü platzieren.  
  
Gruß, Volker

[Jörg]

Warum lässt du die Angabe overflow und height nicht einfach weg? Der content-container passt sich ja selbstständig dem Inhalt an.

Wenn ich das mache, dann kommen keine Scrollbalken. Ich kann dann zwar den restlichen Text sehen, aber nur wenn ich bei gehaltener Linker Maustaste in den Text klicke und dann nach unten ziehe, also markiere... Kein Scrollen! :(
Den gleichen Effekt erhalte ich, wenn ich nur die Höhenangabe entfallen lasse... Gibt es keine Möglichkeit hier eine "relative" Angabe zu machen? Also z.B. Fensterhöhe abzügl. Kopfhöhe?

Nun, der IE macht dies nicht "korrekt" ;-). Korrekt ist die ANzeige der Gecko-Engine (FF). Um das zu lösen, kannst du den content-container ja per
position:absolute; top:**menue-hoehe**;
unter dem Menü platzieren.

OK, richtig dargestellt wird es wohl vom FF, aber eine Position:absolute Angabe verhaut mir dann die mittige Darstellung. FF zeig danach den Content_Container linksbündig, IE rechtsbündig an! ;(

Ideen?

[Volker]

OK, richtig dargestellt wird es wohl vom FF, aber eine Position:absolute Angabe verhaut mir dann die mittige Darstellung. FF zeig danach den Content_Container linksbündig, IE rechtsbündig an! ;(

Ideen?

Ja. Das Mitte-Problem lässt sich hierdurch lösen.
Allerdings muss ich sagen, dass dein CSS-Code recht schwer zu korrigieren ist, da du sehr viel mit height:auto, margin:auto etc. arbeitest und sich Fehler in der Darstellung dadurch schlecht nachvollziehen lassen, da ich im Einzelnen auch nicht weiß, wie sich unterschiedliche Browser bei auto verhalten ;-).
Bin gerne bereit zu helfen, aber vielleicht wäre es besser, wenn du die ganzen Abstände und Höhen/Breiten ohne den auto-Wert versuchst einzurichten.

Gruß, Volker

[Jörg]

OK, werde das mal versuchen und mich dann hier wieder melden bzw. das Ergebnis zeigen. Bitte diesen Thread wieder checken, vielleicht komme ich ja doch noch zu einem Ergebnis.
Zum CSS muß ich sagen, dass ich da insgesamt drei Codevorlagen aus dem Netz zusammengeschrieben habe.
1. Fixer Kopf
2. Zentrierung
3. Menü

Da mir eigentlich das CSS-Wissen fehlt bzw. ich da "gefährliches Halbwissen" an den Tag lege, kann ich nur Try-and-Error probieren. Oder hier fragen! ;-)

Also Volker, danke zunächst und ich melde mich kurzfristig (morgen?) wieder hier...

Jörg

[Volker]

Da mir eigentlich das CSS-Wissen fehlt bzw. ich da "gefährliches Halbwissen" an den Tag lege, kann ich nur Try-and-Error probieren. Oder hier fragen! ;-)

Oder das Halbwissen erweitern ;-).

Gruß, Volker

[Volker]

3. Warum scrollt der IE nicht, der FF schneidet dafür Text OBEN ab?!?

Ha, und wieder ne Antwort: Warum der IE nicht scrollt? Ganz einfach, du willst nicht, dass er es tut:
* html, * html body {
height:100%;
overflow:hidden;
}

Gruß, Volker

[Volker]

3. Warum scrollt der IE nicht, der FF schneidet dafür Text OBEN ab?!?

FF schneidet den Text ab, da du den Header "fixed" hast, das heißt, er wird eine "belegt nun eine eigene Ebene", während der normal positionierte Inhalt (container-content) ganz normal oben am Rand anfängt (d.h. eine Ebene unter dem fixen Inhalt).
Lösung:
Das einfachste: Verzichte auf das fixe Menü und lass es einfach über dem Textkörper stehen.

Gruß, Volker