CSS separat/inline

[daWonderer]

Hi,

ich habe das Beispiel mit dem fixierten Menü von SelfHTML versucht zu übernehmen. Dabei ist mir aufgefallen, dass beim 'Inline-Einbinden' der Stylesheet-Angaben das Menü nicht fixiert wird. Wenn ich die Angaben im Head einbinde funktioniert es.(?)

SELFHTML: Stylesheets / CSS-basierte Layouts / Fixe Bereiche

 

[anna55]

Was ist denn 'Inline-Einbinden'? Du meinst, Du definierst das Format direkt beim Element?

Also eigentlich glaube ich das nicht, was Du zu beobachten meinst. Die Browser haben eine Reihenfolge (vielleicht auch der IE) bei der Berücksichtigung der anzuwendenden Formate. Dabei überschreibt die direkt dem Element zugeordnete Styleangabe die in Style-Bereichen oder auch in externen Stylesheets definierten Formate.
SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden (unter Beachten Sie)

 

[daWonderer]

Du meinst, Du definierst das Format direkt beim Element?

Ja.

<tagname style="formate...">

Das Problem besteht im FF (3.0.1). Zu sehen ist der Unterschied bei den beiden folgenden Links.

Style-Angabe zentral im HEAD

Style-Angabe inline im HTML-Element

 

[ToM80]

? Bei mir sehen beide Fenster gleich aus ? FF 3.0.1 genommen

 

[daWonderer]

Wenn man scrollt sollte rechts oben der Text fixiert sein.
Das ist er jedoch bei inline angegebenem Format nicht.

 

[ToM80]

Du meinst dass Menü soll mitscollen und immer sichtbar sein?
Weil bei mir ist egal ob ich inline od. Head betrachte, beide scrollen weg.

Ah jetzt habe ich erst rechts Fixiert gesehen. Farbig wäre dass besser oder weiß auf Blau.
Aber auch das funktioniert. Dieser Text bleibt stehen wo er stehen soll.

 

[daWonderer]

Farbig wäre dass besser oder weiß auf Blau.
Aber auch das funktioniert. Dieser Text bleibt stehen wo er stehen soll.

Ok, hab den fixierten Bereich weiß hinterlegt.

Aber bei mir bleibt der Bereich im folgenden Link nicht rechts oben in der Ecke stehen und ich habe auch den FF 3.0.1.(?)
Im IE funktioniert es.

Style-Angabe inline im HTML-Element

 

[ToM80]

OK, ist eigentlich logisch. Das Inlinestyle überschreibt lt. W3C IMMER das vorgegebene Style.
Ich denke, dass in diesem Fall dadurch das position:fixed was du im HEAD-Style angegeben hast durch position: absolute abgelöst wird, womit der rechte Bereich mitscrollt.
Ich denke aber heutzutage kannst du einfach auf position:fixed gehen.

 

[daWonderer]

OK, ist eigentlich logisch. Das Inlinestyle überschreibt lt. W3C IMMER das vorgegebene Style.

Das passiert bei dem zentralen Format im Style-Tag doch aber auch?

html>body #fixiert
    {  /* nur fuer moderne Browser! */
     position: fixed;
    }
    #fixiert
    {
     position:absolute;
     width:17.5em;
     top:0px;right:0px;
     background-color:white;
    }
    #fixiert
    {
     background-color:green;
    }

Mit diesen Angaben ist der Hintergrund des fixierten Bereichs grün.
Es wird das vorhergehende Style-Attribut überschrieben.
Im zweiten Abschnitt #fixiert steht auch 'position:absolute;' nach der 'position:fixed;' Angabe darüber.
Dies müsste dann dort auch überschrieben werden, auch wenn es nicht Inline ist!?
Ich glaub ich steh da gerade auf dem Schlauch.

 

[ToM80]

Ist aber so, es wird überschrieben. Um das zu verhinder benutze folgendes:

    html>body #fixiert
    {  /* nur fuer moderne Browser! */
     position: fixed !important;
    }

 

[anna55]

Ist aber so, es wird überschrieben. Um das zu verhinder benutze folgendes:

    html>body #fixiert
    {  /* nur fuer moderne Browser! */
     position: fixed !important;
    }

Richtig, da ansonsten der Wert 'absolute' auf das fixierte Element wirkt, wenn die Angabe direkt in HTML steht. Und 'fixed' brauchst Du, damit das Element auch beim Scrollen an seiner Stelle bleibt.
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : POSITION }

 

[daWonderer]

Ist aber so, es wird überschrieben.

Das habe ich verstanden, dass es überschrieben wird.
Aber erklär mir bitte wieso die Eigenschaft 'fixed' überschrieben wird wenn es inline ist und nicht wenn es zentral ist.
Beim Background wird es auch überschrieben wenn es zentral ist.

Zentral:

    html>body #fixiert
    {  /* nur fuer moderne Browser! */
     position: fixed;
    }

legt fixed fest, danach:

#fixiert
    {
     position:absolute;
     width:17.5em;
     top:0px;right:0px;
     background-color:white;
    }
    #fixiert
    {
     background-color:green;
    }

Da der Hintergrund grün ist wurde das Attribut 'background-color' überschrieben.
Das Attribut 'position' müsste also auch überschrieben werden?
Dann wäre aber der DIV-Bereich absolut positioniert und nicht 'fixed'.

Wo liegt mein Denkfehler?

 

[anna55]

Hier kommt für Position ein Kindselektor (html>body #fixiert) zum Einsatz, der höher gewichtet wird, als ein allgemeines ID-Attribut. Deshalb wird der genaueren Spezifizierung in dem selben Stylebereich der Vorrang eingeräumt (bei modernen Browsern). Deshalb ist es egal, was zuerst steht.

Wenn Du natürlich ne Inline-Angabe mit absolute hast, Inline hat Vorrang vor Styleangaben im Head, dann wird absolute genommen und damit das Scrollen verhindert. !important verschiebt die Gewichtung dann wieder.

Cascading Style Sheets { Grundlegendes : Berechnung der Spezifizität }

 

[daWonderer]

Danke, auch für den Link...