Iceblue-CSS

Navigation oben

Navigation auch oben

Was erklären die 3 folgenden Schritte ?

Wir erstellen 1 Div Feld
das DIV positionieren wir auf den Header (oben)
das DIV hat 4 weitere Div's als Inhalt
in den 4 Divs fügen wir unsere Seiten-Links ein
siehe die folgenden Schritte :

Schritt 1 :

zuerst die CSS-Anweisungen für die "Navi oben" einfügen
damit bekommen die (DIV) Felder ihr Aussehen (Breite / Farben / Rahmen u.s.w.)
Einfügen im Feld "Text über Design"
noch vor dem --> </style>

/* Feld für das Menu */
#Menu_Box {
  width: 650px; /* Breite  */
  position: absolute; 
  left: 50%; /* = NICHT ÄNDERN ! */
  margin-left: -304px; /* nach LINKS + RECHTS verschieben */
  margin-top: 190px; /* nach OBEN + UNTEN verschieben */
  overflow: hidden;}

/* die 4 DIV Felder */		
#link_1, #link_2, #link_3, #link_4  {
  float: left;  /* Buttons nebeneinander */
  text-align: center;
  margin-right: 8px;   /* Abstand zwischen Buttons */
  overflow: hidden; }

/* das Aussehen der 4 Links */
#link_1 a, #link_2 a, #link_3 a, #link_4 a {
  display: block; /* = Verlinkung füllt Feld aus */
  width: 148px; /* = Breite des Button */
  height: 20px; /* = Höhe des Button */
  line-height:20px; /* = muss Höhe bekommen, die auch height hat */
  margin-top: 30px; /* = nur notwendig, wenn Hover-Effekt verwendet wird */
  color: #cccccc;  /* = Linkfarbe */
  font-size: 14px;  /* = Link Textgroeße */
  font-family: arial; /* = Link Schriftart */
  text-decoration: none; /* = Link nicht unterstrichen */
  background-color: #555555;  /* = Hintergrundfarbe Link */
  border: 1px solid #bbbbbb;  /* = Rahmen */
  -moz-border-radius-topleft: 10px; /* = abgerundete Ecke oben links */
  -moz-border-radius-topright: 10px; /* = abgerundete Ecke oben rechts */
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;}
		
/* Der Hover Effekt fuer die Links */
#link_1 a:hover, #link_2 a:hover, #link_3 a:hover, #link_4 a:hover {
  font-size:15px;
  margin-top: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  font-weight: bold;
  background-color: #6f8ac4; }

Beachte bitte:
Wenn Dein Feld "Text über Design" noch keine CSS-Codes enthält:

dann schreibe vor dem Code: <style type="text/css"><!--
und nach dem Code: --></style>
damit der Browser die CSS-Anweisungen versteht und ausführt
weitere CSS-Codes, die später einmal folgen, kommen vor dem --> </style> mit hinein

Schritt 2:

noch sehen wir keine Veränderung im Design
wir haben nur das Aussehen der Div's bestimmt

nun fügen wir die DIV- Felder ein
Einfügen im Feld "Text über Design"
weil es HTML ist, nach dem --> </style> einfügen !

<div id="Menu_Box">
<div id="link_1"> <a href="HIER DEIN LINK">TEXT</a> </div>
<div id="link_2"> <a href="HIER DEIN LINK">TEXT</a> </div>
<div id="link_3"> <a href="HIER DEIN LINK">TEXT</a> </div>
<div id="link_4"> <a href="HIER DEIN LINK">TEXT</a> </div>
</div>

Statt Hier dein Link fügst du die URL der Seite ein,
die geöffnet werden soll. URL = http://www...............htm
Dort wo TEXT steht, fügst du gewünschten Text ein, den Besucher anklicken sollen.

Schritt 3 : Navigation verschieben

Siehe im 1. Code das #Menu_Box {

hat ein margin-top:
und ein margin-left:

Nach Links / Rechts verschieben ? Die Minuszahl neben margin-left: erhöhen / verkleinern
Höher / Tiefer setzen = die Zahl neben margin-top erhöhen / verkleinern.

Ergänzung für Navigation oben :

Button der aufgerufenen Seite farblich hervorheben

Die 4 Seiten, die in der "Navi oben" verlinkt sind, bekommen als Inhalt
die CSS-Anweisungen, die auch das a:hover bekommen hat.

auf "Eigene Seiten editieren"
wähle die erste Seite aus, die Du oben verlinkt hast
nun ist die Seite zum bearbeiten offen
oben im Editor auf Quellcode klicken
deine Seite ist nun in der HTML-Ansicht
füge nun zu Beginn der Seite folgende CSS-Anweisung ein :

Seite 2 bekommt den gleichen Code mit#link_2 a{ vorweg
Seite 3 bekommt gleichen Code mit #link_3 a{ vorweg
Seite 4 bekommt gleichen Code mit #link_4 a{ vorweg

Möglichkeit 2: Das " Coolmenü"

Wer oben eine Navigation wünscht , die bei Mauskontakt ausfährt / ausklappt,
der sollte sich diese Beschreibung von mir ansehen ansehen

Die Ausklappbaren Menü's nennen sich auch Dropdown-Menu oder Coolmenu .
Da der Baukasten immer ein eigenes Menü besitzt, muss das externe "Coolmenü" auf das Baukasten-Design platziert werden. Siehe in der Beschreibung.