Fußzeile immer am unteren Bildschirmrand fixieren

HouseCat schrieb am 18.07.2014 um 16:46 Uhr

Hallo Community,

wie ist es über den WD10 zu lösen, dass eine Fußzeile (z. B. Adresse mit Kontaktdaten) je nach Geräte-Größe immer am unteren Rand des Bildschirmes platziert wird?

Beim Projekt ist ein Browser-füllendes Hintergrundbild angelegt und auf 27-Zoll-Bildschirmen schwebt die Fußzeile in der Mitte des Bildes, weil die Fußzeile für Tablets optimiert platziert wurde.

Danke für Eure Tipps!

 

Kommentare

Mango schrieb am 19.07.2014 um 10:09 Uhr

schau mal, wie das in den fertigen seiten in der designgalerie angelegt wurde. klicke dazu diese gruppe an (also die gruppe der fußzeile mit dem text etc), gehe dann rechte maustaste in die seitenposition, da kann man das festlegen, probiere es einfach mal aus...

BeRo schrieb am 20.07.2014 um 21:13 Uhr

Ich interpretiere Deine Frage anders, als @Mango.

Demnach soll die zu fixierende Fußzeile nicht am unteren Ende der Website fixiert werden, sondern am unteren Ende des Browser Fensters...

Wenn meine Interpretation zutrifft, findest Du hier Infos und weiterführende Links zu anderen Threads, in denen das Thema ausführlich besprochen wurde. Da gibt es auch eine online Demo und einen Download Link...
Einer der verlinkten Threads ist übrigens am 25. Jan. 2012 von Dir erstellt worden...

Viel Erfolg

Zuletzt geändert von BeRo am 20.07.2014, 21:23, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

HouseCat schrieb am 21.07.2014 um 15:24 Uhr

Danke BeRo - Vielen Dank für den Hinweis! Hat auch prima geklappt.

Jetzt ergibt sich nur noch folgendes Problem: der iFrame wird mit weißem Hintergrund dargestellt. Die Fußzeile besteht aber nur aus Text (Kontaktadresse), die mit transparentem Hintergrund auf dem Browser-füllenden Hintergrundbild liegen soll.

Das Hintergrundbild wurde mit folgender Anweisung im Head angelegt:

<style type="text/css">
<!--
img.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}
-->
</style>

<img src="index_htm_files/hintergrundbild.jpg" class="bg">

Wenn die Anweisungen auch auf die Hilfsseite "footer" gelegt wird, klappt das leider nicht.

Danke für einen Tipp, wie das gelöst werden kann!

 

BeRo schrieb am 21.07.2014 um 18:56 Uhr

[...] der iFrame wird mit weißem Hintergrund dargestellt. [...]

Das kannst Du vermeiden, wenn Du im iframe die Eigenschaft "Transparency" aktivierst.

Hier ein Beispiel:

----------------------------
<iframe width= "100%" height="100%" allowtransparency="true" scrolling="no" frameborder="0" src="footer.htm" style="display: block;" align="left">
</iframe>

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

Damit das in allen (neueren) Browsern funktioniert, musst Du im HTML Code der Seite, die Du über den iframe Code einbindest, noch den u. a. Codeschnipsel im HTML Body unterbringen:

--------------------------
<style type="text/css">
html,body { background-color: transparent; }
</style>

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

Danach sollte der weiße Hintergrund verschwunden sein...

Viel Erfolg

Zuletzt geändert von BeRo am 21.07.2014, 18:56, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Julesy schrieb am 10.03.2017 um 11:16 Uhr

Hallo ihr Lieben,

ich habe mich gerade auch mal an dieser Lösung versucht. Nun hab ich aber das Problem, dass ich eigentlich möchte, dass sich die Fußzeile auch noch über die ganze Bildschirmbreite ausdehnt. Habt ihr ne Idee für mich, wie ich das hinkriegen kann?

Vielen Dank schonmal!!

marboe schrieb am 10.03.2017 um 11:42 Uhr

Hallo Julesy,

dafür müssten wir wissen, mit welcher Version des WD du arbeitest und wo in der Hilfedatei du nicht zurechtkommst. So allgemein lässt sich das nicht beantworten.

Gruß Marboe

Julesy schrieb am 10.03.2017 um 12:40 Uhr

ich arbeite mittlerweile mit dem WD12 Premium.

Also ich habe eine neue Ebene angelegt, auf der ein grauer Balken liegt, und davor die Schaltflächen für die Navigation. Diese habe ich dann mit folgendem HTML-Text (von BeRo geklaut) auf die eigentliche Seite eingebunden:

<style type="text/css">
#f1 {position: fixed;
bottom: 0px;
left: 50%;
height: 48px;
width: 1040px;
margin-left: -520px}
</style>

<div id="f1">
<iframe width= "100%" height="100%" allowtransparency="true" scrolling="no" frameborder="0" src="footer.htm" style="display: block;" align="left">
</iframe>
</div>

das hat soweit auch funktioniert, allerdings hätte ich das jetzt gerne so, dass der graue balken nicht nur so breit ist wie meine eigentliche Seite, sondern dass der sich genau wie mein Arbeitsbereichshintergrund auf die komplette Bildschirmbreite skaliert. Dabei soll die Navigation aber immer am rechten rand meiner eigentlichen Seite stehen bleiben.

Ich hab das dann so probiert, dass ich den Balken und die Navigation auf zwei verschiedenen Ebenen angelegt habe, und diese beiden unabhängig voneinander auf die eigentliche Seite eingebunden habe. Naja, ich habs zumindest versucht.. Seit dem wird hinter der Navi-Leiste immer ein weißes rechteck angezeigt, ich krieg das einfach nicht transparent... obwohl in dem HTML-Teil allowtransparency="true" steht. wenn ich auf der Ebene auf der ich die Navileiste angelegt hab in den HTML-Body gehe, und da den Hintergrund transparent definiere, verschwindet leider auch die Navigation mit...

und wie ich den grauen Balken auf komplette Breite kriegen soll weis ich auch nicht :/ muss ich das dann in der Ebene "footer" definieren, dass der Balken sich ausdehnt? oder muss ich das über den HTML-Code definieren...? ich bin planlos.. hab jetzt gefühlt schon alle möglichen Varianten ausprobiert, bin aber noch zu keinem Ergebnis gekommen das dem entspricht was ich mir vorstelle... HTML ist für mich aber auch Neuland, und ich hab keine Ahnung was man da alles mit welchen Befehlen definieren kann..

Ich hoffe ich konnte mein Problem irgendwie halbwegs klar erklären... und jemand hat ne Lösung für mich =)

marboe schrieb am 10.03.2017 um 14:01 Uhr

ich bin planlos..

Ich glaube, da kann dir sehr gut geholfen werden.
Da du die neueste Version nutzt, ist die gute Nachricht, dass dein WD die ganzen Funktionen die du suchst, bereits inklusive hat.

Am besten rufst du mal die Hilfedatei auf und folgst den Anweisungen für "fixieren" und "browserfüllend". Das ist dort bestens erklärt.
Dann verschwindet auch dein Naviproblem :-)
Oder du öffnest eine Beispielseite und guckst dir die Einstellungen dazu an. Das geht natürlich auch.

Gruß Marboe

BeRo schrieb am 10.03.2017 um 14:19 Uhr

@Julesy

[...] wie ich den grauen Balken auf komplette Breite kriegen soll weis ich auch nicht [...]

@marboe hat's ja schon angedeutet: "Lesen bildet". 😘
Wenn Du das auch auf die wirklich gut gemachte Hilfedatei beziehst, wirst Du sehen, dass die "fixieren" Funktion sehr leistungsfähig ist und schnell eingesetzt werden kann...

  1. gewünschten (kurzen) Balken im Fußbereich der Seite anlegen.
  2. Navigationsleiste an der gewünschten Position auf dem Balken anlegen.
  3. Balken mit der "fixieren" Funktion auf die ganze Breite dehnen


     
  4. NavBar ebenfalls fixieren, aber ohne sie auszudehnen


     
  5. Ergebnis in der Vorschau "bewundern"


     
  6. Fertig 😊

Viel Erfolg

Zuletzt geändert von BeRo am 10.03.2017, 14:39, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓