1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] CSS-Menü

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von bdt600, 30 November 2016.

  1. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Sieht in MrMurphys Originalbeispiel (ohne aufklappbares Menü) aber auch nicht besser aus - dort ragen die Pseudoelemente unten einen Ticken hinaus, in meiner Variante oben.

    Bin mir jetzt nicht sicher, ob das ein Problem mit der Rendering-Engine des IE ist.
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. bdt600

    bdt600 Guest

  3. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Da warst du in der Zwischenzeit aber richtig fleißig am basteln, von 45° auf 0° zurückzuschwenken :D:cool:
     
  4. bdt600

    bdt600 Guest

    Ja, nee. :cool: Nein, im Ernst, habe ja auch nicht die ganze Zeit dran rumgebastelt, aber da stehen doch so einige Dinge im CSS, die ich noch nie benutzt habe, da muss man auch einfach mal experimentieren.:D
     
    Spicelab gefällt das.
  5. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Diese Einstellung lob' ich mir :)

    Kein 'rumgewürge - von wegen:
    • "...bin doch noch Anfänger"
    • "...kenne mich mit solchen Sachen nicht aus"
    • "...kann mir jemand den lauffähigen Code posten?"
    • "...usw."
     
  6. bdt600

    bdt600 Guest

    Ich versuche mich grundsätzlich erst mal selber an einem Problem, und wenn ich dann einsehen muss, dass es ohne Hilfe nicht geht, dann frage ich auch mal, kommt bei mir aber eher selten vor.
     
  7. bdt600

    bdt600 Guest

    Hallo zusammen,

    ich mache mal keinen neuen Thread auf, da es sich um ein ähnliches Problem handelt. Die Navigation habe ich dank eurer Hilfe hinbekommen. Jetzt stehe ich beim Footer wieder vor dem Problem, dass es mit dem transform einfach nicht klappen will. Ich bastele jetzt seit Stunden rum, aber es will nicht. Wenn jemand so nett sein könnte und mal drauf schaut:

    http://helper.bplaced.net/navi

    Durch transform wird der Footer zu breit und die weißen Flächen bekomme ich auch nicht weg. Ein Tipp, der mich in die richtige Richtung lenkt, wäre prima..

    Danke und Gruß
    bdt600
     
  8. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.411
    Punkte für Erfolge:
    63
    Hallo

    Ich würde die beiden inneren Container per Flexbox anordnen.

    Dann dem footer ein overflow: hidden mit auf den Weg geben.

    Zum Schluß mit seitlichem negativen margin die Container nach außen ziehen und den Inhalt mit padding zurückdrücken. Dabei ruhig etwas klotzen um Probleme bei mehr Inhalt ( = mehr Höhe ) zu vermeiden.

    In meinem Beispiel habe ich statt des footers ein aside genommen, das spielt für die Technik aber keine Rolle:

    Zu dem HTML

    Code (text):
    1.  
    2. <aside>
    3.    <div><p>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer</p></div>
    4.    <div><p>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer</p></div>
    5. </aside>
    6.  
    zum Beispiel das CSS

    Code (text):
    1.  
    2. aside {
    3.    overflow: hidden;
    4.    width: 70%;
    5.    border: 1px solid black;
    6.    margin: 1rem auto;
    7.    display: flex;
    8. }
    9. aside>* {
    10.    transform: skew(45deg);
    11.    padding: 1rem;
    12.    margin: 0.5rem;
    13.    flex-grow: 1;
    14.    flex-shrink: 1;
    15.    flex-basis: 50%;
    16. }
    17. aside>:nth-child(1){
    18.    background-color: #887e83;
    19.    padding-left: 100rem;
    20.    margin-left: -100rem;
    21. }
    22. aside>:nth-child(2){
    23.    background-color: #ee2f72;
    24.    padding-right: 100rem;
    25.    margin-right: -100rem;
    26. }
    27. aside>*>* {
    28.    transform: skew(-45deg);
    29. }
    30.  
    Bei der Navigation kann das natürlich auch so gelöst werden. Dann spart man sich die :before- und :after-Elemente. Bei meiner Lösung zur Navigation war ich noch davon ausgegangen, dass sie nicht hundert Prozent des Containers ausfüllen muss.

    Gruss

    MrMurphy
     
  9. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Ich habe für's Erste die überstehenden Ecken ausgemerzt:
    1. float:left|right und width:50% für die beiden <div> auskommentiert - für <footer> gilt ja schließlich display:flex, was das Floaten ad absurdum führt.
    2. Stattdessen flex:1 (relative Breiteneinteilung im Flexbox-Modell) u. margin-left/-right:100px definiert.
    https://jsfiddle.net/SpiceLab/2f9ryxmr/
     
  10. bdt600

    bdt600 Guest

    Leute, ich danke euch!!! Ihr seid für mich die CSS-Profis schlecht hin. Ich stricke da stundenlang rum, beiße schon fast in die Tischkante und ihr liefert Lösungen in kurzer Zeit. So wie es aussieht, muss ich mir mal richig Zeit nehmen und in Sachen CSS besser werden.

    Danke und Gruß
    bdt600
     
  11. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Den Rest besorgt dann die jahrelange Praxis(Erfahrung) :cool:

    Manchesmal habe ich schon beim Lesen der ersten Zeilen eines Forenbeitrags die Kausalität (Anm. d. Red.: Ursache-Wirkung-Beziehung) erkannt, bevor der User zu Ende geschrieben, und ich den Quellcode gesehen hatte :D Kein Scherz! :cool:
     
  12. bdt600

    bdt600 Guest

    Das kenne ich, aber dann im PHP-Bereich. Wenn ich den Threadtitel gelesen habe, kenne ich oft schon die Lösung. ;)