WD7pr.: Kopfzeile/-banner und vertikale Navi-leiste fixieren

tobi-raeumkommando schrieb am 17.03.2012 um 15:05 Uhr

Ich habe mit folgendem Tread http://www.magix.info/de/vertikale-navigationsleiste-links-oben-fixieren.wissen.693690.html (Danke!) zwei Dinge geschafft:

1. Die Kopfleiste bestehend aus li. unserem Logo und dann der nach rechts hinausgeschobenen "Farbleiste" (entliehen a.d. Feuersturmthema) incl. darunter einer Textzeile auf der Hauptseite links- und obenbündig zu fixieren. Diese würde ich aber nicht auf allen Seiten so wiederholen, sondern auf spezifischen Seiten das in der Farbleiste integrierbare im Hintergrund transparent schimmernde Foto dem jeweiligen Inhalt anpassen - also die Schritte aus o.g. Tread pro Seite wiederholen.

2. Die vertikale Navigationsleiste - mit Abstand/Lücke zur Kopfleiste für den jeweiligen Seitennamen - unter der Kopfleiste links am Rand auf der Hauptseite fixiert und diese wiederholt sich dann auf jeder Seite.

1.Frage: Einzeln funzt das wunderbar! ABER, wenn ich beide o.g. Objekte/Projekte gleichzeitig in Betrieb nehme, so rutschen sie mir beide zusammen, d.h. die Kopfleiste (obere Kante) fängt identisch mit dem oberen Rand der Navileiste an - also ist sie von ihrem gewollten Platz nach unten gefallen und vermischt sich mit der Navileiste. Wie kann ich das ändern?

2.Frage: Im einzeln funktionierenden Betrieb mit nur der Navileiste ist es bei längeren Seiten dann so, dass sie zwar wunderbar fixiert ist, sich nach anfänglichem Scrollen die Hauptseite rechts daran vorbeischiebt, jedoch aber nach ca. zwei Rastern (ca.50-100px) am Mausrad sich dann plötzlich doch die vorbeirutschende Hauptseite in voller Breite parallel zum restlichen Inhalt über die Navileiste von unten nach oben mitschiebt und diese mehr und mehr verdeckt. Lösungsversuche meinerseits waren bereits:

- die Fixmenuseite genauso lang wie die längstmögliche Seite definieren, also weit mehr als die Navileiste hoch ist ( auch mit noch einem Rechteck von Unterkante Navi bis ganz unten anbringen) und auch in der Formel aus dem o.g. Tread jeweils die Pixelmaße dementsprechend geändert.

- alle Seiten auf die maximal mögliche Höhe der höchsten Seite definiert.

Was habe ich bei diesem Problem falsch gemacht?

Hoffe das war ned zu kompliziert formuliert - im Endeffekt soll das so funktionieren, wie ich bei einem Kunden entdeckt hatte: Die "eigentliche Seite" rollt beim Scrollen rechts an der Navi vorbei und schlüpft unter der Kopfleiste unten wech, wobei sich aber eben das Bild in der Kopfleiste je nach Inhalt der angezeigten Seite ändert. Beispiel der Funktion hier: http://www.biohof-butz.de/

Kommentare

BeRo schrieb am 17.03.2012 um 21:12 Uhr

[...] Hoffe das war ned zu kompliziert formuliert - im Endeffekt soll das so funktionieren, wie ich bei einem Kunden entdeckt hatte [...]

Kolumbus hatte ja angeblich die geniale Idee mit dem Ei.
Dein Kunde (oder sein Webdesigner) ist nicht weit davon entfernt...

Wenn man sich die Website http://www.biohof-butz.de/ ansieht, erkennt man schnell, wie das funktioniert.

Der Webdesigner hat mit verschiedenen Frames gearbeitet, die er statisch angeordnet hat. Der eigentliche Inhalt wird in einem Frame angezeigt (im Bild rot umrandet), der bei Bedarf automatisch einen Scrollbalken erhält.

Vorteil:

Es sind keinerlei Tricks nötig, um Menüs- oder Kopfzeilen zu fixieren. Das Ganze wird wie eine klassische Website aufgebaut, mit einem Platzhalter (im Bild rot umrandet) für die variablen Infos.

Soll der Inhalt der Kopfleiste- oder die Seitenleiste sich ändern, legst Du dafür nur eine neue Seite nach demselben Muster an, auf die Du dann wie üblich verlinken kannst.

Mehr ist nicht zu tun.

Mit dem WD nachgestellt kann das so aussehen:

Online gestellt kannst Du Dir das hier ansehen.

Und wenn Du Dir die Projektdatei für eigene Experimente herunterladen möchtest, dann klick mal hier.

---------------------

Edit: 18.3. 15:23 h

Ich habe die Demo noch ein bisschen "aufgehübscht". Sie ist jetzt etwas realistischer geworden...

---------------------

Edit: 19.3. 11:50 h

Die zum Download angebotene ZIP Datei, war eine RAR. Das habe ich gerade korrigiert.

----

Edit: 03.04.2016 00:20h

Links zur Demo und zur Projektdatei erneuert

---------------------

P.S.

Die online gestellten Dateien bleiben ca. 1 Monat aktiv. Dann nehm' ich sie wieder vom Server (Platzgründe).

Wer danach noch Bedarf hat, der kann mir gerne eine PN schreiben.

BeRo schrieb am 19.03.2012 um 18:46 Uhr

[...] Wenn ich das nun richtig verstehe, so ist das praktisch eigentlich eine Seite in der Seite [...]

Richtig.

[...] bei Bildschirmen wie meinem besitzt dann nur die innere "Inhaltsseite" einen Scrollbalken [...]

Auch das ist richtig, wenn Die Hauptseite nicht länger als die Browser-Bildschirmhöhe wird. Andernfalls siehst du 2 Rollbalken.

[...] wie verheirate ich nun meinen [...] Inhalt mit dem Platzhalter? [...]

Der einfachste Weg wäre die "Befreiung" einer bestehenden Seite von allen Objekten, die sich auf anderen Seiten wiederholen.
Den verbleibenden Rest ordnest Du dann so an, dass er die Breite des Platzhalter Rahmens möglichst nicht überschreitet. Am besten geht das, wenn Du die Seitenbreite auf die Breite des Platzhalter Rahmens einstellst, abzüglich der ca. 16px für den vertikalen Scrollbalken.

Damit die neuen Seiten im Platzhalter richtig angezeigt werden können, ist es sinnvoll, sie als einzelne HTM Dateien anzulegen.

Wenn Du die Seiten nicht neu anlegen willst, kannst Du aus einem bestehenden Projekt alle Seiten entfernen, bis auf die eine, die Du als einzelne Seite speichern willst.
Dieser Seite gibst Du einen passenden Namen, auf den später im Platzhalter (im iframe Code) verwiesen wird.

Speichere das Projekt (die eine Seite) unter diesem neuen Namen, ändere den Seiteninhalt wie oben beschrieben und exportiere die Seite.
Auf dem PC findest Du jetzt die 1. HTM Datei, die Du später unter ihrem Namen in einen Platzhalter einbinden kannst und das zur Seite gehörende Unterverzeichnis, das den Namen der Seite hat, ergänzt um "_htm_files"

Mit den anderen Seiten des ursprünglichen Projekts verfährst Du genau so.

Die eine (oder mehrere) Hauptseite(n) legst Du so an, dass nur der gewünschte (variable) Kopfbereich- und die linke Seitenleiste mit der Navbar enthalten sind.
Der restliche Bereich, in der Größe eines der diversen Platzhalter Rahmen bekommt einen "Stamminhalt", der immer angezeigt wird, wenn die Seite geöffnet wird.
Die Seiten, die als Inhalt der Platzhalter angelegt wurden, werden nach einem Klick auf den entsprechenden Link in der Navbar eingeblendet und, wenn nötig, automatisch mit einem Rollbalken versehen.

[...] wo trage ich dann den Namen in Deiner Formel des Platzhalters ein? [...]

Der iframe Code sieht für alle einzublendenden Seiten gleich aus, mit Ausnahme des Namens für die jeweilige Seite, unten gelb markiert (s. Screenshot). Auch die 100% Angabe bleibt in allen Fällen gleich.

---------------------------
[iframe src="index_htm_files//s2.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="iframe" >[p>Your browser does not support iframes.[/p>[/iframe>
--------------------------

Achtung! Die 4 eckigen Klammern müssen durch spitze, öffnende Klammern ersetzt werden.

Im o. a. Beispielcode wird die Seite "s2.htm" referenziert, die im Verzeichnis "index_htm_files" liegt.
Obwohl Du die referenzierte Datei zunächst in das Hilfsverzeichnis (im Beispiel: "Demo_Web_files") kopierst, ist die Angabe "index_htm_files" korrekt (s. u.).

Der Code gehört jeweils in den HTML Bodybereich der einzelnen Platzhalter, unten im Bild grün eingerahmt.

Jeder Platzhalter (Rahmen) muss dann in einer eigenen Ebene abgelegt werden, die später über einen Link in der Navbar als popup Ebene eingeblendet wird. Die Ebenen sind unten im Screenshot als "S2" und "S3" zu sehen.

[...] Wie bekomme ich die beiden nun richtig vereint? Was für ein Element kopiere ich in welches Dokument [...]

Unabhängig vom Verfahren, nach dem Du Deine neue Website baust, musst Du zunächst alle einzublendenden Seiten- und deren Unterverzeichnisse (s. o.) in einem Hilfsverzeichnis sammeln,

Dieses Hilfsverzeichnis muss zwingend den Namen des Hauptprojekts haben, ergänzt um "_Web_files".
Heißt Dein Hauptprojekt z. B. "Demo", muss das Hilfsverzeichnis "Demo_Web_files" heißen.

Das Hilfsverzeichnis muss unbedingt im gleichen Verzeichnis angelegt werden, in dem Du die Projektdatei "Demo.web" Deines Projekts gespeichert hat.

Beim Export des Projekts liest der WD alle Dateien- u. Verzeichnisse im Hilfsverzeichnis und kopiert sie in das Projektverzeichnis "index_htm_files".
Erst dann stimmen alle in den iframe Codes referenzierten Adressen und die Site kann zum Test in der Vorschau angesehen werden.

Ob es vom Aufwand her zweckmäßig ist, Dein bestehendes Projekt so umzubauen, dass es sich mit dem neuen Konzept verträgt, kann ich natürlich nicht einschätzen.
Wenn Du die Prozedur aber mal an einer Seite ausprobierst, kannst Du sicher schnell selbst feststellen, ob ein "Neubau" nötig ist.

Imho solltest Du mit den Infos zurecht kommen, wenn es trotzdem klemmt, einfach wieder melden...

BeRo schrieb am 21.03.2012 um 00:45 Uhr

[...] "Stamminhalt". Ich lese es so, dass dies ein z.B. auf der sich anfangs öffnenden ersten Seite (Home) fester Inhalt ist. [...]

Genau so hatte ich das gedacht.

Der von mir so genannte "Stamminhalt" soll auf allen Seiten individuell den Bereich ausfüllen, in dem später die popup Ebenen eingeblendet werden. Der "Stamminhalt" hat daher keinen eigenen Rahmen und keine Scrollbar.

Anders die Inhalte der popup Ebenen, die an gleicher Stelle in einem separaten Rahmen angezeigt werden. Die werden in der Anzeige automatisch mit einem Scrollbalken versehen, wenn sie die fest vorgegebene Seitenlänge der jeweiligen Hauptseite überschreiten.

[...] "Stamminhalt". [...] D.h. er scrollt nicht wie gewollt Seite in Seite,[...]

Nein, dieser "Stamminhalt" ist fester Bestandteil der jeweiligen Seite. Einen Scrollbalken (für die komplette Seite) siehst Du nur dann, wenn die Seitenlänge größer ist als das Browserfenster.

[...] Ich denke aber, dass ich [...] mit Untermenüs und zukünftigen Platzhalterseiten/-inhalten, die teilweise auch wieder Verteiler mit Schaltflächen und anderen Ebenen sind bei der Popup - Ebenen - Technik extrem ins Schleudern geraten werde [...]

So, wie Du es beschreibst, kann ich das nachvollziehen.

Ich kenne zwar Dein Projekt- und Deine bisherige Vorarbeit nicht aber unabhängig vom tatsächlichen Umfang macht m. E. bei größeren Projekten die Erstellung eines Organigramms Sinn, in dem Du alle Seiten-, Unterseiten-, Einblendungen- und Popups hierarchisch so einträgst, wie sie später auf der Website zu sehen sein sollen.

Anhand dieses Organigramms siehst Du "mit einem Blick", wie Deine Navbar aufgebaut werden muss, mit allen Untermenüs und Unter-/Untermenüs.

Das würde imho auch die Zuordnung der popup Ebenen zu den jeweiligen Hauptseiten automatisch lösen.

[...] also wie ich die Startseite oder eine andere Hauptseite so gestalte, dass in dieser der Inhalt einer kleinen Seite [...] drunterherruschten kann [...]

Das geht ganz einfach, so wie mit dem schon zitierten Ei...

Du baust eine ganz normale-, mit vollständigem Inhalt ausgestattete Seite, in einer Dir genehmen Größe.
Dabei ist die Länge der Seite nicht fix. Du kannst also jede weitere Seite mit einer anderen Länge anlegen, wenn das für den jeweiligen "Stamminhalt" erforderlich ist.

Dem Konzept entsprechend, enthält die Seite folgende Objekte, die auch auf den anderen Seiten an gleicher Stelle erscheinen sollten:

Die Kopfleiste (oben)
Das Firmenlogo (oben, links)
Die Seitenleiste (links)
Die Navigation (Buttons-. oder Text, auf der Seitenleiste)

Zusätzlich kannst Du (wenn gewünscht) den einzelnen Seiten noch einen individuellen Browser Hintergrund (nicht Seiten Hintergrund) geben.

Die erste Hauptseite kann z. B., so aussehen:

Die Seite bildet also ein homogenes Ganzes.

Über den grün markierten Bereich legen wir später die Inhalte der Platzhalter aus den separat definierten popup Ebenen.

Wie Du den Inhalt für eine solche popup Ebene anlegst, hatte ich ja schon erklärt.
Im Grunde ist es ja "nur" eine normale HTML Seite, die in der Breite auf den vorgesehenen Platz (grüner Rahmen im Bild oben) abgestimmt wird.

So sieht z. B. die Seite 3 aus, die (mit Rollbalken) als Datei "s3.htm" im Hilfsverzeichnis abgespeichert wird und später über einen passenden iframe Code im Platzhalter der Ebene "S3" in die Hauptseite "index" eingeblendet werden kann. Sie liegt dann auf dem im Bild oben grün markierten Bereich.

Der Inhalt der zur Seite "index" gehörenden Ebene "S3" besteht lediglich aus dem Platzhalter mit dem im HTML-Bodybereich eingefügten iframe Code.
Der Platzhalter muss so angelegt- und positioniert werden, dass er genau den im Screenshot der Hauptseite grün markierten Bereich abdeckt.

[...] Ist das dann ein Platzhalter in der Mouseoff-Ebene wie bei einem Widget? [...]

Ja, der arbeitet genauso.

[...] wenn ich das weis, so werde ich [...] Popup-Ebenen wechlassen können. [...]

Natürlich kannst Du einen Platzhalter direkt in eine Seite einbinden, ohne eine popup Ebene bemühen zu müssen.

Wenn Du aber in einer gerade angezeigten Seite die Inhalte verschiedener Platzhalter Rahmen an derselben Stelle anzeigen möchtest, kommst Du um die popup Ebenen nicht herum.

Andererseits kann es durchaus praktikabler sein, die Seiten Deiner geplanten Website in der herkömmlichen Art, ohne popup Einblendungen zu gestalten.

Die Entscheidung, welches Konzept letztlich als Basis für die Realisierung Deines Projekts dient, wird wohl vom Arbeitsaufwand- und von der Möglichkeit einer Übernahme bestehender Arbeiten abhängig gemacht werden müssen.

Ich denke, dass Du nach ein paar Versuchen mit der "neuen" Technik schnell Klarheit findest.

Na dann, viel Erfolg.

Vielleicht postest Du mal eine URL wenn alles steht...