CSS auf iframe anwenden?

Hi Leute,

ja ich weiß, dass es dazu schon viele Themen im Internet gibt, ich kann mit denen aber leider nichts wirklich anfangen, bzw. hat noch nichts funktioniert. Ich habe ein iFrame eingebunden (von der gleichen Domain) und möchte, dass bei dem iframe eine Sache anders aussieht, wie auf der Hauptseite. Wie kann man so einfach wie möglich einen CSS Befehl auf den Inhalt des iframes anwenden? Ich wäre für jede Hilfe wirklich sehr dankbar :)

Im Internet habe ich z.B. diesen Java Code gefunden, mit dem ich aber leider noch nicht weiter gekommen bin. Ducrh wass müsste ich hier z.B. "iframe" ersetzen?

$("iframe").contents().find("element-selector").css("border-color", "blue");

4 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

28.06.2020, 20:04

Das ist kein Java Code sondern JavaScript. Er macht eigentlich genau das was Du erreichen willst. Von der Seite aus die das iframe einbindet in dem iframe eine Style-Ausgabe ändern. Ist allerdings etwas mühsam wenn Du doch auf die Seite im iframe auch Einfluss hast. Daraus ergeben sich für mich 2 Fragen:

Wieso passt Du den Style nicht einfach direkt in der eingebundenen Datei an?
Wieso verwendest Du überhaupt ein iframe, wenn es die Inhalte von der gleichen Webseite lädt?

Woher ich das weiß:Berufserfahrung

CoolerTyp1997

Beitragsersteller

28.06.2020, 22:04

Aber es scheint ohne Lazy Load abgesehen davon leider auch nicht zu funktionieren... Echt merkwürdig

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:38

Und wäre das so wie darüber beschrieben in Ordnung, wenn der Code darunter wäre?

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:37

Also den Scriptcode einfach unter den iframe Code setzen? Sorry du merkst, dass ich mich damit nicht so auskenne...😅

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:33

Hmm. Das iframe wird mittels Lazy Load erst geladen, wenn man die Stelle erreicht hat. Könnte es vielleicht auch damit zusammenhängen? Bzw. habe ich das Java Script wie hier gezeigt auf der Seite eingebunden: https://www.publishingblog.ch/javascript-in-elementor-einbinden/

-> <script>$("iframe").contents().find("#Anker-PowerCore-10000mAh").css("display", "none");</script>

Das ist über dem iframe platziert. Wäre das denn so überhaupt richtig ?😅

threadi

28.06.2020, 20:35

@CoolerTyp1997

Wenn es per LazyLoad eingebunden wird, darfst Du es natürlich erst nach Ausführung des LazyLoad einbinden.

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:26

Mal ne blöde Frage: Wie kann ich denn sichergehen, dass JQuery bei mir eingebunden ist? Meines Wissens nach ist es eingebunden durch Plugins etc. (Ich benutze Wordpress) die das auch benutzen soweit ich weiß..

Den Code habe ich wie folgt geändert:

$("iframe").contents().find("#Anker-PowerCore-10000mAh").css("display", "none");

Die CSS ID (#Anker-PowerCore-10000mAh) ist bei dem entsprechendem Element bei der Referenzseite eingetragen. Dennoch wird das Element aber nicht ausgeblendet bei dem iframe. Auch andere CSS Regeln greifen nicht..

threadi

28.06.2020, 20:28

@CoolerTyp1997

Wordpress verwendet jQuery, es sei denn du hast ein Plugin, welches die Einbindung unterdrückt.

Wenn das JavaScript scheinbar nicht funktioniert, dann prüfe die Konsole im Entwicklerfenster, ob dort JavaScript-Fehler gelistet sind. Wenn ja, gehe diesen nach.

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:11

Hallo threadi,

danke für deine Antwort. Ja das Problem ist, dass ich die Hauptseite als "Referenzseite" habe und bei verschiedenen Unterseiten das iframe eingebunden habe, welches minimal anders aussehen soll als die "Referenzseite". Deshalb kann ich dort nicht die CSS Regel direkt machen.

Um nochmal auf das Script zurückzukommen:

Mit was müsste ich denn "iframe" ersetzen? Oder kann man das einfach so lassen?

threadi

28.06.2020, 20:13

@CoolerTyp1997

Das kannst Du so lassen, musst nur halt die dort stehenden CSS-Eigenschaften an deine Anforderungen anpassen. Du musst in deiner Seite allerdings auch jQuery eingebunden haben, denn es ist ein jQuery-Script.

FinnB132

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

01.07.2020, 15:10

Also so wie ich das verstehe willst du seitenelemente wiederverwenden, da wäre das der Komplett falsche ansatz.

Das ganze nennt sich in der Webentwicklung u.a. "Templating":

https://en.wikipedia.org/wiki/Web_template_system

Für dieses Konzept gibt es zahlreiche implementierungen:

https://developer.mozilla.org/de/docs/Web/HTML/Element/template

https://colorlib.com/wp/top-templating-engines-for-javascript/

Edit: Wie ich sehe verwendest du Wordpress, da gibt es schon ein Templating system.

https://developer.wordpress.org/themes/template-files-section/page-template-files/

Woher ich das weiß:Studium / Ausbildung – Gelernter Fachinformatiker, Freiberufl. Softwareentwickler

CoolerTyp1997

Beitragsersteller

01.07.2020, 15:21

@FinnB132Hallo Finn,

ja du hast vom Prinzip recht. Ich hatte das damals so gemacht, weil ich keine einfache Möglichkeit gefunden habe, die Templates mit Ajax nachladen zu können und es bei iframes recht einfach ist per Plugin. Ich benutze den Elementor Page Builder für Wordpress (falls du den kennst). Ich kenne mich leider nicht mit Coden aus. Wüsstest du denn eine einfache Möglichkeit (z.B. per Plugin), wie man gwisse Elementor Templates mit Ajax nachladen könnte?

Slollo921

28.06.2020, 20:10

Du könntest eine klasse zuweisen (nicht auf den iframe sondern inhalt der anderen seite) aber die deklarationen nur auf der seite vornehmen via <style></style> wo der iframe eingefügt wird. Hab ich aber noch nie probiert kann also auch nicht sagen ob das klappt

Woher ich das weiß:Berufserfahrung – Selbstständige Tätigkeit seit 5 Jahren

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:14

Aber dann würde das meine Wissens nach leider nicht für den iframe greifen. 🤔

Slollo921

28.06.2020, 21:26

@CoolerTyp1997

Gehe auch eher nicht davon aus. Aber weis es nicht deshalb der vorschlag

Cassandre66

28.06.2020, 20:03

Dann musst Du schon die Ursprungsseite im gewünschten Styl formatieren.

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:34

Hmm so ganz verstehe ich leider nicht wie du es meinst. Da kenn ich mich leider auch nicht gut genug für aus 😅

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:15

Leider beides..

Cassandre66

28.06.2020, 20:21

@CoolerTyp1997

Dann lies per php nur den Quellcode der Startseite ein und schneide ihn auf die Bedürfnisse zurecht.

CoolerTyp1997

Beitragsersteller

28.06.2020, 20:12

Aber über JavaScript müsste das doch eigentlich funktionieren? 🤔

Cassandre66

28.06.2020, 20:14

@CoolerTyp1997

Ist es nur Text oder Text und Bilder von der Startseite?

Ähnliche Beiträge

Schriftfarbe in einem Iframe ändern?

Hallo,

Also folgendes Scenario, ich schreibe gerade an einer Website die einen iframe enthält der sich im selben Ordner befindet.

Auf der Hauptseite habe ich die Möglichkeit eingebaut den style zu ändern, dies ermögliche ich mit zwei verschiedenen .css Datein zwischen denen es möglich ist zu wählen. Jetzt möchte ich das sich die Schriftfarbe (.css file) von dem iframe auch ändert wenn ich auf der Hauptseite zb 1.css ausgewählt habe (will heißen das auf der Seite die im iframe angezeigt wird entweder 1.css oder 2.css geladen wird, immer davon abhängig welche der beiden gerade auf der Hauptseite aktiv ist). Ich denke das es möglich sein muss entweder mit js oder css (beide seiten könnten auch auf das selbe css/js zugreifen).

Meine frage ist also wie kann ich das bewerkstelligen. Andere idee die ich hatte ist das man ja vlt. auch einen filter über den iframe legen könnte der eine bestimmte Farbe ein eine andere ändert, bin leider relativ neu auf diesem Gebiet und habe leider keine Antwort auf Google gefunden die funktioniert

...zum Beitrag

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

...zum Beitrag

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

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?

...zum Beitrag

Wie kann ich einen Button nach dem Laden einer Webseite aktiviert aussehen lassen?

Ich habe mir für mein Intranet ein kleines Video-Portal programmiert - das eigentlich ganz gut funktioniert.
Oben gibt es eine aufklappbare Ansicht mit Haupt und Unterkategorien und wenn eine Unter-Kategorie angeklickt wird öffnet sich die Seite mit einer Übersicht relevanter Videos.

Die Haupt-Kategorie gebe ich als URL-Parameter mit -> das funktioniert auch und es wird verdeckt die zu letzt verwendete Hauptkategorie angewählt.

Was nicht funktioniert, ist den Button für die aktuelle Hauptkategorie im Reitermenü so hervor zu heben als wenn er angeklickt wurde - bzw. den Button zu aktivieren.

JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;


  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

PHP-Script:


$cat = "Musik";
if (isset($_GET['cat']))
{
$cat = ($_GET['cat']);
}

echo '<details><summary> Kategorien: </summary>';
echo '<div class="tab">';

echo '<button type="button" name="Musik" class="tablinks" onclick="openCity(event, \'Musik\')">Musik</button>
<button type="button"  name="Anleitungen" class="tablinks" onclick="openCity(event, \'Anleitungen\')">Anleitungen</button>
<button type="button"  name="Kochen" class="tablinks" onclick="openCity(event, \'Kochen\')">Kochen</button>
<button type="button"  name="Backen" class="tablinks" onclick="openCity(event, \'Backen\')">Backen</button>
<button type="button"  name="Heimwerken" class="tablinks" onclick="openCity(event, \'Heimwerken\')">Heimwerken</button>';
  
echo '</div>';

echo '<!-- Tab content -->
<div id="Musik" class="tabcontent">
<div style="column-count: 5;">
'.$category_Musik.'
</div>
</div>

<div id="Anleitungen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Anleitungen.'
</div>
</div>

<div id="Kochen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Kochen.'
</div>
</div>

<div id="Backen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Backen.'
</div>
</div>

<div id="Heimwerken" class="tabcontent">
<div style="column-count: 5;">
'.$category_Heimwerken.'
</div>
</div>';

echo '</details>';

echo '<SCRIPT type="text/javascript" language="JavaScript">
openCity(event, \''.$cat.'\'); 
</SCRIPT>';

CSS-Definitionen:



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

so sieht es aus:

so soll es nach dem Laden der Seite aussehen:

Hat jemand eine Idee wie ich den Button für die aktuelle Kategorie beim Laden der Seite automatisch aktivieren kann?

...zum Beitrag

Border color Ändern?

MoinMoin Freunde

Ich würde gerne einen Text umrahme, und benutze folgenden code.

<div style="width: 460px; background-color: #ffffff; color: green; border: 7px solid #999;">

Nun will ich aber wie der Titel schon erahnen lässt, die border color noch ändern.

da ich keine CSS Kenntnisse habe, würde ich mich riesig freuen, wenn einer eine schnelle einfache Lösung hat in diesem code die border color zu ändern.

Mit freundlichen Grüssen

...zum Beitrag

Wo kann man eine Internetseite selber programmieren (selbst HTMLund CSS Code schreiben)?

...zum Beitrag

Wie kann ich iframe Cookies speichern?

Hallo zusammen, ich bin neu hier im Forum und hoffe, dass meine Frage / mein Problem hier richtig platziert ist: ich möchte für eine Auftragsarbeit (Insektenschutz-Website) eine Website mit einem iframe der url https://www.neher.de/produkte erstellen.

Zur Erstellung nutze ich bootstrap. Den iframe habe ich in die html eingebunden, es wird auch alles angezeigt und geladen - so weit so gut.

Jetzt ist es aber so, dass auf der eingebundenen neher.de Website Cookies abgefragt werden. Wie schaffe ich es möglichst mit JavaScript diese Cookies zu speichern?

Sonst muss ich ja wenn ich z.B. auf das Produkt "Pendeltür" klicke, wieder die Cookies akzeptieren, obwohl ich das ja schon getan habe - ich hoffe ihr versteht was ich damit meine.

Leider habe ich keine Ahnung von JS - ich hoffe es kann mir hier jemand helfen.

Schon mal vielen Dank dafür - VG Felix

Das ist der html Code:

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <style> main iframe { width: 100%; height: 65vh; }</style>
  </head>
  <body>
    <main>
      <iframe src="https://www.neher.de/produkte" frameborder="0></iframe>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
       crossorigin="anonymous"></script>
    </main>
  </body>
</html>

...zum Beitrag

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zum Beitrag

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

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;
}

...zum Beitrag

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zum Beitrag

Wieso funktioniert dieser CSS-Ladebalken nicht?

Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:

.loader {

position: relative;

}

.loader::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 100%;

border-top: 5px solid red;

border-left: 3px solid brown;

border-bottom: 1px solid purple;

border-right: transparent;

animation: spinner 0.8s linear infinite;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>

Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.

Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.

Wo liegt das Problem bzw. woran könnte das liegen?

...zum Beitrag

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen