Welchen Befehl brauche ich (HTML, CSS)?

Bild zum Beitrag

Hallo welchen css Befehl brauche ich damit wenn ich nach unten scrolle dass der weiße Kasten hinter der Menüleiste oben ist und nicht vor?

Danke!

3 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

IT, Webentwicklung

21.07.2024, 03:30

Du solltest bei solchen Fragen möglichst immer deinen Quellcode anfügen, da sich je nach Aufbau unterschiedliche Lösungsansätze mehr oder weniger anbieten. Ich würde die Position der Navigationsleiste lediglich mit position: sticky festlegen.

HTML:

<header class="page-header">
  <nav> <!-- navbar comes here... --> </nav>
</header>

<main class="page-content"> 
  <div class="container">
    <-- content comes here... 
  </div>
</main>

CSS:

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
   width: min(100% - 1em, 75em);
   margin-inline: auto; 
}

.page-header {
  width: 100%;
  height: 72px;
  position: sticky;
  top: 0;
  background-color: grey;
  color: white;
}

.page-content {
  /* for visual testing only */
  height: 3000px;
  background-color: red;
}

Wenn du anstelle von position: sticky mit position: fixed arbeiten möchtest, sowohl dem <main> Element (page-content) ein padding-top oder margin-top zuweist und dem <header> Element (page-header) einen höheren i-index zuweist.

CSS:

.page-header {
  --_header-h: 72px;
  width: 100%;
  height: var(--_header-h);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.page-content {
  margin-top: var(--_header-h);
}

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

timlg07

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

14.07.2024, 11:12

Die Menüleiste wirst du wahrscheinlich mithilfe von `position: sticky` oder `position: fixed` o.ä. oben platzieren. An dieser Stelle im CSS fügst du einfach noch die Zeile

z-index: 1000;

hinzu. Das sorgt dafür, dass die Menüleiste eine höhere z-Position hat, also vor den anderen Elementen mit niedrigerem z-index ist.

Woher ich das weiß:Berufserfahrung

medmonk

21.07.2024, 03:06

Wenn ein Element mit position: sticky positioniert wird, muss kein z-index gesetzt werden. Andernfalls würde sticky wenig Sinn ergeben. Lediglich beim fixen Positionieren müsste der z-index und ggf. ein margin/padding nach oben gesetzt werden.

timlg07

04.08.2024, 11:11

@medmonk

kann trotzdem sein, dass etwas anderes über dem sticky-positioniertem Inhalt drüber liegt. Ganz ausschließen wollte ich es jetzt nicht.

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

IT, Programmieren & Softwareentwicklung

14.07.2024, 09:16

z-index

michifrog

Beitragsersteller

14.07.2024, 09:21

Danke hat geklappt 😄

michifrog

Beitragsersteller

14.07.2024, 09:17

wo soll ich das hinzufügen?

Destranix

14.07.2024, 09:17

@michifrog

Schau mal hier, da findest du ein beispiel:

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Ähnliche Beiträge

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>

...zum Beitrag

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zum Beitrag

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zum Beitrag

Elemente in css schräg übereinander legen?

Ich habe folgendes Problem:

Ich möchte gerne den weißen Kasten mit dem Text drinnen rechts neben den Kasten mit der Flasche legen, aber die beiden sollen sich so halbwegs überschneiden (Wie in dem einen Beispiel Bild zu sehen)

Das sind mein akuteller HTML und CSS code:

Ich habe auch schon im Internet gesucht und dort steht überwiegend, dass ich was mit der id machen muss, da passiert aber irgendwie nicht das, was ich will... :/

...zum Beitrag

Wie kann man den Header immer beim runter scrollen sehen, css + html?

...zum Beitrag

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zum Beitrag

Css+html Navbar verschoben?

Hallo :)

Ich baue mir gerade eine Website auf und habe ein Burger-menü in Css und Html angelegt, allerdings ist der Navigationsbereich nicht unter dem Icon sondern verschoben darüber, wodurch das Menü nicht gut aufklappbar ist.

In Css habe ich bereits versucht durch nav{...} den Bereich von Html anzupassen (auch mit dem Boxenmodell) aber ich kenne auch noch keinen Befehl der das verschiebt, oder es funktioniert einfach nicht.

Ich wäre auf jeden Fall sehr dankbar für Hilfe!

LG Sabine

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

Abstand in CSS/Html?

Hallo,

ich möchte Abstand zwischen diesen Wörtern nach unten machen. Wie soll ich das machen?

Hier sind meine Tags:

HTML-CODES:

<h1 class="firstheading">PEAKSOFT</h1>

<li><a class="liststyleone" href="">My courses</a></li>

<li><a class="liststyle" href="">Announcements</a></li>

<li><a class="liststyle" href="">Trash</a></li>

<li><a class="liststyle" href="">Schedule</a></li>

</ul>

</header>

CSS-CODES:

.layout {

display: flex;

justify-content: space-between;

}

.liststyle {

list-style-type: none;

}

.liststyleone {

color: rgb(31, 110, 212);;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

font-weight: 600;

}

.liststyle {

color: black;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG

...zum Beitrag

CSS/JS Programmieren dass Link erst klickbar wenn?

Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:

<a href="seite2.html"><div>Weiter</div></a>

Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.

Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.

Ich hoffe mir kann jemand weiterhelfen. LG

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

HTML Banner auch beim scrollen an der gleichen stelle lassen?

Hallo,

Welchen Befehl muss ich eingeben, damit ich ein Banner habe das unten an meiner Webseite bleibt egal ob ich hoch oder runderscrolle, se soll immer am Bildschirmrand unten hängen und sich von dort wegbleiben.

Vielleicht kann mir ja auch jemand einen fertigen Quellcode geben. Und wo muss ich den Befehl Eingeben?

...zum Beitrag

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?

...zum Beitrag

App mit Html, Css und C#?

Wie kann ich mit Html, Css und C# eine Desktop App programmieren? Abgesehen von Blazor WASM App

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen