FANDOM


Dieses Erklärung kann auch bei manch anderen Anbietern funktionieren (am besten Homepage-Baukasten)

Anleitung 1 Bearbeiten

So kann es aussehen:
http://80.190.202.79/pic/d/design-vorschau/css-design.png


1. Wähle das Design CSS aus

2. Bei CSS ohne Style-Tags folgenden Code einfügen (Klassen entfernen)

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;}

3. Bei CSS ohne Style-Tags folgenden Code einfügen (Links)

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;}

4. Bei CSS ohne Style-Tags folgenden Code einfügen (Hintergrund)

body {background-color:#c1c1c1;}

5. Bei CSS ohne Style-Tags folgenden Code einfügen

  • { padding: 0; margin: 0; }
  1. Testdesign {

margin: 0 auto;
width: 922px;}

  1. oben {

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

  1. feld_links {

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

  1. 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;}

  1. sockel {

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

/* Die Navigation mit CSS */

  1. navi {

margin: 0;
padding: 0;
width: 150px;}

  1. navi ul, #navi li{

list-style-type: none;
padding-top: 2px;
font-weight: bold;}

  1. navi li a {

text-decoration: none;
display: block;
width:100%;
padding: 5px;}

  1. navi a:link, #navi a:visited {

color: #FFFFFF;
background-color: #07417C;}

  1. navi #akt {

color: #FFFFFF;
background-color: #7F0000;}

  1. navi a:hover, #navi a:hover#akt {

color: #FFFFFF;
background-color: #000080;}

6. Folgenden Code bei Text über dem Design einfügen und verändern (Navigation)

<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>

7.