[3.2] DIV-Container in Forenbody

[AnfaengerZ]

Moin zusammen,

ich bräuchte mal Euren Rat. Die letzten Tage habe ich mir ein Testforum eingerichtet und wollte in den "page-body" über die Overall_header.html einen Div-Container einbauen. Beendet habe ich den Befehl in der overall_footer.html. Dazu über eine Custom.css die Angaben gesteuert.

Vorneweg, eine Ext dafür konnte ich nicht finden. So blieb nur der Weg, es durch scripten zu lösen.

Im Prinzip funktioniert das auch, nur das ich vermutlich ein Problem mit den "block" bzw. "relativen" Angaben im CSS habe.
Denn wenn ich das Element einsetze, marschieren alle Topics in den Größenbereich des Containers, auf der rechten Seite.
Irgendwie komme ich da so nicht weiter. Hat jemand von Euch eine Idee, sowas schon mal erfolgreich eingerichtet?

Hier ein Beispiel wie es aussehen soll:Testbild

Hier Code aus der overall_header.html:

Code: Alles auswählen

<div id="page-body" class="page-body" role="main">
	
	<div id="aside">
	      <aside>
	 <section> 
	 <h2>Weiterführende Links</h2>
	 <ul>
	 <li>in Arbeit</li>
	 <li>in Arbeit</li>
	 <li>in Arbeit</li>
	 </ul>
	 </section>
	 <section>
	 <h2>Noch ein Feld</h2>
	 <p>Links</p>
	 </section>
	 <section>
	 <h2>Kategorien</h2>
	 <ul>
	 <li>Und mehr links</li>
	 <li>Und mehr links</li>
	 <li>Und mehr links</li>
	 <li>Und mehr links</li>
	 </ul>
	 </section>	 
	 </aside>
	 </section>
	
	 
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner">
				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			
			
		
		
	 </div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT overall_header_content_before -->

Und hier das CSS:

Code: Alles auswählen

.aside {
	float: right;
	display:inline-block;
	width:30.6%;
	margin-left:3%;
	padding:0em;
	vertical-align:top;
}

.aside section {
	margin-bottom:1.563em;
	background-color:#FFFFFF;
	border-bottom: 0.188em solid #E7590B;
}

.article h2 {
	padding:1em 1.8em 1em 1.8em;
}

.aside ul {
	padding: 0em 1.875em 1.25em 2.5em;
}

Vielen Dank im Voraus.

[oxpus]

Was soll denn der DIV-Container machen?
Einen Block, bzw eine Spalte links neben dem Forum anzeigen oder nur eine Block über dem Foruminhalt?

Als Spalte macht es weniger Sinn, diesen bis zum Footer zu ziehen, sondern eher vor dem eigentliche Inhalt enden und diesen dann mit einem weiteren DIV zu umfassen, um beide auf diese Weise geformten "Spalten" klar voneinander abzugrenzen.
Vorher wäre aber dann mit <br class="clear" /> das vorherige, von dir gesetzte float: left zu beenden, bevor der DIV-Container für den Foruminhalt beginnt, da ja alle Inhalte eben nach links wandern, wie bei dir geschehen, solange man eben das nicht beendet.

Also mal vollkommen ins Unreine und somit ungetestet:

Code: Alles auswählen

<div id="page-body" class="page-body" role="main">
   
    <div id="aside">
        <aside>
            <section> 
                <h2>Weiterführende Links</h2>
                <ul>
                    <li>in Arbeit</li>
                    <li>in Arbeit</li>
                    <li>in Arbeit</li>
                </ul>
            </section>
            <section>
                <h2>Noch ein Feld</h2>
                <p>Links</p>
            </section>
            <section>
                <h2>Kategorien</h2>
                <ul>
                    <li>Und mehr links</li>
                    <li>Und mehr links</li>
                    <li>Und mehr links</li>
                    <li>Und mehr links</li>
                    </ul>
            </section>    
            </aside>

    </div>

    <br class="clear" />

    <div>
    
    <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
    <div id="information" class="rules">
        <div class="inner">
            <strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
        </div>
    </div>
    <!-- ENDIF -->

    <!-- EVENT overall_header_content_before -->

Für den zweiten Container könntest du noch in deiner .css ein float: left mit definieren, was womöglich auch nötig wird, damit der Container nicht doch unterhalb anstatt neben deiner neuen Spalte angezeigt wird.
Dann wäre die Zeile <br class="clear" /> im Kopf überflüssig und müsste dafür im Footer nach dem schließenden DIV für den Forum-Inhalt eingefügt werden, damit der Forum-Fuß wieder korrekt aufgebaut wird.

Wenn du allerdings nur einen Container über dem Foruminhalt anzeigen lassen willst, darf der neue DIV-Container vor dem Foruminhalt und auch der schließende TAG im Fuß nicht eingefügt werden, da dein Block enden soll, bevor das eigentliche Forum kommt.

Also ich bin zwar kein Webdesigner und müsste das jetzt auch erst einmal selber probieren, aber ein wenig Vorstellungskraft der angesprochenen "Blöcke" einer Seite sollte man schon haben, damit man diese Art von Layout-Fehlern von Hause aus vermeiden kann.

Aber insgesamt wäre dieses jetzt genau der Einstieg, sich an einer eigenen Extension zu versuchen, da diese nicht wirklich viel mitbringen muss, um das gewünchte Template-Event bereit zu stellen

[Lehrling]

Es gibt dafür eine Extension: http://reyno41.bplaced.net/phpbb/viewtopic.php?f=8&t=19

[AnfaengerZ]

Vielen Dank für die Hilfestellungen

Ich habe es jetzt nach folgender Vorlage aus 2011 gelöst. Responsive Geschichten habe ich nachträglich eingebaut: phpBB Knowledge Base

1= sidebar.html erstellt und in den Style/Templateordner gepackt.

In dieser HTML wird der Inhalt eingestellt.

2= sidebar.html in overall_footer.html oberhalb Page-footer-Division einbinden.

Code: Alles auswählen

<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>  

3= custom.css modifizieren. (Nicht die common.css!!! - funktioniert nicht!)

Code: Alles auswählen

#page-body {
    margin: 4px 0;
    clear: both;
    width:85%;
    float:left;
}  

.page-sidebar {
float:left;
margin:4px 0px 0px 5px;
width:14%;
}

.side-one {
background-image: url("./images/bcg3.gif");

}	

.image{
	width:90%;
	height:auto;
	max-width:100%;
	border: 1px;
	border-color: #2F2D2C; 
}

@media screen and (max-width:600px) {
	.page-sidebar, .image {
		width:100%;
		display:none;
		margin:0.625em 0em 0.625em 0em;
	}

Über die sidebar.html können so nun Bilder/Grafiken/Texte/Links usw frei eingstellt werden. Man ist nicht von Ext-Vorgaben abhängig.
Über @media screen wird die responsive Darstellung gesteuert.

Bordversion: 3.2.5

Beispiel: Sidebar
(Keine Sorge, der Footer ist noch da - kommt auch wieder hoch wenn die Dimensionen und Margins eingestellt sind - respective, mehr Topics im Board sind)

[AnfaengerZ]

Kleine Rückmeldung zum Schluß,

ich habe mich nun entschieden einen "Child-style" ins Forum zu packen. Inkl. der "Custom - Sidebar".

Link zum aktiven Style: Forum

So hab ich mir das vorgestellt und so hat es auch gut funktioniert.