CSS / single view / .news-single-img

Guten Tag zusammen,

leider kann ich noch durch Unkenntnis verziert keine Frmatierung fuer die Darstellung des Bildes im SingleView der News im CSS vornehmen ...

An der Stelle ...

.news-single-img oder .news-single-imgcaption habe ich schon aberwitzige Werte eingesetzt, jedoch ohne Auswirkungen.

Die Bezeichner stimmen aber mit der Benennung der Referenzfiles ueberein ...

Dabei moecht eich doch nur 'nen Rahmen drum haben ...

Kann mir jemand einen Tipp geben, wo der Fehler liegen koennte?

Vielen Dank schon vorab ...

1. hi
2. etwas weniger ".." und deine genauen Einstellungen/Tests würden dir zu viel schnelleren Antworten verhelfen. (konstruktive Kritik)
3. Das news_template.tmpl-File (oder heisst ähnlich) besitzt die Marker für Bilder, Texte, etc. die aus der Tabelle via dieses File ihren Platz im Frontend finden.

Eine Idee ist es, eine Tabelle um den IMG-Marker für die entsprechende Sicht zu legen, eine Klasse geben, und danach im CSS den Rahmen zu setzen.

<table class="myImageBorder">###MARKER_BILD_NEWSIMAGE###</table>

Du hast die Thematik korrekt im Titel des Threads beschrieben. Ob und wie weit du gekommen bist beschreibst du leider nicht.

bye

Danke fuer die konstruktive Kritik.

Also eigentlich habe ich alle Standardfiles (Template, CSS) soverwandt, wie sie beigepackt sind, und dann angefangen das CSS nach meinen Vorstellungen umzustellen.

Und in eben diesem CSS aus dem News 2.x.x Packet befinden sich die Bezeichner

.news-single-img und .news-single-imgcaption

die leider editiert keine Auswirkungen haben ... hier noch genauer ...

<!-- ###TEMPLATE_SINGLE### begin
	This subpart is used to display single news items
-->

<div class="news-single-item">
			<div class="news-single-timedata">###NEWS_DATE###</div>
			<h2>###NEWS_TITLE###</h2>
			###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###		
			
			
			
			<h3>###NEWS_SUBHEADER###</h3>
			
			###NEWS_IMAGE### 
			###NEWS_CONTENT###


<div class="news-single-backlink">	
<!--###LINK_ITEM###-->###BACK_TO_LIST###<!--###LINK_ITEM###-->
</div>			</div>		
<!-- ###TEMPLATE_SINGLE### end -->

Und im CSS heist die Sektion fuer Single ...

	/*--------------------------------- tt_news SINGLE view  ---------------------------------*/
.news-single-item {
	padding:10px;
	font-size: 16px;
	margin-bottom:15px;
	border:none;
	background-color:#EEEEEE;
}

.news-single-item H2 {
	font-size: 14px;
	font-weight:bold;
	color: #000000;
	margin-bottom: 0px;
	background-color: #FFFFFF;
	padding:5px;
}

.news-single-item H3 {
	margin-bottom: 15px;
}

.news-single-img {
	float: left;
  margin-left:5px;
	border:5px solid #FFFFFF;
}

.news-single-imgcaption {
	padding:30px;
	clear:both;
}

.news-single-category {
	float: right;
}

.news-single-backlink, .news-single-backlink a {
	font-size: 12px;
	font-weight:bold;
	color: #000000;
	margin-bottom: 0px;
	background-color: #FFFFFF;
	padding-left:5px;
	padding-top:5px;
	padding-bottom:5px;
}

.news-single-timedata {
	float: right;
}
.news-single-timedata, .news-single-author,.news-single-imgcaption {
	font-size: 9px;
}

Aber leider passiert nuescht ...

1. Ob du die Klassen in deinem eigenen CSS oder im News-CSS-File editierst ist wurscht. Wichtig ist nämlich das Verständnis um;
2. CSS = Cascading Style Sheet. Was eine Kaskade oder Verschachtelungen sind, darfst du unter Google mit Stichwort "CSS Definition" und "CSS Tutorials" gerne nachlesen.

Wenn du deine News-Klassen in eigenen Klassen verschachtelst - z.B. so:

..<td class="MAINTABLE"><p class="NEWSFONTS">blabla</p></td>

dann will das im CSS natürlich auch entsprechend kaskadiert definiert werden.

Wer individuelle Typo3-Seiten erstellen möchte kommt um die Kenntnis von HTML und CSS praktisch nicht herum.

byebye

Nachtrag:
Ich würde CSS allgemein so bauen, dass es die meisten Browser verstehen können:
".news-single-backlink, .news-single-backlink a {"
> ich nehme an "a" soll für Verweise stehen. So wird's aber generell nicht verwendet. Schau dir CSS-Referenzen an.

toyde schrieb

Wer individuelle Typo3-Seiten erstellen möchte kommt um die Kenntnis von HTML und CSS praktisch nicht herum.

Denke ich mir auch ... und ich bin ja auch gerade dabei die Zusammenhaenge zu ergruenden. Wenn Du mir damit sagen moechtest, dass dieser Ort nicht der richtige ist, solche Fragen zu stellen, dann verweis mich ruhig irgendwo anders hin ...

Ich weiss nicht, inwieweit ich das Grundsaetzliche von CSS verstanden habe, mir fehlt nur der Zusammenhang vom Bezeichner .news-single-img und dem Marker ###NEWS_IMAGE### ... wo in welcher Datei, in welchem Setup wird der Zusammenhang zwischen den beiden definiert ... ist es nur ein Tippfehler?

Wuerde es mit .singe-news-image oae. funktionieren, koennte ich die Verwandtschaft der Strings verstehen, aber ich verstehe noch nicht ganz, woher die Abschnitte im Sheet wissen, wofuer Sie zustaendig sind, bzw. wie diese Bezeichnungen zustande kommen ...

Sorry, wenn ich damit nerven sollte, aber eigentlich denke ich, dass die Frage hier ganz gut hinpasst, oder nicht?

toyde schrieb

Nachtrag:
Ich würde CSS allgemein so bauen, dass es die meisten Browser verstehen können:
".news-single-backlink, .news-single-backlink a {"
> ich nehme an "a" soll für Verweise stehen. So wird's aber generell nicht verwendet. Schau dir CSS-Referenzen an.

Das finde ich in sofern interessant, da ich den ganzen Aufbau und die Struktur ja unberuehrt gelassen habe und lediglich die vorhandenen Dateien aus dem tt_news Packet an meine Beduerfnisse anpassen wollte ...

Dabei habe ich leider noch nicht Deine weitreichenden Erkenntnisse um die Qualitaet der Beispiel Templates und CSS Dateien derart souveraen zu beurteilen bzw. durch Kritik weiter voran zu treiben.

Dauert wohl auch noch ...

wim schrieb

Ich weiss nicht, inwieweit ich das Grundsaetzliche von CSS verstanden habe, mir fehlt nur der Zusammenhang vom Bezeichner .news-single-img und dem Marker ###NEWS_IMAGE### ... wo in welcher Datei, in welchem Setup wird der Zusammenhang zwischen den beiden definiert ... ist es nur ein Tippfehler?

Wuerde es mit .singe-news-image oae. funktionieren, koennte ich die Verwandtschaft der Strings verstehen, aber ich verstehe noch nicht ganz, woher die Abschnitte im Sheet wissen, wofuer Sie zustaendig sind, bzw. wie diese Bezeichnungen zustande kommen ...

Zu oberem Abschnitt: ###NEWS_IMAGE### ist ein sogenannter Marker, der vom definierten TypoScript ersetzt wird (in diesem Fall ist es ein Marker in deinem News-Template.tmpl, der durch die Newsklassen ersetzt wird). Wenn du also ein Bild einfügst, findet es hier Platz - irgendwo logisch, denke ich. Es ist also ein "Platzhalter" (=Marker) !!
.news-single-img hingegen ist eine CSS-Klasse - was 0.nix mit TypoScript, oder was weiss ich, zu tun hat. CSS-Klassen stehen meist im autoreigenen CSS-File in der Extention - oder aber man definiert alle CSS-Definitionen in einem eigenen CSS-File (so mache ich das z.B., CSS-Definitionen in 3 Files und mehr finde ich kontraproduktiv). Diese Klassen finden Ihre Definition im HTML-Code vor und müssen entsprechend verschachtelt angegeben werden(Ausnahmen der Regel gibts natürlich auch).

edit:
Zitat: "Schau dir CSS-Referenzen an." - is nicht einfach ein Spruch, hilft wirklich weiter.

Hätte nicht gedacht, dass ich mich so unverständlich ausdrücken könnte, oder den Wald vor Baeumen nicht erkennen kann.

1. Marker konnte ich vorher schon einordnen - sonst faellt einem jegliches editieren, welcher Templates auch immer, doch sehr schwer

2. Ich weiss auch was eine CSS Klasse ist, da ich ja schon einige derer, wenn auch nicht angelegt, sondern modifiziert habe

Aus den CSS Referenzen, die ich mir bis jetzt angeschaut habe, gehen lediglich Details der Syntax hervor, wie man welche Formatierungen erzielt ... das ist mir auch alles klar.

Auch, dass die Auslagerung angebracht und 3 CSS Files eigentlich genug sind, ist Kosmetik denke ich, aber ich wuerde Dir wegen der Uebersichtlichkeit voll und ganz zustimmen.

Mir geht es aber um den Zusammenhang.

Das eine ist mir klar, das andere soweit auch, aber woher weiss die CSS Klasse, worauf Sie sich bezieht? Bzw. wie weiss Typo, welcher der Inhalt für einen Marker ueber welche CSS Klasse formatiert bzw. gerendert werden soll?

Es muss doch irgendwo definiert werden bzw. stehen, welche Klasse sich auf welchen Teil respektive Marker bezieht ...

Ich kann ja nicht einfach schreiben .der-eine-text und .der-andere-text .. da muss doch irgendwo der Bezug hergestellt werden ...

Urspruenglich ging es mir ja darum, zu erguenden, warum eine CSS Datei, die Teil eines Plugins ist und von mir lediglich innerhalb der CSS Klasse modifiziert wurde, nicht aber der Name der Klasse oae., keine Auswirkung zu haben scheint ... wobei die Modifikationen des Inhalts anderer Klassen sehr wohl die gewuenschten Ergebnisse erzielen ...

So oder so, danke fuer Deine Geduld.

Nachtrag: Wenn ich den Marker im HTML Template mit einer neuen Klasse umspanne wie ...

  <span class="formatierung_bild">###NEWS_IMAGE###</span>

... und die dann im CSS anlege, entsprechend formatier, hilft das leider auch nix