#1

Goofy45

Eroberer  (60 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.fischelner-schuetzen.de

Hallo zusammen,
vielleicht hat jemand eine Idee oder kann mir eine Hilfestellung geben. Wenn man beispielsweise links die Sidebar (siehe Screenshot) ausblendet, wäre noch genug Raum, um eine vertikales, fixiertes Bild zu platzieren. Über google habe ich entsprechendes Coding gefunden, welches aber keine Wirkung zeigt, wenn der Code im <body> "Website-Eigenschaft" Reiter "HTML" eingepflegt wird. Das Zusammenspiel zwischen der ausgeblendeten linken Sidebar (id="sidebarleft") und dem Coding verstehe ich nicht so wirklich. Im Ergebnis soll es etwa im Anhang aussehen. Hat jemand einen Tipp?

Danke und viele Grüße
Joachim


#2

MuggelClan

Forum-Sponsor  (1458 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Hallo Joachim

ich würde jetzt zur Lösungsfindung den Absatz "Fixierter Button" einsetzen und folgenden Code bei verwenden:

<style>
.ngparastickybutton {
 transform: rotate(-90deg) !important; // Textausrichtung
}
.ngparastickybutton {
 z-index: -1 !important; // setzt die Anzeige mit Minuswert in den Hintergrund. Hintergrund vom Inhalt muss dann transparent sein, Hintergrund von Inhalt vom Hauptcontainer ist hier nicht gemeint.
}
</style>


Einstellung Absatz "Fixierter Button":
- Textgröße 128px
- Textfarbe Schwarz
- Stil Hintergrundfarbe weiß

-> Ausrichtung LINKSMITTE wählen!


Design bearbeiten:
- Hintergrund vom "Inhalt" transparent (Nicht Inhalt im Hauptcontainer gemeint)


Getestet habe ich den Absatz im Absatzbereich "Inhalt", aber kann bestimmt auch in anderen Absatzbereiche eignesetzt werden.
Ich würde den Absatz "Fixierter Button" in eine Vorlagenseite stecken, wenn dies auf mehrere oder alle Seiten dargestellt werden soll.
Entsprechend sollte dann ja auch der Style-Code eingesetzt sein. Man könnte diesen auch im HTML-Clip im <head>-Bereich einfügen.

Wichtig ist, dass der Code genau so geschrieben wird und nicht zusammengefasst, denn wenn diese beiden zusammengefasst werden, dann funktioniert entweder nur "transform" oder "z-index", je nachdem was als erstes geschrieben wurde.
Also so getrennt geschrieben hat es bei mir mit beiden funktioniert.

Viel Spaß beim weiteren Austesten.


Mit freundlichen Grüßen

Thomas

Web To Date seit 2004, Siquando Web 12, Pro Web 9, Web Client 


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »MuggelClan« (Heute, 12:12)
#3

Goofy45

Eroberer  (60 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.fischelner-schuetzen.de

Wie geil ist denn das bitte?!?!?!?! 🙂 Vielen, vielen DANK!!!!!!

Kann man die Position noch etwas mittiger ausrichten? 

Viele Grüße
Joachim

#4

MuggelClan

Forum-Sponsor  (1458 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

ja, das kann man mit Margin:

<style>
.ngparastickybutton {
  margin-left: 100px; // Hier den Abstand vom Linken Browserrand bis zum Rand des Stickybutton anpassen
  transform: rotate(-90deg) !important; // Textausrichtung
}
.ngparastickybutton {
  z-index: -1 !important; // setzt die Anzeige mit Minuswert in den Hintergrund. Hintergrund vom Inhalt muss dann transparent sein, Hintergrund von Inhalt vom Hauptcontainer ist hier nicht gemeint.
}
</style>

Mit freundlichen Grüßen

Thomas

Web To Date seit 2004, Siquando Web 12, Pro Web 9, Web Client 

#5

Goofy45

Eroberer  (60 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.fischelner-schuetzen.de

 Perfekt! Die Drehung im Code hat aber nun keine Wirkung mehr. Aber mega, mega DANKE!!

#6

MuggelClan

Forum-Sponsor  (1458 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Also bei mir schon, das ist wohl auch ein bisschen vom Design abhängig, du kannst es mal wieder separate und mit !important versuchen: 

<style>
.ngparastickybutton {
  transform: rotate(-90deg) !important; // Textausrichtung
}
.ngparastickybutton {
  margin-left: 100px !important;
}
.ngparastickybutton {
  z-index: -1 !important; // setzt die Anzeige mit Minuswert in den Hintergrund. Hintergrund vom Inhalt muss dann transparent sein, Hintergrund von Inhalt vom Hauptcontainer ist hier nicht gemeint.
}
</style>

Mit freundlichen Grüßen

Thomas

Web To Date seit 2004, Siquando Web 12, Pro Web 9, Web Client 

#7

Goofy45

Eroberer  (60 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.fischelner-schuetzen.de

 Echt krass! Vielen Dank!!!!

 

🙂 😃

120 Aufrufe | 7 Beiträge