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

[ERLEDIGT] CSS-Menü

bdt600 schrieb:
<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>
Zum Vergrößern anklicken....
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.
 
bdt600 schrieb:
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
Zum Vergrößern anklicken....
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."
 
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
 
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
 
bdt600 schrieb:
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
Zum Vergrößern anklicken....
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/
 
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
 
bdt600 schrieb:
So wie es aussieht, muss ich mir mal richig Zeit nehmen und in Sachen CSS besser werden.
Zum Vergrößern anklicken....
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:
 
Spicelab schrieb:
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:
Zum Vergrößern anklicken....
Das kenne ich, aber dann im PHP-Bereich. Wenn ich den Threadtitel gelesen habe, kenne ich oft schon die Lösung. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben