zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsives Layout mit fixiertem Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2015, 21:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.04.2015
Beiträge: 1
francish befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2015, 21:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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;
      }
Das ist alles.

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

MrMurphy

Geändert von MrMurphy (20.04.2015 um 22:28 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.04.2015, 17:20
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
... Ich verstehe zum Beispiel nicht was "overflow: hidden" bewerkstelligen soll.
Es hindert den Inhaltsbereich unter dem Menü durch zu rutschen. Der Inhalt steht dann neben dem Float, und nimmt den restlichen (zur Verfügung stehenden) Platz ein.
Voraussetzung ist natürlich, dass der Inhalt dem Menü (mit Float) direkt folgt (im Quelltext direkt dahinter).

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Code:
      body {
         positon: relative;
      }
.... ....
Die „position: relative“ für „body“ ist Dir hier wahrscheinlich nur so rein gerutscht. Denn eine Bedeutung für das fixierte Element hat es nicht.
„Containing Block“ für fixierte Elementen ist immer nur der Viewport (das Browser-Fenster)

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (21.04.2015 um 17:26 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.04.2015, 18:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Die „position: relative“ für „body“ ist Dir hier wahrscheinlich nur so rein gerutscht.
Seeelbstverständlich. Nee, ich war mir unsicher und habe das einfach mal mit angegeben, da ich selbst "position" nur sehr selten anwenden muss.

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
Mit Zitat antworten
Antwort

Stichwörter
fixed, float, menü, responsiv, scrollen, spalten

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fertiges Drop-Down Menü ins Layout einfügen VoB CSS 6 15.03.2011 17:14
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
layout - inhalt länger als menü ?? cssnoobi CSS 10 07.04.2009 08:09
Layout: Dynamische Ränder + Kopf, Menü, Content, Fuss + Scrollbar sailing-alex CSS 2 08.02.2007 15:53
IE 7: Brauchen Blocklinks im Menü Layout? heiko_rs CSS 2 27.05.2006 17:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:02 Uhr.