Css Element mit position:fixed überdeckt Elemente?

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

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

Navigation:

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

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

kuechentiger

13.06.2017, 16:37

Abstand nach oben, der soch hoch ist, wie das überdeckte Element -z.B. top:150px

User16425

Fragesteller

13.06.2017, 16:43

hab ich mir auch schon gedachte, ist aber keine schöne lösung ^^

kuechentiger

13.06.2017, 16:52

@User16425

Dann musst du eben das überdeckte Element nach der Seite schieben - oder sticky probieren. ich weiß nicht, ob das überall funktioniert
https://maurice-web.de/halb-feststehende-bereiche-mit-position-sticky/

Ah, doch ziemlich
https://caniuse.com/#search=sticky

User16425

Fragesteller

13.06.2017, 19:04

@kuechentiger

perfekt das mit sticky, danke!

Pepepizzapalast

13.06.2017, 16:38

Dafür kannst du z-index benutzen https://www.w3schools.com/cssref/pr_pos_z-index.asp

Hier ein Beispiel: (falls ich dich richtig verstanden habe)

https://jsfiddle.net/swj09vpx/1/

User16425

Fragesteller

13.06.2017, 16:52

Nein, du hast mich nicht richtig verstanden :D

Auf der Seite ist ganz Oben eine Navigation, die immer dort oben angezeigt werden soll im Fenster.

Die Elemente, die unter der Navigation sind, werden aber bereits zu anfang schon überdeckt, was ich eben nicht möchte.

Hoffe, dass das verständlich war ^^

Ähnliche Fragen

Navbar in Css und Html drehen?

Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist

Derzeit sieht mein CSS so aus:

.StartseiteNav{

position:fixed;

}

.ArtistsNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(90deg);

}

.InfoNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(-90deg);

}

.TicketsNav{

position:fixed;

}

...zur Frage

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

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

...zur Frage

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zur Frage

Blazor Navigation Bar?

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

Hier ist der „Code“

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

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

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

Wie kann ich es als Navbar verwenden?

Ich meine, wie macht man den Blazor Code Behind?

...zur Frage

Mit CSS zwei verschiedene Tabellen verschönern?

Habe in CSS grad ne Tabelle die ich mit:

table{

width:100%;

background-color: black;

border-style: none;

height: 70px;

color: white;

text-align: center;

font: 200% serif;

}

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

...zur Frage

Transition des Background Images in CSS?

.btn{
    border-color: rgb(0, 153, 255);
    border-style:solid;
    color: black;
    align-content: center;
      flex-direction: column;
      margin: 20px;
      padding-right: 5em;
      padding-left: 5em;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      border-radius: 20px;  font-family: "Roboto", sans-serif; 
      text-align:center;
    text-decoration: none;
    cursor: pointer; 
    float: left;
    transition: 0.5s;
    overflow: hidden;
}

.btn:hover{
    transition: 0.5s;
    background-image:-webkit-linear-gradient( top left, rgba(0, 153, 255, 0.5), rgba(6, 125, 204, 0.5));
    color: white;
}

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

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

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

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

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

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

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

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

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

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen