Suche im Forum:
Suchen


Autor Nachricht
Beitrag18.12.2011 um 15:35 (UTC)    
Titel: Div-Boxen im Seiteninhalt erstellen

Div-Boxen erstellen und gestalten :

Eine einfache Art, die es erlaubt Boxen für News oder Infos zu gestalten.
Vorschau:


Schritt 1: Der HTML Code
Im Seiteninhalt fügen wir den HTML-Code für das DIV ein.
Dem DIV geben wir einen Klassen-Namen.

- Einloggen in Homepage
- im Hauptmenü auf "Seiten" klicken
- wähle die Seite aus, wo das Feld hinein soll
- nun oben links im Editor auf "Quellcode" klicken

Zitat:

<div class="box"> Hier käme dein Inhalt hinein </div>

Ihr könnt es beliebig oft im Seiteninhalt einfügen, wenn mehrere DIV Felder benötigt werden.

Schritt 2: Der CSS Code
CSS-Design: Einfügen im Feld "CSS ohne Style Tags"
alle anderen Designs: Einfügen im Feld "Text über dem Design", vor dem --></style>

Zitat:

.box {
background-color: #008080;
border: 1px solid #c9c9c9;
color: #ffffff;
width: 300px;
padding: 5px;
margin: 5px;
overflow: hidden;
}


Mit dem CSS Code hat das DIV im Seiteninhalt nun ein Ausssehen bekommen.
Das Aussehen kannst du anpassen oder auch erweitern :

background-color: = Hintergrundfarbe im DIV
border: = Rahmen um das DIV
color: = Schriftfarbe im Feld
width: = Breite des Feldes
padding: = Innenabstand zu allen 4 Seiten
margin: = Außenabstand um das DIV herum
overflow: hidden; = Feld ohne Scrollbalken, passt sich in der Höhe dem Inhalt an

Tipp:
Das Feld können wir scrollbar machen. Es muss im CSS Code noch eine Höhe bekommen.
Und aus overflow: hidden; machen wir ein overflow: auto;

edit by Matsk: 14.04.2014 - 21:13 Uhr
______________
Gruß Pexxi


Zuletzt bearbeitet von pexxi am 14.04.2014, 20:14, insgesamt 3-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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