HP-Designvorlagen_Designs - Eigenes Design erstellen

Hinweis:
Wir setzen Kentnisse im Bereich CSS / Klassen / HTML voraus !

[b][color=navy]Dieses Tutorial hier soll eine Möglichkeit (von vielen) Beschreiben,
wie Ihr mit Hilfe von CSS ein eigenes Layout erstellen könnt.
Wir benötigen keine Bild-Adressen , keine Grafiken.
Bestehende Textseiten werden natürlich übernommen.

So kann es dann aussehen :

Schritt 1:
- einloggen
- nun auf "Design einstellen"
- wählt aus : "Design CSS"

Schritt 2:
Zunächst müssen wir einige "Klassen" im Design entfernen.
- auf "Design einstellen"
- Im Feld "CSS ohne Style-tags" (ganz unten) einfügen :

Zitat:

div#nav_container{visibility: hidden;}
li.nav_element{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
div.header{display: none;}

Einfügen Linkformatierung:
Schriftgrösse und Farben könnt Ihr nach Wunsch anpassen
Auch ins Feld "css ohne style-tags":

Zitat:

a{color:#FFFFA8; font-size: 14px; text-decoration: none;}
a:hover {color: #FFFFA8; font-size: 14px; text-decoration: none;}
a:link {color: #FFFFA8; font-size: 14px; text-decoration: none;}
a:active {color: #FFFFA8; font-size: 14px; text-decoration: none;}
a:visited {color: #FFFFA8; font-size: 14px; text-decoration: none;}

Einfügen gewünschter Hintergrund-Farbe :
Auch ins Feld "css ohne style-tags"

Zitat:

body {background-color:#c1c1c1;}

Einfügen des Designs : Auch ins Feld "CSS ohne style-tags"

Zitat:

* { padding: 0; margin: 0; }
#Testdesign {
margin: 0 auto;
width: 922px;}

#oben {
color: #FFFFFF;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #07417C;
height: 60px;
margin: 10px 0px 0px 0px;
background-image: none;
background: #07417C;}

#feld_links {
color: #000000;
border: 1px solid #07417C;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 160px;
float: left;}

#content {
float: right;
color: #000000;
border: 1px solid #07417C;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 718px;
display: inline;
overflow:auto;}

#sockel {
width: 900px;
clear: both;
color: #000000;
border: 1px solid #07417C;
background: #07417C;
margin: 0px 0px 10px 0px;
padding: 10px;}

/* Die Navigation mit CSS */

#navi {
margin: 0;
padding: 0;
width: 150px;}

#navi ul, #navi li{
list-style-type: none;
padding-top: 2px;
font-weight: bold;}

#navi li a {
text-decoration: none;
display: block;
width:100%;
padding: 5px;}

#navi a:link, #navi a:visited {
color: #FFFFFF;
background-color: #07417C;}

#navi #akt {
color: #FFFFFF;
background-color: #7F0000;}

#navi a:hover, #navi a:hover#akt {
color: #FFFFFF;
background-color: #000080;}

Nun muss folgendes ins Feld "Text über Design" hinein:

Zitat:

<div id="Testdesign">
<div id="oben">Hier der Header-Bereich</div>

<div id="feld_links">
<ul id="navi">
<li>
<a href="http://Home.htm" id="akt">Home</a>
</li>
<li>
<a href="http://Seite1.htm">Seite 1</a>
</li>
<li>
<a href="http://Seite2.htm">Seite 2</a>
</li>
<li>
<a href="http://Seite3.htm">Seite 3</a>
</li>
<li>
<a href="http://Seite4.htm">Seite 4</a>
</li>
<li>
<a href="http://Seite5.htm">Seite 5</a>
</li>
<li>
<a href="http://G.ae.stebuch.htm">Gästebuch</a>
</li>
<li><a href="http://Kontakt.htm">Kontakt</a>
</li>
</ul>
</div>

Ihr könnt natürlich zwischen <div id="feld_links"> und </div> Eure eigene Navigation einfügen.

Wer die Navigation oben haben möchte, zum Beispiel das "Coolmenü" , der fügt
seinen Navigations-Code zwischen <div id="oben"> und </div> ein

Und ins Feld "Text unter Design" kommt folgendes :

Zitat:

Ihr könnt im unterem farbigen Sockel auch etwas einfügen,
den HTML-Code dann zwischen <div id="sockel"> und </div> einfügen.

Einen Header einfügen:
Euren Header fügt Ihr so ein:

Zitat:

background-image: url(http://Eure Bild-URL.jpg);

Achtet auf diesen Teil des Codes :
Der Header müsste für dieses Beispiel 900 x 60 sein.
Ihr könnt auch höheren Header nehmen, dann bitte den Wert height hier ändern:

Zitat:

#oben {
color: #FFFFFF;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #07417C;
height: 60px;
margin: 10px 0px 0px 0px;
background: #07417C;}

Nach der Vorlage oben könnt ihr euer Design nun selber ändern.

success4you - Newsticker Generator