Hallo Philipp,
vielleicht kannst Du den Tipp "Das Widget auf der Startseite einfügen und dann per Vererbung auf allen Seiten einbinden" in "Das Widget auf der Startseite einfügen und dann per Verknüpfung auf allen Seiten einbinden" abändern.
Viele Grüße
Tom
Hallo Philipp,
ich habe gerade die vier Accordions getestet und bin letztlich bei 2021 hängen geblieben, da es für meine Zwecke ideal ist.
Zwei Probleme habe ich allerdings mit diesem Widget:
Max Mustermann
Musterstr. 1
12345 Musterhausen
ein, wird daraus im Browser
Max Mustermann Musterstr. 1 12345 Musterhausen info@muster.de.
Da es auch keine Quelltext-Ansicht gibt, habe ich zudem leider auch keine Möglichkeit, die E-Mailadresse zu verschleiern.
Ist 2021 bereits ad acta gelegt, oder ließe sich das Widget ohne viel Aufwand entsprechend anpassen?
Vielen Dank und viele Grüße
Tom
Hallo Sven,
herzlichen Glückwunsch zur neuen Seite! Sie sieht wirklich sehr professionell aus. Es immer wieder schön zu sehen, was sich mit Bordmitteln, mit ZP-Widgets und/oder etwas zusätzlichem CSS-Code alles bewerkstelligen lässt.
Zum ersten Mal habe ich die horizontale Progress-Bar in Aktion gesehen, und in Verbindung mit dem tollen Rot macht sie wirklich was her.
Wenn mir diese Anmerkung gestattet ist: Ich würde das Dropdown-Menü noch etwas modifizieren. Ich persönlich empfinde es als etwas unruhig, wenn es zu einem ungewollten Verbreitern des Dropdown-Menüs kommt. Das ist immer dann der Fall, wenn der fette Schriftsatz mehr Breite erfordert, als das Menü für normales Schriftgewicht eigentlich vorsieht.
Beispiele:
Aktuelles > Gesprächsangebot Missbrauch
Menschen > Kirchenvorstand
Orte > St. Elisabeth-Haus
Schau doch mal, wie es sich macht, wenn Du nur die Schriftfarbe änderst. Oder wenn Du zusätzlich die Hintergrundfarbe für Hover in bspw. #FFF änderst. Das Verbreitern des Menüs wäre auch noch eine Option, aber da müsstest Du wieder zusätzliches CSS bemühen.
Viele Grüße
Tom
Hallo Wolfgang,
ich ziehe meine Aussage, dass sich das ganz einfach über den Darstellungsmodus lösen lässt, hiermit vorerst zurück.
Ich hatte versehentlich eine neue Reihe mit den Buttons angelegt. Dann funktioniert der Darstellungsmodus natürlich prima, allerdings wissen die Reihen mit den Bildern und den Button nichts voneinander und jede Reihe kocht dann ihr eigenes Süppchen in der mobilen Ansicht, die ich verwerflicher Weise überhaupt nicht getestet hatte. Mein Fehler.
Du hast es in Deiner funktionierenden Konfiguration gleich richtig gemacht und den Button direkt unterhalb des Bildes und eben nicht als neue Reihe eingefügt und somit Bild und Button „gruppiert“. In dieser Konstellation kannst Du den Button aber nicht direkt im Darstellungsmodus ansprechen, da Bild und Button eine gemeinsame Spalte bilden.
Lösung: Du gehst in die Bearbeitungsansicht des Buttons, klickst links unten auf das Reglersymbol, dann auf „Mehr“ und gibst schließlich unter „Inline-CSS“ „margin-top: -5px“ ein. Mit dem Wert musst Du experimentieren. Nachdem Du einen geeigneten Wert gefunden hast, trägst Du ihn an besagter Stelle bei allen Buttons ein, die Du näher an das Bild bringen möchtest. Das habe ich jetzt auch in der mobilen Ansicht erfolgreich getestet.
Ich persönlich finde den Abstand Bild/Button auf besagter Seite eigentlich optimal. Wenn überhaupt, ist er eher zu gering denn zu groß. Wenn der Button zu nah am Bild klebt, dann geht die durch den Schatten suggerierte Leichtigkeit flöten. Aber das ist meine persönliche Ansicht. Vielleicht habe ich Deine Anfrage hierzu aber auch missverstanden, und Du wolltest den Abstand ohnehin vergrößern.
In diesem Fall musst Du dann einfach mit positiven Werten für den Außenabstand oben arbeiten wie bspw. „margin-top: 5px“.
Viele Grüße
Tom
Hallo Wolfgang,
ich schaue mir das heute Abend an. Ich muss jetzt erstmal arbeiten gehen.
Viele Grüße
Tom
Hallo Wolfgang,
wie im Schreenshot gezeigt. Im Darstellungsmodus klicke ich die Reihe mit den Buttons an und gebe dann rechts unter "Reihe" einen negativen Wert für den oberen Außenabstand an. In meinem Beispiel -85px.
Viele Grüße
Tom
Hallo Wolfgang,
die Einstellungen im Darstellungsmodus beziehen sich nur auf die jeweilige Seite, auf der Du Dich befindest bzw. für die Du die Einstellungen vornimmst. Schau Dir mal meinen Screenshot.
Viele Grüße
Tom
Hallo Wolfgang,
das sollte sich meiner Meinung nach doch ganz einfach über den Darstellungsmodus lösen lassen.
Ansonsten einfach mal einen Link zur betroffenen Seite mit genauer Beschreibung, was Du erreichen möchtest, posten.
Viele Grüße
Tom
Hallo Ted,
ich denke, dass Du mit dem Buch eine gute Wahl getroffen hast. Du wirst vieles besser verstehen. Die Krux an der Sache ist aber, dass wir ja keine Seite von Grund auf neu erstellen wollen, sondern dass wir Anpassungen an einem nicht von uns verantworteten Design vornehmen wollen. Das bedeutet, dass man mit den Entwicklertools eines Browsers arbeiten muss. Dies wird leider, wenn überhaupt, nur kurz in meiner 2. Auflage angerissen. Hier muss man sich definitiv selber fortbilden. Vielleicht erlauben hier aber auch die der dritten Auflage hinzugefügten neuen 21 Seiten tieferen Einblick.
Ich denke, dass die Entwicklertools für die meisten von uns die größere Hürde darstellen. Dass „background-color“ vermutlich etwas mit der Hintergrundfarbe zu tun hat, dürfte auf der Hand liegen. Aber wen oder was muss ich mit meinem Style adressieren, wenn ich die Hintergrundfarbe beim Hover im Dropdown meine? Na völlig selbsterklärend #navigation>div>ul>li:hover>a:after. 😉Nein, das habe ich damals natürlich nicht selber herausgefunden. Das war Mario.
Ich lerne täglich Neues im Umgang mit den Entwicklertools. Interessant ist auch immer ein Blick in die bundle.css selber mit einem der im Buch erwähnten Editoren. Damit die Datei strukturiert dargestellt wird, muss in ZP unter „Website > Erweitert > Erweiterte Einstellung > Kodierung“ die Komprimierung der CSS-Dateien deaktiviert sein. Ansonsten reiht sich Buchstabe an Buchstabe.
„Gruß an Kiel“ war einer der ersten Märsche, die ich getrommelt habe. In diesem Sinne viele Grüße vom Westhafen
Tom
Hallo Ted,
das Menü sollte sich auf diesem Wege farblich anpassen lassen:
<style>
button.btn.btn-navbar {
background: #A50111;
}
</style>
<style>
button.btn.btn-navbar:hover {
background: yellow;
}
</style>
Das Gelb habe ich nur zur Verdeutlichung gesetzt. Das kannst Du natürlich noch anpassen.
Viele Grüße
Tom
Hallo Jörg,
das ist jetzt ZP gegenüber aber fast schon ein wenig unfair. 😉 Vielleicht wartet ZP17 ja mit der Implementierung von KI auf, aber bis dahin kann ZP nur umsetzen, was wir ihm eingeben. ZP kann somit schwerlich unsere Beweggründe erkennen und demgemäß auch schwerlich erahnen, dass wir den negativen Wert für einen Außenabstand in der mobilen Version gar nicht wünschen.
Ich bin erst in Version 14 eingestiegen und als ich das erste Mal im Forum auf eine meiner Anfragen las, dass ich da etwas eigenes CSS einsetzen müsste, bin ich bald vom Glauben abgefallen. Viele Experimente und ein gutes Buch über CSS später (Peter Müller: Einstieg in HTML und CSS, 2. Auflage 2022) stehe ich derartigen Eingriffen sehr gelassen gegenüber.
Das ist ja das Tolle an ZP, dass man unbegrenzt Projekte anlegen kann und diese mittels eigenem CSS-Code beliebig bereichern oder verschandeln kann.
Kaufe zwei Sets „Malen nach Zahlen“ und gib es jeweils einem des Malens eher Unkundigem und einem Künstler. Sehr wahrscheinlich wird der Unkundige das erwarte Bild abliefern, das des Künstlers wird aber erheblich besser aussehen, weil er gar nicht auf die Zahlen angewiesen ist bzw. diese gekonnt modifiziert. So ist es auch mit ZP.
Natürlich wäre es für die Zukunft wünschenswert, ein Bild per Klick ausbrechen zu lassen und es in der mobilen Ansicht wieder brav einzureihen bzw. eine andere passende Darstellung zu wählen, aber das ist gegenwärtig wohl noch Zukunftsmusik.
Da müssen wir halt geduldig sein oder risikofreudig in die Programmierung eingreifen.
Viele Grüße
Tom
Hallo Jörg,
die Diskrepanzen zwischen Dastellungsmodus, ZP-Ansicht und Browservorschau habe ich auch festgestellt. Zu den Ursachen kann ich nichts sagen.
Jetzt zum eigentlichen Problem. Ich habe Deine Testseite einigermaßen nachgebaut und mein gefährliches Halbwissen bemüht. Dass es in der mobilen Ansicht zu einer Überschneidung kommt, ist zunächst erwartungsgemäß. Die Anweisung für den negativen Außenabstand muss für die mobile Ansicht natürlich irgendwie aufgehoben werden.
Ich habe wirklich viel probiert und nur wie folgt scheint es zu klappen:
Oberer Container keine Einstellungen zum Außenabstand
Reihe Außenabstand unten -230px
Unterer Container oberer Innenabstand: 200px
Reihe keine Einstellungen zum Außenabstand
Jetzt eine CSS-Klasse definiert:
<style>
@media (max-width: 1024px){
.ohneueberlappung {
margin-bottom: 230px !important;
}
}
</style>
und diese dem oberen Container zugewiesen.
Mittels einer zweiten CSS-Klasse könnte/müsste man jetzt sicherlich noch das obere Padding des unteren Containers reduzieren.
Ist nur ein Idee, in welche Richtung Du Deine Forschungen fortsetzen könntest.
Viele Grüße
Tom
Hallo Jörg,
vielleicht mach ich auch gerade einen Gedankenfehler, aber wenn ich dem unteren Container negative Werte für den oberen Außenabstand zuweise, dann wandert der untere Conatiner unter den oberen.
Viele Grüße
Tom
Klasse! Vielen Dank!
Tom
Hallo Philipp,
zur Global-CSS heißt es "Wenn viel CSS eingesetzt wird, sollte dieses in eine externe CSS-Datei ausgelagert werden, sonst meckert Google." Was ist denn "viel" bzw. ab welcher Zeilenanzahl wäre es empfehlenswert, dieses Widget einzusetzen?
Vielen Dank für einen Richtwert und viele Grüße
Tom
Hallo Philipp,
ganz herzlichen Dank!
Viele Grüße
Tom
Hallo Philipp,
ehe vielleicht die Nachfrage kommt, ob noch Interesse besteht, komme ich dem zuvor. Ich hätte weiterhin Interesse an folgenden Verbesserungen am Flex Container:
Vielen Dank und viele Grüße
Tom
Hallo Andreas,
super, dass sich da eine Lösung gefunden hat. Mich würde nun aber mal interessieren, wie es sich mit Phils Skript in der mobilen Ansicht verhält, nachdem Du auch den Aufruf der Hauptseiten mittels „#“ unterbunden hast, so dass in der Desktop-Ansicht bei einem Klick auf „Bildergalerie“ gar nichts passiert.
Viele Grüße
Tom
Hallo Andreas, hallo Phil,
nur ein paar kleine Hinweise meinerseits, die vielleicht zu einer Lösungsfindung beitragen.
Zunächst zur Desktopansicht. Hier hast Du, Andreas, ja die jeweiligen Hauptseiten wie „Infothek“, „Bildergalerie“ usw. auf Unterseiten weitergeleitet, weil Du die genannten Seiten gar nicht pflegen willst, und sie einfach nur als Überschriften fungieren sollen. Die Weiterleitung auf eine der Unterseiten verwirrt den Besucher natürlich.
Die ganz einfache Abhilfe ist in diesem Fall die Weiterleitung der jeweiligen Hauptseite mit dem Weiterleitungsziel „#“. Nun kann „Infothek“ nicht mehr angeklickt werden und es erscheint nur noch das Ausklappmenü. Zugegeben, schwebt der Cursor über „Infothek“ verhält er sich wie über einem Link. Das dürfte aber kaum jemandem auffallen und ist ein minimaler optischer Mangel dieser Lösung, den ich auf meiner Seite sehr gerne in Kauf nehme.
Im Folgenden beziehe ich mich aber auf „Top Responsive“.
Leider wirkt sich die Umleitung auf „#“ auf das mobile Menü etwas anders aus als erwartet. Hier wird der Name leider nicht stillgelegt. Ein Klick auf den Namen befördert einen meist auf die Startseite (die Regularitäten habe ich bislang nicht weiter untersucht). Der Klick auf den Pfeil öffnet aber weiterhin wunschgemäß das Ausklappmenü.
Im ZP-Forum bin ich dann auf folgenden CSS-Code gestoßen:
<style>
#navigation ul li.haschilds > a {
pointer-events: none;
cursor: pointer;
}
#navigation ul li.haschilds > a span {
pointer-events: auto;
}
</style
Dieser legt in der mobilen Ansicht den Namen still, sofern die entsprechende Seite Unterseiten hat, und nur der Pfeil ist noch funktionstüchtig. Das ist natürlich nicht das, was Du eigentlich suchst, aber ich bin mit dieser Lösung sehr zufrieden. Der Besucher landet jedenfalls nicht auf einer falschen Seite. Bei einem kurzen Test mit Deinem Layout hat der Code allerdings nicht funktionieren wollen. Das sollte aber keine große Hürde für Phil sein, das CSS für Dein Layout entsprechend anzupassen.
Und ansonsten führt der Code vielleicht Phil in die richtige Richtung. Bei meinem Layout würde es mir natürlich auch sehr gut gefallen, wenn ein Klick auf den Namen im mobilen Menü das Ausklappmenü hervorzaubert.
Viele Grüße
Tom
Ich kriege zwar unter 16.8.2.0B/Top Responsive nicht den oben beschriebenen blauen Bildschirm, habe aber am rechten Fensterrand unzählige Pfeile in der Laufleiste wie auch im Screenshot von AWS zu sehen. Zudem kann ich überhaupt keinen Unterschied zum integrierten Text-Editor feststellen. Alle Schaltflächen sind identisch und ich finde keine der „tausend Möglichkeiten“. Texte erstellen und einfügen funktioniert aber.
Ich habe den Editor allerdings eben erst installiert, kann also nicht sagen, ob es hier einen Zusammenhang zur eingesetzten 16.8.2.0 gibt, oder ob das Problem möglicherweise vor dem Bildschirm zu suchen ist.
Viele Grüße
Tom
