HTML-Menüleiste oben fixieren?

Hi, ich möchte eine Webseite erstellen, bei der die Menüleiste oben am Bildschirmrand "kleben" bleibt auch wenn ich runter scrolle. Die eigentliche frage die ich habe ist jedoch, wie das geht, wenn ich noch ein Titelbild mit einbinden möchte, welches in der normalen ansicht, wenn man auf die Seite kommt über der Menüleiste ist.

Ich miene damit, dass das Titelbild mit nach oben scrollen soll, die Menüleiste aber nur bis zum oberen bildschirmrand mit nach oben scrollen soll. Ist sowas mit CSS möglich oder brauche ich dafür Java etc.?

Wäre nett, wenn ihr mir paar seiten vorschlagen könnt oder mir paar stichwörter geben könntet, wonach ich suchen soll :D

LG loubra

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

13.02.2016, 14:43

Hallo,

ich habe dir hier mal etwas Kleines geschrieben: https://jsfiddle.net/eehmvdsm/ - Ich glaube, so hast du das mit deiner etwas unverständlichen Erklärung gemeint?

Übrigens: In der Webprogrammierung ist Java keine Client-Seitige Scriptsrache, welche du gerade meinst. Du redest wohl von JavaScript, womit man gleichzeitig auch mit jQuery arbeiten kann. Java != JavaScript, gaaaaanz wichtig! Schaue dir hierzu einfach mal mein Titelbild an, denn diese Fehlvorstellung hast nicht nur du!

Grüße,

Hummel

loubar

Fragesteller

13.02.2016, 15:56

Ja danke! genau das hab ich gesucht :D

0

13.02.2016, 14:22

Schau dir mal diese Seite an, hier wird beschrieben, wie du mit jQuery programmieren kannst, dass ein Element ab einer bestimmten Position angeheftet wird, falls du das gemeint hast...

http://stackoverflow.com/questions/8644248/jquery-fix-div-when-browser-scrolls-to-it

02.03.2016, 15:35

Mit CSS ist das ziemlich einfach:

#meinemenüleiste
{
position:fixed;
top:0px;
left:0px;
}

13.02.2016, 14:22

du suchst wahrscheinlich nach der position:fixed;

ja es ist nur in css machbar

Ähnliche Fragen

OS X 10.9.4 - Menüleiste fixieren?

Ist es möglich innert OS X die Menüleiste (oberer Bildschirmrand ...) zu fixieren?

Div soll beim scrollen am Bildschirmrand fixiert werden?

Hallo,

Ich habe ein Div, welches unter einem anderen Div liegt. Wenn ich nun scrolle, soll das Div, sobald es am oberen Browserrand ist, dort fixiert sein. Ich habe folgenden Code ausprobiert, aber leider funktioniert dieser nicht:

.fixed {position: fixed; top:0; }

Kann mir jemand helfen, was an dem Code falsch ist? Kenne mich leider nicht so sehr mit Javascript aus.

Vielen Dank im Voraus

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

CSS Wie kann man das Hintergrundbild beim scrollen fixieren?

Wie oben schon steht, würde ich gerne bei meiner Seite den Hintergrund fixieren. Ich habe mich jetzt ein wenig über Hintergrund Fixieren über den CSS schlau gemacht... doch nirgendwo habe ich nur ein Wort verstanden! Ich wusste nicht wie ich den Code kopieren sollte und was ich daran verändern sollte... Kann mir vlt. jemand weiterhelfen und mir es eventuell auch erklären? Lg

Bestimmten Bereich in Excel fixieren?

Hi, ich kenne die Funktionen Fenster Teilen und das man die obersten oder rechtesten Zeilen fixieren kann. Hab damit auch schon ein wenig rumprobiert, hilft mir aber leider nicht. Also folgendes:

Ich habe auf der linken Hälfte eine Tabelle, wo regelmäßig neue Werte eingetragen werden. Dies Werte werden dann in einer Tabelle auf der rechten Seite ausgewertet. Links scrolle ich jetzt immer weiter runter, der Auswertungsbereich auf der rechten Seite verschwindet also irgendwann. Will ich also die neuen Ergebnisse der Auswertung sehen, muss ich immer weiter nach oben scrollen und dann wieder nach unten um die nächsten Ergebnisse einzutragen.

Gibt es eine Möglichkeit, dass ich die rechte Hälfte komplett fixiere? Beim Teilen des Bildschirms wird im rechten Bereich nur das scrollen von links nach rechts fixiert, das scrollen nach oben und unten läuft immer noch über beide Fensterhälften hinweg synchron.

In den oberen Bereich packen und den dann fixieren geht auch nicht, da der Auswertungsbereich über die gesamte Höhe des Fensters geht.

Würde mich über (kreative) Ideen freuen.

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

Kann man bei Youtube die Ansicht ändern?

Auf dem Handy ist es Ja so, dass man das Video schauen kann und in den Kommentaren Scrollen kann. Am Laptop ist es allerdings so, dass wenn ich runter scrolle das Video auch runter geht. kann ich das umstellen dass das Bild oben bleibt aber ich in den Kommentaren scrollen kann?

HTML Img responsive overflow?

Hallo Liebe Community,

ich habe eine kurze Frage. Ich habe in meinem

HTML Code ein img eingefügt und es mittig zentriert und die breite auf 100% gesetzt. Zudem ist dieses Bild 100vh hoch. Sobald ich die Seite kleiner mache vergrößert sich das Bild, da die 100vh ja gefüllt werden müssen. Soweit so gut. Nun wenn ich auf Safari oder Chrome auf das responsive tool gehe, öffne ich zb die Ansicht eines iPhones und kann immer bei dem img ein Stückchen nach rechts scrollen. Scroll ich aber 100vh runter, richtet sich die Seite wieder mittig aus also springt wieder zurück. Ich hab’s versucht mit overflow hidden und max width 100% im html Bzw Body css aber nichts von beiden hat funktioniert. Wie behebe ich das?

vielen Dank im Voraus

lg

HTML Seitliches scrollen verbieten?

Hallo, ich möchte gerne bei meiner Website das seitliche scrollen verhindern. Mein Inhalt befindet sich in der mitte. In css habe ich nun overflow-x: hidden. Nun kann man nicht mehr per Scrollbar nach rechts scrollen. Wenn ich jetzt aber auf das Scrollrad klicke (mittlere Maustaste) und meine Maus nach links bewege, scrolle ich trotzdem nach rechts. Genau so auf dem Ipad. Ich kann einfach per touch nach recht scrollen. Nun möchte ich das verhindern. Kann mir jemand helfen?

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

Fenster Teilen Excel?

Hallo,

kurze Frage, ich habe zwei Tabellen auf einem Tabellenblatt.

Links täglich, rechts nach Kalenderwochen, alles ist mit Zahlen gefüllt. Nun ist es so, dass die Tabelle links selbstverständlich deutlich länger ist. Ich will daher links scrollen können und rechts soll dabei "stehen bleiben". Ich habe mittels Teilen, Fixieren und Co alles probiert, wenn ich links in das Feld klicke und das Mausrad scrolle, bewegt sich rechts immer mit.

Wie kriege ich das richtig voneinander entkoppelt?

Danke!

Wie erstelle ich einen coolen Header, bzw. ein cooles Menü bei CSS/HTML?

Hallo Community,

Ich habe momentan in der Schule das Thema CSS und HTML. Wir müssen nun alle eine eigene Website erstellen. Ich hab mich dann mal auf die Suche nach ein paar coolen Websites gemacht, um mich dabei inspirieren zu lassen. Eine bestimmte Seite hat es mir auch sehr angetan, vor allem der Header, bzw. das Menü oben. Nun wollte ich fragen, wie ich so ein Menü (muss nicht so krass sein) erstellen kann? Muss ich da schon mit Javascript arbeiten oder reicht CSS/HTML aus?

Hier der Link zu der Website: http://rosewatermv.com/

Vielen Dank schon im Voraus.

LG

HTML Navigationsleiste strecken?

meine navi leiste klebt aneinander also alle kästen.

wie kann ich es auseinander ziehen?

<html>
<head>
<title>X</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<body bgcolor=#d9d9d9>
<style>
.container {
clear: both;
float: left;
width: 100%;
overflow: hidden;
background: ##56585b;
font-family: Verdana;
font-size: 1em;
}
#navi {
float: left;
position: center;
left: 50%;
margin: 2 auto;
padding: 40;
list-style-type: none;
}
#navi li {
float: left;
position: center;
right: 50%;
}
#navi a {
width: auto;
display: block;
padding: 5px;
line-height: 1.5em;
color: #000000;
background: ##56585b;
border:2px solid #024c68;
text-decoration:none;
}
#navi a:hover {
background: #56585b;
color: #000;
} 
{bcolor: grey} 
div.a {
text-align: center;
}
ul.horizontal li{
display:block;
float:center;
padding:0 10px;
}
</style>
<div class="a">
<u><h1>XXXXXXXXXXXXXXXXXX</h1></u>
</div>
<p>XXXXXXXXXXXXXXXXXXXXXXXXX
 <div class="container">
<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div> 
</body>
</html>

Dropdown Menü mit Links - HTML?

Ich möchte gerne ein Dropdown Menü auf meiner Webseite einfügen, in den man verschiedene links in den "Auswahlfeldern" hat.

Gemeint:

[Dropdown Menü]
[Link 1]
[Link 2]
[Link 3]
[Link 4]
[Link 5]

Wie kann ich es machen das diese Links funktionieren?

Könnt ihr mir eine Beispiele Code zeigen?

Geht das in HTML?

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }