Hallo zusammen,
ich habe ein Problem mit meinem Content. Wie bekomme ich die Überschrift links neben den Bodytext?
Mein erster Ansatz war, dass ich in einer Tabelle zwei Spalten habe und über die Marker ###HEADLINE### die Überschrift in die linke Spalte schreibe und mit ###BODYTEXT### den Text in die rechte Spalte.
Die Probleme dabei:
1. zwischen Überschrift und Bodytext darf ja nun kein Zeilenumbruch sein. Mit obigem Construkt ist da aber einer.
2. die Überschriften stehen nun DIREKT untereinander, während der Text durchaus Mehrzeilig ist und somit das ganze nicht mehr passt. Die Überschrift2 darf natürlich aber erst mit Beginn des zweiten Textes starten.
Ich habe mal ein Bild erstellt, wie ich mir das vorstelle und wie das momentan ist.
Bild: tobiashallmann.de/headlines.jpg
Hat da vielleicht einer einen Lösungsansatz oder eine Lösungsidee für mich? Mir fällt nämlich sonst nichts dazu ein.
Vielen Dank und viele Grüße
Tobias
1. Komplett auf Tabellen verzichen und css_styled_content nehmen
2. Dann per CSS die Überschriften nach links schieben
Ok, nehmen wir an, dass das alles immernoch in einer einzigen Zelle ist, also nicht durch zwei Spalten getrennt ist. Wie krieg ich denn dann die Überschrift per CSS nach links?
Hallo,
wrap die überschrift in ein div und gebe ihm ein float: left
daniel
Moin,
danke, das führt schon mal fast zum Ziel. Jetzt habe ich natürlich die Überschrift umflossen, aber noch zwei weitere Punkte:
a) Der Bodytext beginnt erst eine Zeile unter der Headline
b) Ich würde das Ganze natürlich gerne so gestalten, dass zwischen dem linken Rand der Überschrift und dem linken Rand vom Bodytext immer fix z.B. 250px sind. Wie krieg ich das nur hin?
In meiner CSS steht nun:
.headline {
font-size: 14px;
font-family: Arial,Helvetica;
font-weight: bold;
float: left;
}
Und das Ergebnis ist nun:
Bild: tobiashallmann.de/headlines2.jpg
Setz Deine headline width auf 250px
Der Abstand in Deinem bodytext kommt vermutlich von den p Tags. Also entweder p Tags raus oder diese per CSS einfach auf margin-top:0 und padding-top:0 setzen.
Gruß
Michael
Wow, das ging ja schnell!
Vielen Dank für diese Antwort, die hat mir schon mal sehr geholfen.
Jetzt bleibt nur noch ein Punkt:
Bild: tobiashallmann.de/headlines3.jpg
Das ganze ist ja immernoch umflossen, der linke Bereich sollte aber nur für die Überschriften "reserviert" sein. Geht das irgendwie?
Gruß
Tobias
headline + css height oder alternativ margin-bottom oder padding-bottom
Den Wert automatisch zu ermitteln ist schwer. Am besten du nimmst einen Wert, der in etwa der zu erwartenden Höhe Deines bodytext entpricht oder setzt einfach stumpf beide heights gleich.
Gruß
Michael
Heureka, ich hatte gerade eine Eingebung...
Ich hab das jetzt so gelöst:
HEADLINE
wrap = <table><tr><td valign=top class="headline">|</td>
BODYTEXT
wrap = <td class=bodytext>|</td></tr></table>
Und dann noch in der .headline in der CSS definiert, dass die Weite X px groß ist...
Danke an alle Beteiligten :-)
Gruß
Tobias
Da Tabellen ja nicht gerade optimale Lösung sind hier noch ein Vorschlag:
header nicht wrappen
content wrappen (muß nicht unbedingt)
Das Ganze Conten Element in ein DIV wrappen z.B. mit renderObj.stdWrap.wrap
Auf h1 ein float: left; und auch auf den Body ein float: left;
Dann dürfte der Text nicht mehr umfließen.
Deine Linien kannst Du mit CSS + border mit Hilfe Deines Content-Element Divs erzeugen.
Sollten dann ne brauchbare Lösung sein.
Gruß
Michael
Ich muss mich doch noch mal melden.
Ich hatte das ganze per Tabelle umgesetzt, das klappte wunderbar. Jetzt verstehe ich mittlerweile, dass die Tabelle bescheuert ist.
Situation: Der User erstellt ein Inhaltselement "Text mit Bild".Das Bild soll nun links unter der Überschrift auftauchen. Das Bild wird nun vor die Tabelle geschoben, damit natürlich die ganze Tabelle weiter nach rechts #angry#
Ich habe deine Lösung mit der CSS mal ausprobiert und es klappt leider nicht.
CONTENT = CONTENT
CONTENT {
table = tt_content
renderObj.stdWrap.wrap = <div class="content">|</div>
# ZUM TESTEN MAL WEGKOMMENTIERT #
#select {
#orderBy = sorting
#where = colPos = 0
languageField = sys_language_uid
#wrap = <div class=content>|</div>
#}
}
...
tmp_tt_content_text < tt_content.text
tt_content.text >
tt_content.text = COA
tt_content.text.10 < lib.stdheader
tt_content.text.20 = TEXT
tt_content.text.20 {
field = bodytext
fieldRequired = bodytext
wrap = <div class=bodytext>|</div>
parseFunc < tmp_tt_content_text.20.parseFunc
editIcons < tmp_tt_content_text.20.editIcons
}
Damit habe ich jetzt das gesamte Content-Element mit einem div-Tag versehen und in der css für die Klasse Content float: left; eingetragen.
.content {
float:left;
}
.bodytext {
margin-top: 0px;
padding-top: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.2em;
font-size: 12px;
color: #151518;
font-weight: normal;
float:left;
}
h1{
font-family: Arial, Helvetica, sans-serif;
float:left;
width: 200px;
}
Das ganze funktioniert aber leider nicht. Jetzt stehen die Überschriften ÜBER dem Text, allerdings auf eine Weite von 200px begrenzt 🙂
Und der Text ist nun nicht eingerückt...
Hat wer eine Idee?
Kannst Du mal den generierten HTML Quellcode posten. Damit man sehen kann was raus kommt.
Grundsätzlich ist die Content Element wrap Methode immer ein Problem, wenn man z.B. Text mit Bild verwendet. Denn das Content Element Text mit Bild kopiert das Objekt Text vom reinen CE Text. Somit kann da leicht ein "Doppelwrap" entstehen.
Bin selbst noch dabei hierfür eine optimale Lösung zu finden die einfach jeden CE-Inhalt ohne Überschrift wrapped.
Gruß
Michael