Ergebnis 1 bis 27 von 27

Thema: Contao CSS3 Navigation mit transition

  1. #1
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard Contao CSS3 Navigation mit transition

    Hallo liebe Forumsgemeinde,

    hier habe ich an 2 Contao-Dropdown-Menues gearbeitet, die ich, sofern alles darin in Ordnung und verwendbar wäre, der Allgemeinheit zur Verfügung stellen würde. Da ja das Menumatic vom Entwickler nicht weiter gepflegt wird und in Anbetracht der Tatsache, dass inzwischen - mit Ausnahmen vom IE - die meisten Browser mit CSS3 umgehen können, habe ich versucht für das Contao-Naviagtionsmodul ein CSS zu schreiben, was ein Dropdown basierend auf transitions ermöglicht.

    Hier meine beiden Ergebnisse

    Mit transition height
    http://www.jukenetbox.de/dropdown1/

    Der Trick bei transition height ist der, dass im Hintergrund die Höhe der ul für zwei Zustände fest definiert ist. Im Normalzustand ist die Höhe 0, bei hover wird sie 250px groß. Das ist aber auch zugleich der Nachteil, denn durch die fixe Höhe ist die ul wesentlich länger als es die Anzahl der li vermuten lassen. Transistion height funktioniert nur leider nicht mit height:auto. Deswegen muss man beim Einsatz in Webseiten darauf achten, die Höhe immer auf das längste Submenu anzupassen. Ganz Fleißge können via Seitenstruktur und body-class die Höhen auch unterschiedlich anpassen.

    Mit transistion opacity
    http://www.jukenetbox.de/dropdown2/
    Bei der Lösung mit opacity macht man sich die Sichtbarkeit zunutze. Der Normalzustand ist unsichtbar, also opacity=0, bei hover ändert sich das in 0.9 oder 1.

    Bei beiden Menüs sind 2 Lösungen enthalten.
    Mit Ausnahme vom Menüpunkt Service slidet / blendet das Menü bei :hover ein bzw. wieder aus.
    Um zu zeigen, dass auch das möglich ist habe ich es beim Menüpunkt "Services" so eingerichtet, dass das Menü sichtbar bleibt.

    Beide Menüs können aber (bisher?) nur 1 Unterebene.
    Da ich aber ohnehin der Ansicht bin, dass ein Menü mit 2 Unterebenen erstens mal auf keiner Webseite schön aussieht und zweites die Bedienung, auch für nicht motorisch-gehandicapte User, eine Herausforderung darstellt, habe ich auf eine weitere, zweite Ebene verzichtet.

    Was mir jedoch noch am Herzen liegen würde ist das Öffnen des Untermenues bei :focus.
    Das geht, soweit ich ich das feststellen konnte, mit CSS gar nicht.
    Hier würde man wahrscheinlich doch MooTools und onFocus einsetzen müssen - ich muss aber gestehen, dass ich mir diesem Bereich die Kenntnisse fehlen um das einzubauen.

    So, dann hoffe ich mal im Allgemeinen, als auch in Sachen MooTools im Besonderen, auf eure Meinungen und Mithilfe.

    Beste Grüße
    juke
    Geändert von Juke (22.08.2012 um 14:48 Uhr)
    Carpe Diem und viele Grüße aus Bawü - juke | Contao-Partner | jukemedia.de | frische-zitronen.de |

  2. #2
    Contao-Fan Avatar von qba
    Registriert seit
    23.07.2010.
    Ort
    Berlin Mariendorf
    Beiträge
    574

    Standard

    Find ich schick.

    Von mootools habe ich leider aber auch keine Ahnung. Da kann ich nicht weiterhelfen.
    Gruß qba|uwe

  3. #3
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Da schließe ich mich an.

    Version 1 hat noch eine kleine Macke:
    Wenn man nicht schnell genug mit der Maus nach unten fährt, klappt das Untermenü wieder zu bevor man dort ist.
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  4. #4
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Hallo Juke,

    Klasse.

    Als ich in deiner Facebook-Post "MooTools" und "Dropdown" gelesen hatte, dachte ich "Nein, nicht schon wieder menumatic...", um so angenehmer überrascht war ich, deinen Forumsbeitrag zu lesen.

    Dein Beitrag ist "gelesezeichent" und ich werde mir die beiden gezeigten Möglichkeiten genauer anschauen, sobald das Buch schreiben mir dazu ein bisschen Zeit lässt, aber sie sehen erstens schon mal gut aus und scheinen zweitens gut durchdacht zu sein

    Was die Anzahl der Dropdown-Ebenen angeht, kann ich dir nur zustimmen, dass ein Dropdown mit mehr als 1 Ebene nicht sinnvoll ist. Dropdowns sind praktisch, weil sie einen Klick für die Unterebene ersparen, aber falls es noch weitere Unterebenen gibt, kann man die besser mit einem getrennten Navigationsmodul darstellen, zum Beispiel in der linken Sidebar.

    P.S.
    Leider kann ich dir mit dem :focus und den MooTools auch nicht weiterhelfen...

    P.P.S.
    Bei "Mir transistion opacity" sind dir gleich 2 Typos in einer Zeile reingerutscht.

  5. #5
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    Zitat Zitat von jubel Beitrag anzeigen
    Da schließe ich mich an.

    Version 1 hat noch eine kleine Macke:
    Wenn man nicht schnell genug mit der Maus nach unten fährt, klappt das Untermenü wieder zu bevor man dort ist.
    Ich dachte zunächst, dass das nur beim IE auftritt und hatte das in den cc schon angepasst.
    Ist aber so, dass FF das wohl auch so haben möchte.
    Der Grund liegt im padding des li der obersten Menüebene.
    Das muss sich mit dem submenu überlappen (bzw. "unterlappen"), sonst springt das Untermenü weg und spielt "fang mich" mit einem .
    Habe das korrigiert.
    Danke für den Hinweis .
    Carpe Diem und viele Grüße aus Bawü - juke | Contao-Partner | jukemedia.de | frische-zitronen.de |

  6. #6
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    Zitat Zitat von pmmueller Beitrag anzeigen
    P.P.S.
    Bei "Mir transistion opacity" sind dir gleich 2 Typos in einer Zeile reingerutscht.
    das ist, auch für mich schlimmen Buchstabenverwuchsler, rekordverdächtig ...


    Zitat Zitat von pmmueller Beitrag anzeigen
    Dropdowns sind praktisch, weil sie einen Klick für die Unterebene ersparen, aber falls es noch weitere Unterebenen gibt, kann man die besser mit einem getrennten Navigationsmodul darstellen, zum Beispiel in der linken Sidebar.
    dito - zum Thema Dropdowns gibt es aber noch mehr Pro und Contra :-)

    EDIT: ... bin mal gespannt, was deine genauere Untersuchung zu Tage fördern wird.
    Danke schonmal.
    Geändert von Juke (22.08.2012 um 18:35 Uhr)
    Carpe Diem und viele Grüße aus Bawü - juke | Contao-Partner | jukemedia.de | frische-zitronen.de |

  7. #7
    Contao-Fan Avatar von ATLAS
    Registriert seit
    19.06.2009.
    Ort
    Berlin
    Beiträge
    285

    Standard

    Ich finde deine Variante sehr schön. Sie könnte für die neue Musikschule eine gute Ergänzung sein.

    Allgemein: Ich habe hier noch eine sehr schöne Variante gesichtet. Sehr übersichtlich. Allerdings mur bedingt mit reinem css zu machen.
    Gesendet über Kabel, geschrieben am Rechner mit meiner Hand
    Gruß ATLAS

  8. #8
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    Hallo Atlas,

    das von dir referenzierte Beispiel ist grafisch sehr schön gemacht. Allein schon so viele Ideen für die Icons zu haben ist fein. Allerdings ist das Ganze dann imho doch schon mehr ein Megamenue. Da sehe ich den Einsatzbereich weniger weit verbreitet, weil das für Corporate Websites ein bisschen oversized ist - meiner Meinung nach. Oft gebraucht wird es jedoch in shops, vielleicht auch für Vereine mit einem breiten Angebot.
    Na, schauen wir mal ... vielleicht wäre das mein nächstes Ausknobel-Projekt :-)
    Carpe Diem und viele Grüße aus Bawü - juke | Contao-Partner | jukemedia.de | frische-zitronen.de |

  9. #9
    Contao-Fan Avatar von RainerG
    Registriert seit
    22.05.2011.
    Ort
    Hannover
    Beiträge
    851

    Standard

    Sehr schön gemachtes Menü - beide Varianten. Man mag das gar nicht entscheiden willen, welche man wählen wollte.

    Was mir an Variante 1 auffällt:
    Wenn ich mit der Maus ein Menü nach unten verlassen, dann bleibt es bestehen. Verlasse ich es seitlich, dann schließt es sich. Variante 2 schließt auch, wenn ich das Menü nach unten verlasse.
    --> Win7 mit FF 14.0.1
    Rainer G. aus H.
    www.BunteReisebilder.de

  10. #10
    Contao-Fan Avatar von jubel
    Registriert seit
    18.12.2011.
    Ort
    Waldbronn
    Beiträge
    715
    User beschenken
    Wunschliste

    Standard

    Wenn ich mit der Maus ein Menü nach unten verlassen, dann bleibt es bestehen. Verlasse ich es seitlich, dann schließt es sich.
    Und was mir noch daran auffällt:
    Das benachbarte Menü öffnet sich, wenn ich seitlich ziehe, d.h. der Hoverbereich ist jetzt erheblich größer als Level1.
    Gruß

    -----------------------------------------------------------------------------------------------------------------
    „Ich versuche immer das zu tun, was ich nicht kann, damit ich hoffentlich lerne, wie es geht.“
    Pablo Picasso

  11. #11
    Contao-Fan Avatar von Juke
    Registriert seit
    09.07.2009.
    Ort
    Ludwigsburg
    Beiträge
    293
    Partner-ID
    4860

    Standard

    Zitat Zitat von RainerG Beitrag anzeigen
    Wenn ich mit der Maus ein Menü nach unten verlassen, dann bleibt es bestehen. Verlasse ich es seitlich, dann schließt es sich. Variante 2 schließt auch, wenn ich das Menü nach unten verlasse.
    --> Win7 mit FF 14.0.1
    Da zitiere ich mal aus meinem Eingangsposting

    Zitat Zitat von juke
    Im Normalzustand ist die Höhe 0, bei hover wird sie 250px groß. Das ist aber auch zugleich der Nachteil, denn durch die fixe Höhe ist die ul wesentlich länger als es die Anzahl der li vermuten lassen. Transition height funktioniert nur leider nicht mit height:auto. Deswegen muss man beim Einsatz in Webseiten darauf achten, die Höhe immer auf das längste Submenu anzupassen. Ganz Fleißge können via Seitenstruktur und body-class die Höhen auch unterschiedlich anpassen.
    Die ul im Hintergrund hat eine transparente Farbe, deswegen kannst du nicht sehen, wie lang sie wirklich ist.
    Damit der slidende Effekt angewendet werden kann, hat die ul im Normalzustand die Höhe 0px, wenn man hovert vergrößert sie sich auf 250px. Zwischen 0 und 250 wird transition height angewandt. Dabei ist es zwingend notwendig zwei feste Größen anzugeben. Deswegen ist die ul beim Menue1 länger als die li, die du sehen kannst und deswegen verschwindet sie erst, wenn man die Maus ganz weit nach unten oder seitlich zieht. Muss man - meiner Meinung nach - aber nicht unbedingt als Nachteil sehen. Der positive Effekt ist, dass das Menue dadurch schön im Blickfeld des Betrachters bleibt und nicht so hypernervös umherzappelt.

    Beim zweiten Menü wird transition auf die Sichtbarkeit (opacity) angewendet - weil man hier keine feste Höhe braucht und auch nicht angibt, ist die ul immer nur so groß wie ihr Inhalt und nicht größer. Darum verschwindet das Menü sofort, wenn man den li Bereich verlässt.
    Carpe Diem und viele Grüße aus Bawü - juke | Contao-Partner | jukemedia.de | frische-zitronen.de |

  12. #12
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Zitat Zitat von Juke Beitrag anzeigen
    dEDIT: ... bin mal gespannt, was deine genauere Untersuchung zu Tage fördern wird.
    Danke schonmal.
    Dat kann aber noch 'n bisken dauern. Nicht das du ungeduldig wirst.

    Ich hänge im Moment noch in Kapitel 4 (Installation), und Dropdowns kommen erst in Kapitel 9. Wenn ich nicht zwischendurch mit dem ganzen neuen Krempel im CSS-Framework die Kapitelstruktur ändere...
    Geändert von pmmueller (30.08.2012 um 08:15 Uhr) Grund: OffTopic entfernt - ist übersichtlicher so ;-)

  13. #13
    Contao-Nutzer
    Registriert seit
    28.12.2009.
    Ort
    Dresden
    Beiträge
    206

    Standard

    Zitat Zitat von Juke Beitrag anzeigen
    Was mir jedoch noch am Herzen liegen würde ist das Öffnen des Untermenues bei :focus.
    Das geht, soweit ich ich das feststellen konnte, mit CSS gar nicht.
    Hier würde man wahrscheinlich doch MooTools und onFocus einsetzen müssen - ich muss aber gestehen, dass ich mir diesem Bereich die Kenntnisse fehlen um das einzubauen.
    Hallo Juke,

    das Aufklappen funktioniert mit :focus genauso wie mit :hover. Das Problem sind aber die Links in der ersten Menüebene, die kurz nach dem Focus geöffnet werden. Das lässt sich lösen, indem du die Links entweder komplett entfernst, oder per JS verhinderst, dass sie geöffnet werden.

    Code:
    window.addEvent('domready', function() {
      $$('.mod_navigation a.submenu').addEvent('click', function(event) {
        event.stop();
        event.stopPropagation();
      });
    });
    Das Ganze ist natürlich nicht der Weisheit letzter Schluss. Man könnte z.B. noch abfragen, ob touch-Events möglich sind - also prüfen, ob die Seite mit einem Smartphone oder Tablet angesehen wird - und dann erst die Links in der ersten Menüebene deaktivieren. Je nachdem, welches Verhalten du haben möchtest.


    Viele Grüße
    Daniel

  14. #14
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Dein CSS Menü gefällt mir sehr gut, hab mal mit Variante 1 etwas rumprobiert.
    Möchte vor jedem Menüelement der ersten Ebene ein List-Style Image positionierten, leider spricht
    mein CSS hier entweder alle Elemente des Menüs an oder gar keines...

    Kann mir hier jemand nen Tip geben, bin schier am verzweifeln...

    #mainmenue {
    overflow:visible;
    z-index:999999999999999999999999;
    }

    #mainmenue {
    width:80%;
    height:80px;
    top:60px;
    position:fixed;
    padding-top:25px;
    }


    #mainmenue li {
    width:15%;
    overflow:visible;
    float:left;
    margin-right:10px;
    margin-left:0;
    padding-right:5px;
    padding-left:10px;
    text-align:center;
    list-style-image:url("uploads/datastore/website/viereck.png");
    }

    #mainmenue a, #mainmenue span {
    width:100%;
    display:block;
    padding-bottom:0;
    color:#fff;
    font:24px 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
    }

    #mainmenue li:hover a, #mainmenue a:hover, #mainmenue .active, #mainmenue .trail a, #mainmenue a:focus {
    color:#4b85d8;
    }

    #mainmenue li:hover ul a {
    color:#fff;
    }
    in diesem Beispiel erhalten alle Elemente auch die des DropDown also Ebene 2 das List-Item.

    Dank Euch!!!

    Messen

  15. #15
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Code:
    #mainmenue li li {
    list-style-image: none;
    }
    Gruß

    Dennis

  16. #16
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Zum Ursprungsthema: Ich liebe CSS3; auf http://www.com4viva.de habe ich das Menü und noch einiges Andere mit CSS3 gelöst

  17. #17
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Danke die Images zu den einzelnen Punkten werden nun im Hauptmenü ausgegeben und im Submenü unterdrückt.
    Leider habe ich jetzt noch das Problem, dass mir das Submenü Level2 beim Mouseover immer nur auf der linken Seite angezeigt wird.
    Egal welchen der Hauptmenüpunkte ich mit der Maus berühre.

    Bin den Code schon durchgegangen, aber ich sehe irgendwie keine relevante Abweichung zum original?

    Kann natürlich auch sein, dass ich heute einfach schon viel zu lange über die Sachen drüber schau! )

    Aber vielleicht kann mir hier ja trotzdem jemand helfen!?!

    Dank Euch

    Grüße Messen

    Code:
    /* #mainmenue +++++++++++++++++++++++++++++++++++++++ */
    #mainmenue {
        overflow:visible;
        z-index:999999999999999999999999;
    }
    
    #mainmenue {
        width:100%;
        height:80px;
        top:60px;
        position:absolute;
        padding-top:25px;
    }
    
    #mainmenue a, #mainmenue span {
        width:100%;
        display:block;
        padding-bottom:0;
        color:#fff;
        font:24px  'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
    }
    
    #mainmenue ul {
        left:30px;
        position:absolute;
        list-style-image:url("uploads/datastore/website/viereck.png");
    }
    
    #mainmenue li {
        min-width:138px;
        overflow:visible;
        float:left;
        margin-right:0;
        margin-left:0;
        padding-right:5px;
        padding-left:5px;
        text-align:left;
        list-style-type:none;
        background-color:transparent;
    }
    
    #mainmenue li:hover a, #mainmenue a:hover, #mainmenue .active, #mainmenue .trail a, #mainmenue a:focus {
        color:#4b85d8;
    }
    
    #mainmenue li:hover ul a {
        color:#fff;
    }
    
    
    /* untermenue ein- und ausblenden +++++++++++++++++++++++++++ */
    #mainmenue .submenu ul {
        top:55px;
        position:absolute;
        overflow:hidden;
        margin-left:-9999px;
        left:-10px;
        opacity: 0;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
    }
    
    #mainmenue li.submenu:hover ul {
        position:absolute;
        overflow:hidden;
        margin-top:0;
        margin-left:0;
        opacity:0.9;
    }
    
    
    /* ul level_2 +++++++++++++++++++++++++++++++++++++++++ */
    #mainmenue .level_2 {
        width:25%;
        position:absolute;
        margin-top:20px;
        list-style-image:none;
    }
    
    #mainmenue .level_2 li {
        width:90%;
        margin-right:10px;
        margin-left:10px;
        text-align:left;
        border-right:1px solid #4b85d8;
        border-left:1px solid #4b85d8;
        background-color:rgba(75,133,216,0.9);
        z-index: 99999999999;
    }
    
    #mainmenue .level_2 li.first {
        padding-top:10px;
        border-top:1px solid rgba(75,133,216,0.7);
        -moz-border-radius-topleft:5px;
        -webkit-border-top-left-radius:5px;
        border-top-left-radius:5px;
        -moz-border-radius-topright:5px;
        -webkit-border-top-right-radius:5px;
        border-top-right-radius:5px;
        behavior:url('plugins/css3pie/PIE.htc');
    }
    
    #mainmenue .level_2 li.last {
        padding-bottom:3px;
        border-bottom:1px solid rgba(75,133,216,0.7);
        -moz-border-radius-bottomright:5px;
        -webkit-border-bottom-right-radius:5px;
        border-bottom-right-radius:5px;
        -moz-border-radius-bottomleft:5px;
        -webkit-border-bottom-left-radius:5px;
        border-bottom-left-radius:5px;
        behavior:url('plugins/css3pie/PIE.htc');
        border-bottom-right
    }
    
    #mainmenue .level_2 a, #mainmenue .level_2 span.active {
        width:90%;
        display:block;
        margin-right:10px;
        margin-left:10px;
        padding-top:3px;
        padding-bottom:3px;
        color:#fff;
        text-transform:none;
        font:18px 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
    }
    
    #mainmenue .level_2 a:hover, #mainmenue .level_2 span.active, #mainmenue .level_2 a:focus {
        color:#000;
    }
    
    
    /* ueber erstem li kein Rahmen */
    #mainmenue .level_2 .first a, #mainmenue .level_2 .first.active .active {
        border-top: none;
    }
    
    
    /* unter letztem li kein Rahmen */
    #mainmenue .level_2 .last a, #mainmenue .level_2 .last.active .active {
        border-bottom: none;
    }

  18. #18
    Contao-Nutzer Avatar von brandtmarke
    Registriert seit
    30.07.2009.
    Ort
    Bremerhaven
    Beiträge
    105

    Standard

    Live könnte man das besser beurteilen, aber

    Code:
    #mainmenue .submenu ul {
        top:55px;
        position:absolute;
        overflow:hidden;
        margin-left:-9999px;
        left:-10px;
        opacity: 0;
        -webkit-transition: opacity .4s ease-in-out;
        -moz-transition: opacity .4s ease-in-out;
        -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
    }
    wird wohl er Haken sein, absolute Positionierung bezieht sich immer auf ein Elternelement mit relativer Positionierung; geb doch dem Eltern-<li> mal ein position: relative, das wird wahrscheinlich helfen.

    Evtl. mal einen neuen Thread aufmachen, wenn möglich mit Link, damit man sich das mal live angucken kann.

    gruß

    Dennis
    Geändert von brandtmarke (05.09.2012 um 07:35 Uhr)

  19. #19
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Tja das wars wohl

    Ne neue Regel :
    Code:
    #mainmenue li.submenu  {
      position: relative;
    }
    und Level_2 auf width:100%

    und siehe da alles bestens!

    Ab und zu sollte man sich halt doch wieder mit den CSS Basics befassen.

    Vielen Dank

    Messen

  20. #20
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    @Messen

    Die Kombination von position:relative und positon:absolute ist eine echte Grundlagentechnik. Hier wird das ausführlich beschrieben:
    http://little-boxes.de/lb1/12.5.2-ab...n-element.html

  21. #21
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    @pmmueller

    danke für den Tipp... das Buch habe ich und auch gelesen... aber vor lauter Bäumen mal wieder den Wald aus den Augen verloren.
    Aber Gottseidank wird man immer wieder mal daran erinnert, das man die einfachen Dinge nicht ganz ausser acht und vernachlässigen sollte!

    Danke

  22. #22
    Contao-Nutzer
    Registriert seit
    13.07.2010.
    Beiträge
    45

    Standard

    Zitat Zitat von pmmueller Beitrag anzeigen
    @Messen

    Die Kombination von position:relative und positon:absolute ist eine echte Grundlagentechnik. Hier wird das ausführlich beschrieben:
    http://little-boxes.de/lb1/12.5.2-ab...n-element.html
    ...das Buch ist übrigens Top - genauso wie der Contao Titel... freue mich schon auf die neue Auflage!

  23. #23
    Contao-Nutzer
    Registriert seit
    23.08.2012.
    Beiträge
    148

    Standard

    sollte das auch mit Contao 3 funktionieren?

    Gefällt mir sehr gut, nur konnte ich die cto Datei nicht importierten.

  24. #24
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Madob,

    die cto und damit das Theme muss in die gleiche Version importiert werden in der es exportiert wurde.
    Da di ecto-Datei auch nur eine Zip-Datei ist, kannst du das auch entpacken und die CSS entsprechend extrahieren und zu importieren.
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  25. #25
    Contao-Nutzer
    Registriert seit
    23.08.2012.
    Beiträge
    148

    Standard

    danke für den Tip.

    Leider befindet sich in dem Archiv nur eine theme.xml und ein PNG Datei, keine CSS. hmm

  26. #26
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.529
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ok.
    In der cto stehen die CSS in der XML und werden beim Import dann in die Datenbank importiert.
    Alternativ schau in den Quellcode und schau dir dort das CSS an oder frag einmal bei Jutta an.

    Oder:
    Installiere wie auf der Website von jukemedia zu sehen ist, die Contao-Version 2.11.5, dann sollte der Import klappen.
    Von da an dann Update auf 3.0.3.
    Geändert von planepix (16.01.2013 um 21:24 Uhr)
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  27. #27
    Contao-Nutzer
    Registriert seit
    23.08.2012.
    Beiträge
    148

    Standard

    ok, danke. Werd bei Jutta mal fragen, extra die andere Version zu installieren ist wohl zuviel Aufwand

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •