CSS für Tag Cloud funktioniert nicht

    Hallo zusammen,

    ich habe eine Frage bzgl. der Strukturierung einer CSS für einen Tag Cloud Quellcode, welcher derzeit noch nicht die Formatierung aus der ausgelagerten CSS Datei übernimmt:

    HTML Datei:

    <ul id="cloud">
    <li><a href="/aaa.htm" class="tag4">Thema 00</a></li>
    <li><a href="/bbb.htm" class="tag3">Thema 11</a></li>
    <li><a href="/ccc.htm" class="tag7">Thema 22</a></li>
    <li><a href="/ddd.htm" class="tag2">Thema 33</a></li>
    <li><a href="eee.htm/" class="tag2">Thema 44</a></li>
    </ul>

    CSS Datei:

    /* Tag Cloud */

    cloud
    {
    padding:2px;
    line-height:3em;
    text-align:center;
    margin:0;
    }
    cloud a
    {
    padding:0px;
    }

    cloud li
    {
    display:inline;
    }

    cloud.tag1
    {
    font-size:0.7em;
    font-weight:100;
    }
    cloud.tag2
    {
    font-size:0.8em;
    font-weight:200;
    }
    cloud.tag3
    {
    font-size:0.9em;
    font-weight:300;
    }
    cloud.tag4
    {
    font-size:1.0em;
    font-weight:400;
    }
    cloud.tag5
    {
    font-size:1.2em;
    font-weight:500;
    }
    cloud.tag6
    {
    font-size:1.4em;
    font-weight:600;
    }
    cloud.tag7
    {
    font-size:1.6em;
    font-weight:700;
    }
    cloud.tag8
    {
    font-size:1.8em;
    font-weight:800;
    }
    cloud.tag9
    {
    font-size:2.2em;
    font-weight:900;
    }
    cloud.tag10
    {
    font-size:2.5em;
    font-weight:900;
    }

    Es wäre schön wenn mir hier jemand eine Erklärung für das nicht funktionieren bzw. einen Korrekturvorschlag machen könnte.

    Schon vorab vielen Dank.

    Chris

    Du willst nicht einen Tag namens "cloud" ansprechen sondern die ID "cloud". Also musst Du im CSS überall vor "cloud" vorkommt ein # voranstellen.

    Code
    #cloud

    Weiterhin geht dadurch dann natürlich das hier auch nicht mehr:

    Code
    cloud.tag1

    Nochmal: Du hast kein Tag namens "cloud". Das Element mit der Klasse "tag1" befindet sich innerhalb des Elements, welches die ID "cloud" hat. Also musst Du es so schreiben:

    Code
    #cloud .tag1

    Leerzeichen beachten.

    Schau dir bitte die Grundlagen für CSS-IDs und -Klassen nochmal an.

    Vielen Dank für die Antwort.

    Ich habe auf den # verzichtet, da das CSS-Format in der Datei format.css ausgelagert ist und somit entfällt doch #, oder?

    Ich habe in den CSS Grundlagen gesehen, dass man "ID" und "class" kombinieren kann, indem mann zunächst die ID nennt und dann das class mit einem Punkt, also:

    cloud.tag1

    Wie müsste es dann korrekt heißen, wenn o.g. Definition nicht korrekt ist?

    Chris

    Zitat von Unregistriert

    Ich habe auf den # verzichtet, da das CSS-Format in der Datei format.css ausgelagert ist und somit entfällt doch #, oder?

    Nein. Wo steht denn so ein Unsinn? :-o

    Zitat

    Ich habe in den CSS Grundlagen gesehen, dass man "ID" und "class" kombinieren kann, indem mann zunächst die ID nennt und dann das class mit einem Punkt, also:

    cloud.tag1

    Das trifft auf ein Element mit einer ID und einer Klasse zu. Beispiel:

    HTML
    <ul id="what" class="where">
    Code
    #what.where {}

    Leseart: CSS-Eigenschaften gelten für ein Element mit der ID "what" und der Klasse "where".

    Für deinen Fall ist das also der falsche Weg.

    Zitat

    Wie müsste es dann korrekt heißen, wenn o.g. Definition nicht korrekt ist?

    Das habe ich dir oben schon geschrieben.

    ...alles klar, habe ich nun getestet und es funktioniert auch.

    Noch eine Frage. Wenn ich body oder h1 auslagern möchte, dann benötige ich aber kein #, sondern es dann so aus, oder?

    body
    {
    text:darkblue;
    link:darkblue;
    vlink:cornflowerblue;
    alink:cornflowerblue;
    }

    h1
    {
    margin:0cm;
    margin-bottom:.0001pt;
    page-break-after:avoid;
    font-size:12.0pt;
    font-family:"Arial";
    font-weight:bolder;
    font-style:normal;
    color:#333399;
    }

    a:hover
    {
    color:blue;
    text-decoration:none;
    }

    Wenn ich in den o.g. codes dort ein # in die ausgelagerte format.css einbringe, dann ist die Formatierung nicht mehr korrekt.

    Nochmals vielen Dank für die Rückinfo.

    Gruß

    Chris

    Noch (ein letztes Mal) für dich: Bitte lies dir nochmal die Unterschiede zwischen ID-, Klassen- und Element-Selektoren durch.

    Wenn Du ein Element ansprechen willst, dann verwende nur den Elementenamen (wie h1).
    Wenn Du eine ID ansprechen willst, dann verwende #idname (wie h1#idname).
    Wenn Du eine Klasse ansprechen willst, dann verwende .klassename (wie h1.klassename).

    Und das ist unabhängig davon, ob Du den CSS-Code auslagerst oder nicht. Das gilt immer.

    Vielen Dank, das ist die Logik, nach der ich gesucht hatte.

    Thread gelöst!

    Gruß

    Chris