Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Code fragment for ribbon include example – CSS part
.ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
z-index:9;
}
.ribbon span {
position: absolute;
display: block;
width: 250px;
padding: 10px 0;
background-color: #880000;
color: #fff;
font: 900 15px sans-serif;
text-align: center;
}
.ribbon-top-right {
top: 0px;
right: 0px;
}
.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}
@julianpfeiffer

This comment has been minimized.

Copy link

@julianpfeiffer julianpfeiffer commented Dec 3, 2020

Hallo erstmal,

bisher bin ich echt begeistert von Ihrem Buch, ist sowohl für totale Einsteiger, als auch für erfahrenere Programmierer wie mich etwas dabei. Jedoch muss ich bei diesem Beispielcode leider passen: Bei mir erscheint das Band in der oberen rechten Ecke des Bildschirms.
Ich schätze das liegt daran, dass hier als Positionsattribut "absolute" verwendet wird, welches sich auf den Gesamtbildschirm bezieht. Um sich nur auf das äußere div, etc. zu beziehen, wird in der Regel "relative" verwendet.
Kann aber auch gut sein, dass ich mich irre, bei Ihnen scheint es ja funktioniert zu haben, wäre super, wenn Sie mir vlt kurz erläutern, was bei mir anders gelaufen ist.

Liebe Grüße
Julian

@WordPress-Handbuch

This comment has been minimized.

Copy link
Owner Author

@WordPress-Handbuch WordPress-Handbuch commented Dec 4, 2020

Hallo Julian, das freut mich sehr, dass Ihnen das Buch gefällt. Bei so einer dicken Referenz ist es manchmal verzwickt, wie weit man mit den Entwicklungsthemen geht, ohne dass gleichzeitig ein HTML/CSS/PHP-Kompendium daraus entsteht (und dann 2000 Seiten dick wird :) ). Dass das Eyecatcher-Band absolut rechts oben erscheint, ist durchaus beabsichtigt. Aber selbstverständlich können Sie diesen Beispielcode beliebig an eigene Bedürfnisse anpassen.
Viel Erfolg und Spaß.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment