Fragen und Antworten » Code für Infoboxen im Header

Code für Infoboxen im Header

02.04.2016 19:23 (zuletzt bearbeitet: 02.04.2016 19:24)

Weltenwanderer
#1 Code für Infoboxen im Header

Hallo,

ich hatte ewig nach einem Code für solche Infoboxen und Textfelder (Team, Wetter, Story, ...), die man unter dem Logo in der Kopfzeile platzieren kann, gesucht und nichts gefunden, also habe ich selbst einen Code gebastelt - und er funktioniert
Daher dachte ich, ich helfe zur Abwechslung mal und stell ihn mal für alle rein, die auch so etwas suchen, um ihr Forum aufzuhübschen ;)
So sieht das Ganze am Ende im Forum aus. Unter dem Code habe ich noch eine Erklärung, was wofür ist, so dass ihr das individuell anpassen könnt. Das ganze habe ich mit einer einzeiligen Tabelle realisiert.

1
2
3
4
5
6
7
8
9
10
11
 
<center><table style="border-spacing:20px;">
<tbody>
<tr>
<td valign="top" width="200px" height="200px"><center><img src="http://abload.de/img/wettertvs14.png" alt="Das Wetter" /><br /> <span style="text-decoration: underline;"><strong><span style="font-size: large;">April 2016</span>&#65279;</strong></span><br /><br />Das Wetter und die Temperaturen sind sehr wechselhaft. <br>Die Sonne geht zwischen 6 und 7 Uhr auf und zwischen 19 und 20 Uhr unter.</center></td>
<td valign="top" width="200px" height="200px"><center><img src="http://abload.de/img/plott6sa0.png" alt="aktueller Plot" /><br /> <span style="text-decoration: underline;"><strong><span style="font-size: large;">Seuchenausbruch</span>&#65279;</strong></span><br /><br />
<div style="width: 200px; height: 150px; overflow: auto; align: right;">&#65279;Die ersten Zombies erscheinen und greifen Menschen an. Sie vermehren sich rasend schnell. Systemausfälle, Unfälle, Flugzeugabstürze, Plünderungen und Massenpanik sind die Folge. Der Notstand ist ausgerufen und alle Forschungseinrichtungen werden mit der Suche nach einem Heilmittel beauftragt.</div>
</center></td>
<td valign="top" width="200px" height="200px"><img src="http://abload.de/img/team3lsao.png" alt="Das Team" /> <br /> <a href="http://day-z.xobor.de/u2_Lianne-Saper.html"><img src="http://abload.de/img/liabajvh.png" alt="Lianne Saper" />&#65279;</a> <a href="http://day-z.xobor.de/u3_Jacklynn-Suarez.html"><img src="http://abload.de/img/jacky4lsz7.png" alt="Jacklynn Suarez" />&#65279;<br /> </a><a href="http://day-z.xobor.de/u1_Alexej-Gromow.html"><img src="http://abload.de/img/alexejkrjdg.png" alt="Alexej Gromow" />&#65279;</a></td>
</tr>
</tbody>
</table></center>
 

Border spacing vergrößert oder verkleinert den Abstand der einzelnen Boxen (Abstand zwischen den Feldern Wetter, Plot und Team).
Valign="top" sagt, dass überall der Text oben beginnt. Ansonsten ist der Text höhenmäßig zentriert. Wenn ihr es rausnehmt, seht ihr, was ich meine ;)
td begrenzt immer ein Feld. alles was zwischen < td > und < / td> steht, ist der Inhald eines Infofeldes.
width & height geben die Größen der einzelnen Felder an. Das ist nicht zwingend notwendig, doch finde ich es angenehmer, eine feste Größe zu haben und es wirkt gleichmäßiger.
br steht für break und bedeutet, dass eine neue Zeile begonnen werden soll.
Der Teil mit < div style="width: 200px; height: 150px; overflow: auto; align: right;" > sorgt dafür, dass der Text scrollbar ist (da hier eine feste Größe angegebenn muss, ist es von Vorteil, den Felder zuvor bei td eine feste Größe zuzuweisen), da bei langen Texten wie Storylines, Plots, etc. der Text entweder abgeschnitten wird oder euer Forum immer weiter runter rutscht.

Ich hoffe, ich konnte das relativ verständlich erklären und manchen hier weiterhelfen ;)