• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] CSS-Menü

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#21
<edit>
Doch noch Probleme, im IE ist die Navi viel zu schmal und wenn man das Browserfenster verkleinert und dann das Menü aufklappt, sind die schrägen Kanten nicht so schön. Muss ich doch noch basteln.
</edit>
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.
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#23

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#25
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
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."
 
B

bdt600

Guest
#27
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
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.461
215
63
#28
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:
<aside>
   <div><p>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer</p></div>
   <div><p>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer</p></div>
</aside>
zum Beispiel das CSS

Code:
aside {
   overflow: hidden;
   width: 70%;
   border: 1px solid black;
   margin: 1rem auto;
   display: flex;
}
aside>* {
   transform: skew(45deg);
   padding: 1rem;
   margin: 0.5rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 50%;
}
aside>:nth-child(1){
   background-color: #887e83;
   padding-left: 100rem;
   margin-left: -100rem;
}
aside>:nth-child(2){
   background-color: #ee2f72;
   padding-right: 100rem;
   margin-right: -100rem;
}
aside>*>* {
   transform: skew(-45deg);
}
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
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#29
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
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/
 
B

bdt600

Guest
#30
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
 

Spicelab

Mod | ZENmechanic
Team
Moderator
27 November 2015
1.669
319
83
Goa
#31
So wie es aussieht, muss ich mir mal richig Zeit nehmen und in Sachen CSS besser werden.
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:
 
Top Bottom