Erster Versuch mit CSS

  • Hallo liebe Community,


    ich schlage mich gerade mit den Maus-Zeigern rum.


    Im Buch steht, dass man verschiedene Mauszeiger nehmen kann :-) So hab ich einfach mal die Lupe versucht weil ich ein Blinder Bär bin.

    Nur kommt bei mir keine Lupe, hab ich da wieder was falsch gemacht?


    Freue mich über Antworten.


    Liebe Grüße


    Kevin

  • Code
    1. #Inhalt {
    2. background-color: orange;
    3. padding-bottom: 2em;
    4. .zeiger_zoom-in {
    5. cursor:zoom-in;
    6. }
    7. }

    So kannst Du CSS nicht verschachteln. Wenn Du es so umstellst, sollte es funktionieren:

    Code
    1. #Inhalt {
    2. background-color: orange;
    3. padding-bottom: 2em;
    4. }
    5. .zeiger_zoom-in {
    6. cursor:zoom-in;
    7. }

    Oder, falls es dir darauf ankommt, dass das .zeiger_zoom-in innerhalb von #Inhalt liegt, so:


    Code
    1. #Inhalt .zeiger_zoom-in {
    2. cursor:zoom-in;
    3. }
  • Code
    1. #Inhalt {
    2. background-color: orange;
    3. padding-bottom: 2em;
    4. .zeiger_zoom-in {
    5. cursor:zoom-in;
    6. }
    7. }

    So kannst Du CSS nicht verschachteln. Wenn Du es so umstellst, sollte es funktionieren:

    Code
    1. #Inhalt {
    2. background-color: orange;
    3. padding-bottom: 2em;
    4. }
    5. .zeiger_zoom-in {
    6. cursor:zoom-in;
    7. }

    Oder, falls es dir darauf ankommt, dass das .zeiger_zoom-in innerhalb von #Inhalt liegt, so:


    Code
    1. #Inhalt .zeiger_zoom-in {
    2. cursor:zoom-in;
    3. }

    Nein, funktioniert beides nicht.
    Bei dem ersten verschwindet unten der gelbe Balken und bei dem zweiten verschwindet oben der Orangefarbene Balken aber der gelbe bleibt.



    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Computerbaer () aus folgendem Grund: Quellcode nochmals nach Verbesserung eingefügt

  • HTML
    1. www. <html-seminar class="de"></html-seminar>

    Das ist kein HTML.


    Code
    1. .zeiger_zoom-in

    Das funktioniert nur wenn es im HTML-Quelltext ein Element mit der Klasse "zeiger_zoom-in" gibt. So ein Element gibt es in deinem Quelltext aber nicht.

  • HTML
    1. www. <html-seminar class="de"></html-seminar>

    Das ist kein HTML.


    Code
    1. .zeiger_zoom-in

    Das funktioniert nur wenn es im HTML-Quelltext ein Element mit der Klasse "zeiger_zoom-in" gibt. So ein Element gibt es in deinem Quelltext aber nicht.

    Wie wird er dann richtig geschrieben?


    Und wenn ich die Website so eintragen möchte wie es im Beispiel gezeigt wird, funktioniert das irgendwie nicht, ich hab das schon mit Leerzeichen zwischen www. probiert....

  • Hi,


    magst du eine Verlinkung zu unserem HTML Forum setzen?


    Wenn ja muss diese im a-Tag erfolgen. Wenn nicht, gibt es kein HTML-Tag welches so heißt.


    Und den Zoom kannst du mittels transform als hover-Effekt inklusive transition erstellen welche den Effekt verlangsamt darstellt.


    Grüße

  • Beschreibe doch Mal, was Du genau vor hast: Bei welchem Element soll der Mauszeiger auf "zoom-in" gehen? Wie soll dieses Element aussehen?

    Ich habe hier doch diese E-Books heruntergeladen, und da steht auf einer Seite, dass man auch Cursor einsetzen kann, es steht aber eben nur die ich glaube CSS Datei drin.


    zeiger-zoom_in

    cursor: zoom.in oder so ähnlich.


    Nun dachte ich, dass wenn ich das in der CSS Datei speichere, dass dann eben diese Lupen Funktion zu sehen ist.


    Das ich aber auch noch was in der HTML Datei eintragen muss, das weiß ich nicht.

  • Die Verlinkung ist ein Beispiel in dem E-Book.


    Die habe ich mit http://www.html-seminar.de probiert, da zeigt visual Code ein Fehler an oder besser gesagt er ersetzt es dann eben mit "Class".de"

  • Um das CSS für den Cursor zu definieren, brauchst Du ja einen Selektor, der angibt, für welches Element die Regel gelten soll. Bei dem CSS in Posting #42 und #43 müsste das ein Element, z. B. ein div, mit der Klasse "zeiger_zoom-in" innerhalb eines anderen Elementes mit der ID "Inhalt" sein.

    Um einen schnellen Einstieg zu bekommen, versuche aber erst Mal, die Regel auf das body-Element anzuwenden:

    Code
    1. body {
    2. cursor:zoom-in;
    3. }
  • Um das CSS für den Cursor zu definieren, brauchst Du ja einen Selektor, der angibt, für welches Element die Regel gelten soll. Bei dem CSS in Posting #42 und #43 müsste das ein Element, z. B. ein div, mit der Klasse "zeiger_zoom-in" innerhalb eines anderen Elementes mit der ID "Inhalt" sein.

    Um einen schnellen Einstieg zu bekommen, versuche aber erst Mal, die Regel auf das body-Element anzuwenden:

    Code
    1. body {
    2. cursor:zoom-in;
    3. }

    Das ist der Artkel, oder die Seite die ich meine:

    https://www.html-seminar.de/css-cursor-mauspfeil.htm


    Da sind verschiedene Mausanzeiger, die Aufgabe oder Übung ist, einen dieser Mausanzeiger einzusetzen, am besten die Lupe.


    Wie und vor allem wo, muss ich das also in die HTML und in die CSS Datei eintragen?


    :-)

  • Du brauchst nur einen Container, auf den Du die CSS-Regel anwenden kannst. Also z. B.:

    Code
    1. <div class="zeiger_zoom-in"></div>

    im body.


    Und das CSS trägst Du in deine CSS-Datei ein:

    Code
    1. .zeiger_zoom-in {
    2. cursor:zoom-in;
    3. height: 200px;
    4. }

    Wenn der Container keinen Inhalt hat, musst Du ihm eine Höhe geben, weil die Höhe sonst 0 ist und der Container unsichtbar.

  • Du brauchst nur einen Container, auf den Du die CSS-Regel anwenden kannst. Also z. B.:

    Code
    1. <div class="zeiger_zoom-in"></div>

    im body.


    Und das CSS trägst Du in deine CSS-Datei ein:

    Code
    1. .zeiger_zoom-in {
    2. cursor:zoom-in;
    3. height: 200px;
    4. }

    Wenn der Container keinen Inhalt hat, musst Du ihm eine Höhe geben, weil die Höhe sonst 0 ist und der Container unsichtbar.

    Vielen, vielen Dank.


    Jetzt habe ich es zumindest geschafft mit der Lupe...