Code fragment for ribbon include example – CSS part

listing-6-2.css

.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);
}

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

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ß.