Dass Du dieses Forum als nicht hilfreich empfindest, liegt an Deiner Vorstellung von Hilfe. Du präsentierst uns schon wieder eine Idee und forderst uns auf, sie für Dich umzusetzen. Das wird hier nicht funktionieren. Dies ist ein Forum, dass Hilfe zur Selbsthilfe gibt. Um mehr positives Feedback zu erhalten, zeige uns Deine bisherigen Ansätze und erläutere Deine Probleme dabei. Bei deren Bewältigung helfen wir Dir gerne.
Wie man grundsätzlich eine Idee umsetzt, habe ich Dir bereits an einem konkreten, von Dir gewählten, Beispiel
mit diesem Post erklärt. Für Deine neue Idee sieht das im Prinzip genauso aus:
1. Zuerst brauchst Du eine leere Seite mit Doctype,
head,
title,
body und allem was dazugehört.
2. Dann kannst Du Deinen Inhalt schreiben und mit
html auszeichnen.
Du möchtest eine Navigation erstellen. Eine Navigation ist eine
ungeordnete Aufzählung/Liste von Menüpunkten. Dafür gibt es das
html-Tag
ul (unordered list, ungeordnete Liste). Da es eine ganz besondere ungeordnete Liste ist, die nur einmal pro Seite vorkommt, geben wir Ihr eine aussagekräftige
id (identifier, eindeutige Bezeichnung), z.B.
navi. Diese hilft uns später bei der Formatierung per
css.
In die ungeordnete Liste fügst Du mehrere
Listenelemente (Deine Menüpunkte) ein. Das
html-Tag dafür lautet
li (list item, Listenelement).
Da die Menüpunkte selbstverständlich anklickbar sein sollen, kommt jetzt noch ein
Link a (anchor, Anker) in das Listenelement. Das ganze sieht dann so aus:
PHP:
<ul id="navi">
<li><a href="supernavi.html">Menüpunkt</a></li>
<li><a href="supernavi.html">Menüpunkt</a></li>
<li><a href="supernavi.html">Menüpunkt</a></li>
<li><a href="supernavi.html">Menüpunkt</a></li>
</ul>
3. Jetzt formatierst Du das Aussehen Deiner Seite (insbesondere der Box) mithilfe von CSS. Im Idealfall muss der Inhalt (
html-Code) dafür gar nicht mehr verändert werden.
a) Deine Menüpunkte (
Listenelemente in der ungeordneten Liste mit id navi) sollen nebeneinander angeordnet werden (
floaten). Sie müssen die Breite des schmalen Bilds, also eine feste
Breite von 113px haben. Damit das ganze klappt, sollten sie außerdem
als Blockelement dargestellt werden. Wenn Du nicht willst, dass die Menüpunkte direkt nebeneinander kleben, sondern einen Abstand haben, definiere einfach einen
Außenabstand links und rechts.
b) Dein Menü (
ungeordneten Liste mit id navi) ist insgesamt so hoch wie beide Bilder übereinander Minus die 3px Überlappung. Das ergibt eine
Höhe von 61px. Die
Breite entspricht der des breiteren Bildes, also
980px. Damit das ganze wieder klappt, auch hier die
Darstellung als Blockelement. Schließlich musst Du das breite Bild noch als
Hintergrundbild zuweisen, das
nicht wiederholt und
am unteren Rand positioniert werden soll.
c) Schließlich formatierst Du noch die Menülinks (
Links in der ungeordneten Liste mit id navi). Auch sie sollten
als Blockelemente dargestellt werden. Die
Höhe beträgt
35px. Das ist soviel wie das schmale Bild hoch ist, welches Du als
nicht wiederholtes Hintergrundbild am oberen Rand setzt. Um die Lesbarkeit zu gewährleisten, solltest Du außerdem
Hintergrundfarbe und
Textfarbe definieren. Darüber hinaus möchtest Du sicher den
Text im Link mittig ausrichten.
Das wars im Prinzip schon. Du hast das umgesetzt,
was Du Dir vorgestellt hast.
Eine Anmerkung sei mir noch erlaubt zur Eignung dieses Menüs für Internetseiten: Die feste Breite in px ist eine starke Einschränkung bezüglich der Zugänglichkeit. Einerseits hat nicht jeder einen Viewport, der groß genug ist, um das Menü ohne horizontales Scrollen anzuzeigen. Andererseits passt sich das Ganze nicht an veränderte Schriftgrößen an, was
hässliche Überlappungen zur Folge haben kann.
Ein Kompromiss wäre es, dieses Menü nur für üblicherweise hochauflösende Ausgabegeräte (Computerbildschirm, Beamer...) anzuzeigen und für alle anderen (Handhelds, Handys...) eine Alternative anzubieten.
Noch besser wäre es, auf vorgefertigte Hintergrundbilder (Hintergrund und Rahmen) zu verzichten und stattdessen Rahmen sowie Hintergrund seperat zu definieren. So kann sich das Menü jederzeit an die Schriftgröße anpassen und ist wesentlich benutzerfreundlicher.
Das soll Dich erstmal nicht abschrecken, Deine Idee umzusetzen. Wenn Du das Schritt für Schritt machst, werden Dir einige "Aha-Erlebnisse" kommen und eine Änderung des Konzepts leicht fallen.
Viel Erfolg,
Junny
