Design Clean
    >> Tipps zum anpassen

Footer

Design Clean: Footer einfügen

Info: Diese Beschreibung funktioniert nur mit dem Baukasten-Design "Clean".

Schritt 1: DIV einfügen

- auf "Design"
- dann auf "Designeinstellungen"
- und unten auf "Erweiterte Einstellungen"
- folgenden HTML-Code einfügen im Feld "Text UNTER Design":

<div id="new_footer">
Hier deinen Inhalt einfügen
</div>

Dieses DIV wird der neue Footer. Dort fügt ihr auch den Inhalt für den Footer ein.

Schritt 2: CSS Code mit den Eigenschaften

- mit dem CSS Code bekommt der neue Footer gewünschtes Aussehen (Breite, Rahmen, Schatten ect.)
- damit wird er auch zwischen Werbelink und Design platziert
- einfügen im Feld "Text über Design", mit vor dem --></style>

/* Aussehen Footer */
#new_footer {
  width: 970px;
  min-height: 100px;
  padding: 15px;
  margin: 15px auto 90px auto;
  overflow: hidden;
  border: 1px solid #c9c9c9;
  background-color: #FFFFFF;
  box-shadow: 1px 0px 5px 1px #777777;
}

/* Werbung unten positionieren */
#footer {
    position: absolute;
    bottom: -350px;
    width: 980px;
    overflow: hidden;
}


Beachtet bitte:

Je kleiner die Minuszahl bei bottom:, desto dichter sitzt der Werbetext an Eurem Footer. Mit der Zahl müsst Ihr testen. Je nachdem, welche Höhe Euer Footer-Feld hat.

Die Werbung muss immer sichtbar bleiben !
Wird die Werbung entfernt, hat das die Sperrung der Homepage zur Folge.


verlinkte Grafiken im Footer einfügen
  • Die verlinkten Grafiken bekommen einen Klassennamen
  • <a href="/Seite.htm"><img class="picture" src="Grafikadresse" alt="bild" /><a>
  • wenn 5 Grafiken eingefügt werden sollen, muss 5 mal der Code eingefügt werden
  • siehe Footer-Code, dort wo steht : Hier deinen Inhalt einfügen
  • mit CSS bekommen die Grafiken gewünschte Richtung und Aussehen

.picture {
   width: 30px;
   height: 30px;
   border: none; 
   margin: 3px 3px; /* Abstand zwischen Grafiken */
   float: right; /* Ausrichtung Rechts */
}

Einen verlinkten Button einfügen

  • füge vor den Grafik-Code ein : <a class="button" href="/Seite.htm">Linktext</a>
  • im Design Clean erzeugt das bereits einen fertigen Button, ohne weiteren CSS-Code
  • damit dieser links sitzt, bekommt er noch ein style="float: left;" dazu
  • <a style="float:left;margin:10px;" class="button" href="/Seite.htm">Linktext</a>





Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :29 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben