Html - CSS - Javascript ---- Lernseite
Projekte:
Probleme - Hinweise
Bild links, Text fließt rechts herum
.TextBlock {display: inline-block; line-height: 150%; padding: 5px; margin: 20px; max-width: 100%;}
.BildImTextPur {display: inline-block; float: left; padding: 0px 15px 5px 0px;}
.MWd300 {max-width: 300px;}
.TextBlock3 {padding: 10px 0px 0px 15px;}
Den ganzen Block einschließen mit TextBlock, damit der nächste Block darunter plaziert wird.
<div class="TextBlock">
<div class="BildImTextPur MWd300">
<img src="*.jpg" width="100%">
</div>
<div class="TextBlock3">
Text hier einfügen. Dieser umfließt jetzt
das Bild auf der rechten Seite und auch unten.
</div>
</div>
Der nächste Inhalt wird
unter dem Bild bzw. Text angezeigt. Deshalb auch der einschließende TextBlock.
Nun der Text, der um das Bild herum fließen soll.
Will man oben im Text eine Lücke haben, also Text weiter unten beginnend,
so bitte kein <br> einfügen,
sondern z.B. ein gesch. Leerzeichen + br:
<br>
Oder besser noch, man baut einen Textblock (TextBlock3) mit padding usw. um den Text herum.
und dann
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Block links, Block rechts fließt
Links z.B.: Inhaltsverzeichnis - rechter Block: Text fließt um den
linken Block herum
css: Inhaltsverzeichnis links
.InhaltsVerz {float:left; text-align:left; width:250px; padding:10px;
margin-right:10px; margin-bottom:5px; font-size:1.1em; border:solid 3px black;}
marging Hält Abstand zum Text rechts, da der Textblock rechts
bis nach ganz links fließt und das Inhaltverzeichnis mit in sich einschließt.
css: Rechts, der Inhalt:
.InhaltSelbst {text-align: left; max-width: 100%;}
Blöcke neben - untereinander
Wie ein Inhaltsverzeichnis.
Im Laptop: Blöcke plazieren sich nebeneinander.
Im Handy: Blöcke sind untereinander.
css Inhaltsverzeichnis links
.TextLi {float:left; text-align:left; width:250px; padding:10px;
margin-right:10px; margin-bottom:5px; font-size:1.1em; border:solid 3px black;}
marging Hält Abstand zum Text rechts, da der Textblock rechts
bis nach ganz links fließt und das Inhaltverzeichnis mit in sich einschließt.
css Rechts der Inhalt:
.InhaltRe {text-align: left; max-width: 100%;}
CSS in HTML
In Style definieren
<style> .SchriftGross {font-size: 1.2em;} </style>
In HTML - Aufruf über ID (#) oder Class (.)
<div class="SchriftGross"> Text </div>
Anweisung dierekt in HTML:
<div style="font-size: 1,2em;"> Text </div>
Weitere Beispiele:
<div style = "bgcolor: #FF03AF;"> Text </div>
<span style = "color: red;"> Text </span>
Früher gab es das Font-Tag. Heute macht man es mit style.
Div-Blöcke nebeneinander / ineinander
Man muss einen Gesamtblock (ohne float) definieren und darin dann die Teilblöcke setzen.
Generell sollte man, wenn man einen Abschnitt grundlegend formatiert, diesen als div z.B. Haupfenster
definieren. Darin enthalten können dann verschiedene Unterformatierungen sein - z.B.
verschiedene Farben, Schriften. Hintegründe usw..
Man kann auch mit "span"-Blöcken arbeiten.
Das ist der gesamte Block.
Nun kann man da hinein verschiedene Unterblöcke setzen
.
Das ist der gesamte Block. Nun
kann man da hinein verschiedene Unterblöcke setzen.
Das ist der gesamte Block. Nun kann
man da hinein verschiedene Unterblöcke setzen.
Das ist der gesamte Block. Nun kann man
da hinein verschiedene Unterblöcke setzen.
Style
<style>
.DivBlockGesamt {display:inline-block; color:white;
background-color:black; padding: 15px; margin-bottom:30px;}
.DivDiv {display:inline-block; color:#00ffff;}
</style>
HTML
<div class="DivBlockGesamt">
Das ist der gesamte Block.
<div class="DivDiv"> Nun kann man da hinein verschiedene Unterblöcke setzen.</div><br>
Das ist der gesamte Block. Nun
<div class="DivDiv"> kann man da hinein verschiedene Unterblöcke setzen.</div><br>
Das ist der gesamte Block. Nun kann
<div class="DivDiv"> man da hinein verschiedene Unterblöcke setzen.</div><br>
Das ist der gesamte Block. Nun kann man
<div class="DivDiv">da hinein verschiedene Unterblöcke setzen.</div>
</div>
Fett
bold
<b> und </b>
<span style="font-weight: bold;"> und </span>
Leerzeichen - geschützt
margin
"margin" beschreibt den Abstand außen. Also um einen Block herum.
margin:auto; Der Block wird mittig angezeigt.
Mittig
Aufgabe: Ein Bild oder Text mittig in einem Rahmen anordnen. Horizontal wie vertikal!!!
justify-content: center; --- vertikal
align-items: center;--- horizontal
Style:
#MittHaupt {display: flex; justify-content: center; align-items: center;
height: 250px; max-width: 700px; border: 1px solid blue; margin: 20px;}
#MittInh {text-align: center;}
HTML:
<div id="MittHaupt">
<div id="MittInh">Das soll alles in der Mitte sein<br><br>
<div class="BildPur MWd100"><img src="bilder/HTML.jpg" width="100%"><div>
</div>
</div>
Egebnis:
Das soll alles in der Mitte sein
Soll auch der ganze Rahmen in der Mitte sein, muss man in den Styleanweisungen bei #MittHaupt noch margin:auto; schreiben.
Poligon zeichnen
Poligon ist eine Funkion
clip-path: polygon(0% 5%, 100% 50%, 100% 75%, 0% 100%)
Die vier Zahlenpaare sind die Orte der 4 Ecken:
ObenLinks - ObenRechts - UntenRechts - UntenLinks
Es wird immer von oben nach unten gemessen und von links nach rechts.
Erste Zahl ist Abstand von links. Zweite Zahl ist Abstand von oben.
Beispiel:
#KonischesFeld {width: 500px; height: 150px;
clip-path: polygon(0% 5%, 100% 50%, 100% 75%, 0% 100%);}
Spalten
Beispiel: Eine Aufzählung von Links soll sich in Spalten sortieren, entweder fest oder je nach Seitenbreite
maximale Auslastung (Siehe Elektronikseite)
#InSpaltenAnordnen {column-width: 150px; columns: 3; column-gap: 2em; border: 1px solid gray;}
Lässt man
columns: 3; weg, dann zeigt es
so viele Spalten an, wie Platz auf der Seite ist.
HTML:
<div id="InSpaltenAnordnen">
Hallo<br> ja dann<br> bis<br>
später<br> ihr<br> alten
</div>
Hallo
ja dann
bis
später
ihr
alten
Ohne Anzahl der Spalten anzugeben:
Hallo
ja dann
bis
später
ihr
alten
Tabelle mit div
Spalten richten sich nach Textbreite:
Style:
.LernTabelle {display: table; width: 300px; border-collapse: collapse;}
collapse = Abstände zwischen Zellen aufheben. max-width geht nicht, nur width allein.
.LernZeile {display: table-row;}
.LernKopf { background-color: #f4f4f4; font-weight: bold;}
ErwKopf = Zusatz, um z.B. oberste Zeile anders zu gestalten
.LernZelle {display: table-cell; padding: 7px; border: 1px solid #ddd;}
HTML:
<div class="LernTabelle">
<div class="LernZeile LernKopf">
<div class="LernZelle"> Nr </div>
<div class="LernZelle"> Objekt </div>
<div class="LernZelle"> NoteNr </div>
</div>
<div class="LernZeile">
<div class="LernZelle"> 12 </div>
<div class="LernZelle"> ReglerAtt </div>
<div class="LernZelle"> 64 </div>
Ergebnis
Spalten individuell:
Zelle1,2 und 3 für jede Zeile
oder auch nur für die erste Zeile definieren.
Dann aber kann man nicht über die Zeilen formatieren wie Text in der Mitte usw.
ACHTUNG: Keine Angabe zur Breite der Tabelle machen.
Style
.LernTabelleB {display: table; border-collapse: collapse;}
.LernZeileB {display: table-row;}
.LernKopfB { background-color: #f4f4f4; font-weight: bold;}
.LernZelle1 {display: table-cell; padding: 7px; border: 1px solid #ddd; width: 10px;}
.LernZelle2 {display: table-cell; padding: 7px; border: 1px solid #ddd; width: 20px;}
.LernZelle3 {display: table-cell; padding: 7px; border: 1px solid #ddd; width: 700px; text-align: center;}
HTML:
<div class="LernTabelleB">
<div class="LernZeileB LernKopf">
<div class="LernZelle1"> Nr </div>
<div class="LernZelle2"> Objekt </div>
<div class="LernZelle3"> NoteNr </div>
<div class="LernZelle1"> 12 </div>
<div class="LernZelle2"> ReglerAtt </div>
<div class="LernZelle3"> 64 </div>
Ergebnis
Tags
<b>, <i>, <u> --- fett, kursiv, unterstrichen.
<div> --- erzeugt neuen Absatz, wenn nicht durch display: inline-block o.a. definiert.
<span> --- Inline-Objekt. Erzeugt keinen neuen Absatz. Ist für schnelle Formatierung im HTML-Text ganz gut.
Tags im Text anzeigen
Für das Größerals- und Kleineralszeichen gibt es Schreibweisen, die dann diese Zeichen anzeigen, ohne
sie auszuführen.
< = <
> = >
& = &
Auch die Tags < pre > und < /pre > , sowie < code > und < /code > ausprobieren.
Die Größerals- und Kleineralszeichen müssen aber auch da weiterhin mit < und > geschrieben werden.
width / max-width
Achtung: max-width NICHT mit Prozent angeben. Funktioniert nicht.
Wenn %, dann nur width ohne max. Also max-width nur mit px.
Beispiel:
width: 95%;
und
max-width: 500px;
Probleme - Hinweise
Bilder ordnen sich
nicht nebeneinander an
padding mit Prozentangabe.
Wenn in den
Styles z.B. steht: padding: 20px 1% 30px 1%; tritt
das Problem auf.
Scheinbar blockiert jedes Bild den "Nachbarraum" ???.
Also padding mit px angeben, z.B. padding: 10px;
Es ist nicht nötig, float: left; anzugeben,
noch muss man display: inline-block; weglassen.
Objekte ordnen sich nicht darunter, sondern seitlich an
Im vorhergehenden Block: max-width = 100%
Prozentangabe bei max-width !!!
max-width kann nur mit px angegeben werden. Wenn Prozent, dann
width = 100% (ohne max).
