HTML / CSS Problem Drop-Down Menü verschiebt sich beim ranzoomen nach rechts?

HiLeute, bin gerade dabei eine Homepage für einen Sportclub in meiner nähe zu erstellen, bis jetzt funktioniert alles einwandfrei nur mein Drop-Down Menü verschiebt sich beim "ranzoomen" in den rechten bereich während alles andere in der mitte ( center ) bleibt. Ich bedanke mich schon mal für jede Antwort.

Style.css Quellentext :

@charset "utf-8"; /* CSS Document */

body { background:#222; font-family:Helvetica, sans-serif;}

nav { position:absolute; top:200px;}

nav ul { margin:0; height:40px; width:auto; float:center; box-shadow:0px 0px 32px 0px #111; border-radius:10px; padding:0; border-top:1px solid #444; border-bottom:1px solid #222;} nav ul li { position:relative; padding:10px; float:left; list-style:none; color:#999; background:#333; width:120px; text-align:center; border-right:1px solid #444; transition:all 800ms;} nav ul li:hover { background:#0C6; color:#fff;} nav ul li:last-child { border-radius:0 10px 10px 0;} nav ul li:first-child { border-radius:10px 0 0 10px;}

nav ul li:hover ul { height:auto; opacity:1;} nav ul li ul { position:absolute; top:45px; left:0; transition:all 800ms; opacity:0; overflow:hidden; height:0;} nav ul li ul li:last-child { border-radius:0 0 10px 10px;} nav ul li ul li { width:170px; text-align:left;} nav ul li ul li:first-child { border-radius:10px 10px 0 0;}

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Minilexikon

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

06.09.2015, 17:15

Ich vermute mal, dass das daran liegt, dass du absolute (x px) statt relativer (x %) benutzt (besonders position:absolute ist ein sehr selten zu benutzender Vertreter).

Während der Punkt der Navigation durch die immer größere Schrift weiter nach rechts rückt, ist das Dropdownmenü immer noch genauso viele Pixel vom linken Rand entfernt.

Rieba

Beitragsersteller

10.09.2015, 13:46

Danke, aber leider haut das immer noch nicht so ganz hin der Schatten effekt wird in die länge gezogen und das Menü befindet sich dauerhaft am linken rand der Seite. Hat sich aber schon erledigt hab das Menü jetzt von links nach rechts über die ganze Seite "gestreckt".

Minilexikon

10.09.2015, 14:44

@Rieba

Hmmm... Dazu müsste ich den Code wirklich mal in Aktion sehen...

fluffiknuffi

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

06.09.2015, 11:28

Bau das mal bei JSFiddle ein. So ist das nicht nachvollziehbar...

Ähnliche Beiträge

WordPress Menü fixieren?

Hallo, ich würde gerne mein Menü fixieren. Wie gebe ich das genau ein? Ich weiß das diese Frage schon gestellt wurde, habe es aber nicht geschafft mit fixed. Kenn mich da überhaupt nicht aus, bin mir nicht mal genau sicher ob ich die richtige Stelle raus gesucht habe^^. Alles was ich bisher gemacht habe sah echt komisch dann aus...

Wäre sehr dankbar für eure Hilfe!

2.0 Menu
    --------------------------------------------------------------*/
    .main-navigation {
        position: realtive;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
    }
    .main-navigation ul ul ul {
        left: -999em;
        top: 0;
    }
    .main-navigation ul ul a {
        width: 200px;
        color: #fff !important;
    }
    .main-navigation ul ul li {
        padding: 10px;
        text-transform: none;
        border-bottom: 1px solid #505050;
    }
    .main-navigation ul ul li:last-child {
        border-bottom: 0;
    }
    .main-navigation li:hover > a {
    }
    .main-navigation ul ul :hover > a {
    }
    .main-navigation ul ul a:hover {
    }.main-navigation {
        position: relative;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);

...zum Beitrag

linien entfernen?

zwischen denn button sind so kleine linien. wie kan man die enfernen?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/all.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.min.css">

    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <h1>Homepage</h1>
        <a href="https://youtube.com">
            <button class="youtube"><i class="fa-brands fa-youtube"></i> YouTube</button>
        </a>
        <a href="https://discord.com/channels/@me">
            <button class="discord"><i class="fa-brands fa-discord"></i> Discord</button>
        </a>
        <a href="https://github.com">
            
            <button class="github"><i class="fa-brands fa-github"></i> Github</button>
        </a>
    </div>



    
</body>
</html>

style.css

body {
background-image: url(background.jpg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: rgb(136, 127, 127);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;

}

.youtube {
    align-self: center;
    background-color: #f44336;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.discord {
    background-color: #738adb;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.github {
    background-color: #495057;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

...zum Beitrag

Mit html und css durch einen button Hintergrundfarbe ändern?

Hallo,

ich mache gerade eine Website und möchte da einen Knopf, mit dem ich die Hintergrundfarbe und die Schriftfarbe der Website ändern kann. Ich habe bereits einen Button designet, weiß aber nicht, wie ich mit ihm Befehle ausführen kann.

Vielen Dank schonmal im voraus!

Hier ist der html-text für den Button:

<main>

<button class="bonbon orange">hier drücken zum ändern der Hintergrundfarbe</buton>

</main>

und hier ist der css-text für den Button:

main{

background: white

}

.bonbon{

width.: 250px;

height: 60px;

backgorund: orange;

/* old browsers */

background: linear-gradient(to bottom, white, orange);

box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;

border: 1px solid #5ea617;

border-radius: 1em;

marign: 1em

}

.bonbon:hover{

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.bonbon:focus {

box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 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

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

...zum Beitrag

Abstand zwischen zwei Tabellen über HTML/CSS?

table.border1 {

width: 100%; height: 50%;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

border: 2px solid #000000; }

caption {

letter-spacing: 2em;

border: 1px solid #000000;

background-color: #008080;

color: #FFFF00;

font-size: xx-large; }

th, td {

font-family: Arial;

padding: 2px;}

th {

background-color: #ccc;

border: 1px solid #000000; }

th.WT {

color: #3FFFFF; }

th.Woche {

width: 3%; }

th.Block {

width: 3%; }

th.Zeiten {

width: 4%; }

td.Woche {

font-size: 32pt;

background-color: #FFFF00;

border-bottom: 2px solid #000000;

border-right: 1px solid #000000; }

td.Block {

background-color: #ffff88;

font-size: 16pt;

border-bottom: 2px solid #000000;

border-right: 1px solid #000000; }

td.AZeit {

background-color: #ffffcc;

border-bottom: 1px dotted #000000; }

td.EZeit {

background-color: #ffffcc;

border-bottom: 2px solid #000000; }

td.Fach {

border-top: 2px solid #000000;

border-left: 2px solid #000000;

border-right: 2px solid #000000;

border-bottom: 1px dashed #000000;

background-color: #ffffe8;

color: #800000;

font-weight: bold;

width: 16%; }

td.Lehrer {

width: 10%;

border-left: 2px solid #000000;

border-bottom: 2px solid #000000;

border-right: 1px dashed #000000;

background-color: #ffffe8;

font-size: 10pt; }

td.Raum {

width: 6%;

border-bottom: 2px solid #000000;

border-right: 2px solid #000000;

background-color: #ffffe8;

font-size: 12pt; }

td.unten {

border-bottom: 5px solid #000000;

}

td.Info {

background-color: #abcdef;

}

td.Info1{

background-color: #FFFF00;

}

td.Info2{

background-color: #008080;

}

td.Info3{

background-color: #CCC;

}

td.Info4{

background-color: #00FFFF;

}

td.Info5{

background-color: #F5B3FF;

}

td.Info6{

background-color: #FF00FF;

}

td.Info7{

background-color: #808000;

}

td.Info8{

background-color: #BDEDBA;

}

td.Info9{

background-color: #FFB300;

}

td.Info10{

background-color: #00FF25;

}

td.Info11{

background-color: #FF0000;

}

td.Info12{

background-color: #B18380;

}

td.BB{

background-color: #FFFF00;

}

td.CC{

background-color: #008080;

}

td.DD{

background-color: #CCC;

}

td.EE{

background-color: #00FFFF;

}

td.FF{

background-color: #F5B3FF;

}

td.GG{

background-color: #FF00FF;

}

td.HH{

background-color: #808000;

}

td.II{

background-color: #BDEDBA;

}

td.JJ{

background-color: #FFB300;

}

td.KK{

background-color: #00FF25;

}

td.LL {

background-color: #FF0000;

}

td.MM{

background-color: #B18380;

}

table.border2{

width: 30%; height: 30%;

border-collapse: collapse;

text-align: center;

vertical-align: middle;

border: 2px solid #000000; }

Ich möchte gerne zwischen der oberen tabell und er tabell unten(2)einen Abstand haben. Könnt ihr mir bitte schreiben wie das geht.(Die Infos in der Mitte sind nicht wichtig.)

Danke!!!!

...zum Beitrag

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

Abgerundete Ecken CSS sind abgeschnitten (Grid-Box)?

Hallo,

ich hab erst vor angefangen HTML und CSS zu lernen und bin jetzt auf folgendes Problem gestoßen:

Ich möchte eine Webseite via CSS-Grid aufteilen und die Boxen jeweils abrunden. Allerdings werden manche Ecken immer abgeschnitten und ich finde nicht den Fehler an was das liegen könnte (siehe Screenshot, ecken rot Markiert). Hier der Code den ich bis jetzt verwende:

.gridbox{
  overflow: hidden;
  width: 99%;
  height: 99%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-areas:
      "nav nav nav nav"
      "sidebar main main main"
      "sidebar content1 content2 content3"
      "sidebar footer footer footer";
  grid-gap: 0.4rem;
  border-radius: 1rem;
}

#nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: 1rem;
}

#sidebar{
  background: #18ffff;
  grid-area: sidebar;
  border-radius: 1rem;
}


#main {
  background: #84ffff;
  grid-area: main;
  border-radius: 1rem;
}


#content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: 1rem;
}


#content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: 1rem;
}


#content3 {
  background: #73ffbb;
  grid-area: content3;
  border-radius: 1rem;
}


#footer {
  background-color: #1de9b6;
  grid-area: footer;
  border-radius: 1rem;
}

Soweit ich das verstanden habe, spricht man wenn man bei border-radius: 1px 2px 2px 1px; die Ecken einzeln an und bei border-radius: 1rem; alle Ecken.

Danke für Antworten :D

...zum Beitrag

Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

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

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

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

Ich hoffe ihr könnt mir helfen!

...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

Joomla! / Beez3-Template: Wie kann ich die Dimensionen des .logoheader in der CSS ändern?

Hallo,

folgende Daten sind derzeit in der in der personal.css hinterlegt:

.logoheader {
  background: url(../images/personal/personal2.png) no-repeat right;
  size:
  width: 100%;
  height: auto
  bottom #0C1A3E;
  color: #FFFFFF;
  height: 288px;
  max-height: 100%;
  width: 1030px;
  max-width: 100%;
  border-bottom: solid 1px #040404;
  border-top: solid 1px #040404;
  border-left: solid 1px #040404;
  border-right; soild 1px #040404;

Ich möchte erreichen, dass der .logoheader eine fixe Höhe und Breite hat und der Inhalt an dieses angepasst wird.

...zum Beitrag

Wie kann man in HTML einen Wrapper erstellen?

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

...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