This website uses cookies ...but have cookies ;-)


For an optimal website experience, we use cookies and similar technologies to show personalized content, offer functions and collect statistics. Clicking on "Allow cookies" entitles us to this data processing in accordance with our data protection declaration . Cookies can also be adjusted at any time after selection (after clicking on the item at the top right) in the settings.

Essential cookies enable basic functions and are necessary for the website to function properly.
Statistics cookies collect information anonymously. This information helps us to understand how our visitors use our website.
Marketing cookies are used by third parties or publishers to display personalized advertisements. They do this by tracking visitors across websites.

Eigener Produkt-Raster
mit einer "fixen" Spaltenbreite.

Das ist jetzt zwar gegen das Responsive-Prinzip, erfüllt aber seinen Job. Der Zweck heiligt die Mittel *gg*.

Die Ortner H2O2-dekontaminierbare Materialschleuse ist zum aseptischen Einschleusen oder zum Einschleusen von hitzelabilem Material geeignet.

Die Schleuse kann als stufenlos befahrbare Ausführung, oder als Variante auf einem bestehenden Fußboden aufgestellt werden. Unterschiedliche Beladesysteme erleichtern das tägliche Handling im Schleusenbereich.

Die schnelle und schonende Bio-Dekontamination mit gasförmigem Wasserstoffperoxid läuft vollautomatisch ab. Ein innovatives Düsensystem beschleunigt den Gasein und -auslass als auch die Gas-Verteilung innerhalb der Kammer.

Die Schleuse lässt sich leicht über eine intuitiv gegliederte Bedienoberfläche über ein Touch-Screen-Panel bedienen. Sämtliche Prozesse können zusätzlich über Visualisierungen gesteuert und kontrolliert werden.

H2O2- Dekontaminationsschleuse

H2O2 Container (Einspaltig: 100%)

H2O2 (CH2O, H2O2Blabla, H2O2-Blabla) gelöst - H2 O2, H2O-2, H202: Fehler --> Blockbuchstaben - Automatisierung Script.

Bildausschnitt mittels SVG gelöst: Automatischer Zuschnitt --> Dublex muß in der Grafik vorhanden sein.

Die SDG sind dann doch in einem älteren Format (GIF) umgesetzt - weil die SVG zu Groß ist.

Scriptänderung: H2O2 wird im Inhalt (außer in Überschriften) nicht mehr geändert, zumal dies Konflikte mit Links gibt und man im Inhalt sowieso die Formatierungen anpassen kann.

Container mit grauem Hintergrund

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zweispaltig: 50% 50%

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Container mit grünem Hintergrund

Alt
Figcaption

Zweispaltig: 33% 67%

  • Lorem ipsum dolor sit amet,
  • consetetur sadipscing elitr,
  • diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum.
  • Stet clita kasd gergren,
  • no sea takimata sanctus est Lorem ipsum doloramet.
  • consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
  • Lorem ipsum dolor sit amet.

Container mit blauem Hintergrund

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zweispaltig: 67% 33%

ALT
Bild mit Bildunterschrift

Container Standard

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.

Großer Text und bold (gleich wie Überschrift)

Großer Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.

Dreipaltig: 33% 33% 33%

Check ob die Zeilen in den Spalten auf gleicher Höhe sind.

aua
Bild mit Bildunterschrift und Rahmen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. At vero et accusam et justo duo dolores et ea rebum. Stet clita kasd gergren, no sea takimata sanctus est Lorem ipsum doloramet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Container

a
a

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.

Vierspaltig:

asd
asd

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.

25% 25%

qwe
qwe

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.

25% 25%

fgh
fgh

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.

mit Bildunterschrift
Bild mit Bildunterschrift

Test ob 2 Spalten zu 4 Spalten passen

  • SVG Grafiken: ab IE 9, Android 3, Firefox 4, Safari 3
  • Hyphens: ab IE 10, Firefox 6, Chrome 55, Safari 5, Opera 42, Safari 4, Android 90, OP Mobile 62, Samsung Internet 5.4
  • Transition: ab IE 10, Firefox 4, Opera 11.5
  • Box-Sizing: ab IE 8
  • Calc: ab IE9, Firefox 4, Chrome 19, Safari 6, Opera 15, Safari IOS 6.1, OP Mobile 62
mit Bildunterschrift
Bild mit Bildunterschrift

Sollte jetzt den selben Abstand haben. Somit haben wir jetzt bei allen Spalten 48px Abstand.

Die teilweise 2- bzw. 3-Spalter haben eine Gesamt-Container-Breite von 99.999999%. Die 0.000001% sollten nicht Sichtbar sein. Da die Browser (unterschiedlich) alles wieder in px umrechnen kann es (je nach Umrechnungsmethode) 1px mehr, 1px weniger oder gleich sein. Ziel ist es alle Spalten-Variationen mit dem selben Abstand darzustellen. Aber vor Allem sollen die Spalten untereinander zusammenpassen- z.B. 2-Spalten (50%-50%) zu 4-Spalten (25%-25%-25%-25%) und 2-spalten (33%-67%) zu 3-Spalten(33%-33%-33%). Die Angabe in % und Rückrechnung in px entsteht, weil die Terminal-Breite eine Variable ist. Device (Viewport-Breite vw) ist zwar mittlerweile auch eine Maßeinheit - funktioniert aber in älteren Browsern noch nicht - deswegen das WorkAround.

Klingt komisch - ist aber so ;-)

Container Standard H2O2

Lorem ipsum H2O2 dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.

Großer Text

Lorem interner H2O2-Link H2O2 sit amet, consetetur externer Link, diam nonumy Kontakt-Link (Mail, Telefon, Fax) ut labore et dolore magna Download-Link, sed Kontakt-Link diam volptua.

Technische Daten von ISU integriert

Nennleistung
3,8 kW/ 8,5A
Nennspannung
3 × 400 VAC/ 50 Hz /N/PE
Pumpe
Hochpräzisionsdosierpumpe +/- 1%
Visualisierung
von extern – über Schleuse
Volumenstrom
variabel bis 100 m³/h
H2O2 Reservoir
bis 5 Liter (technisch reines H²O²)
Einspritzrate
1-10g/min

Weitere Informationen

Dreipaltig: 33% 33% 33%

HC Sensor (Innenkammer)
LC Sensor (Innenkammer)
LC Sensor Raumüberwachung unrein und rein
Materialänderungen
Katalysator (500 m³/h / 1000m³/h)
Schienensystem
Audit Trail
Ethernet für Datenübergabe
Abluftventilator inkl. Kammer – Druckregelung
Zuluft - Ventilator
Abluft Hepa Filter

Downloads

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.

Der Ortner-Plus-Text beginnt mit dem Inhaltstext der linken Spalte, wenn die Überschrift einzeilig ist. Überlanger Content fliesst nach unten (unter dem Ortner-O) weiter. Der linke Abstand beträgt 20% (Plus-Fläche) + 20px (Abstand zur Plusfläche). Der rechte Abstand beträgt in der Desktop-Version 90px damit die helle Fläche vom Ortner-O wirken kann.

Ortner Plus Symbolgrafik

Ortner Plus

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  • diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volptua.

Ortner Lösung

Ich weiß, da war was mit einer Grafik in der Mitte. Links eine Beschreibung - eine Kundenproblematik. Und rechts neben der Grafik die Ortner Lösung. Ich weiß aber die Anforderungen und den Beweggrund dafür nicht mehr. Was wollen wir mit diesem Inhaltsblock darstellen?

Darunter: Inhaltslinks mit Auto-Befüllung - Meta-Angaben (je nach Hintergrund andere Positionen). Und am Ende das selbe System - mit anderem Design = Page-End (Abschluß): Mehrspaltensystem. Gesteuert über Hintergrundfarben.

Die Ortner-Lösung

Diesen Inhaltsteil hat Lucia mit einer großen Schrift gelöst. Deswegen mache ich das natürlich auch hier nachträglich.

Inhaltsblöcke

Anforderung der Inhaltsblöcke für Redakteure

Auswahl

  • GRID Container (Spalten- und Hintergrundfarben-Auswahl)
    wird zum Pflichtcontainer - auch bei Einspalter --> wird im Frontend markiert wenn keine Auswahl getroffen wurde
  • Text & Medien (Standard) --> [Formatierungen, Verlinkungen] & [Bilder, Videos, Audios, Verlinkungen] mit Positionsangaben und Zuschnittmöglichkeit
  • Bildergalerie (klick Vergrößerung) mit Zuschnittmöglichkeit
  • Downloads Icon für PDF, BILD (weitere Icon werden nach Anforderung umgesetzt)
  • Ortner Plus (Textüberlauf nach unten) 2 Spalten [Text] und [Auto-Grafik + Text]
  • Ortner Lösung (Grafik in Arbeit) 3 Spalten [Text] [Auto-Grafik] [Text]
  • Ortner Details (Raster) 2 Spalten (wie Tabelle)
  • Links Inhalt Seitenverweis mit automatischen Inhalten (auswahl Seiten) [Header-Bild + Meta-Title + Meta Description]
  • Links Abschluß Wird zusammengelegt. Seitenverweis mit automatischen Inhalten (letzte Linkempfehlungen - auswahl Seiten) [Header-Bild + Meta-Title + Meta Description] Style wie "Home-Popup"

Standard GRAU

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Produkt Details

A
B
C
1
2
3
4
5
6
7
8
9

Weitere Informationen

Ortner Plus Symbolgrafik

Ortner Plus

  • Diesmal auf
  • dunklem Hintergrund.
  • Das wurde
  • beim Grunddesign
  • nicht berücksichtigt.

Standard GRÜN

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Produkt Details

A
B
C
1
2
3
4
5
6
7
8
9

Weitere Informationen

Ortner Plus Symbolgrafik

Ortner Plus

  • Diesmal auf
  • dunklem Hintergrund.
  • Das wurde
  • beim Grunddesign
  • nicht berücksichtigt.

Standard BLAU

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Produkt Details

A
B
C
1
2
3
4
5
6
7
8
9

Weitere Informationen

Ortner Plus Symbolgrafik

Ortner Plus

  • Diesmal auf
  • dunklem Hintergrund.
  • Das wurde
  • beim Grunddesign
  • nicht berücksichtigt.

Standard WEISS

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Produkt Details

A
B
C
1
2
3
4
5
6
7
8
9

Weitere Informationen

Ortner Plus Symbolgrafik

Ortner Plus

  • Diesmal auf
  • dunklem Hintergrund.
  • Das wurde
  • beim Grunddesign
  • nicht berücksichtigt.

NEU: Vollflächiges Bild/Video/...

Bild im Text

ALT Text
DESCRIPTION Text

LINKS OBEN: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild im Text

LINKS UNTEN: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

ALT Text
DESCRIPTION Text

Bild im Text

ALT Text
DESCRIPTION Text

IM TEXT LINKS: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild im Text

ALT Text
DESCRIPTION Text

IM TEXT RECHTS: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild im Text

ALT Text
DESCRIPTION Text

EIN BILD: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild im Text

ALT Text
DESCRIPTION Text

VIER BILDER: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild im Text

ALT Text
DESCRIPTION Text

VIER BILDER: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bild im Text

ALT Text
DESCRIPTION Text

VIER BILDER: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Close the window