Passermarken ausserhalb von overflow:hidden

[Linuchs]

Moin,

ich drucke Vistenkarten, 2 x 5 Stück als table auf A4. Hintergrund-Bilder könnten aus dem td herauslaufen, deshalb

td { position: relative; overflow:hidden; }

Zum Schneiden brauche ich Passermarken ausserhalb von td und table:

.passermarke {
  position: absolute;
  width: 10mm;
  right: -5mm;
  top: -5mm;
//z-Index: -1;
}

So sieht es aus, wie kann ich overflow:hidden austricksen?

[klawischnigg]

Hi there,

ich drucke Vistenkarten, 2 x 5 Stück als table auf A4. Hintergrund-Bilder könnten aus dem td herauslaufen, deshalb

td { position: relative; overflow:hidden; }

Abgesehen davon, daß ich mich davor fürchte zu erfahren, wozu Du dazu eine Tabelle benötigst,

Zum Schneiden brauche ich Passermarken ausserhalb von td und table:

.passermarke {
  position: absolute;
  width: 10mm;
  right: -5mm;
  top: -5mm;
//z-Index: -1;
}

So sieht es aus, wie kann ich overflow:hidden austricksen?

würde ich vorschlagen (wenn Du auf einer Tabellenzelle bestehst), daß Du Dein Bild nicht der Tabellenzelle einschreibst sondern einem Blockelement, daß über ein entsprechendes Padding (das dem Abstand Deiner Marken entspricht) der Tabellenzelle einschreibst. Das Hintergrundbild ist dann Hintergrund (wenn es denn unbedingt ein Hintergrundbild sein muß) des Blockelements, nicht der Tabellenzelle...

[Der Martin]

Hallo,

ich drucke Vistenkarten, 2 x 5 Stück als table auf A4.

ich zweifle daran, dass HTML (sprich: ein Webbrowser) hier das geeignete Mittel ist. Ich habe dafür bisher immer eine Office-Suite verwendet und mir darin eine zum Visitenkartenformat passende Vorlage gemacht.

Zum Schneiden brauche ich Passermarken ausserhalb von td und table:

Warum außerhalb?
Ganz pragmatischer Tipp: Mach deine Zellen etwas größer als das Visitenkartenformat und positioniere die Passermarken dann innerhalb der Zellen, so dass sie die richtige, gewünschte Zuschnittgröße markieren.

Möge die Übung gelingen
 Martin

[Rolf B]

Hallo Linuchs,

//z-Index: -1;

Hinweis am Rande, hoffentlich nicht von hidden versteckt: CSS Kommentare mit // gips nich, das ist immer /* ... */

Eine Table kann man nehmen, aber ein Grid geht genauso. Und wenn Du die eigentliche Visitenkarte vom strukturellen Element trennst, ist das overflow:hidden kein Problem. Sprich: Hau die Visitenkarte nicht direkt ins td (oder li), sondern leg noch ein Extraelement drumherum. Ich hab article genommen, aber da diese Seite nur als Papiervorlage gedacht ist, ist Semantik und Zugänglichkeit nachrangig.

Look Ma, all CSS: klick

Nur so als Grundplan. Wenn Du andere Passer brauchst, gibt den ::before/::after Hintergrundbilder oder setze die Ränder anders.

Rolf

[Der Martin]

Hallo Rolf,

//z-Index: -1;

Hinweis am Rande, hoffentlich nicht von hidden versteckt: CSS Kommentare mit // gips nich, das ist immer /* ... */

korrekt, aber in der Praxis zumindest hier irrelevant: Die führenden zwei Slashes führen dazu, dass der CSS-Parser hier eine Eigenschaft //z-Index erkennt. Die kennt er aber nicht, also wird die ganze Regel ignoriert. qee (quod erat expectandum).

Anders sieht's aus, wenn man an eine bis dahin korrekte CSS-Regel mit // noch einen vermeintlichen Kommentar anhängen will. Dann versucht der CSS Parser, das Token // und alles, was danach kommt, als Teil des Wertes für die CSS-Eigenschaft zu interpretieren. Das geht dann schief, und folglich wird auch hier die Regel ignoriert. Und der Autor wundert sich.

EDIT: Nein, falsch. Es ist noch schlimmer: Folgt das vermeintliche Kommentartoken // nach dem Semikolon, das eine CSS-Regel faktisch abschließt, dann torpediert es die nachfolgende CSS-Regel, selbst wenn die in der nächsten Zeile steht. Da wundert man sich dann erst recht!

Möge die Übung gelingen
 Martin

[Linuchs]

Habe einen div mit overflow:hidden ins td gepackt und die Passermarken ans td geklebt.

Danke fürs Mitdenken.