Kay: Definitionsproblem

Hallo,

ich habe ein Stylesheet erstellt, in dem ich mit
a { ... }
Formatierungen für Links vorgenommen habe. Einige Links sollen allerdings anders aussehen. Also habe ich eine Klasse Namens .button definiert und wollte sie mit
<a class="button" href=...></a>
laden. Leider wird nicht die Button-Klasse sondern die Link-Formatierung verwendet. wieso?
Was mache ich falsch und wie kann ich das anders definieren?

Vielen Dank...
Kay

  1. Hi,

    ich habe ein Stylesheet erstellt, in dem ich mit
    a { ... }

    Nicht allen Code zu posten ist ja ganz sinnvoll.
    Aber wenn praktisch nichts mehr da ist, kann man auch nichts mehr sagen.
    Was definierst Du für a, und was definierst Du wie für die Klasse?

    <a class="button" href=...></a>

    Hier kann gar nichts formatiert sein, weil nichts zu formatierendes vorhanden ist...

    Vielleicht reicht es ja auch schon, wenn Du Dich mit der Cascade und den daraus folgenden Übernahmen von Werten für Properties beschäftigst.

    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.
    1. Hi,

      ich habe ein Stylesheet erstellt, in dem ich mit
      a { ... }

      Nicht allen Code zu posten ist ja ganz sinnvoll.
      Aber wenn praktisch nichts mehr da ist, kann man auch nichts mehr sagen.
      Was definierst Du für a, und was definierst Du wie für die Klasse?

      <a class="button" href=...></a>
      Hier kann gar nichts formatiert sein, weil nichts zu formatierendes vorhanden ist...

      Vielleicht reicht es ja auch schon, wenn Du Dich mit der Cascade und den daraus folgenden Übernahmen von Werten für Properties beschäftigst.

      cu,
      Andreas

      ok, hier also der Code:
      <style type="text/css">

      a {
        font-family:Verdana,Helvetica,Arial;
        font-size:10pt;
        text-decoration:underline;
        color:#ee82ee;
      }

      .button {
        font-family:Verdana,Helvetica,Arial;
        font-size:10pt;
        font-weight:bold;
        background-color:#ffffff;
        color:#000000;
        border-style:solid;
        border-color:#ff0000;
        border-width:1px;
        height:25px;
        text-align:center;
        text-decoration:none;
      }

      </style>

      Zu formatierender Link:

      <a class="button" href="download.php">Download</a>

      ciao

      Kay

      ps: hab mich mit css beschäftigt!!!

      1. hi

        falls Netscape 4 -> border an <a> = böse[tm]

        wie siehtn der Link nu au?
        und welcher Browser MIT VERSION!

        Grüße aus Bleckede

        Kai

        1. Der Link sieht genauso aus, wie in a { } definiert. Die neuen Button-Eigenschaften werden nicht übernommen.
          a.button#link werd ich gleich mal testen.

          Browser ist IE5.5 :-)

          und für visited und active sowie hover hatte ich erstmal noch nix definiert...

          Ciaoi

          Kay

          1. Hi Kay,

            also ich hab des von dir gepostete bei mir mit Netscape 7, Netscape 4.75 und IE 6 getestet, da macht er es bei allen so, wie du es beabsichtigt hast! Aber wenns beim 5.5 nicht funzt, probier doch mal den text in <SPAN> Tags zu packen und dem die Klasse zuzuweisen, also

            <a href="download.php"><SPAN class="button">Download</SPAN></a>

            Vielleicht packts dann auch der 5.5er

            Gruß,
            Björn

      2. Hi,

        ok, hier also der Code:
        <style type="text/css">

        a {
          font-family:Verdana,Helvetica,Arial;
          font-size:10pt;
          text-decoration:underline;
          color:#ee82ee;
        }

        .button {
          font-family:Verdana,Helvetica,Arial;
          font-size:10pt;
          font-weight:bold;
          background-color:#ffffff;
          color:#000000;
          border-style:solid;
          border-color:#ff0000;
          border-width:1px;
          height:25px;
          text-align:center;
          text-decoration:none;
        }

        Und wie sehen die Klassen
        a#link {}
        a#visited {}
        a#active {}

        aus?

        IMHO solltest du es so defienieren:

        a {
          font-family:Verdana,Helvetica,Arial;
           font-size:10pt;
           text-decoration:underline;
           color:#ee82ee;
         }

        a.button#link {
           font-weight: bold;
           background-color: #ffffff;
           color: #000000;
           border-style: solid;
           border-color: #ff0000;
           border-width: 1px;
           height: 25px;
           text-align: center;
           text-decoration: none;
         }
        a.button#visited {
           font-weight: bold;
           color: Black;
        }
        a.button#active {
           font-weight: bold;
           color: Red;
        }

        Uebrigens sollte man hinter dem Doppelpunkt immer ein Lehrzeichen lassen.

        Ciao,
          WOlfgang

        1. Moin!

          Und wie sehen die Klassen
          a#link {}
          a#visited {}
          a#active {}

          Hä? Du meinst die Pseudoklassen a:link, a:visited, a:active etc. (Das gilt auch für deinen etwas abstrus aussehenden Formatierungsvorschlag. #bezeichnung ist eine Formatierung für ein Element mit gleichlautender id="bezeichnung".)

          aus?

          Uebrigens sollte man hinter dem Doppelpunkt immer ein Lehrzeichen lassen.

          NEIN, das gerade nicht, sonst provoziert man Streit mit dem Netscape 4. Vor und hinter dem Doppelpunkt sowie vor dem abschließenden Semikolon keinerlei Leerzeichen!

          - Sven Rautenberg

          --
          Diese Signatur gilt nur am Freitag.
          1. Hi,

            Und wie sehen die Klassen
            a#link {}
            a#visited {}
            a#active {}

            Hä? Du meinst die Pseudoklassen a:link, a:visited, a:active etc. (Das gilt auch für deinen etwas abstrus aussehenden Formatierungsvorschlag.

            Ups, ja...
            hatte ungeprueft aufgeschrieben und das falsche im Kopf gehabt :)

            Danke fuer die Richtigstellung.

            Uebrigens sollte man hinter dem Doppelpunkt immer ein Lehrzeichen lassen.

            NEIN, das gerade nicht, sonst provoziert man Streit mit dem Netscape 4. Vor und hinter dem Doppelpunkt sowie vor dem abschließenden Semikolon keinerlei Leerzeichen!

            Echt? Kacke!
            Aber was steht im Standard?  (Bin schon etwas zu knülle um nachzuschauen).. Den NS4 würde ich nur in Notfaellen noch unterstuetzen oder wenn das Publikum es verlangt...

            Ciao,
              Wolfgang

            1. Hallo,

              Aber was steht im Standard?  (Bin schon etwas zu knülle um nachzuschauen)

              Das steht, dass es egal ist.

              Grüße

              Daniel

              1. Moin

                Das steht, dass es egal ist.

                Stimmt, es geht nur darum, dass der Netscape 4 ein Leerzeichen hinter dem Doppelpunkt - wie so vieles - nicht mag, also kein Weltuntergang, wenn die Netscape 4er nicht alles sehen können, hauptsach der wirklich textliche Inhalt existiert

                1. Hallo,

                  Stimmt, es geht nur darum, dass der Netscape 4 ein Leerzeichen hinter dem Doppelpunkt - wie so vieles - nicht mag [...]

                  Das kann ich beim besten willen nicht nachvollziehen, ich habe prinzipiell eine leerzeichen hinter dem doppelpunkt und das auch in der css datei für eben diesen browser und ich hatte noch nie probleme damit.

                  Gruss, Jan aus Dresden

                  1. Moin

                    Das kann ich beim besten willen nicht nachvollziehen, ich habe prinzipiell eine leerzeichen hinter dem doppelpunkt und das auch in der css datei für eben diesen browser und ich hatte noch nie probleme damit.

                    Um ehrlich zu sein, habe ich das noch nie getestet, aber das steht so in Selfhtml und das ist Gesetz ;)
                    Mal ernsthaft: Ich habe eigentlich die Randgruppe immer etwas ausgeschlossen, da das Design ja eigentlich unwichtig ist und die Hauptsache ist, dass eine faire logische Strukturiereung herrscht. Vieleicht aber hast du eine Netscape 4-Version, die upgedatet ist, womit die CSS-Fähigkeiten verbessert worden sind, vieleicht.

                    1. Hallo,

                      Um ehrlich zu sein, habe ich das noch nie getestet, aber das steht so in Selfhtml und das ist Gesetz ;)

                      Naja, wie es mit den gesetzen so ist, es gibt sinvolle und unsinnige.

                      Mal ernsthaft: Ich habe eigentlich die Randgruppe immer etwas ausgeschlossen, da das Design ja eigentlich unwichtig ist und die Hauptsache ist, dass eine faire logische Strukturiereung herrscht.

                      Was nn4.7 angeht, so kann er doch eine menge an wichtigen css angaben darstellen und es lohnt sich schon für ihn eine .css anzulegen um ein ergebnis zu erreichen welches nicht so trist wie text pur ist.
                      Und so gross ist der aufwand auch nicht aber ich denke man macht nichts falsch solange die seite nutzbar ist, das muss man am ende für sich entscheiden wie mans haben will.

                      Vieleicht aber hast du eine Netscape 4-Version, die upgedatet ist, womit die CSS-Fähigkeiten verbessert worden sind, vieleicht.

                      Naja, ich habe den nn4.7 so wie er auf der cd war, keine ahnung was es da so für unterschiede gibt zu anderen 4ern.

                      Gruss, Jan aus Dresden

          2. Hallo,

            Uebrigens sollte man hinter dem Doppelpunkt immer ein Lehrzeichen lassen.

            NEIN, das gerade nicht, sonst provoziert man Streit mit dem Netscape 4. Vor und hinter dem Doppelpunkt sowie vor dem abschließenden Semikolon keinerlei Leerzeichen!

            Das ist ein uraltes Maerchen, welches ich noch auf keinem Netscape 4.x und auf keinem OS reproduzieren konnte.

            Ich halte es noch immer so, wie es die CSS-Architekten Bos und Lie um 1996/97 in ihren ersten Publikationen schrieben:

            eigenschaft: wert;

            und ansonsten sind auch beliebig viele Leerzeichen erlaubt, was aber nicht unbedingt hilfreich oder uebersichtlich ist.

            MfG, Thomas

      3. Hallo, Kay,

        noch ein paar Anmerkungen zu deinem Stylesheet, unabhängig davon, wie du das Linkformatierungsproblem löst.

        font-family:Verdana,Helvetica,Arial;

        Die Angabe der generischen Schriftfamilile sans-serif am Ende der Schriftartenliste fehlt.
        http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#font_family

        font-size:10pt;

        »pt« ist nicht die richtige Einheit für Bildschirmformatierungen (media="screen"), sondern ist eher für Druckstylesheets angemessen. Der tatsächlich dargestellte Pixelwert bei einer Schriftgrößenangabe mit »pt« hängt vom ppi-Wert (pixels per inch) des Systems ab, dies kann bei kleinen ppi-Werten dazu führen, dass die Schrift bei 10pt unlesbar wird.
        http://www.netandmore.de/faq/fom-serve/cache/1153.html
        Ferner http://www.netandmore.de/faq/fom-serve/cache/414.html

        font-family:Verdana,Helvetica,Arial;

        Siehe oben.

        font-size:10pt;

        Siehe oben.

        background-color:#ffffff;
          color:#000000;

        Lässt sich verkürzen: color:#000; background-color:#fff;
        http://selfhtml.teamone.de/css/formate/wertzuweisung.htm#farben... da steht es nicht, dann http://www.w3.org/TR/CSS21/syndata.html#color-units

        border-style:solid;
          border-color:#ff0000;
          border-width:1px;

        Lässt sich verkürzen: border:1px solid #f00;
        http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border
        (http://www.w3.org/TR/CSS21/box.html#propdef-border)

        <a class="button" href="download.php">Download</a>

        Nur eine kosmetische Anmerkung: ich persönlich würde das href-Attribut als erstes Attribut im Element-Starttag notieren. Erleichtert die Übersicht ungemein, zudem ist class="button" zweitrangig. Bei mir sähe die Reihenfolge ungefähr so aus:

        href, type, hreflang, xml:lang, id, name, class, style, on* ...

        Darüber lässt sich natürlich streiten.

        ps: hab mich mit css beschäftigt!!!

        Aus dem Grunde meine Anmerkungen... *hehe*

        Grüße,
        Mathias

        --
        Geschwisterzwist zwischen Slivovic schlürfenden, spitzen, twistenden und schwitzenden Zwitscherschwestern.
        Zwanzig Zwerge zeigen Handstand, zehn im Wandschrank, zehn am Sandstrand.
        Kalle Kahlekatzenglatzenkratzer kratzt kahle Katzenglatzen.
        Bietet Brunhilde berauschende Brüste, buhlt Bodo brünstig beim Balle.
  2. Hallo,

    Was noch fehlerhaft ist, du vergibst die angabe height für ein inline element,
    dass funktioniert im ie aber sonst wahrscheinlich nirgends,
    du solltest das element vorher als blockelement definieren damit
    die height angabe auch wirklich beachtet wird oder statt dessen padding nutzen um den link "aufzublähen" und ihn als inlineelement dargestellt zu lassen.

    Gruss, Jan aus Dresden

  3. Hallo,

    ich habe ein Stylesheet erstellt, in dem ich mit
    a { ... }
    Formatierungen für Links vorgenommen habe. Einige Links sollen allerdings anders aussehen. Also habe ich eine Klasse Namens .button definiert und wollte sie mit
    <a class="button" href=...></a>
    laden. Leider wird nicht die Button-Klasse sondern die Link-Formatierung verwendet. wieso?

    Also, bei mir läuft das folgende CSS auf MSIE5.5 unter Win2000:

    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    a {
      font-family:Verdana,Helvetica,Arial,sans-serif;
      font-size:.8em;
      text-decoration:underline;
      color:#ee82ee;
    }
    a.button {
      font-family:Verdana,Helvetica,Arial,sans-serif;
      font-size:.8em;
      font-weight:bold;
      background-color:#ffffff;
      color:#000000;
      border-style:solid;
      border-color:#ff0000;
      border-width:1px;
      text-align:center;
      text-decoration:none;
      padding:5px;
    }
    -->
    </style>
    </head>
    <body>
    <a href="download.php">Download</a>
    <hr>
    <a class="button" href="download.php">Download</a>
    </body>
    </html>

    Bei win32 scheint es keine Rolle zu spielen, ich könnte mir aber vorstellen, dass die Klassenbezeichnung "button" Dein Problem ist. MSIE nimmt es mit den Namensräumen oft nicht so genau. Es könnte sein, dass der MSIE, z.B. auf dem MAC, die Namensräume für class und type nicht auseinander hält, und type="button" ist halt schon vorbelegt.

    Gruß

    Axel