Samuel Vogel: CSS stylesheet umgehen

Hallo,

Also ich hab ein Stylesheet auf einer Seite und da steht eine Angabe für die Farbe der Links drin aber ich muss auch manchmal ´ne andere Farbe oder Größe verwenden!

Aber immer wenn ich was per <style> angebe wird das nicht angenommen!

Hat jemand von euch eine Idee??

samy,

  1. Hi,

    Also ich hab ein Stylesheet auf einer Seite und da steht eine Angabe für die Farbe der Links drin aber ich muss auch manchmal ´ne andere Farbe oder Größe verwenden!

    Aber immer wenn ich was per <style> angebe wird das nicht angenommen!

    Hat jemand von euch eine Idee??

    aufgrund Deiner Problembeschreibung schließe ich messerscharf, dass Du etwas falsch machst. Mehr kann man daraus allerdings nicht ersehen.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Schick mal einen Link zu deiner Seite, oder poste mal die wichtigen(!) teile deines Quellcodes. Dann können wir dir sicher helfen.

      David

      1. Also die Seite designe ich grad ist nicht meine:
        http://www.afeonline.de.vu

        Es geht um den Link neben dem Copyright ganz links oben!

        Und der Code:

        <div style="color: White; font-size: 75%;"><font color="#FFFFFF"> © 2003 X4th || <a href="http://www.x4th.de">Realisiert von X4th</a></font></div>

        und im Stylesheet:

        a:hover, a:visited, a:link{
         color : Navy;
         text-decoration : none;
         font-size : 80%;
        }

        a:hover{
         color : White;
         text-decoration : none;
         font-size : 95%;
        }

        1. Sorry habs jetzt selba!

          Ich musste einfach statt <style><a>Link</a></style> <a><style>Link</style></a> schreiben!

          Aber trotzdem Danke

          1. Hi,

            Ich musste einfach statt <style><a>Link</a></style> <a><style>Link</style></a> schreiben!

            wie, was? <style> ist außerhalb des <head> nicht erlaubt! Was soll denn das für einen Sinn ergeben?

            Cheatah

            --
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. wie, was? <style> ist außerhalb des <head> nicht erlaubt! Was soll denn das für einen Sinn ergeben?

              Der Sinn darin besteht, einen gewisse Logik zu verfolgen (zu erhalten). Script-Definitionen in den Header die Benutzung dieser in den Body.

              David

              1. Hi,

                wie, was? <style> ist außerhalb des <head> nicht erlaubt! Was soll denn das für einen Sinn ergeben?
                Der Sinn darin besteht, einen gewisse Logik zu verfolgen (zu erhalten). Script-Definitionen in den Header die Benutzung dieser in den Body.

                ich glaube, Du hast meine Frage nicht verstanden. Ein <style> außerhalb des <head> *hat* keinen Sinn. Gar keinen. Du fährst gerade mit dem Auto ins Meer, nach dem Motto "auf der Straße geht's ja auch".

                Cheatah

                --
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes
                1. Ok dann ist ja alles klar :-)

            2. sorry ich meinte <div style=""></div>

              Sorry, Sorry, Sorry

          2. Hallo

            Ich musste einfach statt <style><a>Link</a></style> <a><style>Link</style></a>

            Ähhm, style als HTML-Tag gibt es nicht im body, es gibt style nur im head,
            um die Dokumentweiten CSS-Einstellungen darin zu notieren. Les' mal:
            http://selfhtml.teamone.de/css/formate/einbinden.htm.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
        2. Hi,

          Es geht um den Link neben dem Copyright ganz links oben!

          es geht also um unterschiedliche Formatierungen verschiedener Links? Dann ist mir nicht klar, warum Du anhand des Archivs keine Lösung hast finden können. Gerade dieses ganz spezielle (Unter-(Unter-(Unter-(...))))Problem wurde nun wirklich schon zigfach behandelt.

          <div style="color: White; font-size: 75%;">

          Die Farbe "White" ist mir nicht bekannt. Meinst Du "white"?

          <font color="#FFFFFF">

          Wozu denn noch <font>? Schmeiß das bitte raus.

          color : Navy;

          Auch diese Farbe kenne ich nicht.

          a:hover, a:visited, a:link{
          a:hover{

          Bei widersprüchlichen Angaben des gleichen Selektors "gewinnt" die letzte.

          text-decoration : none;

          Wobei mindestens diese redundant ist.

          Cheatah

          --
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. Hallo Cheatah,

            <div style="color: White; font-size: 75%;">
            Die Farbe "White" ist mir nicht bekannt. Meinst Du "white"?

            Ich verstehe
            http://www.w3.org/TR/REC-CSS2/syndata.html#q4
            so, dass Gross-/Kleinschreibung in CSS meistens - und
            auch in diesem Fall - keine Rolle spielt.
            "All CSS style sheets are case-insensitive, except
            for parts that are not under the control of CSS."

            In der HTML 4 Spezifikation sind die Farben genau so
            ausgeschrieben, wie Samuel es schrieb: "White" u.s.w.:
            http://www.w3.org/TR/REC-html40/types.html#h-6.5
            Und dort steht: "The color names are case-insensitive."

            Damit scheint der Fall klar zu sein...

            a:hover, a:visited, a:link{
            a:hover{
            Bei widersprüchlichen Angaben des gleichen Selektors "gewinnt" die letzte.

            Und die Reihenfolge ist nicht ganz "comme il faut".
            Hier spielt es keine Rolle, weil alle "in einem Topf landen",
            aber wenn man unterschiedliches Aussehen fuer die Pseudoklassen
            will, muss man auf die richtige Reihenfolge achten:
            :link, :visited, :hover, :active
            siehe:
            http://www.netandmore.de/faq/fom-serve/cache/1237.html
            :focus wuerde ich als zweitletztes angeben:
            :link, :visited, :hover, :focus, :active

            ---

            Die urspruengliche Frage von Samuel haette man IMHO einfach mit
            der Self_HTML_-FAQ beantworten koennen:
            http://selfhtml.teamone.de/navigation/faq.htm#abweichende_verweisfarben

            Dass er jetzt <DIVs> um jeden Link packt, ist wohl nicht gerade
            das Gelbe vom Ei...
            Mit Klassen oder meinetwegen einem style-Attribut direkt im
            A-Element waere es deutlich einfacher gegangen...

            Gruesse,

            Thomas

            1. Hi,

              Und die Reihenfolge ist nicht ganz "comme il faut".
              Hier spielt es keine Rolle, weil alle "in einem Topf landen",
              aber wenn man unterschiedliches Aussehen fuer die Pseudoklassen
              will, muss man auf die richtige Reihenfolge achten:

              Es gibt keine allgemein richtige Reihenfolge.
              Die Reihenfolge ist davon abhängig, welchen Effekt man erzielen will.

              :link, :visited, :hover, :active

              Sicher, das erzeugt die von den meisten Leuten gewünschten Effekte.
              Aber diese Reihenfolge ist kein Muß.
              Wenn ich bsp. will, daß besuchte Links keinen hover-Effekt haben, darf ich auch die Reihenfolge
              :link, :hover, :visited, :active benutzen...

              siehe:
              http://www.netandmore.de/faq/fom-serve/cache/1237.html
              :focus wuerde ich als zweitletztes angeben:
              :link, :visited, :hover, :focus, :active

              Ich würde :focus zwischen :visited und :hover setzen - dann werden auch Elemente, die den Fokus haben, beim Überfahren mit der Maus auch noch verändert, bei Deiner Reihenfolge wäre das nicht der Fall.

              cu,
              Andreas

              --
              Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
              http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
              1. Hallo Andreas,

                Danke fuer die Ergaenzungen.

                Wenn ich bsp. will, daß besuchte Links keinen hover-Effekt haben, darf ich auch die Reihenfolge
                :link, :hover, :visited, :active benutzen...

                Klar.

                :link, :visited, :hover, :focus, :active
                Ich würde :focus zwischen :visited und :hover setzen - dann werden auch Elemente, die den Fokus haben, beim Überfahren mit der Maus auch noch verändert, bei Deiner Reihenfolge wäre das nicht der Fall.

                Da hast Du natuerlich recht. An diese Kombination habe ich nicht gedacht.

                Ich dachte bisher, dass jemand entweder mit der Maus navigiert,
                oder aber mit der Tabulator-Taste von einem Link zum naechsten huepft.

                Auf meinen Seiten definere ich deshalb :focus meist gleich wie :hover, also so:
                a { /* Allgemeines */ }
                a:link { }
                a:visited { }
                a:focus, a:hover { }
                a:active { }

                Gruesse,

                Thomas

          2. Hallo Cheatah,

            text-decoration : none;

            Wobei mindestens diese redundant ist.

            Der IE verlangt vielfach redundante Angaben.
            Eine generelle Definition mit den entsprechenden Ergänzungen in den einzelnen Zuständen genügt für den Mozilla und Opera, aber leider nicht immer für den IE.
            Nach welchen Kriterien er dies aber anlegt, habe ich selbst noch nicht wirklich herausgefunden.

            Gruß

            Kurt

            --
            grüne Idylle:"Wozu brauchen wir Kraftwerke, Strom kommt doch aus der Steckdose..."
            http://faq.united-web.at
            http://elektro-dunzinger.at
            http://shop.elektro-dunzinger.at
            1. Hallo,

              Der IE verlangt vielfach redundante Angaben.
              Eine generelle Definition mit den entsprechenden Ergänzungen in den einzelnen Zuständen genügt für den Mozilla und Opera, aber leider nicht immer für den IE.

              Genau. Diese Erfahrung habe ich auch schon gemacht.

              Nach welchen Kriterien er dies aber anlegt, habe ich selbst noch nicht wirklich herausgefunden.

              Ich vermute, er hat Probleme mit der Kaskade oder mit der
              "Spezifizitaet" (specificity):
              http://www.w3.org/TR/CSS21/cascade.html#specificity

              Wenn man etwas fuer allgemeine Links und ihre Pseudoklassen definiert:
              a:link { text-decoration:underline; /* ... */}
              a:visited { text-decoration:underline; /* ... */}
              dann hat das die Spez. von: 11 oder 0,0,1,1 (1 Pseudo-Klasse, 1 Element)

              Wenn man dann weiter unten im CSS eine Klasse definiert
              a.spezial { text-decoration:none; }
              hat dies die gleiche Spez.: 11 oder 0,0,1,1  (1 Klasse, 1 Element).
              Weil diese Definition aber spaeter kommt, sollte sie "gewinnen".
              http://www.w3.org/TR/CSS21/cascade.html#cascading-order

              Fuer den MS IE muss man aber extra noch
              a.spezial:link { text-decoration:none; }
              a.spezial:visited { text-decoration:none; }
              schreiben.
              Dieser Selektor ist dann auch spezifischer:
              21 oder 0,0,2,1 (1 Klasse + 1 Pseudoklasse, 1 Element)

              Gruesse,

              Thomas

              P.S. In der Berechnung der Spezifizitaet widersprechen sich
              die verschiedenen Versionen von CSS.
              Die Links habe ich zusammengestellt auf:
              http://www.tiptom.ch/tests/css/specificity.html
              Soweit ich ueberflogen habe, sind aber
              a:link { }
              und
              a.spezial { }
              in allen bisherigen Versionen von CSS (1.0, 2.0, 2.0 Errata, 2.1)
              jeweils gleich spezifisch.

              1. Hallo Thomas,

                Nach welchen Kriterien er dies aber anlegt, habe ich selbst noch nicht wirklich herausgefunden.

                Ich vermute, er hat Probleme mit der Kaskade oder mit der
                "Spezifizitaet" (specificity):
                http://www.w3.org/TR/CSS21/cascade.html#specificity

                Wenn man etwas fuer allgemeine Links und ihre Pseudoklassen definiert:
                a:link { text-decoration:underline; /* ... */}
                a:visited { text-decoration:underline; /* ... */}
                dann hat das die Spez. von: 11 oder 0,0,1,1 (1 Pseudo-Klasse, 1 Element)

                Wenn man dann weiter unten im CSS eine Klasse definiert
                a.spezial { text-decoration:none; }
                hat dies die gleiche Spez.: 11 oder 0,0,1,1  (1 Klasse, 1 Element).
                Weil diese Definition aber spaeter kommt, sollte sie "gewinnen".
                http://www.w3.org/TR/CSS21/cascade.html#cascading-order

                Fuer den MS IE muss man aber extra noch
                a.spezial:link { text-decoration:none; }
                a.spezial:visited { text-decoration:none; }
                schreiben.
                Dieser Selektor ist dann auch spezifischer:
                21 oder 0,0,2,1 (1 Klasse + 1 Pseudoklasse, 1 Element)

                Ja, genau. Ich habe es für mich einfach so gemacht, daß ich bei Pseudoklassen immer die ganze Latte einfüge, dann kann nichts schiefgehen, da er auch bei gleicher Spezifität immer die vorhergehenden Werte überschreibt. Erschwerend kommt ja hinzu, daß er allgemeine Definitionen wie a {Sp:0001} auch nicht immer in die einzelnen Zustände übernimmt, sondern auch bei a:link {Sp:0011} usw. oft Redundanz verlangt. Da hier aber eine höhere Spezifität gegeben wäre, kann es nicht (nur) daran liegen. Allerdings ist das nicht bei allen Angaben so. Der IE macht ein Lotteriespiel draus, was er übernimmt und was nicht.
                Bsp.:
                a
                  {
                   font-family:verdana,tahoma,arial,helvetica,sans-serif;
                   color:#535593;
                   text-decoration:none;
                   font-weight:bold;
                  }

                Font-Family wird übernommen, color, text-decoration und font-weight hingegen nicht.
                Deshalb erspare ich mir die Rätselraterei lieber gleich und schreibe alles relevante gleich in jede Pseudoklasse.
                Opera und Mozilla akzeptieren hingegen Angaben in dieser Form und führen diese korrekt aus.

                P.S. In der Berechnung der Spezifizitaet widersprechen sich
                die verschiedenen Versionen von CSS.
                Die Links habe ich zusammengestellt auf:
                http://www.tiptom.ch/tests/css/specificity.html
                Soweit ich ueberflogen habe, sind aber
                a:link { }
                und
                a.spezial { }
                in allen bisherigen Versionen von CSS (1.0, 2.0, 2.0 Errata, 2.1)
                jeweils gleich spezifisch.

                Danke für die Links, ist interessant zu lesen, soweit ich es mit meinen Englischkenntnissen zusammenbringe. ;-)

                Gruß

                Kurt

                --
                grüne Idylle:"Wozu brauchen wir Kraftwerke, Strom kommt doch aus der Steckdose..."
                http://faq.united-web.at
                http://elektro-dunzinger.at
                http://shop.elektro-dunzinger.at
              2. Hi,

                Soweit ich ueberflogen habe, sind aber
                a:link { }
                und
                a.spezial { }
                in allen bisherigen Versionen von CSS (1.0, 2.0, 2.0 Errata, 2.1)
                jeweils gleich spezifisch.

                mag sein, nur hat der IE hier - mal wieder - eine andere Meinung.
                Der linkzustand hat hier mehr Gewicht als eine Klasse. Hieraus dürften dann auch die bereits angemerkten "Ratespiele" resultieren.

                Ein Beispiel zur Verdeutlichung:

                a:link, a:visited {color:red;}
                a.spezial {color:blue;}

                <a class="spezial" ...> wird im IE rot angezeigt.

                freundliche Grüße
                Ingo

        3. Also du du willst den Link verändern, so dass der nomal auch weiß ist oder? Ok wenn das so ist kannst du doch einfach folgendes schreiben:

          <font color="#FFFFFF"> © 2003 X4th || <a href="http://www.x4th.de" style="color:#FFFFFF">Realisiert von X4th</a></font>

          Greetz David

          PS: Darf ich mal raten? Du hast eine Auflösung von 1024x768 ? Deine Homepage ist leider auch nur dafür optimiert... den <div> Layern sei dank.

  2. wie wäre es wenn du ne class angabe machst??

    z.b.

    .fett {
    font-weight:bold;
    }

    dann fügste dat halt z.b. so ein:

    <p class="fett">dit sollte nu fett sein</p>

    muss gehen geht ja bei mir auch, aber warum das mit dein style nicht klappt ist mir auch fraglich