CSS: Box (nur Ecken) um Text... wie? 
| Autor | Nachricht | ||||
|
Verfasst am: 17.03.2009 [20:56]
|
|||||
| moritz [Themenersteller] dabei seit: 23.10.2005 Beiträge: 311 |
Hallo zusammen, ich stehe grade etwas auf dem Schlauch, habt ihr einen Tipp? Textteile sollen eine solche Box bekommen: ![]() Nur, wie stelle ich das am besten an, dass es für den User im RTE auch einigermaßen komfortabel ist? Die Texte können ja verschieden lang (=hoch) sein, mal eben ein Bild hinterlegen fällt also weg. Das Ganze im RTE als Tabelle zusammen zu bauen, geht zwar mit CSS, aber da sehe ich Probleme kommen, dass die User das nicht hin bekommen. Oder in zwei Bilder zerlegen: "EckenOben" und "EckenUnten"? Aber gibt es mit CSS so etwas wie "Bild davor" und "Bild danach" - was auch der IE versteht? Hmm... |
||||
![]() |
|||||
|
Verfasst am: 18.03.2009 [00:24]
|
|||||
| aclaes dabei seit: 19.06.2007 Beiträge: 115 |
Hallo, am einfachsten ist es, wenn du diese box mit den ecken als ein eigenes Contentelement im TYPO anlegst. Dann kannst du dafür nämlich einen Rahmen vergeben. Diese kannst du via TSConfig anlegen und mit TS bestimmen, wie der gewrappt werden soll. Damit die Box auch voll skalierbar ist solltest du das etwa so anlegen:
Per CSS und position:absolute setzt du die vier Ecken-Divs in jede Ecke und lädst als Hintergrundbild die entsprechende Ecke. Du hast also 4 Bilder, von jeder Ecke eins. Dadruch wirds in Höhe und Breite skalierbar und "unkaputtbar" ;-) Grüße |
||||
![]() |
|||||
|
Verfasst am: 18.03.2009 [12:49]
|
|||||
| etux dabei seit: 14.02.2009 Beiträge: 62 |
Ohne den Quellcode zu kennen, kann ich keine konkrete Antwort geben. Aber vier leere DIVs sind mit Sicherheit nicht notwendig. Und wenn eins oder zwei gebraucht werden - dann ist es besser sie zu verschachteln. Selbst Grafiken sind nicht unbedingt notwendig um die Ecken darzustellen, vorausgesetzt die Ecken sehen genau so aus wie auf dem Bild oben. Grüße: Emil ---------------------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
||||
![]() ![]() |
|||||
|
Verfasst am: 18.03.2009 [13:28]
|
|||||
| moritz [Themenersteller] dabei seit: 23.10.2005 Beiträge: 311 |
Dank euch erst mal, jetzt habe ich wenigsten einen Ansatzpunkt... ich hatte da gar keine Idee. Quellcode gibt es noch nicht, das Bild oben ist aber der Screenshot, wie es die Grafikerin haben möchte. Naja... ohne Grafiken geht es natülich, wenn man bei den DIVs mit Rahmen (CSS) arbeitet. Wobei ich mir nicht sicher bin, welcher Weg der sinnigere ist. Mit Bildern finde ich es auch ok. Ok, ich muss also ein neus ContentElement definieren... also sozusagen ein neues "erfinden"? Muss ich mal gucken wie das geht. Und dann wird dieses neue CE entsprechend geWrappt und in CSS gestyled... na, da lerne ich mal wieder was neues... |
||||
![]() |
|||||
|
Verfasst am: 18.03.2009 [13:39]
|
|||||
| etux dabei seit: 14.02.2009 Beiträge: 62 |
Wenn die Elemente feste Breite haben (px oder em), brauch Du bloß zwei Elementen und zwei Grafiken (wie in Deinem Ersten Posting). Wie es ohne Grafiken aussehen konnte:
EDIT: bei festen Breiten und zwei Bilder maine ich naturlich nur Pixel-Werte. Bei em-Werten braucht man dann mehr Elemente und Bilder. [Dieser Beitrag wurde 2 mal bearbeitet. Zuletzt am 18.03.2009 um 13:46] Grüße: Emil ---------------------------------------------------------------------------------------- http://emil-webdesign.net/; CSS-Layouts: Gleich hohe Spalten, Inhalt zuerst. TYPO3-Templates. |
||||
![]() ![]() |
|||||
|
Verfasst am: 18.03.2009 [21:47]
|
|||||
| moritz [Themenersteller] dabei seit: 23.10.2005 Beiträge: 311 |
So, klappt! Letztlich habe ich es nun so gemacht: Ich habe kein neues Contentelement erstellt, sondern benutze einfach die Option des Rahmen. Diesen habe ich etwas erweitert (Zeilenumbrüche wegen Lesbarkeit):
Es werden drei DIVs (Links, Mitte, Rechts) davor und dahinter gepackt. Das Ganze nun noch mit CSS formatiert:
Gefällt mir ganz gut, klappt in allen Browsern, ist einfach für den User und schön dynamisch. Was ich mich nun noch frage, um es vielleicht noch besser zu machen: Wo kann ich denn "Frame1" im Backend umbenennen in "Rahmen mit Ecken"? |
||||
![]() |
|||||









