vita: hirachie

hi's,

wenn ich in meinen externen css sowas stehen habe:

#menu1 a.,a:link,a:active1,a:visited{
  font-family:monospace;helvetica,Arial;
  font-size:12px;
  color:#EEEEEE;
  font-weight:500;
  text-decoration:none;
  background-color:#6699CC;
  line-height:20px;padding:5px;
  }

#menu1 a .pfeil{color:#6699CC;}

#menu1 a:hover,a:hover.pfeil{
 font-family:monospace;helvetica,Arial;
 color:#6699CC;
 font-weight:500;
 background-color:#EEEEEE;
 line-height:20px;padding:5px;

dann muss ich das folgerichtig in meine html datei über id=menu1 einbauen..

problem ist jetzt aber, dass ich mir das id=irgendwas genausogut sparen könnte, weil diese formatierung immer als oberstes Gebot gehandelt wird.
Habe ich also keine id=.. geschrieben, wird es angezeigt. will ich diese formatierung nicht angezeigt bekommen muss ich mit neuer .xx drüberformatieren.

Das ist aber doch eigentlich nicht richtif so?
Was also habeich falsch verstanden?

grisse

  1. Hallo Vita,
    hier mein Vorschlag. Bin noch im Anfänger-Modus.
    Also, die externe Datei (die Du beispielsweise als "style.css" abspeicherst) könnte auch so aussehen:

    /* css-kommentar*/
    body {margin-top:0; margin-left:0; margin-right:0; margin-bottom:0; bgcolor="#ffffff"}
    td {font-family:Verdana, Helvetica,sans-serif; font-size:10px; color:#006600; align:left; valign:middle;} falls Tabellen in den Quellcode eingebaut sind
    p {font-family:Verdana, Helvetica,sans-serif; font-size:10px; color:#006600;}  für die übliche für den Fall, dass Du keinen best. Style ansprichst
    a:link,a:active,a:visited {font-family:monospace, Helvetica,Arial,sans-serif; color:#EEEEEE; text-decoration:none;font-weight:500;background-color:#6699CC;
      line-height:20px;padding:5px;}
    a:hover {font-family:Verdana, Helvetica,sans-serif; color:#6699CC;font-weight:500; background-color:#EEEEEE; line-height:20px;padding:5px;}
    .pfeil1 {font-family:monospace, Helvetica,Arial,sans-serif; color:#6699CC; text-decoration:none;font-weight:500;background-color:#6699CC;
      line-height:20px;padding:5px;} statt a.pfeil, oder ist das ein reservierter Begriff??
    .pfeil2 {font-family:Verdana, Helvetica,sans-serif; color:#6699CC;font-weight:500; background-color:#EEEEEE; line-height:20px;padding:5px;}
    .rote_schrift {color:#ff0000} --zu Testzwecken

    Im eigentlichen Quellcode, also der html-Datei:

    <html lang="de">
    <head>
    <LINK rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
    <table class="rote_schrift" width="95%">
    <tr>
     <td class="pfeil1" width="80%" align="center"><b>Vita1</b></td></tr>
     <tr>
        <td align="right" width="25%">
          <div align="center"><a href="http://vitas-page.de class="pfeil2">Meine Homepage</a></div>
        </td> </tr>
       <tr><td>wie sieht das aus?</td></tr> </table>

    <p> </p>
    <p>hier mal nur zum Ausprobieren,<span class="rote_schrift">was passiert! </span>
    </p>
    </body>

    Kannst es ja mal versuchen. Mir fallen gleich die Augen zu. Hoffe, Dir geholfen haben zu können.
      Grüße aus Köln
      Zümrüt

    1. hallo,

      Mal ganz abgesehen davon, dass es "a.pfeil:hover", "#menu1 a.pfeil" und "a:active" heißen sollte

      ups, ja stimmt.

      Das Komma bezieht sich auf den gesamten Selektor, nicht nur auf ein Element davon.

      oh mist, natürlich...
      Da wollte ich mir dann wohl doch zuviel Schreibarbeit ersparen ;-)

      Am Ende siehsts jetzt so aus:

      #menu1 a., #menu1 a:link,#menu1 a:active,#menu1 a:visited{
        font-family:monospace;helvetica,Arial;
        font-size:12px;
        color:#EEEEEE;
        font-weight:500;
        text-decoration:none;
        background-color:#6699CC;
        line-height:20px;padding:5px;
        }

      .pfeil{color:#6699CC;}

      #menu1 a:hover, #menu1 a.pfeil:hover{
       font-family:monospace;helvetica,Arial;
       color:#6699CC;
       font-weight:500;
       background-color:#EEEEEE;
       line-height:20px;padding:5px;
       }
      #menu1 * td {padding-top:19px;}

      Und tut genau was es soll, und auch nur da, wo es soll.

      @zümrüp
      Der pfeil ist ersteinmal nicht sichtbar und wird erst beim hover sichtbar und steht deshalb noch extra in einem <span>

      das

      <a href="http://vitas-page.de class="pfeil2">

      wird nicht funktionieren. Ich weiss auch nicht, ob das generell so ist, aber bei mir muss das wenn, dann

      <a class="pfeil2" href="http://www.vitas-page.de" >

      @forum

      Ist das generell so, dass das class=X an dieser stelle stehen muss?

      Danke für die prompten antworten,

      grüsse

      1. hi,

        das
           <a href="http://vitas-page.de class="pfeil2">
        wird nicht funktionieren. Ich weiss auch nicht, ob das generell so ist, aber bei mir muss das wenn, dann
           <a class="pfeil2" href="http://www.vitas-page.de" >
        Ist das generell so, dass das class=X an dieser stelle stehen muss?

        das obere kann ja auch nicht funktionieren, wenn du hinter der href-angabe das literal nicht wieder schliesst (es fehlt ein ") - so kann der browser nicht erkennen, dass nachfolgend ein neues attribut namens class folgt.

        gruss,
        wahsaga

  2. Hi,

    problem ist jetzt aber, dass ich mir das id=irgendwas genausogut sparen könnte, weil diese formatierung immer als oberstes Gebot gehandelt wird.

    Du hast für Dein CSS folgende Selektoren gewählt:

    #menu1 a
    a:link
    a:active1
    a:visited
    #menu1 a .pfeil
    #menu1 a:hover
    a:hover.pfeil

    Mal ganz abgesehen davon, dass es "a.pfeil:hover", "#menu1 a.pfeil" und "a:active" heißen sollte, hast Du u.a. alle Links der Seite verändert.

    Was also habeich falsch verstanden?

    Das Komma bezieht sich auf den gesamten Selektor, nicht nur auf ein Element davon.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes