Footer bei Flat Responsive

Hallo Stephan

Ich möchte Dir gerne raten, grundsätzlich nur Tabellen zu verwenden, wo unbedingt nötig und entsprechend sinnvoll...

Verwende das Grid-System von Zeta. Link zum Handbuch >>> inkl. zu beachtende Folgeschritte.

Einen angenehmen Spätsommerabend und viele Grüsse

elch

Hallo Stefisa,

das Vererben von Containern ist leider noch nicht möglich, siehe

Footer auf allen Seiten

Wünsche mir auch, dass das in einem der nächsten Updates möglich ist.

Ich selbst erstelle auch, wie Du, für die Fußzeile mehrere Text-Boxen, weil das m. E. im Responsive-Verhalten schöner aussieht. Meine Projekte haben meist nicht mehr als 50 Rubriken, deshalb schiebe ich die Textblöcke in jeder Rubrik an die richtige Position. Für größere Projekte ist das natürlich keine Lösung.

Liebe Grüße

Sunny

Weil Container bzw. Artikel-Gruppen und -Positionen nicht vererbt werden können, war das vorgehen über die Tabelle gar nicht so schlecht, denn so haben Sie alle Spalten in einem Artikel, der vererbt werden kann (alternativ im Text einfach DIVs nutzen, die per inline-Style auf "float: left" gesetzt sind).

Eine 100% fertige Lösung kann ich hier nicht bieten, aber einen Ansatz: Ihre Tabelle enthielt einen inline Style mit height und width. Das sollten Sie den Artikel mal im Quelltext-Modus (Toolbar) bearbeiten und das height-Attribut samt wert entfernen und die Width auf "100%" setzen. Dann geben Sie der Tabelle noch die CSS-Klasse "zpresponsive" dann verhält sich die Tabelle besser responsive (ab einer bestimmten Bildschirmbreite kann man die Tabelle scrollen…)

Wenn Sie im Editor auf Quelltext-Darstellung umschalten, sehen Sie folgendes:

<table style="WIDTH: 100%">

Das ändern Sie in:

<table class="zpresponsive" style="WIDTH: 100%">

Dadurch wird dann die Klasse hinzugefügt und die Tabelle reagiert bei schmalen Bildschirmbreiten anders. Danach dann ggf. veröffentlichen, damit ich den Code online überprüfen kann, falls was nicht klappt.

Hallo Stephan,

ich habe mich mal der Sache angenommen und einen 4-spaltigen Footer im voller Breite gestaltet.

LINK - funktioniert allerdings in Flat Resp. nicht so richtig mit den %-angaben.

Aber man kann das natürlich auch mit Pixel-angaben umsetzen. Muss dann halt genau auf die jeweilige Seitenbreite angepasst werden.

Ich habe das mal umgesetzt und bin deinem Fall von einer Seitenbreite von 1500px ausgegangen?

LINK zu der Testseite

Einstellungen > CSS - die Werte eventuell anpassen

<style>
#afterfooter, #footer, #totop {
background-color: #3D3D3D;
color: #fff;
}

.testfoot {
   margin: 0 auto;
float: left;
   width: 1500px;
}
@media (max-width: 1500px) {
.testfoot {
   width: 1125px;
}}
@media (max-width: 1125px) {
.testfoot {
   width: 750px;
}}
@media (max-width: 750px) {
.testfoot {
   width: 100%;
}}

.testfoot-spalte {
    position: relative;
float: left;
margin: 10px;
width: 355px;
}
</style>

Widget > Quelltext - im Footer der Startseite einfügen, anpassen und vererben

			<div class="testfoot">

<div class="testfoot-spalte">
<h2>Bankverbindung</h2>
<p align="left">
Volksbank Kirchheim-Nürtingen<br>
IBAN: DE82 6129 0120 0007 9920 25<br>
BIC: GENODES1NUE
</p>
</div>

<div class="testfoot-spalte">
<h2>Externe Links</h2>
<p align="left">
  <a href="https://www.zeta-producer.com/de/index.html" target="_blank">Zeta Producer</a><br>
  <a href="https://community.zeta-producer.com/" target="_blank">Forum Zeta Producer</a><br>
  <a href="https://blog.zeta-producer.com/" target="_blank">Blog Zeta Producer</a><br>
  <a href="https://blog.zeta-producer.com/htaccess-zeta-producer/" target="_blank">.htaccess-Datei</a><br>
  <a href="https://www.w3schools.com/css/default.asp" target="_blank">w3schools.com</a><br>
  <a href="https://codepen.io/" target="_blank">Codepen</a><br>
</p>
</div>

<div class="testfoot-spalte">
<h2>Rechtliches</h2>
<p align="left">
  <a href="datenschutzerklaerung.html">Datenschutzerklaerung</a><br>
  <a href="impressum.html">Impressum</a><br>
</p>
</div>

<div class="testfoot-spalte">
<h2>Social Media</h2>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/probsteizella/" data-width="270" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/probsteizella/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/probsteizella/">Probstei Zella</a></blockquote></div>
</div>

</div>

Sieht super aus!

Hallo Stephan!

Auf den Seiten von http://www.skiclub-koengen.de sind in der letzten Zeile die Links nicht immer Richtig.

Startseite Kontakt Änderungsantrag AGB Impressum Datenschutzerklärung

Das ist mir auch schon bei einer Zeta Seite von mir auch aufgefallen, das diese Links nicht immer passen.

Zitat von andima

Hallo Stephan!

Auf den Seiten von http://www.skiclub-koengen.de sind in der letzten Zeile die Links nicht immer Richtig.

Startseite Kontakt Änderungsantrag AGB Impressum Datenschutzerklärung

Das ist mir auch schon bei einer Zeta Seite von mir auch aufgefallen, das diese Links nicht immer passen.

Alles anzeigen

Dann wurden sie vermutlich vom Nutzer nicht richtig gesetzt.

Einstellungen > Links