Beiträge von Webgrafie

  • Stripe Responsive Layout-Einstellungen

    Hallo liebe ZP-Leute

    Für einige Kunden-Websites habe ich das "Stripe Responsive" Layout als Basis genommen.
    Leider muss man aber ständig per CSS einige Änderungen innerhalb des Stripe-Layouts vornehmen.


    Ich hoffe, man stört sich jetzt nicht an den vielen folgenden Informationen...? :/


    Slider fixieren:
    Bei den meisten Layouts ist es nicht möglich einen Slider-Widget wie bei "Poster-Responsive" im Header zu fixieren, damit das darunter liegende Hauptmenü und/oder der Content darüber fliesst.
    Hier bei meiner Stripe Responsive Beispiel-Webseite funktioniert das nur, weil ich per Container ein Hintergrundbild integriere. Hier sollte es unbedingt mal möglich sein, dass man innerhalb der Container-Einstellung auch einen Slider einfügen kann. Oder alternativ: das Slider-Widget selbst sollte allgemein fixiert werden können.
    (Es ist mir bekannt, dass sich einige hier im Forum an gewissen Spielereien - wie Parallaxe usw. -stören, aber der Kunde bestimmt in der Regel - und der Markt beweist eindeutig das Gegenteil. Auch bei dieser Kunden-Website hier habe ich einige Scrollmoves nur nach Kundenwunsch erstellt.)


    Hauptmenü:
    Ist die Startseite (index.-Menü) aktiv, wird der Hintergrund bei MouseOver immer grau angezeigt.
    Dass passt aber in keinem Fall zu den übrigen Einstellungen, darum ändere ich dies jeweils per CSS:
    .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover {
    color: #C9A36B;
    background-color: transparent;
    border-color: transparent; }

    Ebenfalls fehlt hier als Mobile-Button das wirklich beliebte Hamburger ICON. Auch das muss ständig per CSS-Einstellung umgeswitcht werden und vor allem möchte man doch die farblichen Einstellungen davon selber bestimmen dürfen. Bei jedem Layout sind die CSS-Anpassung unterschiedlich, was - wie hier aufgezeigt - stets sehr viel händische "<style>" Arbeit bedeutet:
    #menu {
    padding-top:5px; riight:0; bottom:0; position:fixed; width:200px; height:40px; z-index:1; transition: all 0.4s ease-in-out; }
    #menu:hover {
    padding-top:15px; height:400px; width:100%; background:rgba(0, 0, 0, 0.8); }
    .navbar-inner button.btn-navbar {
    text-transform: uppercase; color: #4C474C; background: #DBD9AD; border: 1px solid #4C474C; font-size: 14px; }
    .navbar-inner button.btn-navbar:hover {
    text-transform: uppercase; color: #4C474C; background: #fff; border: 1px solid #4C474C; font-size: 14px; }

    Button:
    Fügt man einen Button-Widget über dem Hauptmenü beim Stripe-Layout ein, muss man einige Einstellungen - wie die inaktive/aktive Schriftfarbe - unter den Teaser-Einstellungen vornehmen. Ausserdem stimmt dass Padding nicht mit den normalen Button-Einstellungen überein. Diese kann ich wiederum leider nur per CSS richtig stellen:
    #banner a, #afterfooter a {
    margin: 0px 0px 20px 0px;
    padding: 7px 15px 0px 15px; }

    Silbentrennung:
    Warum fehlt im Layout-Designer die EIN/AUS Silbentrennung-Einstellung bei so vielen Layouts? Bei einigen Layouts geht's doch auch. Auch hier muss per CSS ständig ergänzt werden:
    h1, h2, h3, p {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none; }

    Dropdown-Menü:
    Da ich ein eigens Dropdownmenü angelegt habe, habe ich im Layout-Designer im Hauptmenü das Dropdown deaktiviert. Kann es sein, dass trotz Deaktivierung des Dropdown-Menüs - bei Android-Tablets - die Untermenüs trotzdem angezeigt werden? Oder ist das eventuell nur bei meinem Android-Tablet so???
    Auf jeden Fall werden die Untermenüs auf dem Tablet bei folgenden Browser: IE, Chrome und Firefox trotzdem angezeigt. Das erzeugt aber eine unschöne Überlappung des bereits darunterliegenden Textes.


    CMS-Widget:
    Da die meisten Kunden einige Seiten auch selber administrieren möchten, kommt man um dieses Thema kaum herum. Hier wäre es doch an der Zeit, dass es bald mal möglich wird, die CMS-Widgets (zBsp.. in "Bella Responsive") nebst im Content zugleich/zeitgleich auch in der Sidebar ein CMS-Widget einzufügen. Bisher funktioniert das nur - entweder oder - und wenn, dann nur immer über ein Quelltext/iFrame. Per iFrame wird aber der Hintergrund auch mitgeliefert, der aber bei einem unterschiedlichen Background - zBsp. in der Sidebar - nicht erwünscht ist.


    Hier geht's zu meiner Stripe Responsive Beispiel-Webseite

    Gruss, Hannes

  • Suche nach Lösung mit ZP: Einstellen und Veröffentlichen von Referenzen durch Kunden

    Hallo Jörg

    Möglicherweise ist das hier eine Lösung für Dich... Test-Webseite

    Mit CMS ist das bedingt schon möglich...:
    Ausser ein Quelltext-Widget für einen externen Slider (hier der "wowslider"), habe ich den Content dieser Test-Webseite per CMS erstellt.

    Mit ZP zuerst ein HTML-Quelltext für die Bildergalerie einfügen.
    Die Foto/Bilder-Referenzen kann der Kunde dann per "wowslider" (Gratisversion für Privatanwender) ändern und sogar innerhalb des Sliderprogarmms hochladen.
    Dort müssen lediglich einmal die FTP-Zugangsdaten inkl. Publishfolder eingegeben werden.

    Dann unterhalb des Quelltextes ein CMS-Widget einfügen.
    Die Website dann auf den Server hochladen und danach via CMS einloggen.
    Nun als erstes im CMS-Content das Alphabet per Text eingeben.... dieses befindet sich jetzt allerdings unterhalb der Bildergalerie.

    Ankerverweise:
    Die einzelnen Alphabetbuchstaben jetzt mit Ankerverweisen verlinken:
    Zum Beispiel das A markieren und eine vorhandene Sprungzielseite und ein Sprungzielname angeben: >> index.php#Titelüberschrift_A

    Sprungziel:
    Obwohl der Content ein CMS-Widget ist, kann man hier im CMS-Fenster das Menü "HTML-Quellcode bearbeiten" öffnen und folgendes in die oberste Zeile einfügen:
    <h2 id="Titlelüberschrift_A">Titelüberschrift A</h2>

    Das macht man dann mit allen einzelnen Sprungzielen und ändert dabei bloss den jeweiligen id und den Textnamen.

    Viele Grüsse, Hannes

  • Poster Responsive - Inhalt einfahren

    Nein... sämtliche Bilder haben dieselbe Dimension wie die Einstellung im Layout-Designer in der Kopfgraphik "Breite"/"Höhe".

    Aber ich weiss was Sie damit Meinen... das hat aber nicht mit den Bilderhöhen selber zu tun...
    Im Template "Poster Responsive" gibt es ausdrücklich im Layout-Designer die Einstellung unter "Allgemein"/"Inhalt einfahren" an oder aus.

    Lg. Hannes

  • Poster Responsive - Inhalt einfahren

    Hallo

    Beim Template "Poster Responsive" hat man die Möglichkeit, den Inhalt automatisch einfahren zu lassen. Hier zu sehen: http://www.untertruebsee.ch
    Nach ca. 3-4 Sek. bewegt sich der Content dann langsam nach oben. Der Kunde findet das perfekt!
    Leider bewegt sich der Content aber auch dann noch, wenn der Websitebesucher schon vor dem automatischen Einfahren scrollt. Nur bewegt sich der Content jetzt automatisch nach unten. Das ist sehr mühsam, da der Text während dem lesen langsam nach unten verschwindet. Und es nützt auch nichts, wenn man mit der Maus entgegenscrollt.

    Ich bin mir nicht ganz sicher, ob das etwas mit dem CSS-Befehl "row-fluid" zu tun hat...

    Wenn man die autom. nach unten Bewegung per CSS-Eintrag deaktivieren könnte, wäre ich sehr zufrieden. :)

    Vielen Dank für Eure Hilfe
    Hannes

  • Hauptmenü

    Herzlichen Dank Herr Seiz

    Ich werde die Schriftgrösse auf 1.189em einstellen müssen.
    An sich eine kleine Sache, wenn nicht der ausdrückliche Kundenwunsch wäre... die Schriftgrösse im Hauptmenü und im Inhaltstext dürfte ich nicht verändern.

    Schade... trotzdem, vielen Dank für Ihre Hilfe!
    Hannes

  • Hauptmenü

    Im Layout "Stripe Responsive" erscheint der Mobile-Button zu spät... das heisst, die letzte Rubrik (KONTAKT) erscheint im Hauptmenü bei einer schmalen Browseransicht plötzlich in einer zweiten Reihe. Das möchte ich unbedingt verhindern. (Siehe Datei-Anhänge)
    Die Allgemeine Layoutbreite beträgt in diesem Fall hier "1090px" und soll nach Kundenwunsch so bleiben.

    Beim untersuchen des Elementes sehe ich folgende Einstellung:
    ----------------------------------------------
    style>
    media all and (max-width:979px) {
    .navbar .btn-navbar {
    display: block;
    }
    </style>
    ----------------------------------------------
    Ändere ich den Wert "979px" in der Breite +/-, habe ich damit keinen Erfolg.

    Gibt es hier eine Lösung, die ich unter den CSS-Einstellungen einfügen kann??
    Link zu Vorabansicht

    Danke für Eure Hilfe, Hannes
    (hb4web.ch)

  • online cms / Bilderalbum

    [Blockierte Grafik: data:image/png;base6…AAAAElFTkSuQmCC]
    Um eine Bildergalerie direkt via Browser, also per CMS einzubinden, brauchen Sie eine von Ihnen bevorzugte Slider-Software.
    Eine sehr gute (gratis für Private) Variante bietet "WOW Slider":(http://wowslider.com/de/)

    Mit dieser leicht verständlichen Software erstellen Sie in kürze eine Bildergalerie und können diese als "index.html" Datei in einen hierfür reservierten Ordner auf dem Server ablegen. Untenstehendes IFRAME-Beispiel kopieren Sie dann in das HTML Fenster, dass Sie wie oben abgebildet per Mausklick öffnen.

    IFRAME-Beispiel-Code:
    <iframesrc="Server-Pfad mit index-Datei hier einsetzen"frameborder="0" style="height:100%; width:100%;" rel="height:100%; width:100%;" scrolling="no"> </iframe>

    Gruss, Hannes

  • Smart Responsive: Dropdownmenü per Tablet nicht anwählbar

    Hallo

    Hier bin ich jetzt nicht sicher, ob sich in diesem Fall in naher Zukunft was tut... oder ob ich das Projekt zum Reproduzieren an die Entwickler senden muss??

    Zitat von hb4web

    Hallo

    Beim Layout Smart Responsive ist es per Android Tablet (waagrecht gehalten) nicht möglich, das Dropdownmenü anzuwählen. Sobald man im Hauptmenu die Rubrik "Berufsausbildung" mit dem Finger anklickt, zeigt sich zwar das Dropdownmenü, verschwindet aber, bevor man eine der Unterrubriken anwählen kann.

    > Link zur Beispiel Website

    Gruss
    Hannes

  • Smart Responsive: Dropdownmenü per Tablet nicht anwählbar

    Sorry, hier noch ein Problem - Betreff "Smart Responsive":

    Das "Smart Responsive" Layout verhält sich am Computer/PC bei den Browsern "Chrome" und "IE" anders als im Firefox. Bei Chrome und IE verschwindet das LOGO - inklusive Hauptmenu - beim verschmälern des Browserfensters (mit der Maus) unterhalb des Newsbereiches. Hingegen beim Firefox bleibt das Logo und das Hauptmenü - so wie es sein soll - oben in der Topline stehen.
    http://www.hb4web.ch/userdaten/beta…sausbildung.php

    Übrigens: Bei den neuen Header-Einstellungen wäre es sehr lobenswert, wenn man in der "Bild (Mobile Ansicht)" / "Max. Höhe" zusätzliches anwählen könnte: "Bild Seitenverhältnis beibehalten"

    Gruss
    Hannes

  • Smart Responsive: Dropdownmenü per Tablet nicht anwählbar

    Hallo Jochen

    Mit Firefox besteht das Problem noch immer... auch wenn man mit dem Finger länger auf dem Rubrikbutton "Berufsausbildung" oder "Unsere Lernenden" bleibt.
    Bei Chrome und IE kann man das interaktive Menü, dass erscheint - wenn man etwas länger auf die Rubrik drückt - ignorieren, indem man daneben klickt, dann bleibt das Dropdownmenü offen. Aber ob die Websitebesucher dass dann auch merken?

    Um die Bedienung zu testen, habe ich einigen jüngere People's das Tablet hingehalten und keiner konnte das Menü so auf die Schnelle bedienen. Evtl. liegts aber auch an meinem Tablet...

    Gruss, Hannes

  • Smart Responsive: Dropdownmenü per Tablet nicht anwählbar

    Hallo

    Beim Layout Smart Responsive ist es per Android Tablet (waagrecht gehalten) nicht möglich, das Dropdownmenü anzuwählen. Sobald man im Hauptmenu die Rubrik "Berufsausbildung" mit dem Finger anklickt, zeigt sich zwar das Dropdownmenü, verschwindet aber, bevor man eine der Unterrubriken anwählen kann.

    In den Antributt-Einstllungen habe ich es unter mobile_script mit folgender Verzögerung versucht:

    • <style>
      ul#navigation ul{transition: all 4.5s;}</style>

    ...hat aber nichts gebracht.

    Vielen Dank für Hilfe
    Hannes

    > Link zur Website: https://community.zeta-producer.com/www.hb4web.ch/…sausbildung.php

  • CMS-Widget und Gästebuch auf der selben Seite

    Hallo

    Weiss jemand, warum es nicht möglich ist, ein CMS-Widget und ein Gästebuch-Witget auf der selben Seite einzubauen? Jedenfalls können nach dem Hochladen die Seiten nicht editiert werden (?edit), das heisst - hier erscheint keine Loginmaske.

    Andernfalls wäre es sehr hilfreich, wenn hierfür ein zweites CMS-Witget eingebaut werden könnte.... Hier erscheint zwar die Loginmaske und man kann dann eines der CMS-Widget beschreiben. Aber hier reklamiert das System beim Speichern...: es müsse ein Artikeltext eingegeben werden! - Titel und Text stehen aber drin.

    Veranschaulichung des Layouts im "Dateianhang": Die Webseiten sollen per CMS in der linken Spalte und im Hauptcontent beschrieben werden können.

    Gibt es hier vielleicht eine interne Lösung?
    Gruss, Hannes


    Lg. Hannse

  • Hauptseite wird im Smartphone erst nach doppeltem Klick angezeigt.

    Hallo,

    etwas verspätet zu diesem Thema (Untermenü-Struktur im Album Responsive), aber hier ist nun ein weiteres Navigations-Problem mit dem Android Tablet und iPad aufgetreten:
    Die Navigations-Struktur besteht in meinem Fall aus Hauptseiten und jeweiligen Unterseiten...
    Tippt der Anwender auf eine Hauptseite in der Navigation, öffnen sich zugleich die Untermenüs... der Anwender will aber die darin enthaltenen Unterseiten zB. ignorieren und tippt gleich wieder auf eine weitere Hauptseite... nun überlagern sich gegenseitig die jeweiligen Unterseiten mehrfach! Das heisst, die vorher angetippten UnterRubriken werden nicht wieder eingeklappt, obwohl man inzwischen eine oder mehrere andere HauptRubriken mit enthaltenen Unterseiten gewählt hat. Die Untermenüs werden nur eingeklappt, wenn man tatsächlich eine der dort enthaltenen Rubrik ausgewählt hat.

    Hier auf einem Tablet oder iPad zum ausprobieren: http://www.info.mariograf.ch/newsite/index.php

    Die Überlagerung stört auch, wenn die Untermenüstruktur nicht halbtransparent ist.

    Gruss
    Hannes

  • Kontaktformular verhält sich nicht responsive

    Hallo

    Das Formular in eine einzelne Spalte kann ich so nicht platzieren, das sieht dann ziemlich vereinsamt aus. Ausserdem werden die Felder auch dann noch abgeschnitten, respektive ragt das Formular über den Layoutrand hinaus, wenn ich die Felder über 295px einstelle. Ich hab das meinem Kunden zur Anschauung mal kurz hochgeladen, aber das will der Kunde so nicht. Zuviel leerer Platz auf der Seite!

    Die Frage nun lautet, warum wird der Text im schmalen Hochformat nicht dynamisch nach unten links verschoben? Das funktioniert ja sonst auf dieser gesamten WebSite auch, die ich inhaltlich über alle Seiten per CMS-Widget erstellt habe.

    Auf folgender Website (habe ich mit "Smart Responsive" erstellt) wird der rechts neben dem Kontaktformular stehende Text - im schmalen Hochformat - doch ebenfalls dynamisch nach unten links verschoben...:
    http://www.hess-restaurant.ch/kontakt-01.php

    Freundliche Grüsse
    Hanns

  • Kontaktformular verhält sich nicht responsive

    Hallo

    Im Layout "Album Responsive" verhält sich das Kontaktformular (im Gegensatz zu anderen Layouts) auf dem Tablet im Hochformat nicht responsive. Zu sehen auch am PC - wenn man das Browser-Fenster mit der Maus ganz schmal zusammen zieht.
    Das heisst, das Kontaktformular überlappt dann rechts die Layoutgrenze!

    Hier der Link zur Voransicht der Beta-Kundensite...: http://www.hb4web.ch/beta/mariograf_v2/kontakt.php

    Ich würde mich sehr freuen, wenn mir da jemand helfen könnte...

    Herzlichen Dank
    Hannes

  • Responsive im "Hochkant-Format": Weisser Hintergrund im Hauptmenu

    Hallo Jochen... leider noch mal,
    ich habe den Menühintergrund gerade an einer anderen Responsive-Website (Producer-Responsive) ausprobiert und dort hat es natürlich funktioniert... hab mich noch gewundert! Bei meiner geht es wie bereits beschrieben nicht... siehe Anhang "DropDown-Liste_Weiss.jpg"

    Selbstverständlich probiere ich auch immer alles aus... ist ja auch mein Beruf ;)
    Gruss Hannes