Welches Menü?

[Ralph]

Hallo, ich habe vor, ein neues Menü für meine Website zu machen, da das alte ziemlich unübersichtlich ist. Da ich mich mit CSS, Java und PHP nicht so gut auskenne (mit Java überhaupt nicht), wollte ich mal nachfragen, wie ich das am besten bewerkstelligen kann.
Natürlich soll das Menü in jedem gängigen Browser und mit jeden normalen Auflösung gut aussehen .

Zunächst einmal : soll ich Frames verwenden oder welche Alternativen gibt es? Habe u.a. gehört, dass Tabellen eine elegantere Lösung als Frames wären.


CSS scheint mir momentan die beste Lösung zu sein, ich dachte an sowas :

HTML-Code:

<style type="text/css">
 <!--
 A.menulink {
        display: block;
        width: 125px;
        text-align: center;
        text-decoration: none;
        font-family: Arial;
        font-size: 13px;
        color: yellow;
        background-color: red;
        border-style: solid;
        border-width: 2px;
        border-color: orange;
 }

 A.menulink:hover {
        border-style: solid;
        border-width: 2px;
        border-color: #008C00;
        color: green;
        background-color: black;
 }
 -->
</style>

<table border="0" width="110" align="center">
  <tr>
    <td><a href="hauptseite.html" class="menulink" title="Hauptseite">Hauptseite</a></td>
  </tr>
  <tr>
    <td><a href="smpcgames.html" class="menulink">SM PC-Games</a></td>
  </tr>
  <tr>
    <td><a href="smpcchallenge1.html" class="menulink">SM PC Challenge 1</a></td>
  </tr>
  <tr>
    <td><a href="smpcchallenge2.html" class="menulink">SM PC Challenge 2</a></td>
  </tr>
</table>

[Spark Amandil]

Ich würde es mir hier noch einfacher machen und auch auf Tabellen verzichten, sowie an Frames gar nicht mehr denken. Heutzutage gibts zum Glück saubere Lösungen die die gleichen Ergebnisse auch ohne Frames unterstützen. Tabellen hingegen wären nicht wirklich ein Unterschied weil sie eine vollkommen andere Funktion als Frames unterstützen.
Eine Liste nach dem Aufbau

HTML-Code:

<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
</ul>

wäre hier vom Umfang und der Verarbeitung her vermutlich das angenehmste. Auch wenn du nicht viel PHP kannst bzw überhaupt nicht kann man einen leichten Kniff anlegen der es zumindest erlauben würde dass das Menü nur einmal geschrieben wird und sich dann in jede Seite eingliedert.

http://www.tizag.com/phpT/include.php
hier wäre eine sehr einfache Lösung nachzuschlagen. Ist zwar streng genommen keine sonderlich gute, für den Anfang sollte sie es aber allemal tun

[Ralph]

Oha, die Include-Funktion kannte ich noch nicht, die ist ja in der Tat sehr praktisch .

Also, da ich das Menü links haben möchte wäre es doch eigentlich angebracht, Tabellen zu benutzen, oder welche andere Lösungen gibt es noch?
Wie das mit einer Liste zu realisieren wäre, leuchtet mir nicht ein ...

[Spark Amandil]

Setz einen Div-Container zB <div id="XYZ"></div> in diesen Div kommt der Befehl für das Include hinein.
Den Div kannst du mittels eines Stylesheets konfigurieren. Als Beispiel könntest du dann das hier in den HEAD-Bereich des Dokuments schreiben oder auf ein externes Stylesheet auslagern (bei letzteren ist der style-tag nicht notwendig)

HTML-Code:

<style>
#XYT {
position: absolute;
top:50px;
left: 20px;
width: 200px;
}</style>

In diesem Beispiel wäre es dann eine einzelne "Box" die eine Breite von 200 Pixeln misst und 50px vom Kopf der Seite, und 20px vom linken Rand entfernt platziert ist. Mehr zum Nachlesen für CSS findet sich zb auf www.css4you.de
Wenn ein Stylesheet zu kompliziert für den Anfang erscheint, kann diese Anweisung auch direkt in den Div geschrieben werden. Das sähe dann so aus <div style="position:absolute; top:50px; left:20px; width:200px;"></div> aus.

Sehr geringer Arbeitsaufwand und für die Gestaltung sowie Wartung einer Website wesentlich besser geeignet als jede Tabelle

[Ralph]

Wow, danke, hast mir sehr geholfen .
Ich habe CSS bislang nur verwendet, um Link- und Hintergrundfarben zu definieren sowie Texte zu formatieren. Aber so, in Kombination mit PHP-Include, ist das wirklich ein sehr guter Ersatz für Frames.

[Spark Amandil]

CSS ist in der Tat ein sehr eindrucksvolles Mittel um Websites zu gestalten. Viele Seiten bestehen meist nur aus einer kleinen handvoll Divs und deren Inhalt. Die komplette Optik wird dabei in das Stylesheet ausgelagert was den Code enorm klein und unglaublich konfigurierbar hält
Auf die Weise lassen sich eben auch listen aus ul / li bestehend recht leicht in allen mannigfaltigen aussehen realisieren um eine möglichst individuelle und Code-konforme Navigation zu erstellen.

[rgb]

http://www.tizag.com/phpT/include.php
hier wäre eine sehr einfache Lösung nachzuschlagen. Ist zwar streng genommen keine sonderlich gute, für den Anfang sollte sie es aber allemal tun

...

Wieso denn ein include?
Ich würde eher das im <head> bereich benutzen.

HTML-Code:

<link rel="stylesheet" type="text/css" href="deinedatei.css" />

Dann muss man wenigstens php nicht mit design vermischen.

Ist zwar streng genommen keine sonderlich gute, für den Anfang sollte sie es aber allemal tun

...

Naja, lieber gleich am Anfang die richtige Methode lernen, und nicht sowas komisches.

[Spark Amandil]

Oder richtig lesen
Ich hab extra gesagt dass man das Stylesheet entweder in eine externe Datei oder in den Head schreiben könne. Das Include galt der Möglichkeite Inhalte wie die Navigation oder den Content zu laden sodass nicht ständig auf jeder Seite beides geschrieben werden muss. Mit den CSS-Angaben hatten diese Bemerkungen überhaupt nichts zu tun.

[rgb]

Ups, ja stimmt.

Naja, wenigstens kennt er jetzt den Befehl zum einfügen externer css Dateien.

Erklärende ergänzung @Ralph: In die css Dateien schreibst du die Befehle wie hier:

HTML-Code:

#XYT {
position: absolute;
top:50px;
left: 20px;
width: 200px;
}

einfach untereinander rein. (Oder nebeneinander, wie du willst, aber untereinander ists übersichtlicher.)

[Ralph]

Danke, aber externe CSS-Dateien kannte (und nutzte) ich schon vorher , habe sie halt nur zur Textformatierung genutzt. Ich bin aber jetzt mal dabei, mein CSS-Wissen zu erweitern, damit mir nicht nochmal so nützliche Funktionen wie position:absolute entgehen .