Test9

   
 


 

 

STARTSEITE

KAMPFMANNSCHAFT

NACHWUCHSKONZEPT

TRAINER-BETREUER

KINDERGARTEN

U 8

U 9

U 10

U 11

U 13

U 15

U 16

AKTUELLES

ARCHIV

TALENTE

GÄSTEBUCH

ANREISE

NEWSLETTER

TEST

=> Test1

=> Test2

=> Test3

=> Test4

=> Test5

=> Test6

=> Test 7

=> Test8

=> Test9

=> Test10

 


     
 



Möglichkeit 2 : Galerie mit Menü





  • • besteht aus 3 Div Feldern
  • • Bilder haben die Breite 400 Pixel
  • • Platz für 12 bis 18 Bilder (Menü-Links)

Einfügen in die Homepage :


  • • Einloggen in Homepage
  • • auf "Eigene Seiten editieren"
  • • Seite wählen, wo Galerie hinein soll
  • • nun im Eitor (oben Links) auf "Quellcode" klicken
  • • folgenden Code einfügen :



<div class="Hintergrund">
<div class="Menu">
<ul>
<li style="font-weight:bold;">Hier Titel</li>
<li> <a href="Bild-URL 1" target="inline">Text 01</a> </li>
<li> <a href="Bild-URL 2" target="inline">Text 02</a> </li>
<li> <a href="Bild-URL 3" target="inline">Text 03</a> </li>
<li> <a href="Bild-URL 4" target="inline">Text 04</a> </li>
<li> <a href="Bild-URL 5" target="inline">Text 05</a> </li>
<br />
<br />
<li style="font-weight:bold;">Hier Titel</li>
<li> <a href="Bild-URL 6" target="inline">Text 06</a> </li>
<li> <a href="Bild-URL 7" target="inline">Text 07</a> </li>
<li> <a href="Bild-URL 8" target="inline">Text 08</a> </li>
<li> <a href="Bild-URL 9" target="inline">Text 09</a> </li>
</ul>
</div>

<div class="Bilder">
<iframe style="width:400px; height:300px;" name="inline" src="Bild-URL 1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>


  • • deine Bilder müssen die größe 400 x 300 Pixel haben
  • • die Bild-URL (die http://.........jpg) im Code einfügen


Anpassen der Felder :


  • • die Div's haben Namen (Klassen) bekommen
  • • wir können die Namen / Klassen mit CSS nun ausrichten / gestalten
  • • Einfügen im Feld "Text über Design"

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

.Hintergrund {
padding: 15px;
width: 500px;
background-color: #8B9AB0;
background-image: url(oder Bild-URL);
background-repeat: repeat-x;
border: 2px solid #565656;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
overflow: hidden; }

/* Feld für Links */
.Menu {
color: #FFFFB2;
float: left;
width: 80px;
text-align: left; }

/* Auflistung der Links */
li{
margin-left: 0px!important;
list-style-type: none!important; }

/* Linkfarbe - Linkgröße */
.Menu li a {
font-size: 14px;
color: #FFFFFF;
font-family: arial;
font-weight: bold; }

/* Linkfarbe für Hover-Effekt */
.Menu li a:hover {
color: #74B9FE;
font-weight: bold; }

/* Feld für Bilder */
.Bilder {
float: right;
width: 400px;
border: 3px solid #C4D0EA; }
-->
</style>

 


Nun hat die Bilder-Box gewünschtes aussehen