HTML, wie Footer ganz nach unten?

Mit Position absolute passt es nicht, weil wenn die Seite 100vh übersteigt, dann ist es nicht ganz unten

        footer{
            margin: 0cm;
            padding: 0cm;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: palevioletred;
        }

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

24.04.2023, 17:42

HTML, wie Footer ganz nach unten?

footer {
  position:fixed;
  bottom:0
}

Alex

alexthenr14

Fragesteller

24.04.2023, 17:45

fixed passt auch nicht, es wird immer angezeigt ähnlich zu sticky

Ich möchte nur dass es immer ganz unten steht, egal ob die Seite höher oder niedriger ist als die Bildschirmhöhe

EinAlexander

24.04.2023, 17:52

@alexthenr14

Ich möchte nur dass es immer ganz unten steht, egal ob die Seite höher oder niedriger ist als die Bildschirmhöhe

<style>
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;         
}
</style>

 <div id="page-container">
   <div id="content-wrap">
     hello world
   </div>
   <footer id="footer">hello footer</footer>
 </div>

flyaquarius

24.04.2023, 17:38

Warum benutzt du position: absolute? Der Footer ist doch von alleine schon ganz unten, wenn du ihn im HTML-Skript als letztes hast.

alexthenr14

Fragesteller

24.04.2023, 17:40

Ist es nicht, auch nicht in w3schools
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_footer

flyaquarius

24.04.2023, 17:52

@alexthenr14

Okay, du willst ihn also ganz unten haben, selbst wenn der Inhalt der Seite das Fenster nicht ausfüllt. Dann probier es so:

body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  margin: 0;
}
  
.content{
  flex-grow:1;
}

content ist die Klasse eines divs, das du für den Inhalt erstellst, das auch erstmal leer bleiben kann.

alexthenr14

Fragesteller

24.04.2023, 18:02

@flyaquarius

so ähnlich habe ich es mir auch schon gedacht

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webentwicklung, Programmieren & Softwareentwicklung

24.04.2023, 17:57

Da gibt es viele Wege. Ich würde CSS Grid und min-height:100vh bevorzugen, da es flexibel und modern ist:

HTML

<article>
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</article>

CSS

article {
 display: grid;
 grid-template-rows: 80px 1fr 80px;
 min-height: 100vh;
}

header {
 padding: 10px;
 background-color: teal;
}
main {
 padding: 10px;
 background-color: white;
}
footer {
 padding: 10px;
 background-color: yellow;
}

Beispiel

https://jsfiddle.net/Babelfisch/yf1ktdcp/1/

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

medmonk

30.04.2023, 20:51

Schicke Lösung!

Dein HTML-Markup ist aber nicht valide. Das <main> Element ist ein Hauptelement und darf laut Spezifikation nicht innerhalb eines <article> Elements folgen. Auch sollten <article> sowie <section> mit einem Heading ausgezeichnet werden.

LG medmonk

Babelfish

30.04.2023, 21:05

@medmonk

Ich wollte gerade selbst mal das main Element nachschlagen und so wie es aussieht, gibt es das schon lange nicht mehr bzw. es wurde nicht in die endgültigen HTML5 Specs übernommen. Oder findest du beim W3C was darüber?

medmonk

30.04.2023, 21:19

@Babelfish

Das <main> Element steht in der Spezifikation unter 4.4 - Grouping content.

Kommando zurück - ich war nicht beim W3C. Ich schaue nochmal nach.

medmonk

30.04.2023, 21:28

@Babelfish

Tatsache - ich konnte das <main> Element auch nicht beim W3C in den Specs finden. Wenn es dort wäre, dann ja auch unter Grouping Content. Da jetzt selber etwas überrascht wurde und von ausging, es sei längst fest in den Specs.

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!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>Document</title>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Footer Zeilenumbruch?

Wieso kann ich da keine Zeilenumbrüche reintun? Ich glaube das liegt im footer{} aber ich habe keine Ahnung was dort das blockiert. Kann mir jemand helfen? Code:

<html>

<head>

<style>

body{

width: 100%;

height: 100vh;

}

margin: 0;

padding: 0;

font-family: 'Comfortaa';

}

footer{

padding: 3px;

background-color: lightgray;

color: white;

display: flex;

margin-bottom: 0vh;

position: relative;

padding: 30px;

}

footer a, p{

color: black;

text-decoration: none;

}

</style>

</head>

<body>

<h1>Willkommen beim Geissli-Shop!</h1>

<p>Website by

<a href="#">Elifox</a><br></p>

<p>2023

<a href="#">Geissli Gang</a><br></p>

<p>

<a href="Datenschutzerklaerung.html">Datenschutzerklaerung</a><br></p>

<a href="Nutzungsbedienungen.html">Nutzungsbedienungen</a>

</footer>

</body>

</html>

Danke schon im vorraus!

...zur Frage

Menü margin geht nicht?

Hallo,

ich habe folgenden Code:

HTML:

<div id="menu">
            <a href="euro-franken.html">Euro in Schweizer Franken</a>
            <a href="euro-krone.html">Euro in Schweizer Franken</a>
            <a href="euro-pfund.html">Euro in Schweizer Franken</a>
    </div>

CSS:

#menu {
  width: 45%;
  padding: 20px;
  display: none;
  min-height: 100%;
  background-color: rgb(71, 91, 107);
  position: fixed;
  z-index: 2;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}


#menu a {
  text-decoration: none;
  color: white;
  text-align: left;
  margin-bottom: 50px;
  border: 2px solid black;
  }

Nun macht der aber kein Abstand zwischen den Links. Warum nicht?

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


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




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

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

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!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>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zur Frage

HTML CSS Problem, Kann wer helfen?

Ich habe vor ein Spiel auf HTML responsiv zu machen. Ich würde es gerne so machen, dass der Button oben links neben dem Canvas angezeigt wird, doch erscheint der unten am Rand. Ich weiß nicht wie ich es ändern kann. Bei der Console habe ich geguckt und das Canvas (width: 320px) nimmt den ganzen Bereich im Feld ein (Im Bild der blaue Bereich). Kann mir wer von euch helfen? Danke im voraus.

Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?

<!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>Tetris</title>
    <link rel="icon" href="css/img/galaxsite/galaxsiteIcon.png">
    <style>
        .gameField {
            max-width: 50%;
            margin: 25px auto;
            background-color: #151618;
            box-shadow: 20px 20px 15px black;
            padding-top: 2%;
            padding-bottom: 2%;
            padding-left: 2.5%;
            padding-right: auto;
        }

        canvas {
            background-color: #000000;
            border: 3px solid #a60cf0;
            width: clamp(50px, 50%, 320px);
        }


        .buttonStart {
            background-color: #a60cf0;
        }
    </style>
</head>
<body>
    <div class="gameField">
        <canvas class="canvas" width="320px"  height="640px    </canvas>
        <button class="buttonStart">Start</button>
    </div>
</body>
<script type="text/javascript" src="js/tetris.js" defer></script>
</html>

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

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

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen