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...
Weißt Du schon, wie man CSS einbindet?
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?
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:
Codebody { 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?
Alles anzeigenHi,
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 http://www.html-seminar.de probiert, da zeigt visual Code ein Fehler an oder besser gesagt er ersetzt es dann eben mit "Class".de"
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.
HTMLwww. <html-seminar class="de"></html-seminar>Das ist kein HTML.
Code.zeiger_zoom-inDas 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....
Und wie sieht der HTML-Code dazu aus?
Hab ihn gesendet....
Heute ist nicht mein Tag zum lernen 
<!DOCTYPE html>
<html>
<title> Fußleiste immer unten</title>
<meta charset="utf-8">
<link href ="sticky-footer.css" rel="stylesheet">
</head>
<body>
<div id="Seite">
<div id="Inhalt">
<p>Inhalt</p>
<p>Inhalt</p>
<p>Letzte Zeile vom Inhalt</p>
</div>
<div id="Fußbereich">
www. <html-seminar class="de"></html-seminar>
</div>
</div>
</body>
</html>Hallo liebe community,
ich bin ja nun seit einigen Wochen "dabei" und lerne auch schon fleißig html schreiben und css seit neustem.
Mein Gedanke ist der, dass ich eventuell mein Hobby zum Beruf machen möchte, denn aktuell bin ich doch sehr frustriert mit meinem Job.
Nun hab ich kein Fachinformatik Studium oder eine Ausbildung in Informatik wie auch immer.
Die Frage ist: um anerkannt zu werden, um Jobs zu bekommen, um Referenzen zu haben, muss ich ja irgendwas nachweisen können.
"Wo oder für wen hast du denn schon was erstellt? "
Und um für ein kleines Unternehmen was zu erstellen wollen die doch Zertifikate sehen richtig?
Ich hab nun verschiedene Sachen raus gesucht im Internet:
Fernschule SGD: Geprüfter Web-Entwickler, das gleiche bei ILS.
Ist allerdings kein richtiges Zertifikat
Dann hab ich mit mal eine gemeinnützige Organisation die Website heißt Freecodecamp angeschaut, die würden auch Zertifikate ausstellen, ist ein 300 Stunden Kurs.
Ich soll dann noch ein Xing oder Linked Profil erstellen.....
Wie gehe ich am besten vor, damit ich die ersten Projekte dann annehmen kann?
Brauche ich Zertifikate gerade als Quereinsteiger?
Freue mich über Antworten
Liebe Grüße
Kevin
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;
}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
Alles anzeigenUnd , 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.
Jaaaaaa vielen Dank, jetzt hat es geklappt:-)
Stimmt, hab es in der HTML Datei ...
<!DOCTYPE html>
<html lang="de">
<head>
<link href="css-box-modell.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="navi">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="ueber-mich.htm">Über mich</a></li>
<li><a href="termine.htm">Termine</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
</body>
</html>Das öffnende <ul> fehlt
Wo? In der HTML Datei?
Ich habe eine Frage:
<!DOCTYPE html>
<html>
<head>
<title>Steuerung über CSS erstellen</title>
<meta charset="UTF-8">
<link href="css-box-modell.css" type="text/css" rel="stylesheet">
</head>
<div id="nav">
<li><a href="index.htm">Startseite</a></li>
<li><a href="profil.htm">Profil</a></li>
<li><a href="termine.htm">Termine</a></li>
<li><a href="Test.htm">Test</a></li>
</ul>
</div>
<body>
</html>Es soll laut Übung aus dem Buch eine Navigationsleiste werden.
Wenn ich nun den Code aus CSS einfüge, kommen links noch Aufzählungspunkte:
#nav {
width: 200px; /* Breite des Bereichs */
margin-top: 10px; /* Außenabstand oben */
margin-bottom: 10px; /* Außenabstand unten */
margin-left: 20px; /* Außenabstand links */
margin-right: 15px;
}
#nav li {
background-color: silver;
border-top: 1px black solid;
border-left: 25px orange solid;
border-bottom: 1px red solid;
border-right: 2px blue solid;
margin-top: 10px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
#
#nav ul {
list-style: none;
}Wie bekomme ich die weg?
Habe schon alles probiert
Ich verstehe leider nicht was du meinst.
Das war alles bei mir zwar linksbündig aber nicht komplett links sondern immer mit einem Abstand zum Bildschirmrand.
Ich musste also den text-indet der wohl im header war entfernen, jetzt ist alles komplett linksbündig und komplett am Rand vom explorer
An alle, vielen Dank, dass Ihr mir helft wo ihr könnt.
Eine tolle community.
Verwende deutlich längere und mehrere Absätze. Ich kopiere mir für Tests immer welche aus Wikipedia. Dann siehst du die Auswirkungen viel deutlicher. Zum Beispiel
Code<p>Schon 1920 verband die kolumbianische Fluggesellschaft SCADTA (Sociedad Colombo Alemana de Transportes Aereos) mit drei Flugzeugen vom Typ Junkers F 13 der Junkers Flugzeugwerke in Dessau die Hafenstädte Barranquilla und Cartagena entlang des Magdalenenstromes mit der kolumbianischen Hauptstadt Bogota. Auch wurde am 5. Juni 1925 eine europäische Wasserflugverbindung von Danzig nach Stockholm eröffnet.</p> <p>Die Städte Dresden, Magdeburg und Altona schlossen danach mit der Junkers Luftverkehr AG einen Vertrag, um ab 1925, zunächst für die Dauer von drei Monaten, einen regelmäßigen Luftverkehr auf der Elbe durchzuführen. Die Stadt Dresden kaufte die Maschinen und die Städte Altona und Magdeburg mussten die Selbstkosten des Betriebs in Höhe von 67.500 Reichsmark garantieren. Die Reichspost musste zusätzlich jeden Flug finanziell unterstützen.</p> <p>Die Junkers Flugzeugwerke bauten zwei Flugzeuge vom Typ F 13, die in der Königsberger Werft mit Schwimmern versehen wurden. Die Flugzeuge hatten die Kennzeichen D 272 und D 583 (auch Silbermöwe und Wildente genannt). Eine weitere Maschine mit dem Kennzeichen D 433 kam später hinzu. Nach der Umrüstung hatte jede Maschine nur noch Platz für vier statt sechs Passagiere. Am Sonntag, dem 9. August 1925 traf das erste Flugzeug in Dresden ein. Altona erhielt ebenfalls eine umgerüstete Maschine.</p>
Wenn du das letter-spacing besser sehen willst nimm zum Testen einfach deutlich höhere (übertriebene) Werte. Oder schreibe (wenn dein Wissen dazu bereits ausreicht) den Text zweimal hintereinander und weise nur einem das letter-spacing zu.
Vielen Dank für deinen Tipp.
Ich habe das mal ausprobiert:
<p>Die Bären gleichen sich im Körperbau. Ihr Körper ist massig und stämmig, der Kopf groß, und die Gliedmaßen sind eher kurz und sehr kräftig. Die Augen sind klein, die Ohren rund und aufgerichtet. Die meist langgestreckte Schnauze beherbergt je nach Art 40 oder 42 Zähne. Die Füße enden in fünf Zehen, die mit nicht einziehbaren Krallen versehen sind. Alle Bären sind Sohlengänger, wobei die Fußsohlen meist behaart sind; lediglich bei Arten, die oft auf Bäume klettern, wie den Malaienbären, sind die Fußsohlen nackt. Der Schwanz ist nur ein kleiner Stummel. Das Fell ist eher lang und bei den meisten Arten einfarbig, meist braun oder schwarz. Ausnahmen sind der Große Panda mit seiner auffälligen, schwarz-weißen Fellzeichnung und der weiße Eisbär. Bei mehreren Arten kann eine helle Fellzeichnung auf der Brust oder im Gesicht vorhanden sein.
Das Körpergewicht variiert zwischen 25 und 800 Kilogramm, wobei die Männchen stets deutlich schwerer als die Weibchen werden. Die Kopf-Rumpf-Länge beträgt 100 bis 280 Zentimeter.</p>Bei mir kommt es allerdings nicht als "Block" raus, sondern es verteilt sich auf die komplette Seite. Also nicht wie im "normalen" Buch wo es dann Absätze gibt.
Alles anzeigen
Bitte lösche zukünftig dein Eingangsthema nicht. Es kann sein, dass andere das gleiche Probleme haben -und wenn dein Eingangspost nicht mehr da ist ergibt dies alles keinen Zusammenhang mehr.
Vielen Dank!
Mod: Eingangsthema wiederhergestellt.
Schöne Grüße
ooooh entschuldige bitte, das war nicht meine Absicht ....kommt nie wieder vor.
Hinter dem Link zur design.css fehlt die schließende Klammer.
Tip: Mach im Quelltext keine Absätze, die dort nicht hingehören.
Wie meinst du das?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>
CSS zum TESTEN
</title>
<link href="design.css" rel="stylesheet">
</head>
<body>
<h1>Wichtigste Überschrift</h1>
<p><b><i>Jetzt kommt ein Absatz</i></b></p>
<h2>TEST mit einrücken von Sätzen</h2>
<p>Dies ist nun ein test da ich herausfinden möchte
ob ich das auch hinbekommen möchte, was ich auf der Website
html-semniar.de lerne</p>Das ist jetzt die Website, habe das auch hinbekommen mit dem einrücken von Texten und so weiter.
Diese Lücken zwischen "Jetzt kommt ein Absatz" und h2 habe ich für mich wegen der Übersicht gemacht, macht man dies nicht?
Nun habe ich hier noch den css Code:
h1 {
color: purple;
font-size: 50px;
text-indent: 1.5em;
font-family: Arial, Helvetica, sans-serif
}
p{
text-indent: 1.5em;
}
h2 {
color: mediumblue;
font-size: 35px;
font-family: Arial, Helvetica, sans-serif;
}Was ich also geschafft habe ist, die Überschrift "TEST mit einrücken von Sätzen" in Blau zu färben , was ich aber nicht hinbekomme ist a) zu testen das der untere Absatz wieder nach Links geht und die abstände zwischen den Buchstaben vielleicht etwas größer ist: letter-spacing.