Der SchattenClan verändert sich - doch wie tief gehen diese Veränderungen?
 
StartseiteStartseite  KalenderKalender  FAQFAQ  SuchenSuchen  MitgliederMitglieder  NutzergruppenNutzergruppen  AnmeldenAnmelden  LoginLogin  
Teilen
 

 HTML-CSS-Kurs

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten 
AutorNachricht
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeDi Jul 31, 2018 8:01 pm




Pumafells

Html-css-kurs


Willkommen und Ablauf
Teilnehmerliste
1. Stunde: Fachbegriffe
Aufgabe und Ausblick auf 2. Stunde

~Willkommen und Ablauf~
Hallo Gast und herzlich Willkommen zu Pumafells HTML-CSS-Kurs!
In meinem Kurs lernt ihr Grundlagen in der HTML-'Programmierung' und Bearbeitung mit CSS.
Ziel des Kurses wird es sein, dass ihr selbstständig eine RPG-Postvorlage erstellen könnt!
Anmelden könnt ihr euch ganz einfach, indem ihr hier einen Beitrag mit "Ich nehme teil." o.ä. postet.

Ich habe lange überlegt, wie man so ein Tutorial am Besten aufbaut und habe immer noch keine richtige Struktur gefunden.
So ein Tutorial macht man am Besten als Video; so habe ich das nämlich gelernt. Normalerweise hätte ich euch einfach auf die Video-Reihe verwiesen, doch dort wird viel mehr erzählt, als wir hier für eine Postvorlage benötigen. Falls ihr die trotzdem verlinkt haben möchtet, meldet euch einfach in einem Beitrag.

"Kurs"-Stunden versuche ich regelmäßig 2x mal pro Woche zu posten, damit genug Zeit für Fragen bleibt und ihr nicht so viel verpasst, solltet ihr mal nicht da sein. Fragen beantworte ich gern sofort und auch welche, die nicht zum aktuellen Thema passen.
Wie viele Stunden es geben wird, weiß ich noch nicht genau, aber sehr viele werden es nicht sein, da wir ja schnell unser Kurs-Ziel erreichen wollen!

~Teilnehmerliste~
Tsuki
Sumpfohr

~1. Stunde: Fachbegriffe~
Begriff HTML und Syntax
HTML (Hypertext Markup Language) bezeichnet eine Beschreibungssprache, die Hypertextdokumente im World Wide Web mittels Tags codiert. Diese Tags werden durch
Code:
<..>
geöffnet und duch
Code:
</..>
geschlossen.
Also wie im Foren-BB-Code, nur dass statt eckige Klammern [] kleiner/größer <> benutzt werden.
So finden sich viele Ähnlichkeiten beim Formatieren von Texten. Kursiv setzt man wie im BB-Code mittels
Code:
<i>...</i>
Selbiges für Unterstrichen (u) und fett (b).

Begriff CSS und Syntax
CSS (Cascading Style Sheets) ist eine Style-Sheet bzw. Gestaltungssprache, mit der HTML-Tags angesprochen und gestaltet werden können. Die Syntax unterscheidet sich von HTML. Ein CSS-Tag wird mittels
Code:
<style>...</style>
eingeführt, der meistens unter dem zu gestalteten und fertigen HTML-Objekt sitzt. Normalerweise ist das CSS-Stylesheet ein extra Dokument, welches in HTML implementiert wird, doch wir programmieren keine ganze Website.
Daher benutzen wir am Ende unserer Postvorlage den Style-Tag, um CSS einzuführen.
Um nun ein Objekt, bspw. einen Block (div), den wir so Einfügen:
Code:
<div>Inhalt</div>
anzusprechen, schreiben wir einfach innerhalb unseres Style-Tags den Namen den Objekt-Tags (in diesem Fall div).
Code:
<style>div</style>
Die Gestaltung des div's kann nun beginnen. Alles, was wir nun mit dem div tun wollen, kommt in geschweifte Klammern {}:
Code:
<style>div {}</style>
Eine Eigenschaft setzen wir folgerndermaßen:
Code:
Attribut: Beschreibung;
Anttribute sind bspw. Hintergrund-Farbe, Schriftart, Textschattten, Sichtbarkeit, Breite, Höhe, etc.
Beschreibung dann die jew. Farbe, Schriftart, Farbe des Textschattens, Pixel- oder Prozentangabe bei Breite/Höhe.
Abgetrennt werden Attribute mittels Semikolon ;
Einen Container mit einem schwarzen Hintergrund und weißer Schrift, würde also so aussehen:
Code:
<div>weißer Text auf schwarzem Hintergrund</div>
<style>div {color: white; background-color: black}</style>

Klassen und ID's
Wir verwenden unsere Postvorlagen innerhalb einer HTML-Website, die fertig programmiert und gestaltet ist.
Um nun die größten Fehlerquellen zu vermeiden, benutzen wir Klassen und ID's.
Denn das Forum hat ein eigenes CSS-Stylesheet, wo der div bereits fest gestaltet ist. Das heißt, mein Beispiel-div funktioniert nicht, wie er soll. (Ihr könnt den Code ja mal kopieren und auf 'Vorschau' klicken, dann seht ihr, was ich meine, aber bitte nicht auf 'Senden' gehen!
Damit wir also das Forum nicht neu gestalten, benutzen wir Klassen (ID's eher nicht).
Mittels Klassen und ID's geben wir unseren div's eigene Namen, sodass wir gezielt diesen div ansprechen. Das macht man folgendermaßen:
Code:
<div class="bsp">weißer Text auf schwarzem Hintergrund</div>
class beschreibt eine Klasse und id eine ID.
Der Unterschied zwischen ID und Klasse ist folgender:
Eine Klasse wird benutzt, wenn wir mehrere Objekte mit demselben Namen haben. ID's werden nur benutzt, wenn wir das Objekt genau einmal auf der gesamten Seite verwenden. ID's benutzen wir also nicht, weil wir ja die Post-Vorlage oft benutzen und nicht nur einmal.
Meinen Beispiel-Div kann ich also statt eine Klasse eine ID zuweisen:
Code:
<div id="bsp">weißer Text auf schwarzem Hintergrund</div>
Nun kommen wir dazu, die Klassen bzw. ID im CSS anzusprechen. Klassen rufen wir mittels .name und ID mittels #name auf. Also so:
Code:
<div class="bsp">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp {color: white; background-color: black}</style>
Code:
<div id="bsp">weißer Text auf schwarzem Hintergrund</div>
<style>#bsp {color: white; background-color: black}</style>

Nun funktioniert das Beispiel auch:
weißer Text auf schwarzem Hintergrund

Tipps am Rande
Im Internet kann man ganz einfach das finden, was man braucht. Schaut also bitte vorher im Internet selbst nach, wie man einen Text linksbündig macht, bevor ihr hier fragt.
Euer bester Freund bei HTML und CSS wird sowieso Google sein. Habt ihr die Grundlagen drauf und auch Spaß daran, fällt euch das richtige Erlernen sehr leicht.
Es ist also ein learning-by-doing, weshalb es mir schwerfällt, andere darin zu unterrichten^^
Ein kleiner Tipp zum Schluss: Ich habe viel gelernt, indem ich im Internet auf ein Objekt mit Rechtsklick auf "Element untersuchen" gegangen bin. Rechts am Bildschirm-Rand findet ihr dann den Aufbau des Objekts mit den jew. CSS-Gestaltungen, die ihr De/aktivieren könnt, um so zu schauen, was passiert (wenn ihr die Seite neu ladet, ist sie natürlich wieder so, wie sie vom Entwickler gestaltet wurde, ihr könnt also nichts kaputt machen xD).

~Aufgabe und Ausblick auf 2. Stunde~
So, das wäre die erste Stunde gewesen (Puh, ganz schön viel).
Also gibt es auch schon die erste Hausaufgabe:
Erstellt einen div mit einem von euch ausgewählten Klassennamen und Inhalt und ändert die Schriftgröße in 20px.
Gebt außerdem den Code an, damit ich sichergehen kann, dass ihr nicht geschummelt habt.
Viel Spaß!

In der nächsten Stunde werden wir tiefer in die Thematik der divs gehen und weitere Tags kennenlernen.
Außerdem werden wir dann anfangen, Elemente ineinander, untereinander und nebeneinander zu setzen.
  

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Tsuki
Tsuki
Junger Krieger

Anzahl der Beiträge : 335
Anmeldedatum : 16.07.18
Alter : 17
Ort : in my own creative world ~

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeMi Aug 01, 2018 3:21 am

Hey Pumafell,

Zuallererst: Ich nehme teil. Wäre ja schön blöd, wenn ich nach einer Art Kurs frage, einer erstellt wird und ich nicht mitmache ;D

Ich finde es klasse, dass du dir extra die Zeit für uns nimmst, diesen Kurs hier zu führen ^^
Ich kann mir vorstellen, dass es nicht einfach ist, das alles verständlich zu erklären und zu vermitteln, das dauert bestimmt seine Zeit.
Daher ein dickes Danke, dass du dir die Mühe machst :3
Ich finde die erste Stunde schon sehr hilfreich und hab jetzt endlich mal ein paar Dinge verstanden ^^

Ich bin zurzeit am Handy, hab mich aber trotzdem mal kurz drangesetzt. Bezüglich des Codes habe ich mich an deinem Beispiel und einer für mich erstellten Postingvorlage orientiert (nur um rauszufinden, wie man Schriftgröße reinschreibt xD), ich hoffe, das zählt nicht als schummeln? owo

Naja, hier sind meine beiden Versuche, bze das erste war ein Versuch, das zweite war mehr zum Einprägen gedacht ^^"

Let's try if that actually works.



Ui, it worked, I'm surprised.



Code:
<div class="firsttry">Let's try if that actually works.</div>
<style>.firsttry {color: pink; background-color: black; font-size:20px}</style>

<div class="secondtry">Ui, it worked, I'm surprised.</div>
<style>.secondtry {color: yellow; background-color: green; font-size:20px}</style>

Ich freue mich schon auf die nächste Stunde ^-^

Liebe Grüße
~Tsuki

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
"Honestly, if you were any slower, you'd be going backwards." ~Draco Malfoy

"We are Cubans. We don't get divorced, we dieee!" ~Lydia Alvarez

"Your favourrite book is Chamber of Secrets, why can't you keep them?" ~Elena Alvarez
Nach oben Nach unten
Benutzerprofil anzeigen
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeMi Aug 01, 2018 2:00 pm

Vielen Dank für den schönen Kurs, du machst das echt total verständlich und ich bin gerne mit dabei :)

This is the story of my pony



Und ich bin jetzt mal ganz böse und mach Tsuki nach, indem ich ebenfalls zwei kleine Textchen mach - auch damit ich es mir merke ^^'

Story of my big fat pony



Code:

<div class="littlestory">This is the story of my pony</div>
<style>.littlestory {color: #E6E0F8; background-color: #4C0B5F; font-size: 20px}</style>

<div class="bigfatpony">Story of my big fat pony</div>
<style>.bigfatpony {color: #0000FF; background-color: #CED8F6; text-size: 20px}</style>

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Aug 03, 2018 3:55 pm




Pumafells

Html-css-kurs


Feedback zur 1. Aufgabe
2. Stunde: Div's und weitere Tags
Aufgabe und Ausblick auf 3. Stunde

~Feedback zur 1. Aufgabe~
Super, ihr beiden, ihr habt das toll gemacht!
Freut mich auch, dass ihr den Kurs gut findet; bei Verbesserungsvorschlägen einfach melden^^
@Tsuki schrieb:
Bezüglich des Codes habe ich mich an deinem Beispiel und einer für mich erstellten Postingvorlage orientiert (nur um rauszufinden, wie man Schriftgröße reinschreibt xD), ich hoffe, das zählt nicht als schummeln? owo
Mit Schummeln meinte ich, dass ihr nicht einfach den BB-Code für die Schriftgröße nehmt.^^
Du hast genau das gemacht, was ich euch indirekt auch als Aufgabe gegeben habe: Selbstständig rausgesucht, wie man das macht. Wie gesagt, das ist auch sehr wichtig.
Da also die erste Aufgabe sehr einfach war, können wie die Schwierigkeit bei der nächsten Aufgabe etwas erhöhen.

~2. Stunde: Div's und weitere Tags~
Vorab: Diese Stunde wird etwas mehr HTML-lastig sein. Mit CSS werden wir uns aber nächste Stunde mehr beschäftigen.
Div's'
'Div' kann man ganz einfach mit 'Container' übersetzen. Der Grund dafür ist die voreingestellte Größe; wie ihr selbst schon mitgekommen habt, zieht sich der Div über die gesamte Breite und ist nicht nur so lang wie euer Text. Jeder weitere Div (oder allgemein jedes weitere Element), den ihr einfügt, wird automatisch darunter gesetzt. Das liegt daran, dass die standardmäßige Anzeige des Div's block ist. Also die Eigenschaft: display: block
block bedeutet eben, dass der gesamte Block angezeigt und auch benutzt wird.

Display-Eigenschaften

block (Div nimmt gesamte Breite ein)
Die Eigenschaft klingt vielleicht blöd, doch dank ihr können wir den Div wunderbar formatieren; ihm also eine feste Höhe und feste Breite geben:
Code:
<div id="bsp0">weißer Text auf schwarzem Hintergrund</div> Dahinter kann jedoch nichts geschrieben werden.
<style>#bsp0 {color: white; background-color: black; display: block; height: 100px; width: 200px}</style>

weißer Text auf schwarzem Hintergrund
Dahinter kann jedoch nichts geschrieben werden.


inline (Div ist nur so breit und groß wie der Inhalt):
Code:
<div id="bsp1">weißer Text auf schwarzem Hintergrund</div> Dahinter kann etwas geschrieben werden.
<style>#bsp1 {color: white; background-color: black; display: inline; height: 20px}</style>

weißer Text auf schwarzem Hintergrund
Dahinter kann etwas geschrieben werden.

die Eigenschaft ignoriert also Formatierungen wie Höhe und Breite.

none (Block samt Inhalt wird nicht angezeigt):
Code:
<div id="bsp2">weißer Text auf schwarzem Hintergrund</div> Dahinter kann wieder etwas geschrieben werden.
<style>#bsp2 {color: white; background-color: black; display: none}</style>
weißer Text auf schwarzem Hintergrund
Dahinter kann wieder etwas geschrieben werden.
Wozu das gut sein soll? Kommt in der nächsten (oder übernächsten) Stunde :)

inherit (Div nimmt display-Eigenschaft von Mutterelement an):
Das funktioniert nur, wenn ihr zwei Divs habt, die ineinander sitzen und dem Mutter-Element eine display-Eigenschaft gebt. Mittels display: inherit beim Tochter-Element, gebt ihr diesem die display-Eigenschaft des Mutterelements. Quasi Vererbung.
Benutze ich persönlich nicht häufig, aber vielleicht ihr.

Es gibt noch weitere Display-Eigenschaften, doch diese benutze ich selbst auch nicht und sind auch nicht zwingend notwendig.

span-Tag
Ein Span, der so eingefügt wird:
Code:
<span>...</span>
ist dem Div ähnlich, doch wenn ich ihn einfüge, sieht man schon den Unterschied:
Weißer Text auf schwarzem Hintergrund Dahinter kann wieder etwas stehen.
Der Span hat die Standard-Eigenschaft display: inline. Dies ist für Posting-Vorlagen sehr nützlich, also ein wichtiger Tag.
Viel mehr gibt es dazu eigentlich nicht zu sagen, Spans verwendet man hauptsächlich, um einen Text zu umgeben.

a-Tag
Der a-Tag ist unser Hyperlink-Tag, mit dem man Links einfügen kann. Dabei funktioniert er nicht so:
Code:
<a>http://damascenon.forumieren.de</a>
http://damascenon.forumieren.de
Er sieht zwar wie ein Link aus, doch man kann nicht darauf klicken.
Um einen funktionierenden Link einzufügen, brauchen wir im Öffnungstag den Link:
Code:
<a href="http://damascenon.forumieren.de">Name des Links</a>
also der Link muss bei href="" eingefügt werden (href = hyper reference (Hyperlink))

img-Tag
Mithile des img (Image)-Tags kann man, wie der Name schon sagt, Bilder einfügen.
Dieser Tag funktioniert ebenfalls etwas anders, denn es gibt keinen Öffnungs- und Schließ-Tag, sondern einen 'einsilbigen Tag':
Code:
<img />
Um jetzt ein Bild einzufügen, benutzen wir im Tag src="" (src = source), wo die Bildadresse reinkommt:
Code:
<img src="" />


center-Tag
Mithilfe des Center-Tags werden alle Elemente innerhalb des Tags zentriert. Also alle Divs, Spans, Bilder.
Eingefügt wird er wie üblich:
Code:
<center>...</center>

Kommentar-Tag
Der ist nicht zwingend notwendig, aber auch ganz cool, falls ihr Probleme dabei habt, euren Code über längeren Zeitraum zu verstehen.
Der Kommentar-Tag ermöglicht es euch, Kommentare in euren Code einzufügen, die später nicht angezeigt werden.
Eingefügt wird er so:
Code:
<!--Inhalt eures Kommentars-->

wichtig zu beachten: innerhalb des style-Tags, der CSS einführt, funktioniert der Tag nicht!
Der CSS-Befehl für Kommentare sieht wie folgt aus:
Code:
/* Inhalt eures Kommentars */

Tipps am Rande
Allen neuen Tags, die wir heute kennen gelernt haben, können Klassen und IDs zugewiesen und in CSS bearbeitet werden!
So können wir dem center-Tag auch sagen, er soll alle Elemente rechts platzieren, wobei der Sinn des Tags natürlich verloren geht.

~Aufgabe und Ausblick auf 3. Stunde~
Wie angekündigt heute mal etwas schwereres:

1.) Theorie:
Frage: Worin liegt der Unterschied zwischen dem center-Tag und der CSS-Eigenschaft: text-align: center? (ggf. ausprobieren)
Frage: Wie fügt man dem Bild einen Link hinzu? (Tipp: Bild im Link)

2.) Praxis/Anwendung:
Erstellt einen div mit einer selbst-gewählten Hintergrundfarbe und fügt dort ein Bild und darunter einen Text hinzu.
Tipp: Dem Div eine feste Breite und Höhe geben, Bild ebenfalls eine Höhe und Breite geben.
Gebt außerdem den Code an. Bei Fragen immer her damit :D
Viel Spaß!

Wie angekündigt werden wir uns nächste Woche (Diesntag) mehr mit CSS auseinandersetzen und etwas zu Farben, Schriftarten, Textschatten, Positionierung und vielem mehr machen!
Nach der nächsten Stunde können wir sogar unsere erste Posting-Vorlage erstellen!
  

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Aug 03, 2018 6:12 pm

1.)
- Der center-Tag zentriert seinen gesamten Inhalt. Die CSS-Eigenschaft (text-align: center) wird einem Element/Container zugeordnet und zentriert den Text mittig in/von diesem.

- Wie du so schön als Tipp gibst: Indem man das Bild in die "Beschreibung" des Links packt.
Also:
Code:
<a href="http://warriors-cats-rpg.aktiv-forum.com/t3897-froschjunges-fc-annehmbar?highlight=froschjunges"><img src="https://i.imgur.com/skdoofO.jpg"/></a>

2.)




Froschjunges

Picture ©️ circlejourney





Code:
<center><div class="froschliebling">

<img style="height: auto; width: 280px;" src="https://i.imgur.com/h9mdqRX.jpg"/>

<span class="froschlieblingüberschrift">Froschjunges</span>

<span class="froschlieblingcopyright">Picture ©️ </span><a style="color: #CEF6CE; font-size: 10px;" href="http://circlejourney.net">circlejourney</a></div>

<style>.froschliebling {color:#0B6121; background-color: #04B404; display: block; height: 460px; width: 320px} .froschlieblingüberschrift {font-family: 'Comic Sans MS'; font-weight: bold; font-size: 30px;"} .froschlieblingcopyright {font-size: 9px}</style>
</center>

Ich hätte noch zwei kleine Fragen:
Warum wird "Picture (c)" nicht in der angegebenen Größe angezeigt?
Habe ich span, div und die Eigenschaften des Links richtig angegeben und genutzt?
Für den Link habe ich mich am Bild orientiert, wovon ich den Code wiederrum auch meinen Postvorlagen habe ^^

War wieder eine tolle Stunde :D

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Aug 03, 2018 8:47 pm

@Sumpfohr
Man merkt, du hast dich schon ein wenig mit HTML und CSS beschäftigt^^

Zu deiner ersten Frage: Da hat sich ein fieser kleiner Tippfehler eingeschlichen in der Zeile:
Code:
.froschlieblingüberschrift {font-family: 'Comic Sans MS'; font-weight: bold; font-size: 30px;"}

Das " am Ende macht dir den nachfolgenen CSS-Code (der nur aus dem Copyright-Span besteht) kaputt.
Einfach entfernen und schon ist der Span 9px hoch^^

Und zur zweiten Frage:
Ich sehe jedenfalls keine Fehler, demzufolge alles richtig benutzt
Auch interessant, dass du dem Bild und dem Link gleich im Tag einen Style gegeben hast.
Das wollte ich mit euch in der nächsten Stunde machen :DD

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeSa Aug 04, 2018 2:16 pm

Joa... Wobei ich bisher nur Postingvorlagen irgendwie verändert habe. xD Und ich hab mal mit einem Editor die Postingvorlage von Raven erstellt. Dabei hat die Hälfte der Editor gemacht und ansonsten hab ich irgendetwas irgendwie verändert, bis es einigermaßen gepasst hat ^^
https://warriors-cats-rpg.aktiv-forum.com/tags/Raven

Dank dir versteh ich endlich was ich mach und bekomm es hin :D





Froschjunges

Picture ©️ circlejourney





Code:
<center><div class="froschliebling">

<img style="height: auto; width: 280px;" src="https://i.imgur.com/h9mdqRX.jpg"/>

<span class="froschlieblingüberschrift">Froschjunges</span>

<span class="froschlieblingcopyright">Picture ©️ </span><a style="color: #CEF6CE; font-size: 10px;" href="http://circlejourney.net">circlejourney</a></div>

<style>.froschliebling {color:#0B6121; background-color: #04B404; display: block; height: 460px; width: 320px} .froschlieblingüberschrift {font-family: 'Comic Sans MS'; font-weight: bold; font-size: 30px;} .froschlieblingcopyright {font-size: 9px}</style>
</center>

Und es funktioniert, wie du es beschrieben hast, wie sollte es auch anders sein ^^

Was das Bild und so angeht, habe ich mich wie gesagt an meinen Postingvorlagen und dem Stecki-Code orientiert, deswegen wusste ich gar nicht ob und wie es anders funktioniert ^^ Könntest du das nochmal erklären? Wird das per div, span oder sogar mit img class bestimmt? owo

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeSo Aug 05, 2018 2:25 pm

Man hat immer die Möglichkeit, einem Tag (sei es ein img-Tag, div, span; völlig egal) direkt im Tag einen Style zu geben.
Eingeführt wird das im Tag wie href und src mit style=""
Das funktioniert genauso wie der tag < style >, nur, dass, wenn man den Style in einem Tag definiert, gilt der Style auch nur für diesen Tag.
Um das vielleicht etwas verständlicher auszudrücken, mal ein Beispiel:

Inhalt1
Inhalt2



Code:
<div class="bsp00" style="background-color: grey; width: 150px; height: 80px; color: darkblue; border-radius: 10px">Inhalt1<div class="bsp00">Inhalt2</div></div>
<style>.bsp00 {background-color: black; width: 100px; color: white}</style>

Man sieht: Obwohl beide divs den gleichen Klassennamen haben, hat der erste div einen eigenen Style direkt im div definiert bekommen und der setzt sich immer über dem, der im Style-Tag steht.
Das ist nützlich für Elemente, die nur einmal benutzt werden
(Bsp. Charakternamen in der Posting-Vorlage)

Außerdem sieht man, dass der Style, den ich im Tag definiert habe, nicht vererbt wird.
(erkennt man daran, der der innere div mit schwarzem Hintergrund keine runden Ecken (border-radius: 10px) hat.

So kann man die Nutzung von Klassen auf ein Minimum reduzieren.
Man kann natürlich den style-Tag komplett entfernen und jedem Element gleich im Tag einen Style geben,
doch dann wird der Code schnell mal unübersichtlich und die Fehlerquellen werden nicht so leicht gefunden.
Der Code wird auch ineffizient, wenn man bspw. in der gesamten Vorlage eine Schriftgröße von 15 haben möchte.
(da es ja nicht vererbt wird, müsste man das überall definieren)

Ich hoffe, das war verständlich :'D

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeDi Aug 07, 2018 9:18 pm




Pumafells

Html-css-kurs


Feedback zur 2. Aufgabe
3. Stunde: CSS-Gestaltungsmöglichkeiten
Aufgabe und Ausblick auf 4. Stunde

~Feedback zur 2. Aufgabe~
@Sumpfohr bei dir gibt es nichts weiter zu sagen, alles richtig und gut gemacht^^
@Tsuki Ist bei dir alles in Ordnung? Kann ich im Stoff weitergehen, brauchst du Hilfe, hast du fragen?
Ich würde eigentlich ungern weitermachen, wenn ich deinerseits kein Feedback bekomme xD

~3. Stunde: CSS-Gestaltungsmöglichkeiten~
Diesmal dürfte es wieder etwas einfacher werden.
Style direkt setzen
Eine gute Alternative zu Klassen und IDs ist das direkte Setzen des Styles im Tag.
Dies funktioniert genau so wie das Setzen des Links im a-Tag oder die Quelle im img-Tag mit
Code:
<TAG-NAME style="">
Man kann damit alle Tags gestalten.
Innerhalb style="" wird ganz normal wie im CSS-Tag geschrieben,
Code:
style="color: white; background-color: black; border-radius: 10px;"

nur dass wir nichts ansprechen müssen (da wir ja in dem Objekt, der gestaltet werden soll, den Style einführen)
Ich hoffe, man versteht, was ich sagen will.

Wenn wir den Style direkt im Tag setzen, minimieren wir die Nutzung von Klassen und ID's, was man immer tun sollte.
Wenn wir allerdings zwei Textboxen haben, die gleich aussehen sollen, sollten Klassen benutzt werden, sonst kann der Code schnell unübersichtlich werden und Fehlerquellen sind schwieriger zu finden.
Eine Überschrift oder einen einzelnen Span würde ich immer direkt im Tag den Style setzen.

Außerdem ist wichtig zu beachten, dass der Style nicht vererbt wird. Was ich damit meine?
Hier mal ein kleines Bsp:
Inhalt1
Inhalt2


Code:
<div class="bsp00" style="background-color: grey; width: 150px; height: 80px; color: darkblue; border-radius: 10px">Inhalt1<div class="bsp00">Inhalt2</div></div>
<style>.bsp00 {background-color: black; width: 100px; color: white}</style>

Hier haben wir zwei Divs ineinander gesetzt (der schwarze im grauen).
Dem Mutter-Div habe ich den broder-radius: 10px (abgerundete Ecken) gegeben,
doch das Tochter-Element (schwarzer Div) hat keine runden Ecken.

Außerdem sieht man hier, dass sich der Style, der direkt im Tag sitzt, immer über den Style, der im style-Tag definiert ist, setzt.
Also kann man ganz bequem in einem gestalteten Div einen Span setzen und den im Tag gestalten.
Hier ein Praxisbeispiel:

Überschrift
Hier ein kleiner Beispieltext, um die Theorie zu veranscheulichen. Der Text besitzt keinerlei Inhalt, also nicht worth, ihn zu lesen


Code:
<div class="bsp10"><span style="font-size: 20px; text-shadow: 0px 0px 5px black; font-style: italic; color: lightsteelblue">Überschrift</span>
Hier ein kleiner Beispieltext, um die Theorie zu veranscheulichen. Der Text besitzt keinerlei Inhalt, also nicht worth, ihn zu lesen</div>
<style>.bsp10 {box-shadow: 0px 0px 5px black; width: 200px; font-size: 14px; color: white; background-color: black; padding: 2px;}</style>

CSS-Gestaltungsmöglichkeiten
Hover (Mouse-over)
Wie wir einen Link erstellen, wissen wir bereits.
Und wir wissen auch, dass sich standard-mäßig (hier im Forum) der Unterstrich ändert,
wenn man mit der Maus darüberfährt (Mouse-over).
Dieses Aussehen können wir auch ändern, und zwar nicht nur für Links, sondern für alles!
Dies geht aber nur mit Klassen, da man das Objekt im Style-Tag ansprechen muss:
Code:
<div class="bsp12">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp12 {color: white; background-color: black;}</style>

Damit wir jetzt das Mouse-over des divs "bsp2" ansprechen, ergänzen wir den Style-Tag mit:
Code:
.bsp2:hover{}
:hover zeigt uns an, dass wir das Mouse-over gestalten möchten:

weißer Text auf schwarzem Hintergrund


Code:
<div class="bsp12">weißer Text auf schwarzem Hintergrund</div>
<style>.bsp12 {color: white; background-color: black;} .bsp12:hover{color:black; background-color: white}</style>

Positionierung
So, an sich könnten wir jetzt schon eine eigene RPG-Postvorlage erstellen.
Doch was ist, wenn ich ein Bild direkt neben dem Text haben möchte?

Hier ist Text, der direkt neben dem Bild stehen soll und sich an den Text anpasst, bzw. sich der Text am Bild anpasst.


Obwohl wir das Bild neben den Text gesetzt haben, sitzt er nicht rechts neben dem Text, sondern darunter.
Dies können wir mithilfe von der float (Fließ)-Eigenschaft ändern.
Dabei gibt es: float: left und float: right (Entweder sitzt das Element links oder rechts)
Dies bewirkt, dass wir mehrere Elemente, die sonst untereinander sitzen, nebeneinander platzieren können:
Hier ist Text, der direkt neben dem Bild stehen soll und sich an den Text anpasst, bzw. sich der Text am Bild anpasst.


Code:
<div class="bsp141"><img src="https://i.servimg.com/u/f95/18/82/12/58/platzh10.png" style="float: right" />Hier ist Text, der direkt neben dem Bild stehen soll und sich an den Text anpasst, bzw. sich der Text am Bild anpasst.</div>
<style>.bsp141 {width: 300px; color: white; background-color: black;}</style>

Wichtig ist hierbei, dass das Bild vor dem Text stehen muss, andernfalls funktioniert es nicht richtig (ggf. ausprobieren).

Die float-Eigenschaft ist etwas seltsam und schwierig zu erklären am Besten, ihr probiert es selbst mal aus!

Bild als Hintergrund
Statt einer background-color, können wir auch ein background-image setzen. Dafür müssen wir in den CSS-Teil.
Das Einfügen ist auch wieder etwas anders, aber nicht schwer:
Code:
<style>.bspname {background-color:url('BILDLINK')}</style>
Außerdem können wir dem Bild sagen (falls es sehr groß ist), es soll nur genauso groß sein, wie der Inhalt des Elements:
Code:
<style>.bspname {background-color:url('BILDLINK'); background-size: 100%}</style>

weitere Kleinigkeiten
Hier mal eine kleine Übersicht von Sachen, die man mittels CSS einstellen kann:

















NameBeschreibungKommantar/Beispiel
color: FARBESchriftfarbemittels 6-stelligen Hex-Code (#XXXXXX)
rgb(ROTANTEIL, GRÜNANTEIL, BLAUANTEIL) (von 0 bis 255)
rgba(ROT, GRÜN, BLAU, SICHTBARKEIT)
Farbname (Hier eine Liste aller Farbnamen)
font-size: ANGABESchriftgrößeXXpx (Pixelhöhe)
XX% (Prozent von Elternelement)
X.Yem (das X,Y-fache von der Standard-Schriftgröße)
font-family: SCHRIFTARTSchriftart/-styleserif: Serif-Schriftart
Sans-Serif: serifenlos
Schriftart (Hier eine Liste aller Schriftarten)
eigene Schriftart von Google-Fonts einfach vor Postvorlage posten
font-style:Schrift-'Style'italic
normal
text-decoration:Schrift-Dekorationenoverline
underline
line-through
none
font-variant:SchriftvarianteSmall-Caps
all-small-caps
normal
text-alignTextausrichtungleft, center, right
text-shadow: Xpx Ypx Zpx FARBETextschattenX: Verschiebung auf X-Achse (Horizontale)
Y: Verschiebung auf Y-Achse (Vertikale)
Z: Reichweite des Schattens
box-shadow: Xpx Ypx Zpx FARBEBox-Schattensiehe oben
margin:Außenabstandin Pixel oder %-Angabe
auch einzeln definierbar:
margin-right; margin-eft; margin-top: margin-bottom
Am Besten selbst informieren
paddingInnenabstandsiehe oben
border: Xpx ART FARBERahmenXpx: Pixelstärke
ART: Rahmen-Art: solid, dotted, groove
einfach mal ausprobieren
auch hier: border-top, border-right, etc. mgl.
border-radius: XpxEcken-radius0px: eckige Ecken
10px: rundere Ecken
Auch Prozent und em-Angabe mgl. (einfach ausprobieren)
background-colorHintergrundfarbeFarbwahl wie bei color
background-position:Hintergrundposition (bei Bild)right, left, center, top-center, etc
Falls ihr noch etwas braucht oder so, einfach melden!

~Aufgabe und Ausblick auf 4. Stunde~
Diesmal habe ich keine konkrete Aufgabe...
Aber versucht euch mal an eure erste Postvorlage!
Bei Fragen bin ich jederzeit da.
Viel Spaß!

Die nächste Stunde wird erst in einer Woche sein, damit ihr genug Zeit habt.
Ich würde nächste Stunde auch nur ein paar Beispiel-Vorlagen durchgehen und Fragen beantworten.
  

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Tsuki
Tsuki
Junger Krieger

Anzahl der Beiträge : 335
Anmeldedatum : 16.07.18
Alter : 17
Ort : in my own creative world ~

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeMi Aug 08, 2018 12:41 am

Hey,
Tut mir Leid, dass ich mich nicht mehr gemeldet habe, ich hätte vermutlich Bescheid geben sollen ^^"
Ich bin zurzeit bei meinem Vater und hab keinen Computer mit funktionierendem Internet und HTML am Handy lernen ist etwas..kompliziert xD
Ich meine, die erste Aufgabe am Handy zu erledigen, war relativ einfach, aber mit der nächsten "Stunde" wurde das etwas komplizierter, weswegen ich das am Computer nachholen wollte.
Du kannst gerne weitermachen, kann nur sein, dass sobald ich einen Computer habe, du mit Aufgaben und Fragen bombardiert wirst..xD

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
"Honestly, if you were any slower, you'd be going backwards." ~Draco Malfoy

"We are Cubans. We don't get divorced, we dieee!" ~Lydia Alvarez

"Your favourrite book is Chamber of Secrets, why can't you keep them?" ~Elena Alvarez
Nach oben Nach unten
Benutzerprofil anzeigen
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeMi Aug 08, 2018 1:32 am

np, ich habe das mal mit einberechnet,
weshalb die nächste Stunde erst nächste Woche rauskommt.
Wird dann, wie gesagt, eh eher eine Frage-Antwort Sache mit Beispielen sein.
Ist also, hoffentlich, genug Zeit

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeSo Aug 12, 2018 2:54 pm

Aww, ich liebe dich Pumafell!!! <3 <3 <3
Nachdem ich gestern schon den ganzen Tag daran saß, kann ich endlich mein erstes Ergebnis präsentieren :D ich hab mir das mit dem learning by doing zu Herzen genommen und zig Sachen im Internet nachgeguckt und ausprobiert. Aber vor allem dein Thread hat mir sehr geholfen :D

Nun hätte ich noch ein paar Fragen, da ich ein paar Sachen habe, die noch nicht so funktionieren, wie sie sollen oder die ich gar nicht hingekriegt habe owo
- Ist es irgendwie möglich, Hashtags einen Style zuzuweisen, ohne dass sie ihre Funktion verlieren?
- Wie kann ich zusätzlich zu der Hintergrundfarbe noch ein Hintergrundbild einfügen? EDIT: Geschafft ^^
- Ich bekomme den Hover-Effekt in Kombination mit dem Link nicht hin, bei dem Copyright...

Ich hoffe, du kannst mir auch dieses Mal wieder helfen ^^



Hyazinthenjunges
SchattenClan | Schülerin | 0 Monde
Steckbrief | #Hyazinthenjunges

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est "Gesprochener Text." Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  'Das hier denke ich.' Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Angesprochen: Text
Erwähnt: Text
Ort: Text

Code © Sumpfohr | Bilder © Luzifer, menyka




Code:
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|EB+Garamond|Cormorant+Garamond:700" rel="stylesheet">
<center><span class="box2_hyazinthen"><div class="box1_hyazinthen"><center><img style="height: auto; width: 340px;" src="https://pre00.deviantart.net/64da/th/pre/i/2018/223/0/7/3_by_ravenstorm_foralle-dcjudgb.png"></center>
<span style="color: #DC83BC; font-size: 50px; font-family: 'Great Vibes', cursive;">Hyazinthenjunges</span>
<span style="color: #3B0B39">SchattenClan | Schülerin | 0 Monde</span>
<a style="color: #DC83BC;" href: "http://warriors-cats-rpg.aktiv-forum.com/t3871-hyazinthenjunges-schattenclan-nicht-annehmbar">Steckbrief</a> | #Hyazinthenjunges

<div class="f1_hyazinthen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <span class="f2_hyazinthen">"Gesprochener Text."</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  <span class="f3_hyazinthen">'Das hier denke ich.'</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<span class="f2_hyazinthen">Angesprochen: </span>Text
<span class="f2_hyazinthen">Erwähnt: </span>Text
<span class="f2_hyazinthen">Ort: </span>Text</div>
<span style="font-size: 11px; font-family: 'EB Garamond'">Code © <a href="http://warriors-cats-rpg.aktiv-forum.com/u416" style="color: #3B0B39"  class="link_hyazinthen">Sumpfohr</a> | Bilder © <a href="http://warriors-cats-rpg.aktiv-forum.com/u64" style="color: #3B0B39"  class="link_hyazinthen">Luzifer</a>, <a href="https://www.deviantart.com/menyka" style="color: #3B0B39"  class="link_hyazinthen">menyka</a></div></div></span></span>

<style>.box1_hyazinthen {color: #2E2E2E; background: #F9EBFC url('https://i.imgur.com/ew4m7bk.png') no-repeat right bottom; display: block; height: auto; width: 420px; padding: 15px; border-bottom: 5px dotted white; border-top: 5px dotted white} .box2_hyazinthen {background-color: #DC83BC; display: block; height: auto; width: 470px; border-radius: 9px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);} .f1_hyazinthen {font-family: 'EB Garamond'; font-size: 17px; text-align: justify} .f2_hyazinthen {color: #DC83BC; font-family: 'Cormorant Garamond'} .f3_hyazinthen {color: #3B0B39; font-style: italic} .link_hyazinthen {color: #3B0B39} .link_hyazinthen:hover {color: #F5A9F2;}</style></center>

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeSo Aug 12, 2018 10:37 pm

@Sumpfohr das sieht so toll aus *o*
Die Farben harmonieren toll und passen zu den Bildern, einfach nice

Bei deinem Hyperlink zum Steckbrief hat sich wieder ein Tippfehler beim Link-definieren eingeschlichen; ich denke, den findest du auch selbst :P
(ein Fehler, der mir auch oft passiert xD)

Nun zu deinen Fragen:
1. Jap, kannst du. Ein Hastag ist auch nichts anderes als ein Hyperlink.
Vielleicht wäre es an der Stelle sinnvoll eine Klasse zu benutzen (oder falls alle Links eh gleich aussehen), einfach im style-Tag den < a > 'global' (in der Postvorlage) zu definieren.
Ach, das habe ich natürlich gar nicht gemacht, shame on me x.x
Du kannst a-Tags, img-Tags usw auch innerhalb einer anderen Klasse ansprechen und gestalten.
Wäre in deinem Fall also so:
Code:
.box2__hyazinthen a {color: #DC83BC}
(damit würden alle Links in deiner Postvorlage diese Farbe haben)
So kannst du auch Klassen innerhalb Klassen ansprechen.

2. Ja, auch vergessen zu erwähnen :D Man kann auch einfach beides setzen

3. Hier schlägt auch ein eher seltener Fehler zu :D
Da du den Style des Links im Tag selbst gesetzt hast:
Code:
<a href="http://warriors-cats-rpg.aktiv-forum.com/u416" style="color: #3B0B39"  class="link_hyazinthen">Sumpfohr</a>
legt sich dieser Style immer über den Style im Style-Tag. Das gilt leider auch für alle "Variationen",
die der Link annehmen kann (also :hover oder :visited)
Da du ja aber die Links im Style-Tag eh definiert hast, kannst du den Style im a-Tag selbst einfach raus nehmen und dann müsste es gehen^^

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeMo Aug 13, 2018 2:30 pm

xDD Super, wenn einem sowas nicht mal auffällt. Den Fehler habe ich gefunden, aber ich hatte noch nicht einmal bemerkt, dass der Link nicht funktionierte ^^ Danke für den Hinweis :)

So wie du es beschrieben hast, funktioniert alles. Nur habe ich es nicht so gemacht, dass alle Links gleich sind, weil ich unten gerne die dunkle und oben die Helle Farbe haben wollte ^^ Trotzdem hat es so geklappt, wie du es beschrieben hast <3
Ich bin wunschlos glücklich :3



Hyazinthenjunges
SchattenClan | Schülerin | 0 Monde
Steckbrief | #Hyazinthenjunges

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est "Gesprochener Text." Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  'Das hier denke ich.' Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Angesprochen: Text
Erwähnt: Text
Ort: Text

Code © Sumpfohr | Bilder ©️ Luzifer, menyka




Code:
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|EB+Garamond|Cormorant+Garamond:700" rel="stylesheet">
<center><span class="box2_hyazinthen"><div class="box1_hyazinthen"><center><img style="height: auto; width: 340px;" src="https://pre00.deviantart.net/64da/th/pre/i/2018/223/0/7/3_by_ravenstorm_foralle-dcjudgb.png"></center>
<span style="color: #DC83BC; font-size: 50px; font-family: 'Great Vibes', cursive;">Hyazinthenjunges</span>
<span style="color: #3B0B39">SchattenClan | Schülerin | 0 Monde</span>
<span class="link1_hyazinthen"><a href= "http://warriors-cats-rpg.aktiv-forum.com/t3871-hyazinthenjunges-schattenclan-nicht-annehmbar">Steckbrief</a> | #Hyazinthenjunges</span>

<div class="f1_hyazinthen">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <span class="f2_hyazinthen">"Gesprochener Text."</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  <span class="f3_hyazinthen">'Das hier denke ich.'</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<span class="f2_hyazinthen">Angesprochen: </span>Text
<span class="f2_hyazinthen">Erwähnt: </span>Text
<span class="f2_hyazinthen">Ort: </span>Text</div>
<span style="font-size: 11px; font-family: 'EB Garamond'">Code ©️ <span class="link2_hyazinthen"><a href="http://warriors-cats-rpg.aktiv-forum.com/u416">Sumpfohr</a></span> | Bilder ©️ <span class="link2_hyazinthen"><a href="http://warriors-cats-rpg.aktiv-forum.com/u64">Luzifer</a>, <a href="https://www.deviantart.com/menyka">menyka</a></span></div></div></span></span>

<style>.box1_hyazinthen {color: #2E2E2E; background: #F9EBFC url('https://i.imgur.com/ew4m7bk.png') no-repeat right bottom; display: block; height: auto; width: 420px; padding: 15px; border-bottom: 5px dotted white; border-top: 5px dotted white} .box2_hyazinthen {background-color: #DC83BC; display: block; height: auto; width: 470px; border-radius: 9px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);} .f1_hyazinthen {font-family: 'EB Garamond'; font-size: 17px; text-align: justify} .f2_hyazinthen {color: #DC83BC; font-family: 'Cormorant Garamond'} .f3_hyazinthen {color: #3B0B39; font-style: italic} .link2_hyazinthen a {color: #3B0B39} .link2_hyazinthen a:hover {color: #DC83BC} .link1_hyazinthen a{color: #DC83BC} .link1_hyazinthen a:hover {color: #3B0B39}</style></center>

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Tsuki
Tsuki
Junger Krieger

Anzahl der Beiträge : 335
Anmeldedatum : 16.07.18
Alter : 17
Ort : in my own creative world ~

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Aug 17, 2018 5:20 pm

Huch D; Da hab ich ja was verpasst owo
Tut mir Leid, dass ich so lange hier nicht mitmachen konnte, ich habe bei meinem Vater keinen Computer mit funktionierendem Internet. Glücklicherweise darf ich heute den Laptop meiner Schwester nutzen, daher kann ich das hier endlich alles nachholen ^-^
Ich muss nur eben wieder reinkommen und hoffe, das ist in Ordnung, wenn ich die erste Aufgabe nochmal wiederhole, um mir das in Erinnerung zu rufen ^^"

Gelerntes in Erinnerung rufen



Code:
<div class="Wiederholung"> Gelerntes in Erinnerung rufen </div>
<style>.Wiederholung {color: grey; background-color: white; font-size: 20px}</style>

Aufgaben der zweiten Stunde

Theorie:
Worin liegt der Unterschied zwischen dem center-Tag und der CSS-Eigenschaft: text-align: center?
Der Unterschied liegt darin, dass durch die CSS-Eigenschaft nur der Text des divs, auf den sich der Style bezieht, zentriert wird und mit dem center-Tag, wird alles, was sich innerhalb des Tags befindet, zentriert, daher mehr als nur ein bestimmter div.

Wie fügt man dem Bild einen Link hinzu?
Das wusste ich nicht, hab also meinen besten Freund Onkel Google zu Rate gezogen, wo ich es aber nicht ganz verstanden habe, weswegen ich mir einmal bei Sumpfohrs Antwort Hilfe geholt habe, bzw geguckt habe, was ihr dazu geschrieben habt. Ich hoffe, das war in Ordnung, jetzt habe ich es nämlich verstanden xD
Man fügt den Code, mit dem man das Bild generell einfügen würde, also den hier:
Code:
<img src="https://images.pexels.com/photos/680437/pexels-photo-680437.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"/>
in den Code für den Link dort ein, wo man diesen benennen würde:

Code:
<a href="http://warriors-cats-rpg.aktiv-forum.com/t3924-sonnenpfote-windclan-fertig"><img src="https://images.pexels.com/photos/680437/pexels-photo-680437.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"/></a>

Praxis:

Hier ist meine Box, aber wie ich das Bild einfüge, verstehe ich nicht ;-; Ich hab schon gegoogelt und bei Sumpfohrs Code nachgeschaut, um es zu verstehen, allerdings kommen da nur noch mehr Fragen auf ._.
Wie fügt man Bilder ein?
Warum steht bei Sumpfohrs Code der Style vor dem eigentlichen Bild?
Wofür sind Span-Tags gut, wenn wir doch die divs haben?
Und wie füge ich Text unter ein Bild ein?

Ich bin gerade so verwirrt, es tut mir Leid ;-;
Wenn ich die oben genannten Sachen verstanden habe, bzw die Sache mit dem Bild, hole ich die anderen Stunden nach, aber so bringt es ja kaum etwas, weiterzumachen.



Code:
<div class="Praxisübung">Text, der nicht wiederholt werden muss.</div>
<style>.Praxisübung {color: black; background-color: orange; display: block; height: 500px; width: 300px}</style>

Liebe Grüße
~Tsuki

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
"Honestly, if you were any slower, you'd be going backwards." ~Draco Malfoy

"We are Cubans. We don't get divorced, we dieee!" ~Lydia Alvarez

"Your favourrite book is Chamber of Secrets, why can't you keep them?" ~Elena Alvarez
Nach oben Nach unten
Benutzerprofil anzeigen
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeSa Sep 01, 2018 6:32 pm

Sorry, dass lange keine Antwort kam..
Ich beantworte erst einmal die paar Fragen von Tsuki mit der Hoffnung, helfen zu können xD

Wie fügt man Bilder ein?
(Auszug aus 2. Stunde: Divs und Tags):

img-Tag
Mithile des img (Image)-Tags kann man, wie der Name schon sagt, Bilder einfügen.
Dieser Tag funktioniert ebenfalls etwas anders, denn es gibt keinen Öffnungs- und Schließ-Tag, sondern einen 'einsilbigen Tag':
Code:
<img />
Um jetzt ein Bild einzufügen, benutzen wir im Tag src="" (src = source), wo die Bildadresse reinkommt:
Code:
<img src="BEISPIELLINK" />
Hm, ich weiß nicht, wie ich es anders erklären soll :DD

Warum steht bei Sumpfohrs Code der Style vor dem eigentlichen Bild?
Ja, da hat sie etwas getrickst; ist auch eher etwas, was fortgeschrittene machen. Ist in der letzten Stunde aber auch erklärt^^

Wofür sind Span-Tags gut, wenn wir doch die divs haben?
(Auszug aus 2. Stunde: Divs und Tags):

span-Tag
Ein Span, der so eingefügt wird:
Code:
<span>...</span>
ist dem Div ähnlich, doch wenn ich ihn einfüge, sieht man schon den Unterschied:

Weißer Text auf schwarzem Hintergrund Dahinter kann etwas stehen!

Der Span hat die Standard-Eigenschaft display: inline. Dies ist für Posting-Vorlagen sehr nützlich, also ein wichtiger Tag.
display: inline bedeutet, dass die 'Box' immer nur so breit/hoch ist wie der Inhalt selbst.
Viel mehr gibt es dazu eigentlich nicht zu sagen, Spans verwendet man hauptsächlich, um einen Text zu umgeben.

Und wie füge ich Text unter ein Bild ein?
Ganz einfach, indem du nach dem Bild ENTER drückst und normal einen Text schreibst^^

EDIT: @Tsuki

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeDo Sep 20, 2018 2:25 pm

@Tsuki @Sumpfohr
ich schließe hiermit den Kurs, da Tsuki seit 20Tagen nicht reagiert hat und ich daher nicht weitermachen kann

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Sep 21, 2018 3:39 pm

Das ist schade :(
Aber gut, ich kann dich da verstehen... Wärst du einverstanden, den Thread trotzdem hier drin zu lassen? Dann könnte man nochmal was nachgucken (oder sogar mal eine Frage stellen)? owo
Du hast das echt super erklärt und es war und ist total hilfreich. Von daher ein riesen Dankeschön :umgeworfen: :umgeworfen: :umgeworfen:

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Tsuki
Tsuki
Junger Krieger

Anzahl der Beiträge : 335
Anmeldedatum : 16.07.18
Alter : 17
Ort : in my own creative world ~

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Sep 21, 2018 4:13 pm

Tut mir Leid, ich habe den Kurs total vergessen qwq
Schule hat mich ganz schön auf Trab gehalten und dann hatte ich privat auch noch Stress ;-;
Abgesehen davon hatte ich ne Zeit lang wieder keinen Computer .-.
Also ja, es tut mir Leid .-.

Dankeschön, dass du dir diese Mühe gemacht und den Kurs veranstaltet hast :3 Vielleicht arbeite ich mich irgendwann nochmal in HTML rein, aber momentan fehlt mir leider die Zeit dazu.

@Sumpfohr
Tut mir Leid, dass das Ganze jetzt für dich hier abbricht .-.
Aber die PV ist dir ja schon super gelungen :3

LG Tsuki

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
"Honestly, if you were any slower, you'd be going backwards." ~Draco Malfoy

"We are Cubans. We don't get divorced, we dieee!" ~Lydia Alvarez

"Your favourrite book is Chamber of Secrets, why can't you keep them?" ~Elena Alvarez
Nach oben Nach unten
Benutzerprofil anzeigen
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeFr Sep 21, 2018 7:24 pm

Klar, den Thread würde ich hier lassen. Damit man immer noch mal nachsehen und Fragen stellen kann.^^

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeMo Dez 10, 2018 1:51 pm

Huhu @Pumafell ^^

Ich bin zur Zeit dabei die Postingvorlage für Leuchtherz fertig zu machen und hätte nun eine kleine Frage... Ich komme an der Stelle gerade einfach nicht weiter, aber vielleicht kannst du mir ja helfen? owo

So weit bin ich bisher:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est "Gesprochener Text." Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  'Das hier denke ich.' Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



Die Hintergrundfarbe wird noch rausgenommen, ist für den Anfang erstmal nur zur Orientierung drin. Nun würde ich den bisher gelben Kasten ganz gerne unter dem Bild positionieren, ohne dass sich der Text rechts verschiebt... Leider versteh ich echt gar nicht, wie ich die nebeneinander anordnen kann... Hast du eine Idee?

Hier der bisherige Code:
Code:
<div class="box1_leuchtherz"><div class="box2_leuchtherz"><div class="box4_leuchtherz"><div class="box3_leuchtherz">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est "Gesprochener Text." Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  'Das hier denke ich.' Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div></div></div></div>
<style>.box1_leuchtherz {background-color: orange; display: block; height: 500px; width: 600px; border-bottom-right-radius: 30px; border-bottom: 2px solid;} .box2_leuchtherz {float: left; color: #2E2E2E; background: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/a0d0a416-8e0d-4f6a-a477-bf43bfaabe65/dctrxtv-aacbefdd-f205-4145-9397-b6e8d00957fb.png') no-repeat left bottom; display: block; height: 300px; width: 420px; padding: 15px} .box3_leuchtherz {float: left; height: 300px; width: 350px; margin-left: 220px; margin-top: 170px; padding-right: 20px; overflow: auto} .box4_leuchtherz {background-color: yellow; display: block; height: 200px; width: 200px}</style>

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
Pythonfluch
Pythonfluch
Junger Krieger

Anzahl der Beiträge : 485
Anmeldedatum : 10.04.18
Alter : 20
Ort : auf meiner Insel

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeDo Dez 13, 2018 4:05 pm

Oh ja. Bild- und Div-Positionierung ist auch immer mein Kampf xD
Generell würde ich die Boxen anders ineinander schieben.
Dafür würde ich die Box allgemein (also die mit Hintergrund-Farbe: orange und dem Border-Radius etc.) als Mutterelemnt mit der position: relative setzen.
In diese Box gibt es dann drei weitere Boxen, die aber nicht ineinander sitzen:
- Bild-Box
- 'Info-Box' (die mit dem gelben Hintergrund)
- Text-Box

Dann kannst du die Eigenschaften von der Bild- und Text-Box so lassen,
und die 'Info-Box' die Eigenschaften: position: absolute; bottom: 5px; left: 5px; float: left
geben.
Ggf. mal rumproieren. Wäre so meine Idee erstmal.^^

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
Posts mit Snow - IX

Vorübergehende Inaktivität meinerseits ist zu entschuldigen, ansonsten gibt es immer pünktlich zum Wochenende Stress!

»Besuche mich auf meiner Insel!«
Nach oben Nach unten
Benutzerprofil anzeigen http://damascenon.forumieren.de
Sumpfohr
Sumpfohr
Moderator

Anzahl der Beiträge : 2659
Anmeldedatum : 04.05.16
Alter : 15

Meine Charaktere
Charaktere:

HTML-CSS-Kurs Empty
BeitragThema: Re: HTML-CSS-Kurs   HTML-CSS-Kurs I_icon_minitimeDo März 21, 2019 12:25 pm

!


Aus gegebenem Anlass möchte ich gerade mal darauf aufmerksam machen, dass die Codes, die hier offen liegen, nicht für den freien Gebrauch gedacht sind!

Die Teilnehmer des Kurses haben sie gepostet, um sich darüber auszutauschen, sich Hilfe zu suchen und nicht, um sie anderen zur Verfügung zu stellen!

✨⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣⌢⌣✨
*klick*
HTML-CSS-Kurs 11039375_1AfWfWJwjKHB5Aa
Nach oben Nach unten
Benutzerprofil anzeigen http://ravenstorm-foralle.deviantart.com/
 

HTML-CSS-Kurs

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben 
Seite 1 von 1

 Ähnliche Themen

-
» HTML Und Css Kurs || Schneesturm
» HTML - Steckbriefvorlage
» HTML Vorstellung (08.01.2019)

Befugnisse in diesem ForumSie können in diesem Forum nicht antworten
Warrior Cats :: Community :: Tutorials :: Kurse-