Letzter Beitrag zentriert und Trennlinien

[EpicNoob]

Moin moin,

Ich habe folgende 2 fragen und hoffe das man mir hier helfen kann.

1: Ich habe eine lange liste mit unterforen im Forum A-C. Was genau muss geändert werden damit die letzten Beiträge auf der rechten seite
senkrecht zentriert werden. Am besten so das es sich immer automatisch zentriert, wenn ich neue unterforen hinzufüge.
(Ich hoffe das war einigermaßen verständlich^^)

2: Zwischen den Themen und Beiträgen sind diese senkrechten weißen Trennlinien. Ist es machbar das diese durchgehend sind? Also bis zum unteren
Rand des jeweiligen Forums gehen?

PhpBB Version: 3.0.9
Style: Prosilver
Link: http://xboxerfolge.cwsurf.de/

Ich hoffe jemand kann mir weiterhelfen und danke schonmal im Vorraus.

Mfg,
EpicNoob

[Crizzo]

Hi,

@1.: Da könnte sowas funktionieren, wenn man die horizontale Zentrierung nicht auf das letzte <dd>-Element anwendet: http://xhtmlforum.de/40267-faq-h-ufig-g ... .html#faq5

@2.: Die Linien sind so kurz, weil die Listenelemente <dd> so niedrig sind und nicht mit dem <dt> mitwachsen (in der Höhe), wie es eine Tabelle tun würde. Deshalb musst du in diesem Abschnitt:

Code: Alles auswählen

<dl style="background-image: url(./styles/prosilver/imageset/forum_read_subforum.gif); background-repeat: no-repeat;" class="icon">			
			</dl>

Eine solche Technik anwenden: http://xhtmlforum.de/40267-faq-h-ufig-g ... .html#faq1


Gruß
Blackhawk

[EpicNoob]

Hallo und danke für deine Antwort.

Bei 1. komm ich leider garnicht weiter. Hab mit firebug probiert vertical-align einzusetzen, aber es passiert nichts.
Bin noch neu im PhpBB Bereich

Zu 2. Ich habe das jetzt so verstanden das ich statt des subforum_read.gif einfach selbst ein bild erstelle was über die ganze breite geht
und das sich dann mit repeat-y senkrecht verlängert? In welcher CSS befindet sich die Codestelle von dir?

Gibt leider keine tutorials wo das anhand der Codes erklärt wird, bzw finde ich keine^^

Mfg,
EpicNoob

[Crizzo]

Hallo und danke für deine Antwort.

Bei 1. komm ich leider garnicht weiter. Hab mit firebug probiert vertical-align einzusetzen, aber es passiert nichts.
Bin noch neu im PhpBB Bereich

Da sind doch zwei Links in der FAQ, die das sogar 1:1 erklären bzw. zeigen.
http://www.brunildo.org/test/img_center.html nur ist es bei dir kein Bild, sondern ein <dd>-Element.
Und hier bei einer Website: http://d-graff.de/fricca/center.html --> STRG + U und im Head-Bereich im <style>-Element steht der Code. Abgucken erlaubt.

Die CSS-Datei ist z.B. diese: styles\prosilver\theme\content.css

Zu 2. Ich habe das jetzt so verstanden das ich statt des subforum_read.gif einfach selbst ein bild erstelle was über die ganze breite geht
und das sich dann mit repeat-y senkrecht verlängert? In welcher CSS befindet sich die Codestelle von dir?

Gibt leider keine tutorials wo das anhand der Codes erklärt wird, bzw finde ich keine^^

CSS-Dateien: styles\prosilver\theme\content.css und styles\prosilver\theme\colours.css , such dir eine aus.

Ja. Im Prinzip erstellst du eine Hintergrund-Grafik, gibst sie dem <dl>-Element, wiederholst es vertikal und dann sieht es so aus, was würden die Linien durchgehen. Das Problem dabei ist, dass du eine dynamische Breite hast und das deshalb sehr schwierig bis unmöglich wird.
Vielleicht ging es mit "display:table-cell" oder so. Aber das hab ich jetzt spontan auch nicht hinbekommen.

[EpicNoob]

Hi Blackhawk,

Ich kann immer noch nicht ganz folgen. Das Thema mit den Trennlinien ist mir erstmal egal. Ich schau erstmal wegen der zentrierung vom letzten beitrag.

Bei Strg+U finde ich unter <style> diesen code:

Code: Alles auswählen

* {
		margin:0;
		padding:0;
		}

	html, body {
		height:100%;
		}

	body {
		background-color:#fc6;
		color:#630;
		font:100.01%/1.4 sans-serif;
		text-align:center; /* horizontal centering for IE Win quirks */
		}

	#distance { 
		width:1px;
		height:50%;
		background-color:#fc6;
		margin-bottom:-13.75em; /* half of container's height */
		float:left;
		}

	#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:27.5em;
		width:45em;
		clear:left;
		background-color:#ff9;
		border:1px solid #c93;
		border-top-color:#fff;
		border-left-color:#fff;
		}

	#container div {
		font-size:80%;
		float:right;
		width:17em;
		margin-left:2em;
		}

	#container div h2 {
		font-size:120%;
		font-weight:bold;
		text-transform:uppercase;
		margin:1em 0 0;
		}

	#container div h3 {
		font-size:100%;
		font-weight:bold;
		margin:.5em 0 0 .75em;
		}

	#container ul {
		margin-left:2em;
		}

	#container li span {
		font-size:70%;
		}
		

	#container h1 {
		font-size:120%;
		padding-top:2.4em;
		margin-left:2.4em;
		}

	#container p {
		margin:1.5em 13.6em 1.5em 3em;
		}

	address {
		font-weight:normal;
		font-size:80%;
		font-style:normal;
		text-align:right;
		margin:0 20em 0 3em;
		}

und den soll ich komplett in die css eintragen? Muss das nicht alles noch definiert werden bei mir?
Könntest du mir evtl. den entsprechenden Code markieren und wo genau er hin soll?
Ich glaube anders komm ich sonst nicht weiter

Der englische Text hilft mir auch nicht weiter. Trotzdem danke nochmal für deine schnelle Hilfe

Mfg,
EpicNoob

[Crizzo]

Hi,

kann es sein, dass du von CSS nicht so richtig eine Ahnung hast? Falls dem so ist, lesen: http://www.thestyleworks.de/basics/index.shtml

Ansonsten natürlich musst du aus dem <style>-Element nicht alle CSS-Deklarationen übernehmen.

Du brauchst nur den Code und einpassendes Element entsprechend diesen:
- <div id="distance"></div>
- <div id="container"></div> <-- ist ja im Prinzip der Inhalt von dem <dd>-Element. Muss vielleicht dann so aussehen:

Code: Alles auswählen

<dd>
<div id="distance"></div>  
<div id="container">"INHALT des aktuellen <dd>-Element!"</div>
</dd>

Und dazu dann dieser CSS-Code:

Code: Alles auswählen

#distance { 
		width:1px;
		height:50%;
		background-color:#fc6;
		margin-bottom:-13.75em; /* half of container's height */
		float:left;
		}

	#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:27.5em;
		width:45em;
		clear:left;
		background-color:#ff9;
		border:1px solid #c93;
		border-top-color:#fff;
		border-left-color:#fff;
		}

Abzüglich der Kosmetik, die du ja schon hast bzw. nicht so aussehen soll.