TYPO3 - Responsive Design

Bilder

Header Bilder

CSS3 Eigenschaft background-size

Problem Höhe -> zwei Container die mit z-index und position übereinander fixiert werden. Dadurch kann im hinterem Container der Header als normales Bild mit height: 100%, width: 100% eingesetzt werden, im Container darüber können wir später das Infomenü oder ein Logo plazieren.

Inhaltsbilder

TYPO3 rendert .csc-textpic-intext-right: umschließt den ganzen Text-Bild-Block und bestimmt die Bildanordnung. .csc-textpic-imagewrap: umschließt das Bildelemenet (Bild und ggf. Bildbeschreibung) .csc-textpic-text: umschließt den Textblock

Nach Änderung der HTML Seite kommen wir nur zu CSS: Unser Bildelement, diesmal mit der Klasse csc-textpic-image, soll weiterhin rechts floaten. Damit es in der Größe skaliert geben wir ein Breite von 45% mit, das entspricht in etwa unserem altem Bildformat von 300 Pixeln.

.csc-textpic-intext-right .csc-textpic-image {
    float: right;
    width: 45%;
    margin: 15px 0 0 20px;
}