CSS: Menüband responsive oben belassen (fixed UND top)


#1

Hallo,

Google sagte mir, dass ich eine mobile Version bauen soll und nannte mir Vorschläge. Ich habe damit begonnen, jedoch habe ich ein Problem bzw. eine Frage.

Um seitlich (wenig Platz; Hochformat) Platz zu sparen, wollte ich oben einen Balken mit Logo, ein Bild (img) mit Link (a) zum Menü (Link zu menu.php), einbauen. Da es ja verschiedene Telefone und Displays gibt, habe ich nachgesehen, wie man Bilder autom. anpassen kann:

.responsive_menu {
position: fixed;
width: 100%;
height: auto;
}

Das Problem ist nun, dass das Menü sozusagen den Inhalt verdeckt. Wenn ich es zB position: top mache, dann wird der Inhalt passend nach unten geschoben, jedoch verliere ich dann das Menüband, wenn man runter scrollt. Beides (fixed AND top) funktioniert hingegen nicht.

Meine Lösung ist nun 2 gleiche Bilder anzuzeigen - eines mit fixed und eines mit top, um beides zu haben: Der Inhalt schiebt sich nach unten um die Menübandhöh, das Menü bleibt bei scrollen aber trotzdem erhalten.

.responsive_menu {
position: fixed;
width: 100%;
height: auto;
}

.responsive_menu2 {
position: top;
width: 100%;
height: auto;
}

Ich frage mich, ob es eine bessere Möglichkeit gibt, dem mitzuteilen, dass er den Inhalt nicht abdecken soll. Ich kann jedoch auch nicht wissen, wie hoch das Menüband ist, einen Fixwert zu nehmen ist daher schlecht bzw. Glückssache.

Hat jemand dazu eine Idee bitte? Ich habe wirklich schon displa block und float und alles probiert, aber er ignoriert alles was ich mache.

Vielen Dank im Voraus!


#2

Um dir helfen zu können, brauchen wir den kompletten code.
Poste doch dazu einfach den Link zu deiner Seite, oder wenn du den Link nicht rausgeben willst, bau die Seite hier nach:
https://jsfiddle.net/

Dann können wir dir helfen.
Aktuell ist es so, als würdest du uns fragen “Ich habe ein Bild gemalt, mit Blau und einem Orangton. Was kann ich daran verbessern?”


#3

Hallo,

Ich befürchte, dass der Code der Seite nicht allzu gut ist, es war eine Vorlage, die ich verändert habe vor 10 Jahren als ich mit CSS experimentierte und seitdem ist es halt so. Durch die vielen einzelnen HTML Seiten, die es nun umfasst, ist wohl nicht oder nur noch sehr schwer möglich, die Seite zu verbessern. Ich werde es versuchen.

z.B: kann man die Seite nur online ansehen, offline (also von meiner HDD aus) geht es nicht (gleicher Browser). Schuld ist ein float: left, aber wenn ich das weggebe, dann ist das Menü nicht mehr neben dem Inhalt,sondern darunter. Wenn es dort ist, funktioniert es online perfekt, offline hingegen verschwindet der Hitnergrund. Warum dieser Fehler im Brower vorhanden ist, kann ich nicht sagen.

Jetzt bin ich leider auf ein weiteres Problem gestoßen: Das menu.php wird per php.include eingebunden. Es ist also keine eigenständige Seite und damit kann es per Link auch nicht aufgerufen werden wie ich daachte. D.h. ich muss eine weitere HTML Seite anlegen, einmal für incl. und einemal als komplette Seite. Das ist zwar möglich, aber man muss dann immer alle Änderungen an beiden Seiten vornehmen, was natürlich nicht so gescheit ist. Jetzt frage ich mich gerade, ob man es schafft, dieses integrierte Menü zu nutzen und es dann beim Klick auf den Banner zu aktivieren und die aktuelle Seiteninhalt zu überschreiben jedoch ohne es dauernd anzuzeigen.

Die Homepage ist normal hier:
http://scacom.bplaced.net/Collection

Die mobile Testseite befindet sich hier (Achtung, es ist noch nicht fertig). Diese beinhaltet nun meinen Doppel-Bild-Fix.
http://scacom.bplaced.net/Collection_mobile/1200/1200_responsive.php

Das Logo soll noch hochauflösender werden bzw. ist es nicht gedacht für PC Ansicht. Oben die Leiste ist das Problem, wenn ich das zweite Bild rausnehmen, verdeckt es dann den Inhalt.

Ich weiß nicht, ob es besser möglich wäre, v.a. das mit dem Offline-Brower-Bug ist störend beim testen oder bearbeiten - er sollte die Datei ja immer gleich interpretieren. Da sieht man, dass die Experten auch Fehler machen.

Für Tipps oder Hilfe, was da falsch ist, wäre ich natürlich dankbar.


#4

Leider funktioniert das CSS bei mir nicht sehr gut.

zB habe ich versucht, zwei Klassen einem Element zuzuweisen. Ganz einfache wie .right (float right) und .fatborder (border 10px solid #000000). Geht einzeln natürlich, aber wenn ich schreibe laut Anleitung:

http://www.css4you.de/trickkiste/tr00029.html

style:“right fatborder”

dann habe ich links das Bild (statt rechts) und rechts einen Rahmen.

Es ist schön das zu bauen, aber schwer weil es wie an dem Beispiel gezeigt nie funktioniert wie beschrieben. :frowning: Das macht alles sehr mühsam.


#5

Der Link zu deiner mobilen Seite funktioniert nicht. Insgesamt scheint es aber, dass du dich grundlegend nochmal mit HTML und CSS beschäftigen solltest und in dem Zusammenhang deine Seite komplett neu aufbauen solltest.

Ansonsten ist vielleicht auch diese Seite hilfreich: https://www.w3schools.com/css/css_rwd_intro.asp


#6

Bitte klick doch mal hier:
http://scacom.bplaced.net/Collection_mobile/1200/1200_responsive.php

Wie ich die Desktop und mobile Seite umschalte, weiß ich noch nicht. Jedenfalls möchte ich nicht wieder 380 Seiten anlegen, sondern es sollte per zweitem CSS Style gehen und dann eine Unterscheidung eingebaut werden, auf welche Seite man kommt. Das muss ich erst ansehen.

Zuerst sollte ich mal beide Versionen zum Laufen bekommen bzw. verbessern.

Was meinst du mit HTML und CSS, ich meine wo genau findest du ein Problem, dann kann ich das besser bearbeiten.


#7

Leider ist es ein sehr komplexes Design und CSS kann nicht das so einfach umsetzen. Das Problem ist, dass z.B. der Hintergrund (das blaue Menüband) von oben bis unten gehen soll. Dabei soll es sich aber an beide Felder (links Menü und rechts inhalt) anpassen, das jeweils größere gewinnt (auch wenn Menüelemente ausgeklappt werden).

Wenn ich den Hintergrund FIXED mache, kann ich trotz overflow: scroll nicht mehr scrollen, der Text wird einfach abgeschnitten am unteren Rand.

Wenn ich ich es normal Platziere,dann ist es übereinander, aber nicht nebeneinander

Wenn man es float: left macht, dann scheint es eher zu “schweben” und der Hintergrund passt sich nur noch an den Inhalt an, nicht aber das Menü.

Es ist sehr komplex und ich glaube nicht, dass man es überarbeiten kann. Ich wollte es neu versuchen aber es funktioniert einfach nicht so wie es sollte. Wieso es bei meinem funktioniert, weiß ich auch nicht, jede Veränderung oder Verbesserung führ zu gravierenden Problemen.

Man denkt halt anders als der Computer, kein Mensch würde den Text einfach abschneiden nur weil man den HIntergrund fixiert, dann würde man halt nur den Text scrollen.

Ohne Hilfe wird das nichts werden, da müsste wirklich ein Profi das erklären oder so ein Beispiel mal anbieten, aber leider gibt es so eien Homepage wie meine nirgendwo, was wohl auch einen Grund weil es einfach zu schwer zum umsetzen ist.


#8

Ja, fast so komplex wie kaffee kochen…
Schmeiss den legacy css kram weg und benutz flexbox…dann hast du keine probleme mehr mit responsiveness, mobile, desktop, browser oder sonst irgendwas.