Erster Versuch mit CSS

Zitat von basti1012

Und , geht es jetzt ?

Denke mal nicht.

Dann mach mal das eine # weg

Code

#
#nav ul {
    list-style: none;
}

da ist eins zu viel.

Zumindest beim schnellen testen hat das auch gestört und hat die Listenpunkte nicht ausgeblendet.

Also das erste # löschen.

Alles anzeigen

Jaaaaaa vielen Dank, jetzt hat es geklappt:-)

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.

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

#Seite {
    position: relative;
    min-height: 100%;
    width: 550px;
    margin: 0 auto;
    background-color: silver;
}

#Inhalt {
    background-color: orange;
    padding-bottom: 2em;
    
    .zeiger_zoom-in {
        cursor:zoom-in;
    }
}


#Fußbereich {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: yellow;
    height: 2em;
}

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

Freue mich über Antworten.

Liebe Grüße

Kevin

Zitat von Sempervivum

Code

#Inhalt {
    background-color: orange;
    padding-bottom: 2em;
    
    .zeiger_zoom-in {
        cursor:zoom-in;
    }
}

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

Code

#Inhalt {
    background-color: orange;
    padding-bottom: 2em;
}
.zeiger_zoom-in {
    cursor:zoom-in;
}

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

Code

#Inhalt .zeiger_zoom-in {
    cursor:zoom-in;
}

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.

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

#Seite {
    position: relative;
    min-height: 100%;
    width: 550px;
    margin: 0 auto;
    background-color: silver;
}

#Inhalt .zeiger_zoom-in {
cursor: zoom-in;
    background-color: orange;
    padding-bottom: 2em;
    }
#Fußbereich {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: yellow;
    height: 2em;
}

Zitat von m.scatello

Und wie sieht der HTML-Code dazu aus?

Hab ihn gesendet....

Heute ist nicht mein Tag zum lernen

Zitat von MrMurphy

HTML

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

Das ist kein HTML.

Code

.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....

Zitat von Sempervivum

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.

Zitat von Stef

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

Die Verlinkung ist ein Beispiel in dem E-Book.

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

Zitat von Sempervivum

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

body {
    cursor:zoom-in;
}

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?

Zitat von Sempervivum

Weißt Du schon, wie man CSS einbindet?

https://www.html-seminar.de/stylesheets_in_html_einbinden.htm

Ja, das schon, hab auch in Microsoft Visual Code zwei Dateien einmal .html und einmal .css

Nur, wo kommt der Mauszeiger hin? In der HTML Datei? kommt der in den Body Bereich?

Zitat von Sempervivum

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

Code

<div class="zeiger_zoom-in"></div>

im body.

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

Code

.zeiger_zoom-in {
    cursor:zoom-in;
    height: 200px;
}

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...