phpBB.de

ich möchte das das forum dann den rest der seite variabell nimmt je nach dem wie groß das fenster ist.

Ralfprivat schrieb:
Forum Teilen links frei für Eigene Sachen

Talk19zehn hat geschrieben:Hallo und einen schönen Abend!
Links und rechts vom Forum je eine Spalte (Box) platzieren. Das interessiert mich. Meine Idee möchte ich (ohne jegliche Gewähr) gerne vortragen. Um linksseitig eine Spalte einzufügen ging ich folgendermaßen vor:
Zunächst: Die Angaben im Theme für body zentrierte ich mit: margin: 0 auto;

Theme Prosilver:

Code: Alles auswählen

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #000000;
   background-color: #FFFFFF;
   /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
   font-size: 10px;
   margin: 0 auto;
   padding: 12px 0;
}

Ist hier evtl. zusätzlich sogar bereits die Seitenbreite zu verringern?



Theme Prosilver:
Ich nutzte margin: 0 0 0 170px; ( oben, rechts, unten, links ). Diese beispielhafte Variante fügt nun links vom Forum eine Spalte in einer Breite von 170px (bezogen auf die Gesamthöhe der **Seite) ein.

Die Breite setzte ich auf 700px oder vergab im Test auch prozentuale Werte --> Soweit ich Laie das überhaupt beurteilen kann, ergab sich dadurch zunächst kein merklicher Unterschied.
( width: 80%; )

Code: Alles auswählen

/* Main blocks
---------------------------------------- */
#wrap {
   padding: 0 12px;
   width: 700px;
   margin: 0 auto;
   background: #FFFFFF;
   margin: 0 0 0 170px; 
}

Zusätzlich setzte ich im Theme ganz an das Ende:
(Richtete hierbei noch u. a. mit margin-top den oberen Rand und die Position von links aus). Andere Formatierungen sind sicherlich denkbar.

Code: Alles auswählen

#boxlinks {
   background-color: transparent;
   position: absolute;
   margin-top:2px;
   left: 2px;
}

#navi1
{
width: 130px;
font-size: 11px;
float:center;
display: inline;
background-color: #222E6A;
}

#navi1 ul
{
margin: 5px;
padding-left: 0px;
list-style-type: none;
}

#navi1 a
{
display: block;
padding: 5px;
width: 130px; /*--für den IE 6--*/
text-decoration: none;
background-color: #222E6A;
background-repeat:no-repeat;
color: #FFFFFF;
border-bottom: 1px solid #000000;
background-position: 5px;
}

#navi1 a:hover
{
background:#292FA1;
background-position: 5px;
}

Im Template Prosilver in der overall_header.html fügte ich vor dem Forenanfang ...<div id="wrap">...
ein:
Mein Beispiel

Code: Alles auswählen

<div id="boxlinks">

<div id="navi1">
<ul>
<li><a href='xyz.html'>&diams; Home</a></li>
<li><a href='http://www……./'>&diams; ABCDEFG</a></li>
<li><a href='xyz.html'>&diams; ABC</a></li>
<li><a href='xyz.html'>&diams; ABC</a></li>
</ul><!--Ende ul-->
</div><!--Ende Navi1-->

<p>
<img border="0" src="http://img..gif" alt="irgendeinbild">
<br />
Weiterer Inhalt
</p>

* </div><!--Ende boxlinks-->

*Div schloss ich direkt nach den Inhaltsangaben.

Ob meine Vorgehensweise in anderweitige Strukturen, andere Konzepte eingreift oder auf den QT gar eine negative Auswirkung hat, kann ich leider (noch) nicht abschließend beurteilen. Evtl. muss ich die Breite des Forums (wrap) neu angepassen, dies prüfte ich aus Zeitgründen bisher nicht.

Anmerken möchte ich, dass ich mit dem tollen Idee „Box neben dem Forum“ von Berliner Schildkröte nicht ausreichend zu recht kam, da sich die dortige Navigation (Verlinkungen bspw. bei Überlänge oder je Auflösung) nicht immer optimal darstellte ( ggf. war ich nicht fehlerfrei beim Einrichten ). Also machte ich mich auf die Suche nach einer weiteren Lösung. Ich hatte mich zwar durch das hiesige Forum gearbeitet, jedoch keine wirklich passenden Einträge gefunden. Man möge mir verzeihen, sofern ich bei der hiesigen Datenmenge etwas übersehen habe.

Gäbe es Verbesserungsvorschläge oder weitere Ideen bzw. Anmerkungen von helfenden Händen oder von professioneller Seite? Das würde mich freuen. Denkbar ist, dass eurerseits Erfahrungswerte vorhanden sind, die mir fehlen. Der linke Seitenabstand von 2px in der #linksbox scheint noch nicht ganz zu passen? Da werde ich noch zirkeln müssen. Der erste Ansatz klappt soweit für den linken Bereich ganz gut.
Gleiches müßte m. E. auch für eine rechte Spalte möglich sein (#rechtsbox), die mittels CSS auszurichten, zu formatieren wäre. Aber wie mache ich das? Und vor allem wo füge ich im Template die #rechtsbox ein? Irgendwie hänge ich gerade gedanklich fest.

Motivierte allerbeste Grüße

<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<span class="corners-bottom"><span></span></span></div>
		</div>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<br />
<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<span class="corners-bottom"><span></span></span></div>
		</div>

<br />

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #;
	background-image: url("");
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
                width: 100%;
	margin: 0px auto;
	padding: 12px 0;
}

<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

<br />
<br />


</body>
</html>