Einzelne Schriften in HTML Bearbeiten?
Hallo,
ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.
Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.
Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:
CSS:
table tr td
{
font-size: 1.2em;
background: #fff;
color: black;
border-radius: 20px;
padding: 4px 10px;
}
Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)
HTML:
<table>
<thead>
<tr>
<th>Eyes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normal</td>
<td>23.99%</td>
<td>Common</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
5 Antworten
Bei deiner farblichen Hervorhebung handelt es sich um unterschiedliche Labels. Mein Tipp an dich: Speichere die unterschiedlichen Farben zentral und übersichtlich als CSS Variable ab, erstelle anschließend benötigte Klassen - und setze die Variablen anschließend zum gewünschten Formatieren ein.
HTML:
<td><span class="label label--common">Common</span></td>
CSS:
:root {
/* colors */
--clr-black: hsl(0, 0%, 0%)
--clr-rare: hsl(195, 50%, 100%);
--clr-epic: hsl(2, 60%, 95%);
--clr-common: hsl(0, 0%, 90%);
--clr-uncommon: hsl(124, 40%, 100%);
}
.label {
padding: 0.5rem 1rem;
border-radius: 5px;
}
.label--rare {
color: var(--clr-black);
background-color: var(--clr-rare);
}
.label--common {
color: var(--clr-black);
background-color: var(--clr-common);
}
.label--uncommon {
color: var(--clr-black);
background-color: var(--clr-uncommon);
}
.label--epic {
color: var(--clr-black);
background-color: var(--clr-epic);
}
LG medmonk
Dazu kann man anstatt Visual Studio Code auch den Google Web Designer nehmen. Dieser ist kostenlos für Windows, Mac und Linux: https://webdesigner.withgoogle.com/intl/de_de
Damit kann man im Layoutmodus oder in der Codeansicht arbeiten. Der Code wird dort syntaxhervorgehoben dargestellt. Syntaxfehler werden in Echtzeit angezeigt.
Man kann auch bei den einzelnen Elementen auf die Codeansicht umschalten und sieht dann wenn man den Code bearbeitet im Layoutmodus die Änderungen in Echtzeit.
Wenn man fertig ist, kann man die ganze Webseite exportieren. Dazu erstellt man sich zuerst einen leeren Ordner. Dann wählt man beim Exportieren diesen Ordner. Dort drin hat man dann die fertige Webseite mit der richtigen Ordnerstruktur.
Packe die Einträge in div-Elemente und gib ihnen eine Klasse, die dann via CSS Stileigenschaften zugewiesen bekommt:
<td>Common</td>
wird also zu
<td><div class="common">Common</div></td>
und im CSS kann man dann die Klasse mit vorangestelltem Punkt ansprechen:
.common {
background: Lieblingsfarbe,
color: Lieblingsfarbe2,
...
}
Alternativ könnte man auch direkt dem td-Element eine Klasse zuordnen, also
<td class="common">Common</td>
und somit ohne div-Tag auskommen.
warum man ein div nimmt wo ein span eigentlich das richtige ist.
div = gruppe /block
span = text / inline
Danke für den Verbesserungsvorschlag! Ich dachte, es sieht schöner aus, wenn um den Text noch einer Art kleine farbige Box ist, wie auf dem ersten Bild, das haut ja mit div besser hin als mit span, oder?
jain, würde ich mit padding im TD machen siehe
https://jsfiddle.net/f5zcwxt0/2/
der sinn ist ja die semantik , und nicht die hübschheit mit html
semantik ist span
hübschheit ist css
Meine Frage ist nun, wie man das individuell anpassen kann.
So:
<!doctype html>
<title>table colors</title>
<style>
td
{
font-size: 1.2em;
background: #fff;
color: black;
border-radius: 20px;
padding: 4px 10px;
}
td[class] {
display:inline;
}
.common {
background:silver;
color:black
}
.uncommon {
background:green;
color:black
}
.rare {
background:aliceblue;
color:black
}
.epic {
background:red;
color:white
}
</style>
<table>
<tr><td>entry</td><td class="common">common</td></tr>
<tr><td>entry</td><td class="uncommon">uncommon</td></tr>
<tr><td>entry</td><td class="rare">rare</td></tr>
<tr><td>entry</td><td class="epic">epic</td></tr>
</table>
Alex
macht man eigentlich mit class und innerhalb der celle dann ein tag, weil sonst ist es ja die gesammte zelle , so nur der text der im tag span steht.
und bitte nächstes mal dein code mit dem codeblock </> formatieren
https://jsfiddle.net/f5zcwxt0/
CSS
table, th, td {
border: 1px solid black;
}
.blau {
font-size: 1.2em;
background-color: #0000FF;
color: black;
border-radius: 4px;
padding: 2px 4px;
}
HTML
<table>
<thead>
<tr>
<th>Eyes</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="blau">Normal</span></td>
<tr>
</tr>
<tr>
<td>23.99% test test </td>
</tr>
<tr>
<td>23.99% test test </td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
hier nochmal wenn du abstand brauchst im td tag
https://jsfiddle.net/f5zcwxt0/2/
bitte nutz nicht DIV bei text im Table , semantik ist SPAN
div nutz man bei gruppen oder block elementen und nicht um graphisch zu arbeiten
span ist zum formatieren von text .
bitte nutz nicht DIV bei text im Table , semantik ist SPAN
Nicht wirklich. Weder <div> noch <span> haben eine semantische Bedeutung. Genau das ist der Unterschied zwischen <div> und allen andern Blockelementen sowie <span> und allen anderen Inlineelementen,:die fehlende semantische Bedeutung.
Daher spielt es keine Rolle, ob man <div> oder <span> verwendet. Ist beides richtig. Der einzige Unterschied der beiden liegt darin, dass <div> (fast) jedes HTML enthalten darf, dass aber das <span>-Element keine Blockelemente enthalten darf.
span ist zum formatieren von text .
Auch nicht wirklich. Zum Formatieren nimmt man CSS.
da geheb ich dir recht, aber text ist meisten mit dem textfluss inline . deswegen sollte man kein blockelement umbauen zum inline element nur um es im textfluss zu nutzen .
und man brauch nurn mal ein tag um dort die classe oder style zu nehmen , das meine ich mit formatieren . an dem buchstaben selber gehts nun mal nicht .
ergo kein block element innerhalb texten nur um etwas zu formatieren .
haste nun verstanden was ich meine oder wolltest du nur die logik einzeln betrachten . schlimm so eine verdrehung aus dem kontext ohne nachzudenken .
ich hab ja auch inline/text , um das deutlich zu machen, da kommst du so oberlehrer und siehst das aus dem lehrbuch, auf seite 6 steht aber TAGS sind nciht zum formatieren sondern CSS , ja aber wie wilslt du den das CSS anbringen ohne einen TAG .
kannst mich ja gerne aufklären wie du ein wort in einem text ohne TAG mit CSS formtierst . komm bin gepsann.t weil das wäre ja ein umkerschluss aus deiner logik .
ausserdem , DIV war immer schon semantisch für eine GRUPPE . da hast du halt nicht aufgepasst. sollte nämlich andere dinge zusammenfassen absätze etc . so war der anfang . und nciht <div><p>text</p></div>
das machen viele falsch , nachdem sie den missbrauch von DIVs gelernt haben und eigentlich alles mit divs versorgen , ist halt leichter für automatisierung . war aber am anfang nicht so gedacht .
du oberschlauer der nach 40 jahren jetzt auf die suppe guckt .
oder siehst du noch irgendeine seit die sich wirklich an semantik hält . ne alles nur noch DIV gewussel . war am anfanf richti anstrengend. seciton und und und nutz auch kein framework . alles div gepudert .
deswegen sollte man kein blockelement umbauen zum inline element nur um es im textfluss zu nutzen .
Sagt wer? Die Spec jedenfalls nicht.
und man brauch nurn mal ein tag um dort die classe oder style zu nehmen
Auch da irrst Du. Das geht besser ohne <span> oder <div>:
<style>
.blau {
display:inline;
color:white;
background:blue
}
</style>
<table>
<tr><td>hello</td><td class="blau">world</td></tr>
<tr><td>hello world</td><td>hello world</td></tr>
</table>
kannst mich ja gerne aufklären wie du ein wort in einem text ohne TAG mit CSS formtierst
so:
<style>
.blau {
display:inline;
color:white;
background:blue
}
</style>
<table>
<tr><td>hello</td><td class="blau">world</td></tr>
<tr><td>hello world</td><td>hello world</td></tr>
</table>
DIV war immer schon semantisch für eine GRUPPE
Nein. Lies dazu die Spec durch: "The <div> element has no special meaning at all."
übrigens , semantik ist DIV gruppe , den was du block nennst ist nicht semantik sondern CSS :) haha
so fing das an . da hast du dich eigentlich selber wiedersprochen . den du definierst auf einmal eine formatierung als semantik .
womit du dich auch wiedersprichst und sagst, TAGS sind keine formatierung, nennst es aber als grund .
ich lach mich weg . so ist das min den jungen hühnern . kennen die anfänge nicht und verdrehen alles . auf einmal ist formatierung ja dann wieder nein , wie es einem so passt.
ich lag schon richtig sematik bei einem div war schon immer gruppe .
und span war für den text zum formatieren
semantik = inhalt
nicht semantik = aussehen , block .
da sind wir uns doch wenigstens einige oder .
semantik ist DIV gruppe
Nochmal: die besondere Eigenschaft des <div>-Elements ist eben, dass es keine semantische Bedeutung hat.
den was du block nennst ist nicht semantik sondern CSS
Ob ein Element als Inline- oder ein Blocklevel-Element definiert ist, hat nichts mit CSS zu tun sondern ist HTML.
TAGS sind keine formatierung
Richtig. Sag ich doch :-)
semantik = inhalt
Semantik heißt Bedeutung. So wird das <address>-Element verwendet um dessen Inhalt semantisch als "Adresse" auszuzeichnen. Das <h1>-Element wird verwendet, um dessen Inhalt semantisch als Überschrift 1. Grades auszuzeichnen. Das <code>-Element wird verwendet, um dessen Inhalt semantisch als Programmcode auszuzeichnen usw.
Die Elemente <div>- und <span> werden verwendet, wenn der Inhalt keine semantische Bedeutung hat.
nicht semantik = aussehen , block .
HTML-Elemente werden nicht dazu verwendet, das Aussehen oder die Darstellung ihres Inhaltes zu beeinflussen.
Vielen Dank für deine Hilfe