Wieso verdeckt meine NavBar meiner Website den Content?

Bild zum Beitrag

Es fehlt eine Zeile und die Überschrift, die dadurch bedeckt wird. Außerdem haben Überschrift und die fehlende Zeile eine größere Höhe als die NavBar an sich, deshalb müsste ein Stück der Überschrift im nirgendwo sein, keine Ahnung^^

2 Antworten

medmonk

18.03.2018, 01:42

Direkt vorweg ein gut gemeinter Tipp: Bei solchen Fragen immer den Quellcode samt dazugehörigem CSS bereitstellen. Dafür kannst du kostenlose Plattformen wie CodePen, JSFiddle oder Pastebin verwenden.

Es fehlt eine Zeile und die Überschrift,

Lass mich raten, die Navbar wurde oben fix positioniert. Die Navbar wurde also aus dem normalen Fluss herausgenommen. Ergo der restliche Content dahinter verschwindet. Kurz mit einem padding-top und/oder margin-top ausgleichen.

Wenn du die Developer-Tools deines Browsers einsetzt, die einzelnen Elemente untersuchen kannst. Darüberhinaus Eigenschaften testen kannst und dich so an einzelne Werte herantastest. In diesem Fall ein angepasster Abstand nach oben.

LG medmonk

FireEraser

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

18.03.2018, 01:42

Hast du die Navbar absolut oder fixiert positioniert? Das ist der häufigste Grund für so etwas.

Jedenfalls wird es schwierig dir ohne Code zu helfen. Du kannst auch selber mit den Entwicklerwerkzeugen deines Browser schauen wo das Zeug hingekommen ist und wieso. Wenn du damit den Fehler nicht findest, solltest du den Code auf eine Seite wie hastebin hochladen.

Ähnliche Fragen

Höhe ohne Navbar in px berechnen?

Ich hab auf meiner Seite ne Navbar und darunter soll content.

Ich benutz für Charts Fremdkomponenten, und da muss ich ne Höhe angeben, in px. Das Diagramm soll den gesamten restlichen Platz einnehmen, also "100% - Navbar"

Wie kann man die Höhe in px berechnen?

...zur Frage

Website Hintergrundbild interaktiv gestalten?

Guten Tag,

ich habe mich nun in html und css eingelesen, bin noch relativ neu und habe eine Design Idee.

Ich versuche einen "interaktiven" Hintergrund für eine Website zu entwickeln, ( Zahnräder die verrostet sind )
Wenn man runterscrolled sollen diese Zahnräder von einem Sonnenstrahl angeschienen werden.
- Wenn man nun weiter runterscrolled sollen diese Zahnräder nach dem Sonnenstrahl mit Moos bedeckt sein.

Die Idee war:
3 Bilder erschaffen;
1. Zahnräder mit Moos
2. Zahnräder werden angestrahlt.
3. Zahnräder sind mit Moos bedeckt.

Nun habe ich den ersten Maincontent der einen gewissen Platz auf der Website bedeckt.
Die Leute scrollen weiter runter zu den relevanten Sachen
Durch das scrollen wird das 2. Bild auf einem ganz schmalem Content eingeblendet.(überlagert das fixe Bild 1.)
Danach sieht man Bild 3.
Nun ist das Zahnrad vollständig mit Moos bedeckt.
Und das nur durch die 3 Bilder.

Es hat also den Anschein, dass dieses Hintergrund interaktiv ist.

Ich habs ein wenig kompliziert erklärt und die Beispielbilder mit denen ich das getestet habe sind leider verloren gegangen. Allerdings hat die Veränderung von Bild 1 auf Bild 3 schon sehr gut funktioniert. Bloß der Lichtstrahl erschien mir schwierig, da es eben nur ein weiteres fixes Bild ist und die Aktion der Strahlung dadurch nur sehr schwer umsetzbar schien.

Frage: Gibt es andere Möglichkeiten bzw. Kann das mit irgendwelchen Ideen von euch gut umsetzbar gemacht werden?

Beste Grüße und Danke im vorraus.

...zur Frage

T-Shirts bedrucken lassen?

Hallo,

Kennt jemand eine Website die T-Shirts bedruckt. Es geht immer nur um den Druck. Die T-Shirts habe ich bereits. Ich denke hierbei an eine größere stückzahl und somit geringeren Preis pro Stück.

...zur Frage

WP: Abstand zwischen Zeilen lässt sich nicht entfernen?

Hallo liebe Leute!

Ich verzweifle gerade an der Anpassung der Zeilenabstände meiner Website in WordPress. Ich habe nirgendwo einen Abstand für die Zeilen vergeben, dennoch sehe ich einen Blitzer zwischen Ihnen. Hat jemand so ein Problem schon Mal gehabt? Das Video, das ich in die obere Zeile geladen habe, blendet außerdem kurz das Pause-Zeichen ein. Kennt sich jemand damit aus? Vielen Dank schon vorab!

Benutztes Theme: Bridge

...zur Frage

HTML Komplette Zeile einer Tabelle als Link

Hallo Community,

mal wieder habe ich ein Problem und zwar sagt die Überschrift schon alles.

Ich habe das Menü meiner Website in Tabellenform angelegt. Nun steht quasi in jeder Tabellenzeile ein Link. Das Problem ist, man muss auf den Text klicken, welcher als Link markiert ist.

Nun möchte ich aber, dass es genügt wenn man nur in die jeweilige Zeile klickt der Link geöffnet wird. Da die Tabellenzeile via CSS wie ein Button aussieht, jedoch nur der Text im "Button" angeklickt werden kann.

Ich hoffe ich konnte ungefähr beschreiben was ich möchte.

Danke schon einmal im Voraus

Mfg Eyevi

...zur Frage

Js observer Fehler?

Hallo liebe Community,

ich habe die programmierter Seite eines YouTubes (https://github.com/kevin-powell/navbar-change-on-scroll/tree/master/nav-change-finished)

eingesetzt und ausprobiert. Ziel war es dass sich die navigationsbar oben farblich ändert beim scrollen. Ich bekomme aber immer bei der letzen Zeile im JS Code einen Fehler. Bekommt ihr den auch und wie kann ich diesen beheben?

...zur Frage

Problem mit Google Docs!?

Hi Leute, hab ein Problem mit Google Docs. Schreibe gerade einen Text und wenn ich eine Überschrift schreibe, die mehr als eine Zeile hat, kann ich die untere Zeile nicht auf die gleiche Höhe einrücken wie die erste Zeile(screenshot unten).

Könnt ihr mir sagen wie das geht oder was ich falsch mache? Wenn ich vor das a in der zweiten Zeile gehe und Leertaste drücke bewegt sich nichts und wenn ich hinter das a gehe verschiebt sich alles nach dem a, und wenn ich die Leerzeichen wegmachen geht es wieder komplett an den Anfang.

Danke!

...zur Frage

Html CSS Überschrift ausrichten?

Hallo,

ich habe in einer Zeile sowohl Button, als auch eine Überschrift. Wie kann ich die Button links lassen, die Überschrift aber in die Mitte ziehen? Denke das erklärt schon alles, ansonsten fragen.

Zweite frage:

Wie richte ich das Bild so aus, dass es über die gesamte Webseite reicht? Width 100% hat nicht funktioniert.

...zur Frage

Dark-Mode White-Mode Schalter Position verschieben?

Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.

(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)

Hier der Code der HTML-Seite:

<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>

<form>

<!-- LOGO -->

<div class="Logo">

<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>

</div>

<!-- ----- -->

<!-- HIER BEFINDET SICH DIE FRAGE -->

<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">

<div class="curtain"></div>

<!-- UEBERSCHRIFT -->

<div class="Ueberschrift">

<h1> <b> ÜBERSCHIRFT </b> </h1>

<h2> IMPRESSUM </h2>

</div>

<!-- ----- -->

<!-- BUTTONS -->

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<!-- ----- -->

<!-- KONTAKT -->
<div class="Impressum">

<h2> <u> TEXT </u> </h2>

</div>

<center>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>

<p> TEXT </p>

</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">

<h2> <u> IMPRESSUM </u> </h2>

<h3>TEXT</h3>

<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>

<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>

</p>
<p>
TEXT
</p>

<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

</div>

<!-- ----- -->





</form>

</body>

</html>

...zur Frage

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

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

überschrift und bild in einer zeile (HTML)

folgende frage:

wie bekomme ich es hin das mein bild genau neben der überschrift steht und nochmal rechts von der überschrift also in der gleichen zeile...

Logo ... Überschrift ... Logo

Danke im Vorraus

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

Gundam HG Aerial rebuild Ersatzteil?

Ich habe mir kürzlich das HG Aerial Rebuild model kit gekauft aber leider fehlt ein Stück aus dem Kit, das Stück B9 um exakt zu sein.

Ich habe mich bereits etwas umgesehen habe aber nirgendwo eine Website oder ein Shop gefunden der Ersatzteile für Gundam Kits verkauft.

Daher wollte ich mal hier nachfragen ob jemand eine Idee hat wie man an so ein Ersatzstück kommt?

(Auf dem Bild sieht man die Lücke wo das Teil hätte sein sollen und dahinter sieht man auch wie es aussieht, das graue Stück)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen