CSS: Wie Gitarren-Akkorde platzsparend in den Text einfügen?

Ich erstelle HTML-Dokumente mit Liedtexten zum Ausdrucken. Die Texte sind so groß wie möglich. Also viele Strophen, umso kleiner der Text.

Nun möchte ich Akkord-Angaben hinzufügen. Die führen dazu, dass die Zeilenhöhe enorm anschwillt und der Text nicht mehr auf A4 passt:

Bild zum Beitrag

Welches CSS stellt die Akkorde höher, aber behält die Zeilenhöhe? Hier habe ich experimentiert:

akk_c::before {
  color:          red;
  background:     #eee;
  vertical-align: super;
  font-family:    arial, sans-serif;
  font-size:      80%;
}
akk_c::before   { content: "C"; }

Bild zum Beitrag

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

01.10.2023, 12:06

Deine bisherige Umsetzung ist nicht valide und es dir obendrein einfacher machen kannst, wenn du den Wert des Akkords in einem data Attribut ablegst. Das jeweilige Wort wird dann in einem <span> verschachtelt und mit CSS formatiert.

HTML:

<div>
  <p> 
   Sie putzen
   <span class="chord" data-chord="C">klirrend</span>
   am Geschirr...
  </p>
</div>

CSS:

.chord {
  position: relative;
  margin-left: 11px;
}

.chord[data-chord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

Durch den obigen Aufbau wird der Akkord absolut am <span> Element ausgerichtet. Es spielt daher keine Rolle, auf was du den Zeilenabstand (line-height) einstellst. Der Akkord wandert automatisch mit, da er sich am <span> hängt.

Du kannst dafür auch das <i> Element zweckentfremden, so wie man es gerne zwecks Einbindung von Icons macht. Wäre dann nochmal etwas kürzer.

<i class="chord" data-chord="C">klirrend</i>

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Verelat777

01.10.2023, 12:41

Perfekt, besser kann man es nicht erklären.

10tel

Fragesteller

01.10.2023, 13:27

Sieht gut aus, funktioniert leider nicht. (Bin schon beim nächsten Lied)

Wenn der <span class="cord" data-cord="C">Maibaum</span> wieder am <akk_f>Dorfplatz</akk_f> <akk_c>steht</akk_c> <i>(wenn der <akk_c>Maibaum</akk_c> wieder am <akk_f>Dorfplatz</akk_f> <akk_c>steht</akk_c>)</i>

Beim [Firefox:Untersuchen] wird der style für .cord vollkommen ignoriert, woran kann das liegen?

 <style>
.chord {
 position: relative;
 margin-left: 11px;
 background: #fee;
}
.chord[data-chord]::before {
 content: attr(data-chord);
 padding: 3px 5px;
 position: absolute;
 top: -9px;
 left: -13px;
 color: red;
}
 p {
   margin-bottom: .2em;
 }
 </style>

10tel

Fragesteller

01.10.2023, 13:47

@10tel

span wurde akzeptiert, span.cord aber nicht ... komisch

span {
  min-width: 5px;
  background: #fee;
}
span.chord {
  position: relative;
  margin-left: 11px;
}
span.chord[data-achord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

10tel

Fragesteller

01.10.2023, 13:53

@10tel

acord = chord (hatte ich ausprobiert, vielleicht ist chord ein Systembegriff - nein)

medmonk

01.10.2023, 15:30

@10tel

Du musst den Quellcode so übernehmen, wie ich ihn vorgegeben habe. Schmeiß in CSS das unnötige span raus, ebenso deine akk_f usw.

wird der style für .cord vollkommen ignoriert, woran kann das liegen?

Die Klasse heißt chord (englisch für Akkord ;) ). Du musst deine „akk” durch ein <span> oder <i> Element ersetzen und anschließend jeweils im data Attribut den gewünschten Akkord einträgst. Dann funktioniert es auch.

Dein HTML sollte dann so aussehen:

<i class="chord" data-chord="f">Dorfplatz</i> 
<i class="chord" data-chord="c">steht</i>(wenn der 
<i class="chord" data-chord="c">Maibaum</i> wieder am 
<i class="chord" data-chord="f">Dorfplatz</i> 
<i class="chord" data-chord="c">steht)</i>

Dein CSS:

.chord {
  position: relative;
  margin-left: 11px;
}

.chord[data-chord]::before {
  content: attr(data-chord);
  padding: 3px 5px;
  position: absolute;
  top: -9px;
  left: -13px;
  color: red;
}

10tel

Fragesteller

01.10.2023, 21:39

@medmonk

Zwischenbericht: Danke, dein Vorschlag funktioniert, wenn er allein im Dokument ist. Nun suche ich, warum das nicht funktioniert in meinem Umfeld.

10tel

Fragesteller

01.10.2023, 22:48

@10tel

Fehler gefunden. Ich schrieb cord mit 4 Buchstaben, du chord mit 5 Buchstaben. Ist mir erst aufgefallen, als eine korrekte Zeile im Editor unter einer fehlerhaften Zeile stand. Die fehlerhafte war kürzer.

guteantwort626

01.10.2023, 19:17

Deine bisherige Umsetzung ist nicht valide

Meinst du wegen der eigenen Definition eines HTML Elements? Das wäre in HTML5 valide, wenn statt eines _ ein - verwendet werden würde, siehe https://www.mediaevent.de/html/custom-elements.html

medmonk

02.10.2023, 06:40

@guteantwort626

Ich weiß das man eigene Elemente anlegen kann. Es ging tatsächlich um die Schreibweise. Dasselbe Schema gilt ja auch beim data Attribut.

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

Blazor Navigation Bar?

Ich versuche Blazor zu lernen und möchte jetzt die Standard-Navbar loswerden. Ich habe ein schönes Navbar-CSS-Template gefunden.

Hier ist der „Code“

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Wie kann ich es als Navbar verwenden?

Ich meine, wie macht man den Blazor Code Behind?

...zur Frage

CSS Text Mittig ausrichten trotz max-width?

Hi,

also ich habe ein Text erstellt, und habe diesem gesagt "text-align: center", und eine max-width: 20%;

Aber ernimmt zwar jetzt die 20% max-width, aber zentriert den Text nicht mehr Links?

warum?

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zur Frage

Wie funktioniert in CSS font-family die Angabe mit generischen Schriftklassen?

Hallo, ich habe folgende Frage:

Angenommen, ich schreibe in CSS

body {font-family: Arial, Verdana, sans-serif;}

dann ist es doch so, dass Arial zuerst bevorzugt wird. Hat der Nutzer Arial nicht auf dem System, dann kommt Verdana zum Einsatz. Nehmen wir aber an, dass sowohl Arial als auch Verdana nicht vorhanden sind (so unwahrscheinlich das auch ist), wird dann nach dem Zufallsprinzip irgendeine Schriftart aus der generischen Schriftklasse sans-serif selektiert, egal welche? oder gibt es da irgendeine Reihenfolge?

...zur Frage

wie findet ihr mein login feld?

habe ein kleines login feld gemacht und später kommt noch python dazu

code html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</header>

<main>

<h1 class="h1" >login</h1>

<h4> <a href="#">Password vergessen?</a></h4>

</form>

</div>

</main>

</footer>

</body>

</html>

css

body {

float: inline-start;

margin-top: 15%;

}

h1 {

font-family: sans-serif;

color: darkblue;

}

#Anmeldefeld {

display: flex;

align-items: center;

justify-content: center;

box-shadow: 20px 20px 10px gray;

border-style: solid;

}

...zur Frage

Python Tkinter clear geht nicht?

```File "C:\Users\Marek\energyECO\Gewinnspiel\clearEntry.py", line 9, in register_user

vorname_entry.delete(0, END)

AttributeError: 'NoneType' object has no attribute 'delete'```

Das ist der Error

Und das der Code:

from tkinter import *
import csv

def register_user():
    vorname_info = vorname.get()
    nachname_info = nachname.get()
    email_info = email.get()

    # open the file in the write mode
    with open('Benutzernamen.csv', 'a', newline='', encoding='UTF8') as f:
        # create the csv writer
        writer = csv.writer(f, delimiter =';')
        # write a row to the csv file
        row=[vorname_info, nachname_info, email_info]
        writer.writerow(row)
        # close the file
        f.close()

    #vorname_entry.delete(0, END)
    #nachname_entry.delete(-0, END)

    Label(screen1, text="energyECO")

    vorname_entry.delete(0, 'end')
    nachname_entry.delete(0, 'end')
    email_entry.delete(0, 'end')


def register():

    global screen1
    screen1 = Toplevel(screen)
    screen1.title("Gewinnspiel")
    screen1.geometry("550x500")

    global vorname
    global nachname
    global email

    vorname = StringVar()
    nachname = StringVar()
    email = StringVar()

    global vorname_entry
    global nachname_entry
    global email_entry

    Label(screen1, text="Bitte tragen sie ihren Vor- und Nachnamen und außerdem ihre E-Mail ein", font=('Arial 15')).pack()
    Label(screen1, text=" ").pack()
    Label(screen1, text="Vorname * ", font=('Arial 12')).pack()
    vorname_entry = Entry(screen1,width=50, font=('Arial 20'), textvariable=vorname).pack()
    Label(screen1,text=" ").pack()
    Label(screen1, text="Nachname * ", font=('Arial 12')).pack()
    nachnamne_entry = Entry(screen1,width=50, font=('Arial 20'), textvariable=nachname).pack()
    Label(screen1,text=" ").pack()
    Label(screen1, text="E-Mail * ", font=('Arial 12')).pack()
    email_entry = Entry(screen1,width=50, font=('Arial 20'), textvariable=email).pack()
    Label(screen1,text=" ").pack()
    Label(screen1,text=" ").pack()
    Label(screen1,text=" ").pack()
    Label(screen1, text="Mit der Teilnahme am Gewinnspiel und der Eingabe meine Daten erkläre ich mich bereit, den E-Mail Newsletter von energyECO monatlich zu erhalten.", font=("Arial 10")).pack()
    Label(screen1,text=" ").pack()
    Button(screen1, text="Daten senden", font=('Arial 20'), width="15", height="2", command=register_user).pack()


def close():
    print("Closed!")
    screen.destroy()
    screen1.destroy()

def main_screen():
    global screen
    screen = Tk()
    screen.geometry("300x250")
    screen.title("energyECO")

    Label(text="energyECO", bg="gray", width="300", height="2", font=("Calibri", 13)).pack()
    Label(text=" ").pack()
    Button(text="Gewinnspiel", height="2", width="30", command=register).pack()
    Label(text=" ").pack()
    Label(text=" ").pack()
    Label(text=" ").pack()
    Button(text="Close", command=close).pack()
    Label(text=" ").pack()

    screen.mainloop()

main_screen()

...zur Frage

Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

...zur Frage

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zur Frage

HTML und JS Seitentitel alle 0.2 Sekunden ändern?

Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?

Ich bedanke mich für verstandlichen Code!

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Title Changer</title>
        <link rel="stylesheet" href="./styles.css" />
        
    </head>


    <body>
        <script src="./app.js"></script>
        Click the button below to make the title go cRaZyYyYyY!
        <button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
    </body>
</html>

CSS:

body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

JavaScript:

async function makeitCrazy(){
    while(true){
        document.title = 'One';
        await (1);
        document.title = 'Two';
    
    }
    
}

...zur Frage

Html Login?

Hallo, ich habe folgenden Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="center">
    <h1>Anmelden</h1>
    <form method="post">
    


<div class="txt_field">
    <input type="text" required>
    <label>Benutzername</label>
</div>


<div class="txt_field">
    <input type="password" required>
    <label>Passwort</label>
</div>
<div class="pass">Passwort vergessen?</div>
<input type="submit" value="Anmelden">
<div class = "signup_link">
  Noch kein Nutzer?  <a href="regis.html">Registrieren</a>


</form>
</div>


</body>
</html>

Dies ist der CSS Code:

body {
    margin: 0;
    padding: 0;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: linear-gradient(120deg, #2980b9, #8e44ad);
}


.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Leider klappt nicht alles. Hab ich was falsch gemacht=

...zur Frage

Mit CSS zwei verschiedene Tabellen verschönern?

Habe in CSS grad ne Tabelle die ich mit:

table{

width:100%;

background-color: black;

border-style: none;

height: 70px;

color: white;

text-align: center;

font: 200% serif;

}

verschönert habe. Habe jetzt aber noch eine andere Tabelle die ich andere Eigenschaften geben möchte. Wie mache ich das jetzt?

...zur Frage

Css Element mit position:fixed überdeckt Elemente?

Ich habe in CSS eine Navigationsbar mit der Eigenschaft position:fixed, da ich möchte, dass sie mitkommt beim Scrollen. Jedoch überlagert sie am Anfang ebenso etwas, was ich eben nicht will.

Demnach ist meine Frage, wie ich das ganze so mache, dass die Navigationsleiste zu Beginn nicht schon ein Element überdeckt.

Navigation:

.nav{
  position: fixed;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #4A9188;
  color: #ffffff;
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen