iceblue-test
  Galerie2
 

Möglichkeit 2 : Galerie mit Menü





Du verwendest Baukasten-Design "Clean" ? Hier die neue Bilderbox Beschreibung.

  • 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: #EEEEEE;
background-image: url(oder Bild-URL);
border: 1px solid #C9C9C9;
border-radius: 10px;
overflow: hidden; }

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

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

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

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

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



Videos in der Boxeinfügen:


  • suche ein Video auf Youtube.de
  • klicke unter dem Video auf "Teilen"
  • nun auf "Einbetten" klicken
  • Dir wird ein <iframe - Code angezeigt
  • wir benötigen nur den Link aus dem Iframe-Code
  • zum Beispiel http://www.youtube.com/embed/Al5O_XVdMgg
  • die URL oben aus dem Browser-Fenster funktioniert NICHT !






 
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV