find-templates

linkblock1

zurück zur Übersicht

Linkblöcke gestalten





Schritt 1: Der CSS-Code


  • Design "CSS" : Einfügen im Feld "css ohne style tags"
  • alle anderen Designs: Einfügen Feld "Text über Design", vor dem --></style> 

/* Listenblock */
ul.linkliste {
  float: left;
  padding: 15px;
  margin-left: 12px;
  margin-right: 12px; }

/* Aufzählungspunkte */
ul.linkliste li {
  color: #666666;
  letter-spacing: 2px;
  list-style-type: square; 
  margin-left: 15px; }

/* Aussehen Titel */
p.thema {
  font-size: 13px;
  font-weight: bold;
  color: #343434;
  margin-bottom: 10px; }

/* Linkgrösse + Linkfarbe */
ul.linkliste li a {
  font-size: 12px;
  font-family: verdana;
  color: #666666;
  text-decoration: none; }

/* HOVER Linkfarbe */
ul.linkliste li a:hover {color: chocolate; }

Die Abstände können bei margin-right + margin-left geändert werden.




Schritt 2: HTML-Code für die Linkliste


- für den Footer unter dem Design :
- siehe im Feld "Text UNTER Design"
- dort befindet sich dein Footer
- zum Beispiel das <div id="footer"> </div>.
- füge folgenden Code vor dem </div> ein


<ul class="linkliste">
<p class="thema">Titel 1</p>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
</ul>

<ul class="linkliste">
<p class="thema">Titel 2</p>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
</ul>

<ul class="linkliste">
<p class="thema">Titel 3</p>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
</ul>

<ul class="linkliste">
<p class="thema">Titel 4</p>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
<li> <a href="Link">Linktext</a> </li>
</ul>

<br style="clear: left;" />

Natürlich kann der Code auch im Seiteninhalt eingefügt werden,
dann auf "Eigene Seiten editieren", gewünschte Seite wählen,
im Editor oben links auf "Quellcode" klicken, Code in Seite einfügen.



Sollten keine 4 Linkblöcke nebeneinander passen,
einfach einen Linkblock von <ul ....> bis zum </ul> entfernen.

Heute: 5 Besucher