Grafiken als Kategorie

[Talk19zehn]

Hello und ich "Laie" übte und komme zu diesem Ergebnis. Teils hardcodiert funktionstüchtig. Ob Konstrukte gänzlich fehlerfrei sind, keine Folgefehler verursachen, vermag ich nicht abschließend beurteilen. Nachteile sind mir zunächst in den Darstellungen nicht begegnet. Dennoch alles ohne Gewähr!!

Meine eigenen und selbst gefertigen abstrakten Grafiken haben eine zugeschnittene Größe von 304px x 60px, 86px x 17px bzw. jene Größen entsprechend dem vorgenannten Beitrag, den ich nicht mehr editieren kann. Die Grafikhöhe von 60px erachte ich allerdings als zu hoch. Besser wären meiner persönlichen Auffassung nach geringere Höhen, um die Hauptansicht in ihrer Höhe nicht zu sehr zu strapazieren. Wer scrollt schon gern endlos.... oder oder oder.... ? Sprungmarken könnten zusätzlich Abhilfe schaffen.
Zur besseren Übersicht habe ich die Nummer der Kategorie für das CSS verwendet. Ohne line-height scheint nichts zu gehen?! ---> Angaben werden auf die Foren-IDs anderenfalls "dupliziert" ( fortgeführt ) = in allen IDs ausgegeben!!
Das Ändern der CSS-Notationen ( Rahmen und vieles mehr ) brachte leider keinen erwähnenswerten Erfolg, machten also wenig Sinn. Ich habe vielerlei Ideen ausprobiert, die nicht alle benennen kann.
Die PX-Angabe line-height bezieht sich immer auf die Höhe der Grafik und ist m. E. nach derzeitigem Kenntnisstand unbedingt beizubehalten. Meine Auflösung beträgt 1680x1050 px. Das Forum hat keine feste Breite. Ich benutzte Prosilver --> noch Version 3.08!
Ergebnis: Bildliche Darstellung verkleinert [ externes Bild ]

Dokumentation einzelner Vorgänge
I. Lanweilige Idee: Ein Bild in dem Kategegoriebereich zentriert.

common.css

Code: Alles auswählen

.kategorieeins {
	line-height: 60px;
	text-align: center;
}

Ausgabe: forumlist_body.html

Nach

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>

fügte ich ein:

Code: Alles auswählen

<div>
<div class="kategorieeins"><!-- IF forumrow.FORUM_ID eq '1' --><img src="#".. http://www........./forum/styles/tableline/theme/images/mmrf360304x60.jpg" alt="" /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
</div>

II. Neue Idee: repeat-x und *Zusatzeintrag
common.css

Code: Alles auswählen

.kategoriedreizehn {
	background: #919191 url("{T_THEME_PATH}/images/linegrayvert86x15.gif");
	line-height: 15px;
}

Ausgabe: forumlist_body.html

Nach

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>

fügte ich ein:

Code: Alles auswählen

<div>
<div class="kategoriedreizehn"><!-- IF forumrow.FORUM_ID eq '13' --><br /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
</div>

*Hierbei habe ich den Eintrag zur Forum-ID 13, vgl. bitte vorherigen Beitrag, zusätzlich belassen (nicht W3C-konform).



III. Andere Lösung: repeat-x ohne Zusatzeintrag

common.css

Code: Alles auswählen

.kategoriesechzehn {
	background: #919191 url("{T_THEME_PATH}/images/mmrf360304x60.jpg");
	line-height: 60px;
}

Ausgabe: forumlist_body.html

Nach

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>

fügte ich ein:

Code: Alles auswählen

<div>
<div class="kategoriesechzehn"><!-- IF forumrow.FORUM_ID eq '16' --><br /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
</div>

IV. Ggf. eine interessantere Idee: Bildausgabe repeat-x und Zusatztext auf dem Bild
common.css

Code: Alles auswählen

.kategorieeinundzwanzig {
	background: #919191 url("{T_THEME_PATH}/images/mmrf360304x60.jpg");
	line-height: 60px;
	color: #FAFAFA;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}

Ausgabe: forumlist_body.html

Nach

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>

fügte ich ein:

Code: Alles auswählen

<div>
<div class="kategorieeinundzwanzig"><!-- IF forumrow.FORUM_ID eq '21' --><a href="{forumrow.U_VIEWFORUM}"></a><i>~ Welcome ~ Willkommen ~</i><!-- ENDIF --></div>
</div>

Denkbar sind Texte, die Forenbereiche betreffen.....

Derzeitige insgesamte Dokumentation des Bereiches in der forumlist_body.html:

Code: Alles auswählen

	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>
			<div>
			<div class="kategorieeins"><!-- IF forumrow.FORUM_ID eq '1' --><img src="#"...http://www....../forum/styles/tableline/theme/images/mmrf360304x60.jpg" alt="" /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
			<div class="kategoriedreizehn"><!-- IF forumrow.FORUM_ID eq '13' --><br /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
			<div class="kategoriesechzehn"><!-- IF forumrow.FORUM_ID eq '16' --><br /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
			<div class="kategorieeinundzwanzig"><!-- IF forumrow.FORUM_ID eq '21' --><a href="{forumrow.U_VIEWFORUM}"></a><i>~ Welcome ~ Willkommen ~</i><!-- ENDIF --></div>
			</div>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt><!-- IF forumrow.S_IS_CAT -->
						<!-- IF forumrow.FORUM_ID eq '13' --><a href="{forumrow.U_VIEWFORUM}"><img class="linksimg" src="{T_THEME_PATH}/images/17x16-kugel02.gif" width="17" height="16" alt="" /><p style="margin: 0; line-height: 16px;">&nbsp;{forumrow.FORUM_NAME}&nbsp;</p></a>
						<!-- ELSE --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ENDIF --><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
						<dd class="topics">{L_TOPICS}</dd>
						<dd class="posts">{L_POSTS}</dd>
						<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums"><!-- ENDIF -->

Ideen und Vorschläge sind gerne gesehen!!

Anmerkung: Für eine inhaltliche Textausgabe bitte in der entsprechend genutzten Sprache, die Variable noch einrichten.

Vorgetragene Ideen: Nicht in allen Browsern getestet!!! IE8 und IE9 als auch Firefox5 und Opera sind m. E. OK.

Viele Grüße

[Secretly]

Also ich habe mich für variante 3 entschieden und es ist auch "fast" so wie ich es mir vorstelle ^^

jedoch was muss ich machen, dass oben und unten auch so ein rand wie links und rechts ist? wenn ich die höhe ändere, dann wiederholt sich das bild wie man sieht.

und wie könnte ich über den kategorien bzw. über der ersten kategorie den "kopf" mit Foren Beiträge Themen Letzter Beitrag einfügen? das was eben vorher bereits in der kategoriezeile stand. zur anschauung wie ich es meine http://www.sydneylife.de/

edit: okay den die rahmen hätte ich, nur der untere ist halt irgendwie "breiter" als der obere.

[Talk19zehn]

Hello, deine Frage kann ich dir nicht beantworten, da sich meine Vorschläge auf Prosilver beziehen. Die Grafikhöhe Line-Height muss immer konsequent der der Grafik entsprechen. In meinem Falle gibt´s keine Probleme in der Darstellung der Grafik in der Kategoriebeschreibung, wenn die Ideen in dem besagten Style Prosilver korrekt eingesetzt werden. Ich tendiere so insgeheim eher zur Idee Nr. IV.
Ob die CSS-Notationen in einem Tabellenkonstrukt greifen, kann ich dir ebenso wenig beantworten, da ich bspw. Subsilver2 nicht nutze. Erinnerlich würde ich Tabellen ggf. anders gestalten. Zudem wurden von dir leider keine Angaben gemacht, was du nun letztlich wie verwendet und eingebunden hast --> Vorher / Nachher.

Somit wird Hilfe schwierig werden, da auch "Subsilver2-Kenner" nur raten könnten.

Grüße

[Secretly]

Ähm, wieso Subsilver? Ich benutze Prosilver bzw. Prosilver_SE

Die Einbauten waren da letztlich genau so wie du sie beschrieben hast.

vorher:

Code: Alles auswählen

	<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
						<dd class="topics">{L_TOPICS}</dd>
						<dd class="posts">{L_POSTS}</dd>
						<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">
	<!-- ENDIF -->

nachher:

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>
			<div>
      <div class="kategorieimportant"><!-- IF forumrow.FORUM_ID eq '1' --><br /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
      </div>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt><!-- IF forumrow.S_IS_CAT --><!-- ELSE --><!-- ENDIF --></dt>
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">
	<!-- ENDIF -->

common.css

Code: Alles auswählen

.kategorieimportant {
   background: #b9c2c1 url("{T_THEME_PATH}/images/important.png");
   height: 80px;
}

ich habe das

Code: Alles auswählen

 <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LAST_POST}</span></dd>

ausgebaut, da ich es gern über der kategorie hätte... also wie http://i1209.photobucket.com/albums/cc3 ... gorie2.png dort.

edit: aber danke ich habe es gefunden

[Talk19zehn]

Hello, habe gerade im falschen Forum eines anderen Threads etwas nachgesehen und war gedanklich noch bei Subsilver2. Sorry!

Du verwendest Nr. III ohne line-height,

common.css

Code: Alles auswählen

.kategorieimportant {
   background: #b9c2c1 url("{T_THEME_PATH}/images/important.png");
   height: 80px;
}

obwohl du nur eine einzelne Grafik ( ohne repeat-x ) ausgeben möchtest? So würde ich Nr.1 anwenden.

Wenn du die Zeile ausbaust

ich habe das
Code: Alles auswählen
<dd class="topics">{L_TOPICS}</dd>
<dd class="posts">{L_POSTS}</dd>
<dd class="lastpost"><span>{L_LAST_POST}</span></dd>

ausgebaut, da ich es gern über der kategorie hätte...(...)...

, kann meine Idee nur bedingt funktionieren.

Insofern würde ich sie wieder einbauen, da die Regeln der Definitionslisten vorgegeben sind. Ein Umbau ist sicherlich möglich, jedoch m.E. arbeitsintensiv.

http://de.selfhtml.org/html/text/listen.htm
http://www.mediaevent.de/xhtml/dl.html
http://www.w3schools.com/tags/tag_dl.asp

Beste Grüße


Edit:
Dein Edit bezieht sich worauf?
Wenn du einen weiteren Lösungsansatz nunmehr gefunden hast, wäre es nett, wenn du hier darüber berichtest.
Vielen Dank

[Secretly]

mein edit bezieht sich darauf, dass es jetzt genau so ist wie ich es wollte

ich wollte halt nur dieses oben Beiträge, Themen, letzter beitrag drüber haben. somit habe ich deinen code einfach unterhalb eingebaut und dass war es schon. jetzt sieht es so aus wie bei meinem vorherigen wbblite und funktioniert dann auch mit mehreren kategorien.

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		<div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt><!-- IF forumrow.S_IS_CAT --><!-- ELSE --><!-- ENDIF --></dt>
						<dd class="topics">{L_TOPICS}</dd>
            <dd class="posts">{L_POSTS}</dd>
            <dd class="lastpost"><span>{L_LAST_POST}</span></dd>
					</dl>
					<div>
      <div class="kategorieimportant"><!-- IF forumrow.FORUM_ID eq '1' --><br /><a href="{forumrow.U_VIEWFORUM}"></a><!-- ENDIF --></div>
      </div>
				</li>
			</ul>
			<ul class="topiclist forums">
	<!-- ENDIF -->

achso und ich habe nur height und dass scheint auch zu funktionieren.

[Talk19zehn]

Hello, genialer Gedanke!

achso und ich habe nur height und dass scheint auch zu funktionieren.

Bist du dir sicher, dass es in jedem oder nur in deinem spezielleren Falle funktioniert? http://www.sydneylife.de/phpbb/index.php

Denn bei dir ist eine fixierte Seitenbreite bzw. eine feste Breite für das Forum relevant. Die Zeile, die den Link der Kategoriebeschreibung enthält, hast du nicht verwendet. Insofern ist deine Lösung eine gute anders geartete Alternative, denke ich.

Gruß

[Secretly]

Also bei mir funktioniert es ja, da Grafiken halt genau zu Forenbreite passen. Ich kann es heute Abend aber auch nochmal mit kleineren Grafiken (Breite) versuchen. Bei line-height und height gab es halt zumindest bei mir keine Probleme, wenn ich natürlich eine niedrigere Grafik einfüge, dann wiederholt sich diese logischerweise, aber dass ist ja normal.

[Elsensee]

Nur mal so 'ne Frage: Warum ist zwischen den a-Tags nichts? (<a href="adresse.de">*nichts*</a>)

[Secretly]

Bei

Code: Alles auswählen

<a href="{forumrow.U_VIEWFORUM}"></a>

oder wo?