find-templates

linkblock2

zurück zur Übersicht

Linkboxen untereinander



<style type="text/css">
<!--

/* DIV mit den Linkboxen */
div.linkblock {
 width: auto;
 float: left;
 overflow: hidden;
 margin: 0px 30px 30px 0px; }


/* Aussehen für alle Linkboxen */
ul.linkbox {
 width: 140px;
 list-style-type: square;
 padding:10px 0px 10px 35px;
 margin: 10px;
 background-color: #fff;
 border: 1px solid #c9c9c9; }


/* Titel über Links */
li.text {
 font-size: 14px;
 font-weight: normal;
 color: #FFFFFF; 
 padding: 4px 0px 4px 15px;
 margin: -10px 0px 10px -35px;
 background-color: #303030; }

/* Aussehen der Linktexte */
ul.linkbox li a {
 font-size: 12px;
 line-height: 18px;
 font-family: verdana;
 color: #343434;
 text-decoration: none; }


/* HOVER Linkfarbe */
ul.linkbox li a:hover {color: orange; }

-->
</style>

<div class="linkblock">

<ul class="linkbox">
<li class="text">Hier Titel 1</li>
<li> <a href="LINK 1">Linktext 1</a> </li>
<li> <a href="LINK 2">Linktext 2</a> </li>
<li> <a href="LINK 3">Linktext 3</a> </li>
<li> <a href="LINK 4">Linktext 4</a> </li>
</ul>

<ul class="linkbox">
<li class="text">Hier Titel 2</li>
<li> <a href="LINK 1">Linktext 1</a> </li>
<li> <a href="LINK 2">Linktext 2</a> </li>
<li> <a href="LINK 3">Linktext 3</a> </li>
<li> <a href="LINK 4">Linktext 4</a> </li>
</ul>

<ul class="linkbox">
<li class="text">Hier Titel 3</li>
<li> <a href="LINK 1">Linktext 1</a> </li>
<li> <a href="LINK 2">Linktext 2</a> </li>
<li> <a href="LINK 3">Linktext 3</a> </li>
<li> <a href="LINK 4">Linktext 4</a> </li>
</ul>

</div>


Der erste Code ist der CSS-Code für das Aussehen der Boxen, Linktexte und Überschriften.
  • dort könnt ihr die Breite, die Hintergrundfarbe, Rahmenfarbe, Texfarbe oder Textgrößen anpassen.
  • bei langen Linktexten muss evt. die Breite (width) erhöht werden bei ul.linkbox {

Der zweite Code ist der HTML-Code, der die Linkboxen im Seiteninhalt darstellt.
  • den könnt ihr erweitern, z.B. mehr oder weniger Boxen, mehr oder weniger Links
  • dort fügt ihr auch die Linkadressen ein, sowie gewünschte Linktexte



Einfügen im Seiteninhalt


- auf "Eigene Seiten editieren"
- wähle nun die Seite aus, wo die Boxen hinein sollen
- oben links im Editor auf "Quellcode" klicken
- Du bist nun in der HTML-Ansicht deiner Seite
- beide Codes zu Beginn der Seite einfügen
- wenn Deine Seite bereits Inhalt hat, vor (also über) dem Inhalt einfügen
- dein Seiteninhalt platziert sich automatisch rechts neben den Boxen
- hat deine Seite noch keinen Inhalt, kann weiterer Inhalt nach dem Code eingefügt werden
- auch dieser platziert sich automatisch rechts neben den Boxen

Heute: 1 Besucher