Ein Feld erstellen und positionieren
Eine Beschreibung für alle Baukasten-Designs
Wir können zusätzliche Felder im Design einfügen
- und an jede beliebige Stelle setzen (z.B. auf den Header)
- mit beliebigen Inhalt füllen, z.B. mit Icons (Twitter / Facebook / Youtube)
- siehe Beispiel-Grafik
Schritt 1: Ein DIV um das Design legen
Damit verhindern wir, das sich das Feld verschiebt, wenn das Browserfenster verkleinert wird.
- Einfügen im Feld " Text ÜBER Design"
- Beachte bitte: Dieser Code muss als erstes (ganz oben) im Feld "Text über Design" platziert werden
- das Feld muss die Breite (bei width) bekommen, die auch dein Design hat
- alle Größen findest Du hier: http://www.homepage-baukasten.de/forum/viewtopic.php?t=101597
Zitat:
<div style=" width:XXXpx; margin: 0px auto; overflow:hidden;">
Und einfügen im Feld "Text UNTER Design"
Wenn Ihr im Feld "Text UNTER Design" bereits Inhalt stehen habt, dieses DIV als letztes einfügen !
Schritt 2: Ein neues DIV einfügen
- nun kommt unser neues Feld, das wir auf das Design setzen
- den Namen (die ID) für das Feld können wir frei wählen
- z.B. die id "new_box"
- folgender HTML-Code kommt in das Feld "Text über Design"
- Achtung: Wenn Ihr dort CSS-Codes eingefügt habt, einfügen NACH dem --></style>
Zitat:
<div id=" new_box"> Hier dein Inhalt </div>
Schritt 3: Der CSS-Code
Noch können wir das neue Feld nicht sehen. Ihm fehlt das gewünschte Aussehen.
Die bekommt das neue Feld mit CSS-Eigenschaften (Breite / Höhe / Position u.s.w.)
Du verwendest das Baukasten-Design "CSS" ?
Folgenden Code einfügen im Feld "css ohne style tags" (OHNE die style-tags)
Du verwendest ein anderes Baukasten-Design ? :
Folgenden Code einfügen im Feld "Text über Design"
Zitat:
<style type="text/css">
<!--
#new_box {
position: absolute;
margin-top: 150px;
margin-left: 200px;
width: 200px;
height: 80px;
border: 1px solid #000080; }
-->
</style>
Schritt 4 : Das Feld positionieren
- das Feld bekommt gewünschte Breite bei width:
- gewünschte Höhe bekommt es bei height:
- margin-top: ist der Abstand nach oben. Je höher die Zahl, desto tiefer platziert ihr es
- margin-left: ist der Abstand nach Links. Je höher die Zahl, desto weiter nach Rechts platziert ihr es
- border: 1px solid #000080; = Der Rahmen (kann entfernt werden, wenn das Feld positioniert ist)
Und Schritt 5: Den Inhalt einfügen
Im Feld "Text über Design" haben wir das <div id="new_box"> Hier dein Inhalt </div> eingefügt.
Ersetze den Text "Hier dein Inhalt" durch .... gewünschten Inhalt.
Wenn z.B. ein verlinktes Twitter-Icon hinein soll , dann fügst du ein :
Zitat: <a href=" Link zum Twitter-Account"><img src=" Grafikadresse" alt="bild" border="0" /></a>
Passende twitter- , facebook-, youtube- und Messenger-Icons findet ihr auf http://findicons.com
Gwünschte Grafik speichern, hochladen im Baukasten und Grafikadresse im Code einfügen.
Gruß Wolle
Zuletzt bearbeitet von find-templates am 18.12.2011, 21:44, insgesamt 10-mal bearbeitet
|
