Mittwald CM Service: TYPO3-Hosting, TYPO3-Schulungen, Agenturpakete, Managed-Server
Optimiertes TYPO3 Hosting von Mittwald CM Service
FORUM » TypoScript » Barrierefreiheit

CSS: Box (nur Ecken) um Text... wie? wurde Beantwortet

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:
http://www.marc-fell.de/diverses/Box.jpg

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?icon_lol.gif

Hmm... icon_confused.gif... mir feht da die zündende Idee...
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:

Html4strict:Zeilennummerierung:  An / Aus

  1. <div class="boxMitEcken">
  2.    <div class="eckeObenLinks"></div>
  3.    <div class="eckeObenRechts"></div>
  4.    <div class="eckeUntenLinks"></div>
  5.    <div class="eckeUntenRechts"></div>
  6.    <p>
  7.       Lorem ipsum bla bla bla ...
  8.    </p>
  9. </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: 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
----------------------------------------------------------------------------------------
; CSS-Layouts: , . .
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... icon_lol.gif
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:
Html4strict:Zeilennummerierung:  An / Aus

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ecken ohne Grafiken</title>
  6. <style type="text/css">
  7.  
  8. * {
  9.     margin: 0;
  10.     padding: 0;
  11. }
  12. dl {
  13.         margin: 4em 15% 2em;
  14.         text-align: justify;
  15.         border: .1em solid #800000;
  16. }
  17. dt {
  18.         margin: 1em -1.1em 0;
  19.         padding: 2em 2em .5em;
  20.         background: #fff;
  21. }
  22. dt a {
  23.         display: block;
  24.         margin: -3.1em 0 0;
  25.         padding: 2em 0 0;
  26.         background: #fff;
  27. }
  28. dd {
  29.         margin: 0 -1.1em 1em;
  30.         padding: .5em 2em 2em;
  31.         background: #fff;
  32. }
  33. dd p {
  34.         display: block;
  35.         margin: 0 0 -3.1em;
  36.         padding: 0 0 2em;
  37.         background: #fff;
  38. }
  39.  
  40. </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45.         <dl>
  46.                 <dt><a href="#">Ecken ohne Grafiken</a></dt>
  47.                 <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>
  48.         </dl>
  49.  
  50. </body>
  51. </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 2 mal bearbeitet. Zuletzt am 18.03.2009 um 13:46]
Grüße: Emil
----------------------------------------------------------------------------------------
; CSS-Layouts: , . .
Verfasst am: 18.03.2009 [21:47]
moritz

[Themenersteller]
dabei seit: 23.10.2005
Beiträge: 311
 So, klappt!icon_cool.gifVielen 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:Zeilennummerierung:  An / Aus

  1. tt_content.stdWrap.innerWrap.cObject.20.value =
  2. <div class="csc-frame csc-frame-frame1">
  3. <div class="corner cornerTL"></div>
  4. <div class="corner cornerTR"></div>
  5. <div class="cornerM"></div>
  6. <div class="clear"></div> |
  7. <div class="corner cornerBL"></div>
  8. <div class="corner cornerBR"></div>
  9. <div class="cornerM"></div>
  10. <div class="clear"></div>
  11. </div>

Es werden drei DIVs (Links, Mitte, Rechts) davor und dahinter gepackt.

Das Ganze nun noch mit CSS formatiert:
Html4strict:Zeilennummerierung:  An / Aus

  1. div.csc-frame-frame1 p { margin:0px; padding: 0px 14px; }
  2. div.cornerTL { float: left; width: 14px; height: 14px; border-left:2px solid #CD481F; border-top:2px solid #CD481F; }
  3. div.cornerTR { float: right; width: 14px; height: 14px; border-right:2px solid #CD481F; border-top:2px solid #CD481F; }
  4. div.cornerBL { float: left; width: 14px; height: 14px; border-left:2px solid #CD481F; border-bottom:2px solid #CD481F; }
  5. div.cornerBR { float: right; width: 14px; height: 14px; border-right:2px solid #CD481F; border-bottom:2px solid #CD481F; }
  6. div.cornerM { margin: 0 14px; height: 14px; }
  7. 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"?



Impressum  | Kontakt  | TYPO3 Hosting  | TYPO3 Schulungen

  
TYPO3 Hosting in der Version 4.3.2 kostenlos bei Mittwald CM Service testen

TYPO3 4.3.2 jetzt testen

Testen Sie die neue TYPO3 Version 4.3.2 kostenlos für einen Monat


Entwicklerschulungen

  • Espelkamp:
    Mit., 17.03.10 - Fre., 19.03.10
  • Berlin:
    Mit., 21.04.10 - Fre., 23.04.10
  • Köln:
    Mon., 21.06.10 - Mit., 23.06.10