Beispiel Nr. 4:
Navigation links , rechts scrollbare rechte Box
So kann es aussehen, alle Farben und Masse sind änderbar:
Schritt 1:
- wir entfernen zuerst einige Klassen im Design "CSS"
- auf "Design einstellen"
- ganz unten ins Feld "css ohne style-tags" einfügen :
Zitat:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
Schritt 2:
Hintergrund-Farbe und Farben / Grösse der Links bestimmen:
- Grösse 15px; Farbe #800000 .... könnt Ihr beliebig ändern
- Links unterstrichen ? dann text-decoration: underline; einfügen
- auch einfügen ins Feld "css ohne style-tags"
Zitat:
body {background-color:#808080;}
a{color:#000080; font-size: 15px; text-decoration: none;}
a:hover {color: #000080; font-size: 15px; text-decoration: none;}
a:link {color: #000080; font-size: 15px; text-decoration: none;}
a:active {color: #000080; font-size: 15px; text-decoration: none;}
a:visited {color: #000080; font-size: 15px; text-decoration: none;}
Schritt 3:
Einfügen der Navigation
- wir verwenden hier die Navigation des Design "CSS"
- eigenen Button könnt Ihr einfügen bei : background-image:url();
- achtet auf die Breite und Höhe im Code bei eigenen Buttons
- Code auch einfügen im Feld "css ohne style-tags"
Zitat:
li.nav_element a{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#4D4D4D;}
li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#919191;}
Der Wert margin: 5px; bestimmt die Abstände ziwschen den Navi-Buttons
Schritt 4 :
Einfügen des Layouts
- wir verwenden hier 3 Klassen des Designs "CSS"
- die Navigation hat im Design "CSS" die Klasse nav_container
- Rechte Box im Design "CSS" die Klasse sidebar_container
- Textfeld hat im Design "CSS" die Klasse "content
Diesen Code auch einfügen im Feld "css ohne style-tags"
Zitat:
* { padding: 0; margin: 0; }
#Design04 {
margin: 0 auto;
width: 922px;}
#Header_oben {
height: 70px;
width: 900px;
background: #3C3C3C;
background-image:url();
color: #FFFFFF;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;}
#nav_container {
width: 120px;
height: 340px;
background: #C0C0C0;
background-image:url();
color: #000000;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;}
#content {
height: 340px;
width: 556px;
background: #F2F2F2;
background-image:url();
color: #000000;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
display: inline;
float: left;
overflow:auto;}
#sidebar_container {
height: 340px;
width: 180px;
background: #C0C0C0;
background-image:url();
color: #000000;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
float: right;
overflow:auto;}
#Feld_unten {
width: 900px;
background: #3C3C3C;
color: #FFFFFF;
clear: both;
border: 1px solid #6E6E6E;
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{display: none;}
Das overflow:auto;} erzeugt ein scrollbares Feld
color = Textfarbe im Feld
background-image:url(); bei eigenem Bild käme Bild-URL in die Klammer hinein
--------------------------------------------------------------------------------------------------------------
Schritt 5:
Einfügen in das Feld ---> "Text über Design"
Zitat:
<div id="Design04">
<div id="Header_oben">Hier evt eigener Text Feld Header</div>
--------------------------------------------------------------------------------------------------------------
Und letzter Schritt:
Einfügen in das Feld "Text unter Design" :
Zitat:
<div id="Feld_unten"><b>Hier unten könnt Ihr auch etwas einfügen</b></div></div>
Gruss Wolle
