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

Fragesteller

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

06.09.2015, 11:28

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

Ähnliche Fragen

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?

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

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

...zur Frage

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

...zur Frage

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

...zur Frage

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zur Frage

Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

...zur Frage

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

}

...zur Frage

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!

...zur Frage

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

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

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.

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

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

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen