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