20.04.2015, 20:27
|
|||
|
|||
Responsives Layout mit fixiertem Menü
Hallo zusammen
 Ich stehe gerade voll auf dem Schlauch, obwohl ich eigentlich nur etwas ganz einfaches mit CSS realisieren will. Ich habe ein Seite, bei der rechts ein Vertikales Menü ist. (Im Moment gefloatet) Dieses Menü soll jetzt eben einfach die Breite haben, die zur Anzeige des Inhalts nötig ist (Was mit "float" super funktioniert). Der Inhalt der Seite links nimmt den restlichen Platz ein, was mit overflow: hidden auch einwandfrei geht. Das Problem ist jetzt nur, dass ich mein Menü so haben will als wäre es ein Element mit position:fixed verhält. Das beim scrollen also nur der Inhalt der Seite auch wirklich scrollt. Ich habe schon ewig im Internet gesucht, aber einfach nichts gefunden. Wenn ich mit position:fixed anstatt float arbeite, müsste ich eine Breite für den Inhalt-div angeben. Das ganze Layout soll aber responsiv sein. Danke soweit fürs durchlesen. Ich hoffe ihr könnt mir helfen Schönen Abend, Franz 
|
| Sponsored Links |
|
20.04.2015, 20:51
|
|||
|
|||
|
Hallo,
ohne konkretes Beispiel ist kaum eine konkrete Hilfe möglich. Ich verstehe zum Beispiel nicht was "overflow: hidden" bewerkstelligen soll. Für eine fixe Navi ist das überhaupt nicht erforderlich. Dir fehlt offensichtlich die Kenntnis über (oder du verwechselst) Flexibles Design und Responsive Design. Du kannst doch dem Inhalt einfach einen rechten Abstand (margin) geben, der der Breite der Navigation entspricht bzw. etwas breiter ist. Das CSS für die fixe Navi würde dann zum Beispiel einfach lauten Code:
body {
positon: relative;
}
nav {
position: fixed;
right: 2rem;
}
main {
margin-right: 12rem;
}
Wobei man bei einer fixen vertikalen Navigation aufpassen muss, das die Besucher auch alle Menüpunkte sehen und erreichen können. Immer wieder basteln Webseitenersteller an ihren großen Monitoren im Vollbildmodus solche Navigationen und bedenken nicht, das viele ihrer Besucher über kleinere Bildschirme / Fenster verfügen. Ich habe mal ein einfaches Beispiel erstellt, das einerseits eine fixe Navi rechts bei flexiblem Inhalt enthält, bei dem andererseits die Navi aber vertikal "zu lang" ist: Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Fixe Navigation vertikal</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
positon: relative;
}
nav {
position: fixed;
right: 2rem;
}
main {
margin-right: 12rem;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Banane</li>
<li>Kirsche</li>
<li>Pflaume</li>
<li>Kiwi</li>
<li>Ananas</li>
<li>Erdbeere</li>
<li>Mango</li>
<li>Heidelbeere</li>
<li>Haselnuss</li>
<li>Grünkohl</li>
<li>Kartoffel</li>
<li>Senf</li>
<li>Nusscreme</li>
<li>Brot</li>
<li>Mandelhörnchen</li>
<li>Schillerlocke</li>
<li>Klopse</li>
<li>Butter</li>
<li>Käse</li>
<li>Rotkohl</li>
<li>Spargel</li>
<li>Speck</li>
<li>Currywurst</li>
<li>Erbsensuppe</li>
<li>Bohne</li>
<li>Tomate</li>
<li>Wasser</li>
<li>Milch</li>
<li>Gurke</li>
<li>Orange</li>
<li>Pfeffer</li>
<li>Kassler</li>
<li>Rettich</li>
<li>Haferschleim</li>
<li>Müsli</li>
<li>Zwiebel</li>
<li>Corn Flakes</li>
<li>Vanille</li>
<li>Champignon</li>
<li>Honigmelone</li>
<li>Pistazie</li>
<li>Kümmel</li>
<li>Salz</li>
<li>Zucker</li>
<li>Hefe</li>
<li>Karotten</li>
</ul>
</nav>
<main>
<article>
<h1>Ich bin Text</h1>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben.</p>
<p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
<p>»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab.</p>
<p>In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!</p>
<p>« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
<p>Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat.</p>
<p>Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden sich, umdrängten den Käfig und wollten sich gar nicht fortrühren.</p>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte.</p>
</article>
</main>
</body>
</html>
MrMurphy Geändert von MrMurphy (20.04.2015 um 21:28 Uhr)
|
| Sponsored Links |
|
21.04.2015, 16:20
|
||||
|
||||
|
Zitat:
Voraussetzung ist natürlich, dass der Inhalt dem Menü (mit Float) direkt folgt (im Quelltext direkt dahinter). Zitat:
„Containing Block“ für fixierte Elementen ist immer nur der Viewport (das Browser-Fenster) . Geändert von etux (21.04.2015 um 16:26 Uhr)
|
|
21.04.2015, 17:09
|
|||
|
|||
|
Hallo
Zitat:
Das das nicht erforderlich ist sieht man aber schon daran, das die Seite mit der fixen Navi funktioniert, obwohl ich mich vertippt habe, die Anweisung als gar keine Auswirkung hat. Aber danke für den Hinweis. Gruss MrMurphy
|
 |
| Stichwörter |
| fixed, float, menü, responsiv, scrollen, spalten |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Fertiges Drop-Down Menü ins Layout einfügen | VoB | CSS | 6 | 15.03.2011 16:14 |
| Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
| layout - inhalt länger als menü ?? | cssnoobi | CSS | 10 | 07.04.2009 07:09 |
| Layout: Dynamische Ränder + Kopf, Menü, Content, Fuss + Scrollbar | sailing-alex | CSS | 2 | 08.02.2007 14:53 |
| IE 7: Brauchen Blocklinks im Menü Layout? | heiko_rs | CSS | 2 | 27.05.2006 16:42 |
Linear-Darstellung
