Design "CSS" - Beispiel 2 (zum anpassen)
Einfügen im Feld "css ohne style tags"
Zitat:
/* Nullformatierung für alle Browser */
*{padding: 0px; margin: 0px; }
/* Werbung mittig */
table[height="102"] { margin: auto; }
/* Hintergrund hinter Design */
body {
background-color: #eeeeee;
background-image: url();
font-family: arial;
font-size: 14px;
color: #000000; }
/* Design-Container */
#container {
width: 962px;
margin: 10px auto;
overflow: hidden; }
/* Headerfeld 960 x 120 */
#header_container {
width: 960px;
height: 120px;
margin-bottom: 10px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }
/* Titel im Headerfeld entfernt */
h1#header {display: none; }
/* Feld der Navigation */
#nav_container {
width: 960px;
height: 40px;
margin-bottom: 10px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }
/* Titel über Navigation entfernt */
#nav_heading {display: none; }
/* Aufzählungspunkte in Navi entfernt */
ul#nav {
list-style-type: none; }
/* Navi-Buttons */
li.nav_element {
width: 120px;
height: 40px;
float: left;
text-align: center;
border-right: 1px solid #c9c9c9;
background-color: #FFFFFF;
background-image: url(); }
/* Hover Navi-Button */
li.nav_element:hover { background-color: #202020; }
/* Linktexte in Navigation */
li.nav_element a {
display: block;
font-size: 15px;
color: #000000;
line-height: 40px;
text-decoration: none; }
/* Hover Linktexte Navigation */
li.nav_element a:hover { color: #FFFFFF; }
/* Seiteninhalt */
#content {
float: left;
width: 665px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9;
overflow: hidden; }
/* Titel Seiteninhalt + Titel über Box */
h2#title , #sidebar_heading {
padding: 5px 0px 5px 20px;
margin: -20px -20px 15px -20px;
background-color: #dddddd;
color: #000000;
font-size: 14px;
font-weight: normal; }
/* Link im Seiteninhalt */
#content a {color: #000080; }
/* Hover Link im Seiteninhalt */
#content a:hover {color: #008080; }
/* Rechte Box */
#sidebar_container {
float: right;
width: 200px;
min-height: 200px;
padding: 20px 20px 20px 20px;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9;
overflow: hidden; }
/* Liste in rechter Box */
#sidebar_content ul {
list-style-type: square;
margin: 15px 0px 15px 25px; }
/* Linktexte in Box */
#sidebar_content ul li a {
color: #000000;
font-size: 14px;
text-decoration: none; }
/* Hover Linktexte Box */
#sidebar_content ul li a:hover { color: chocolate; }
/* Feld unter dem Design */
#footer {
width: 920px;
padding: 20px 20px 20px 20px;
margin: auto;
background-color: #FFFFFF;
background-image: url();
border: 1px solid #c9c9c9; }
/* unnötige Felder im Design entfernt */
#pre_header {display:none;}
#post_header {display:none;}
#post_content {display:none;}
#below_content{display:none;}
#counter{display:none;}
Ihr könnt die Position von Box und Seiteninhalt tauschen.
#content (Seiteninhalt) hat ein float: left; und sitzt deshalb Links.
#sidebar_container (rechte Box) hat ein float: right; und sitzt deshalb Rechts.
Tauscht einfach die beiden Eigenschaften aus
Erklärung:
- background-color = Hintergrundfarbe
- background-image = Hintergrundgrafik, einfügen in leerer Klammer ()
- color = ist immer Textfarbe
- font-size = ist immer die Textgröße
- font-family = ist immer die Schriftart
- border: 1px solid #c9c9c9 = Rahmenstärke | Rahmenart | Rahmenfarbe
Schritt 2: Einfügen im Feld "Text UNTER Design"
Zitat:
<div id="footer"> Inhalt </div>
Ersetze das Wort Inhalt durch gewünschten Inhalt.
Schritt 3: Navigation anpassen
Im Menü oben ist Platz für ca. 7-8 erstellte Seite. Das ist abhängig von der Länge eurer Seitenititel.
Seiten, die oben zuviel sind, versteckt ihr mit dem Extra "versteckte Seiten"
Auf die versteckten Seiten verlinkt ihr im Feld "erste rechte Box". Einfügen Feld "erste rechte Box" :
Zitat:
<ul>
<li> <a href="/Titel.htm">Linktext 1</a> </li>
<li> <a href="/Titel.htm">Linktext 2</a> </li>
<li> <a href="/Titel.htm">Linktext 3</a> </li>
<li> <a href="/Titel.htm">Linktext 4</a> </li>
<li> <a href="/Titel.htm">Linktext 5</a> </li>
</ul>
Beispiel:
- Deine versteckte Seite hat die URL http://meineSeite.de.tl/Kontakt.htm
- füge im Code ein: /Kontakt.htm
- die komplette URL mit http://www..... ist nicht notwendig, da auf eigene Seiten verlinkt wird
