Beiträge von Mario

Ich habe die HIER geantwortet.

Ich habe das ganze nochmal verfeinert. Damit der Logobereich nicht so groß ausfallen muss habe ich diesen mit CSS nach unten gerutscht. Dieser wird beim Scrollen wieder nach oben korrigiert und wenn zurück gescrollt wird wieder hergestellt.

https://hosting.zeta-producer.com/6510327388/topbar2.html

Der Scroll-Effekt sieht auch sehr viel besser aus als bei Vodafone.

Hier nochmal der gesamte Code:

CSS:

<style>
header {
padding-top: 30px;
transition: all 0.25s;
}
.topbarzp {
position:absolute;
left:58px;
top:0;
z-index:30000;
}
.spaltentopbarzp{
float: left;
font-size: 14px;
background:blue;
padding: 4px 20px 4px 20px;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
a.spaltentopbarzp {
color: #fff !important;
text-decoration: none;
transition: all 0.4s ease;
}

.spaltentopbarzp:hover {
background:#fff !important;
}
a.spaltentopbarzp:hover {
color: #000 !important;
}
.spaltentopbarzp:active {
background:#fff !important;
}
a.spaltentopbarzp:active {
color: #000 !important;
width: 33%;
}

@media (max-width: 500px) {
.spaltentopbarzp {padding: 4px 6px 4px 6px;}
.topbarzp {left:0;}
}
@media (max-width: 319px) {
.spaltentopbarzp {font-size: 10px; text-transform: uppercase;}
}
</style>

HTML:
<div class="topbarzp">
<a class="spaltentopbarzp" href="#"><span>Privatkunden</span></a>
<a class="spaltentopbarzp" href="#"><span>Gewerbekunden</span></a>
<a class="spaltentopbarzp" href="#"><span>Kundenportal</span></a>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>=50){
jQuery('header').attr('style','padding-top: 0px !important;');
}
else if (jQuery(this).scrollTop()<50) {
jQuery('header').attr('style','padding-top: 30px !important')
}
})
})
</script>

Das Ganze ist so ausgelegt damit es ohne weiteres zutun Resposive ist. Bei 3 Spalten müsste der Wert für die Spalten auf 33% angegeben werden. Das würde dann so aussehen: https://hosting.zeta-producer.com/6510327388/index.html

Mit deinen Wünschen müsste man den Code ganz anders gestalten. Das würde dann so aussehen: https://hosting.zeta-producer.com/6510327388/topbar.html

CSS:

<style>
.topbarzp {
position:absolute;
left:58px;
top:0;
z-index:30000;
}
.spaltentopbarzp{
float: left;
font-size: 14px;
background:blue;
padding: 4px 20px 4px 20px;
text-align: center;
text-decoration: none;
transition: all 0.4s ease;
}
a.spaltentopbarzp {
color: #fff !important;
text-decoration: none;
transition: all 0.4s ease;
}

.spaltentopbarzp:hover {
background:#fff !important;
}
a.spaltentopbarzp:hover {
color: #000 !important;
}
.spaltentopbarzp:active {
background:#fff !important;
}
a.spaltentopbarzp:active {
color: #000 !important;
width: 33%;
}

@media (max-width: 500px) {
.spaltentopbarzp {padding: 4px 6px 4px 6px;}
.topbarzp {left:0;}
}
@media (max-width: 319px) {
.spaltentopbarzp {font-size: 10px; text-transform: uppercase;}
}
</style>

HTML:

<div class="topbarzp">
<a class="spaltentopbarzp" href="#"><span>Privatkunden</span></a>
<a class="spaltentopbarzp" href="#"><span>Gewerbekunden</span></a>
<a class="spaltentopbarzp" href="#"><span>Kundenportal</span></a>
</div>

Du kannst die Seite auch einfach als Testseite auf deinem Server hochladen.

• Einfach in den FTP-Einstellungen unter Webadresse ein /test2020 und Zielordner ein /test2020/ anhängen.
• Nach dem Veröffentlichen hat ZP einen Ordner test2020 angelegt und die Seite ist unter https://islamverstehen.de.cool/test2020 erreichbar.
• Später kannst du mit einem FTP-Programm den Ordner test2020 wieder löschen.

Bei mir sieht das z.B. so aus:

• Webadresse: https://www.zella.de/v19-2
• Zielordner: /htdocs/v19-2/

Dann einfach nochmal probieren zurück zu Clean Style zu wechseln.

Teste mal ob dieser Code für dich der richtige wäre. https://www.zella.de/code/topbar.html

Wenn das passt kann ich mal schauen ob da was geht Scrollt man hinunter, verschwindet das obere Menü 

Eventuell werde ich mal probieren DIESES auch als Top-Bar umzusetzen.

Hm, da bleibt wohl nur nach und nach alles zu löschen und zu schauen was passiert.

Du kannst den eingefügten Code ja in dem Windows_Editor als Textdatei zwischenspeichern.

Eventuell kannst du das Projekt auch Zippen und irgendwo hochladen damit ich das downloaden kann.

Eventuell geht auch hier hochladen, keine Ahnung ob das funktioniert. https://www.widget-zp.de/ext.html

Ja am besten immer ein neues Thema eröffnen.

Das kann eigentlich nichts mit dem Layoutwechsel zu tun haben.

Überlege nochmal genau ob du nicht doch irgend einen Code hinzugefügt oder geändert hast. So etwas passiert in der Regel wenn irgendwelche CSS-Klassen verwendet werden die es in ZP schon gibt oder ein schließendes </> irgendwo vergessen wurde. Kann aber auch andere Ursachen haben.

Kein Backup vorhanden?

zu 1.

Ja das geht. Aber auch am besten wenn die Seite fertig ist weil da einiges zu beachten ist. Baut auf diesem Code auf: https://www.zella.de/code/bilder-frei-positionieren.html

zu 2.

Hatte ich wohl falsch in Erinnerung. Da hast du recht in "Flat" schaltet nicht auf links wenn der Platz nicht ausreicht sondern schaltet dann auf die Mobile Navigation um. In meinen Augen auch OK.

zu 3.

Campfire ist genau so modern wie Flat. Kannst du sicher verwenden.

zu 3. und 4.

Warum erstellt du nicht einfach ein Test-Projekt mit dem gewünschten Layout? Damit kannst du dann alle Widgets und Codes testen. So mache ich das auch immer.

• Link Card 1
• Link Card 2
• Link Card 3
• Link Card 4

• Nach Layoutwechsel kannst du zurück in dem du das alte Layout wählst und dann links oben die Varante "angpasst" wählst (siehe Anhang).
• Die Suche könnte man so lösen wie HIER. Aber am besten wenn der Rest fertig ist.
• Das mit der Schriftgröße und den Farben im Menü habe ich nicht verstanden. Die kann man doch im Layout-Designer unter Hautmenü einstellen.

Wenn du das zur Verfügung hast nimm Flat Responsive.

Mit diesem habe ich alle Widgets erstellt und dort funktionieren diese auch. Hier kannst du das Menü auch zentriert einblenden und das Untermenü klappt auch automatisch zu der Seite aus wo Platz ist. Ist halt einer neuesten.

Diese Zusätze Nature usw. sind nur Varianten das ist Quatsch weil du das selbst im Layoutdesigner einstellen kannst.

Einfach im Layout-Desinger oben rechts auf Layouts .....

Zu den Linkboxen kann ich noch nicht genaues sagen.

Es geht hier wohl um das Widget Hover-Rotate.

Das Problem ist wohl das das Layout Producer Responsive nicht mit der Darstellung Bildschirm-Breite klar kommt.

Nimm mal die Bildbreite im Widget ein paar Pixel herab oder die Layoutbreite im Layoutdesigner ein paar Pixel hoch. Dann sollte das passen.

Zitat von Friedrich

Du meinst Navigation per Bilder bzw. Linkboxen, wie ...

Ja genau. ich werde dazu demnächst ein paar Widgets raus bringen.

Das wird dann ungefähr so aussehen wie HIER, HIER oder HIER.

Zu den Layouts. Da sind die modernsten Flat und Campfire. Stripe ist auch nicht schlecht. Ich weiß aber nicht genau welche du in der kostenlosen Version zur Verfügung hast.

Die "widget..jason" ist vorhanden und sollte auch funktionieren. Eventuell wurde die Datei bei der Installation gelöscht.

Am besten das Widget löschen und neu installieren.

Mit einem Grafikprogramm. Ansonsten mal hier anhängen. Dann mach ich das.

Das Script ist scheinbar nicht da. Schau nochmal nach ob dieses wirklich in Footer-Script steht.

Ein solches "Mega-Menü" gibt es bei ZP nicht. Ich habe manchmal einfach auf der darüber liegenden Seite Verlinkungen zu den Unterseiten eingebunden. BEISPIEL

Ich glaube das Script wurde nicht mit hochgeladen.

Gehe mal auf:

1. Erweitert > Erstellen > Alle Seiten erstellen
2. anschließend auf Veröffentlichen > Komplette Seite veröffentlichen