iceblue-test
  Themenbox
 

Themen- oder Kategorieboxen :

zur Gestaltung von z.B. Startseiten für die Themenübersicht.


Beispielbox / hier Platz für deinen Titel

Hier kurzer Text.
Das Bild (links) darf maximal 150 Pixel breit sein. Die Bild-Höhe dürft Ihr frei wählen. In der Länge passt sich die Box an. Wieviel Zeilen Text daneben passen, hängt von der Höhe des Bildes ab. Je mehr Höhe das Bild hat, desto mehr Zeilen Text. >>.... mehr >>


Beispielbox / hier Platz für deinen Titel

Hier kurzer Text.
Am Ende eurer Kurzbeschreibung solltet ihr einen Link einfügen, der dann auf eure Themen-Seite führt. Ihr verlinkt einfach den Text >> mehr >> wie folgt:

<a href="Hier Link"> >> mehr >> </a>


Beispielbox / hier Platz für deinen Titel

Hier habe ein ein Bild in Größe 150 x 70 Pixel verwendet. Nun ist hier weniger Platz für Text. Zuviel Text solltet ihr in Themenboxen auch nicht einfügen. Verlinkt auf eure Themenseite.     >>..... mehr >>



Schritt 1 :


  • ein Beispiel für 3 Themenboxen
  • auf "Eigene Seiten editieren"
  • wähle Seite aus / oder erstelle neue Seite
  • nun ist die Seite zum Bearbeiten offen
  • im Editor oben links auf "Quellcode" klicken
  • nun ist deine Seite in der HTML Ansicht
  • nun diesen HTML Code einfügen


<div class="themabox">
<h2>Hier dein Titel einfügen</h2>
<div class="themabild"> Hier dein Bild </div>
<div class="thematext"> Hier dein Text </div>
</div>

<br />
<br />

<div class="themabox">
<h2>Hier dein Titel einfügen</h2>
<div class="themabild"> Hier dein Bild </div>
<div class="thematext"> Hier dein Text </div>
</div>
</div>

<br />
<br />

<div class="themabox">
<h2>Hier dein Titel einfügen</h2>
<div class="themabild"> Hier dein Bild </div>
<div class="thematext"> Hier dein Text </div>
</div>


Dein Bild darf maximal 150 Pixel breit sein. Die Höhe ist egal.
Ideale Bildergröße 150 x 70 Pixel . Das Bild fügt Ihr an der Stelle im
Code ein, wo der Text "Hier dein Bild" steht. Auch via HTML Code :

<img alt="Bild" src="http://......../.........jpg">



Schritt 2:


  • noch haben die Boxen kein Aussehen
  • das bekommen die Klassen nun mit CSS-Anweisungen
  • auf "Design einstellen"
  • dann auf "erweiterte Einstellungen" klicken
  • dort ist das Feld "Text ÜBER Design"
  • folgenden Code einfügen, VOR eurem --></style>


/* Themenbox */
.themabox {
  width: 480px;
  padding: 10px;
  overflow: hidden;
  margin: auto; 
  background-color: #EEEEEE;
  border: 1px solid #c9c9c9;
  -moz-box-shadow: 5px 5px 5px #565656;
  -webkit-box-shadow: 5px 5px 5px #565656;
  box-shadow: 5px 5px 5px #565656;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#111111', Direction=135, Strength=7); }

/* Aussehen Titel in der Box */
.themabox h2 {
  width: 480px;
  font-size: 16px;
  font-family: georgia, arial;
  color: #343434; 
  margin-bottom: 8px; }

/* Feld für das Bild */
.themabild {
  width: 150px;
  float: left;
  overflow: hidden; }

/* Feld für den Text */
.thematext {
  width: 310px;
  float: right;
  overflow: hidden;
  font-size: 12px;
  font-family: arial;
  color: #000000; }









 
  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