20 Reaktionen zu “Responsive Design mit TYPO3 – Türchen 22”

Kommentare abonnieren (RSS) oder TrackBack URL

Hey Sven, exzellenter Artikel. Danke! Wird gebookmarkt und sicher bald Anwendung finden.

Sebastian Michaelsen am 22. Dezember 2011 um 08:22

Yeah, genau, das was ich gerade benötige! Danke Sven!

Huaba am 22. Dezember 2011 um 09:57

Sehr schöner Artikel, Danke!

Michael Fritz am 22. Dezember 2011 um 10:38

Damit @media queries auch in älteren Browsern funktionieren, kann man auch dieses jquery Plugin verwenden:
http://archive.plugins.jquery.com/project/MediaQueries

Das 1140 Grid bietet zudem ebenfalls eine gute Ausgangsbasis für Responsive Webdesign http://cssgrid.net/ 🙂

Florian Elischer am 22. Dezember 2011 um 13:45

Vielen Dank für den Artikel,istgenau was ich gerade benötige! Danke Sven!

Norbert am 12. Februar 2012 um 12:34

klappt alles perfekt 🙂
hab das bisher nur mit WP gemacht!

gruss

Markus am 27. Februar 2012 um 21:10

Bei mir wurden bei der Ausgabe figure und figcaption escaped.
Falls dies der Fall ist fehlen diese Tags meistens unter lib.parseFunc.allowTags

Heiko am 08. Mai 2012 um 10:38

Hi Sven,
mit Version 4.7. haben sich offenbar die renderMethods vom IMAGE Object sowie das standard css geändert (zb figure{display:table;}, so dass die o.a. Änderungen nicht mehr bzw nur teilweise greifen
viele grüsse
tom

Tom am 15. Mai 2012 um 18:40

wie bekommt man es hin, dass die inline angaben von with und height bei bildern entfernt werden? mit fixen werten macht das alles leider kein sinn…

karl am 18. Juni 2012 um 18:25

Hallo Karl,

das brauchst du nicht (kannst du auch nicht) entfernen. Das CSS reicht völlig aus.

img, embed, object, video {
max-width: 100%;
height: auto;
width: auto;
}

Sven am 18. Juni 2012 um 20:31

danke für die antwort.
leider scheint das nicht zu reichen…die bilder haben zwar eigentlich dir richtige breite, allerdings wird der inhalt (also das eigentliche bild) einfach abgeschnitten anstatt skaliert. so sollte das ja aber nicht sein…mein ziel ist es, fluid images in typo3 zu verwenden (siehe hier: http://unstoppablerobotninja.com/entry/fluid-images ). bei einer statischen html-datei, in der die bildgröße nicht inline angegeben ist funktioniert das perfekt…

karl am 18. Juni 2012 um 23:23

Hallo Karl,

glaub mir, das reicht normalerweise aus. Dann ist im Container „drüber“ was verkehrt. Schick mir gern ne Mail und ich schau mal drauf.

Grüße

Sven

Sven am 19. Juni 2012 um 09:59

Hi Sven,
tausend Dank, dein Tipp war Gold wert! Das Problem waren die umschließenden DIVs, die Typo3 immer einfügt zwecks center, left usw. wenn ich die entferne funktioniert es peferkt 🙂

karl am 19. Juni 2012 um 12:08

Hi zusammen,

erstmal DANKE für den Post. Ich bin über ein Videotutorial aufmerksam geworden (WoWa Webdesign), in dem man erklärt bekommt, wie man das yamb-CSS-Framework in Typo3 integriert.

Ich ahbe alle oben genannten Code-Schnipsel eingebunden. Mein Template selbst verhält sicht auch wie gewünscht responsiv und ich bin sehr zufrieden.

Ich habe allerdings das Problem, dass sich Contentelemente vom Typ „Bild“ nicht skalieren, sondern „nur“ beschnitten angezeigt werden.

Ich verwende Typo3 4.7.7 … gibt es damit Probleme, bzw. sind die obigen Code-Schnipsel eventuell veraltet?

Kann mir jemand einen Tip geben, wie ich meine Bilde im Inhaltsbereich ebenfalls „responsive“ bekomme?

Danke schon mal für jeden Tipp !!! 🙂

Kai am 30. Januar 2013 um 13:25

img{
max-width:100%;
height:auto;
}

Patrick am 30. Januar 2013 um 14:46

DANKE für deine schnelle Antwort !!!

Ich habe derweil auch weiter herum probiert.
Die generelle CSS-Angabe für alle „img“ hatte ich genau so in meinrm Stylesheet stehen.
Ich habe jetzt vor ein paar Minuten noch „width:100%;“ dazu geschrieben und siehe da > es geht :-)))

Kai am 30. Januar 2013 um 14:53

Vielen, vielen Dank

Roland am 06. Februar 2013 um 23:36

Hi zusammen,

ich habe mal eine Frage – passt nur teilweise hierher, aber vielelicht kann mir trotzdem jemand einen Tipp geben.

Es geht um das Generieren von PDF Dokumenten. Ich benutze dazu die Extension PDF Generator 2.

Oben heben wir ja die festen Bildgrößen auf >

img{
max-width:100%;
height:auto;
}
.

Obwohl ich zum Generieren meiner PDF-Datei ein extra Stylesheet einbinde und darin definiere, dass Bilder nicht 100% breit sein dürfen, sondern in meinem Fall nur maximal 685px

img{max-width: 685px;}

, wird mein Bild in 100% Breite (also z.B. 1000 Pixel, wenn es eben so abgespeichert wurde) ausgegeben.

Wenn ich meinem Bild im Content Element eine fixe Breite von 685 eintrage, sieht das PDF gut aus, jedoch ist das Bild dann im Frontend nicht mehr resonsive.

Kennt jemand dieses Problem, weiß Abhilfe oder kann mir einen Tipp geben? 😉

Danke & Liebe Grüße,
Kai

Kai am 17. Februar 2013 um 10:01

‚img { width: 100%;}‘ ist keine gute Idee, da Bilder damit vergrößert werden, bei denen der Container größer als das Bild ist. Da diese bei den CEs ‚Bilder‘ und ‚Text mit Bilder‘ nicht der Fall sein dürfte, besser ‚.csc-textpic img { width: 100%;}‘.
Interessanterweise benötigt Chrome (ver. 27) das nicht, Firefox (22) und IE (10) schon.

Stephan Bauer am 28. Juni 2013 um 12:28
Trackbacks & Pingbacks

[…] Bei WPEngineer erzählt uns Frank Bültge, wie man Felder zum Nutzerprofil bei WordPress hinzufügen kann. Im TYPO3-Adventskalender erzählt uns Sven Wolfermann heute etwas über “Responsive Design mit TYPO3“. […]

Pingback von Adventskalender am 22. Dezember « F-LOG-GE am 22. Dezember 2011 um 08:35

Kategorien

Archiv