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: 344
|
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...  ... mir feht da die zündende Idee...
|
 |
|
|
Verfasst am: 18. 03. 2009 [00:24]
|
|
|
aclaes
Dabei seit: 19.06.2007
Beiträge: 143
|
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: HTML <div class="boxMitEcken"> <div class="eckeObenLinks"></div> <div class="eckeObenRechts"></div> <div class="eckeUntenLinks"></div> <div class="eckeUntenRechts"></div> <p> Lorem ipsum bla bla bla ... </p> </div> 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: 82
|
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: 344
|
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: 82
|
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: HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ecken ohne Grafiken</title> <style type="text/css"> * { margin: 0; padding: 0; } dl { margin: 4em 15% 2em; text-align: justify; border: .1em solid #800000; } dt { margin: 1em -1.1em 0; padding: 2em 2em .5em; background: #fff; } dt a { display: block; margin: -3.1em 0 0; padding: 2em 0 0; background: #fff; } dd { margin: 0 -1.1em 1em; padding: .5em 2em 2em; background: #fff; } dd p { display: block; margin: 0 0 -3.1em; padding: 0 0 2em; background: #fff; } </style> </head> <body> <dl> <dt><a href="#">Ecken ohne Grafiken</a></dt> <dd><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p></dd> </dl> </body> </html> 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 2mal 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: 344
|
So, klappt!  Vielen Dank für eure Unterstützung!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): TYPOSCRIPT tt_content.stdWrap.innerWrap.cObject.20.value = <div class="csc-frame csc-frame-frame1"> <div class="corner cornerTL"></div> <div class="corner cornerTR"></div> <div class="cornerM"></div> <div class="clear"></div> | <div class="corner cornerBL"></div> <div class="corner cornerBR"></div> <div class="cornerM"></div> <div class="clear"></div> </div> Es werden drei DIVs (Links, Mitte, Rechts) davor und dahinter gepackt. Das Ganze nun noch mit CSS formatiert: HTML div.csc-frame-frame1 p { margin:0px; padding: 0px 14px; }
div.cornerTL { float: left; width: 14px; height: 14px; border-left:2px solid #CD481F; border-top:2px solid #CD481F; }
div.cornerTR { float: right; width: 14px; height: 14px; border-right:2px solid #CD481F; border-top:2px solid #CD481F; }
div.cornerBL { float: left; width: 14px; height: 14px; border-left:2px solid #CD481F; border-bottom:2px solid #CD481F; }
div.cornerBR { float: right; width: 14px; height: 14px; border-right:2px solid #CD481F; border-bottom:2px solid #CD481F; }
div.cornerM { margin: 0 14px; height: 14px; }
div.clear { clear: both; visibility:hidden; }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"? |
|
|