Suche im Forum:
Suchen


Autor Nachricht
Beitrag16.12.2011 um 23:53 (UTC)    
Titel: CSS: Ein neues Feld im Design einfügen

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"
Zitat:

</div>

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
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de