Twentyseventeen footer rotation

fhwebdesign

Hallo zusammen,
wenn ich beim twentyseventeen-Theme den footer (#colophon) mit

Code

#colophon {
     transform: rotate(2deg);
}

versehe, entsteht unten am Ende der Seite so eine Art "Keil". Ich hoffe ich drücke mich verständlich aus. Wie "verkürze" ich die Website jetzt so, dass dieser Keil nicht mehr sichtbar ist?
Alle meine Versuche sind gescheitert, diese gingen von

Code

body {
     transform: translateY(-20px);
}

über alles erdenkliche.
Hat da jedmand zufällig einen Hotfix für mich?
Danke schonmal!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Ich verstehe nicht was du willst. Du drehst den Footer extra und willst das dann ausblenden? Gibt es einen Link um sich das anschauen zu können?

fhwebdesign

Habe mal eben eine Dummy-Seite aufgesetzt (Kommt per PN). Ich will nicht den ganzen Footer ausblenden, sondern nur dieses "Dreieck", das dann unterhalb entsteht. Möglicherweise hast du eine Idee, wie man das ganze anders lösen könnte?

Edit SirEctor: Vollzitat in direkter Antwort entfernt.

SirEctor

Bitte keine Links per PN. Das ist ein öffentliches Forum. Wie sollen sonst andere helfen?

SEpp55

Versuch das im Dashboard unter Design - Customizer - Zusätzliche CSS einzufügen:

Code

.has-header-image .custom-header-media img {
  padding-bottom: 25px;
}

fhwebdesign

Dadurch geht leider nur der Teil des Bildes innerhalb des "Dreiecks" weg, dafür bleibt das "Dreieck" weiß bestehen.

Edit SirEctor: bitte keine Vollzitate als direkte Antwort

SEpp55

durch die Drehung vom Container ist der "Keil" aber auch links und rechts - das macht nichts¿ In der Demo ist dann alles weiß ;-)

fhwebdesign

Ich meinte den Keil unten und nicht links oder rechts. Oder verstehe ich dich falsch? Es sieht dann jedenfalls so aus:
Vorher: [Blockierte Grafik: http://fs1.directupload.net/images/180925/r39xkeln.png]
Nachher: [Blockierte Grafik: http://fs1.directupload.net/images/180925/7vj5gewt.png]
So soll es aussehen: [Blockierte Grafik: http://fs1.directupload.net/images/180925/uar273o4.png]

SEpp55

Ich habe für dich im Internet gesucht und etwas gefunden!
CSS transform
Demnach versuche mal den transform so zu ergänzen:

Code

Element {
    transform: rotate(2deg);
    transform-origin: bottom right;
}

oder eben bottom left - je nachdem, in welche richtung du rotate gesetzt hast.

fhwebdesign

Danke dafür! Jedoch ändert sich dadurch rein gar nichts, es springt zwar kurz aber der Keil bleibt da.

Edit SirEctor: Bitte keine Vollzitate in einer direkten Antwort!

SEpp55

Für mich ist damit das Ratespiel beendet!!
Ich suche auf einer Demoseite und du gibst keinen Link zu deiner Seite bekannt. Da wundere ich mich nicht, dass es irgendwo spießt.

fhwebdesign

Ich hatte gestern einen Moderator gebeten, in das Thema den Link noch einzufügen, da ich dieses nicht mehr bearbeiten kann. Entschuldige daher bitte, dass ich das nicht erneut gemacht hatte. Aber gerne, der Link ist hier. Entschuldige die Umstände.

Sailor56

Bitte mal testen...

HTML

div.site-content-contain {
  padding-bottom: 32px;
}
#colophon {
  max-width: 99%;
  margin: 0 auto;
}

fhwebdesign

Danke. Leider funktioniert das ebenfalls nicht, das "Dreieck" ist nach wie vor da, aber dann in weiß anstatt des Bildes.

SEpp55

Grundsätzliches zur "Schägstellung" des Colophon-Footers!
Verwende bei der Eigenschaft transform anstatt von rotation(2deg) den Wert skewY(2deg).
Das hat den Vorteil, dass die seitlichen "Keile" die durch die Drehung des Div entstehen bei skewY nicht entstehen.
Weiters ersparst du die die 105% width.
Das behebt aber nicht den Keil "Dreieck" - kann auch nicht, denn das unterste Element auf der Seite ist nun die rechte Ecke vom Footer.
Eine asymetrische Ausrichtung eines Containers kenne ich (noch)nicht - habe auch keine gefunden. Mit transform kann man das in alle Richtungen drehen uns schwenken aber dass es unten gerade abschließt ist mir nicht untergekommen. Heißt aber nicht, dass es so etwas nicht gibt....
Mein Lösungsansatz: (alles in den letzten Tagen im Internet zusammengesucht - kein Wissen. Wie oft - learning by doing!)
Mit dem skewY(2deg) wird links der footer hochgezogen und die dahinter liegenden Container werden sichtbar.
in weiß - site-content-contain
und das wp-custom-header Image.
Da der Drehpunkt horizontal und vertikal mittig von colophon ist.
Mit transform-origin: bottom left; wird der Drehpunkt nach unten, links gelegt und rutscht ans Ende des Elterncontainers Dadurch ist nur mehr das Image zu sehen.
Da das unterste Element kein margin-bottom nimmt habe ich mit padding-bottom: 45px; das Bild nach oben geschoben und background-color: #3A3A3A; gesetzt. Soweit so gut ;-)
Jedoch sieht man in deinem Beispiel, dass das Headerimage im Header (oben) auch den dunklen unteren Randbalken hat.
Auf dieser Demo-Testseite sieht man diese Nebenwirkung nicht - da der Header weniger Höhe hat ;-)
Ein noch nicht versuchter Ansatz - unter dem site-content-contain einen weiteren Container mit 50px höhe und der entsprechenden Hintergrundfarbe zu plazieren.
Was mir an der ganzen Sach optisch nicht gefällt sind die diversen schrägen Linien die nicht wirklich schön aussehen.

Ende der Fahnenstange!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twentyseventeen footer rotation

Jetzt mitmachen!