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;
}
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.
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;
}
ein:
Mein Beispiel
Code: Alles auswählen
<div id="boxlinks">
<div id="navi1">
<ul>
<li><a href='xyz.html'>♦ Home</a></li>
<li><a href='http://www……./'>♦ ABCDEFG</a></li>
<li><a href='xyz.html'>♦ ABC</a></li>
<li><a href='xyz.html'>♦ 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
