Hallo,

unter folgendem Link findet ihr meine Drop Down Navigation:
http://www.sebastianrost.de/pfs-test/html/home.html

Soweit funktioniert die Navigation ganz gut, nur eine kleine Sache stört mich noch. Beim Überfahren der Navigationspunkte öffnet sich wie gewollt das drop down menü. Ziehe ich nun die Maus noch oben oder zu den Seiten hin weg, bleibt das Menü weiterhin geöffnet. Das finde ich nicht so gut und ich denke man müsste in meiner verwendeten .js eine entsprechende funktion hinzufügen:

Code

window.onload=montre; 
function montre(id) { 
var d = document.getElementById(id); 
	for (var i = 1; i<=10; i++) { 
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} 
	} 
if (d) {d.style.display='block';} 
} 

Würde mich freuen, wenn ihr mir mal wieder helfen könntet. Danke
Sero

Du könntest für das Hauptmenü noch das Ereignis onmouseout hinzufügen:

<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<a href="projects_overview.shtml">profile</a></dt>

Allerdings könnte es dann passieren, daß dann das Submenü nicht mehr erreichbar ist.

Hallo Sero

Lang, lang ist her seit ich das mal machen musste. Aber ich meine mich zu erinnern, dass eine 100%-Lösung darin bestand, ein Layer unter die Navigation zu legen, die mindestens 1px grösser ist als die Navigation selbst. In diesem Layer findet nun ebenfalls eine onmouseover Abfrage statt. Das sollte die Unternavigation zum kollabieren bringen.
Ich weiss nicht, ob das immer noch so ist, aber onmouseout hatte immer mal wieder Schwierigkeiten mit schnellen Bewegungen des Cursors.

Gruss
Martin

Ich würde es damit versuchen:
http://www.alistapart.com/articles/dropdowns

Hallo,

ich habe mal Sabines 1. Vorschlag mit

Code

onmouseout="javascript:montre('');" 

getestet.
Meiner Meinung funktioniert das ausgezeichnet. Ich habe es in allen aktuellen Browsern getestet und das Menue ist ueberall erreichbar. Sobald ich wieder FTP zugang habe, schicke ich euch mal das Ergenis zum selber testen.

Danke fuer die Hilfe,
Gruss Sero

Hallo Leute,

hier findet ihr die fertige Seite:
http://www.sebastianrost.de/pfs-test/html/home.html. Wie gesagt die Navigation funktioniert jetzt recht gut.
Ich habe auch gleich noch eine andere Frage:
Die Seite zeigt das Gesamtlayout für die Projektpräsentation. Dabei wechselt für jedes Projekt das Bild (bzw. Slideshow per Flash) die Überschrift, der Text. Die Anzahl der einzelnen Projekte schätze ich derzeit auf ca. 50. Normalerweise kopiere ich diese Vorlage und erstelle für jedes Projekt eine neue html. Nun meine Frage: könnte man das auch noch eleganter lösen, heisst man hat nur eine Vorlage und referenziert die unterschiedlichen Inhalte mit der Vorlage. Verwendet man hierfür php? Welche Heangehensweise schlagt ihr vor.

Danke Sero

Hallo Sero,

das klappt ja wunderbar mit der Navigation.
Getestet habe ich mit Opera und Firefox.

>> Dabei wechselt für jedes Projekt das Bild (bzw. Slideshow per Flash) die Überschrift, der Text.

Du könntest die unveränderlichen Codeteile der Gesamtseite mit SSI in die 50 verschiedenen HTML-Seiten einbinden.

http://de.wikipedia.org/...Server_Side_Includes

zum Beispiel:

<!--#include virtual="/header.html" -->

Hier der HTML-Code, der sich innerhalb der Seite ändert.

<!--#include virtual="/footer.html" -->

Hier habe ich mal ein anderes Beispiel mit SSI gepostet:

http://www.hilfdirselbst.ch/..._P208099.html#208099

Durch Auswertung des QUERY_STRING, kannst Du verschiedene HTML-Bereiche im Browser anzeigen.
So kannst Du Dir sogar die 50 verschiedenen HTML-Seiten sparen:


<!--#if expr="$QUERY_STRING='1'" -->
Inhalt Seite 1
<!--#elif expr="$QUERY_STRING='2'" -->
Inhalt Seite 2
<!--#elif expr="$QUERY_STRING='3'" -->
Inhalt Seite 3
<!--#else -->
Standardinhalt
<!--#endif -->

Anzeigen der verschiedenen Inhalte:

http://example.com/seite.html?1
http://example.com/seite.html?2
http://example.com/seite.html?3

Hi Sabine,

klingt gut, dass es da ne Möglichkeit gibt, ich werd's auf jeden Fall mal ausprobieren. Ergebnis poste ich wieder ins Forum.

Gruß Sero

Hallo Sabine,

bin gerade dabei dein Vorschlag umzusetzen, komme aber irgendwie nicht weiter. Die SSI Einbundung ist mir schon bekannt und ich habe das auch schon mehrfach so gemacht, allerdings verstehe ich die Umsetzung des QUERY_STRING noch nicht ganz. Könntestdu das vielleicht noch mal genauer erklären.

Nehmen wir mal an der Inhalt eines Absatztextes und ein Bild soll jeweils wechseln. Liegt der auszutauschende Inhalt/Bild in einer separaten Datei. Wie rufe ich die html mit dem gewünschten Inhalt auf (wie sieht der link dazu aus)?

Gruss Sero

Hallo Sero,

hast Du das schon ausprobiert?

Ich gehe mal davon aus, daß auf Deinem Server die Dateiendung für SSI .shtml sein muß.

Inhalt von seite.shtml

<!--#if expr="$QUERY_STRING='1'" -->
Inhalt eines Absatztextes und ein Bild. Wird angezeigt, wenn der QUERY_STRING gleich 1 ist.
<!--#elif expr="$QUERY_STRING='2'" -->
Inhalt eines Absatztextes und ein Bild. Wird angezeigt, wenn der QUERY_STRING gleich 2 ist.
<!--#elif expr="$QUERY_STRING='3'" -->
Inhalt eines Absatztextes und ein Bild. Wird angezeigt, wenn der QUERY_STRING gleich 3 ist.
<!--#else -->
Standardinhalt, wenn die obigen 3 Bedingungen alle nicht zutreffen.
<!--#endif -->


>> Wie rufe ich die html mit dem gewünschten Inhalt auf (wie sieht der link dazu aus)?

http://example.com/seite.shtml?1
http://example.com/seite.shtml?2
http://example.com/seite.shtml?3


Der QUERY_STRING enthält die Zeichenkette nach dem ersten ? in der URL.

Je nach dem welche Zeichenkette im QUERY_STRING steht, in diesem Beispiel 1, 2 oder 3, wird verschiedener Inhalt angezeigt.

>> Liegt der auszutauschende Inhalt/Bild in einer separaten Datei
Das kann man auch machen.

Du ersetzt zum Beispiel den Text aus dem obigen Beispiel:

Inhalt eines Absatztextes und ein Bild. Wird angezeigt, wenn der QUERY_STRING gleich 1 ist.

durch:

<!--#include virtual="/inhalt1.txt" -->
Den Text "Inhalt eines Absatztextes und ein Bild. Wird angezeigt, wenn der QUERY_STRING gleich 1 ist."
in inhalt1.txt speichern.

Hallo Sabine,

nochmal vielen Dank für die Erläuterung. Prinzip habe ich jetzt verstanden und es ist eigentlich ganz einfach. Nur eine Sache funktioniert noch nicht ganz. Wie du mir bereits geschrieben hast, kann ich aucbh die auszuwechselnden Inhalte in eine txt auslagern. Nun liegen die auszutauschenden Inhalte (im Bsp. Bild und Text) nicht hintereinander in meiner shtml (siehe Code Auszug). Wie kann ich nun zuweisen, das der 1. Inhalt = Bild und der 2. Inhalt = Text ist. Ich hoffe du verstehst, was ich meine.

Hier ein Auszug meiner shtml:

Code

<!--#if expr="$QUERY_STRING='1'" --> 
<!--#include virtual="inhalt1.txt" --> 
 
<!--#else --> 
Slideshow 
<!--#endif --> 
 
</div><!-- end of bl_proj_left--> 
 
<div id="bl_proj_right"> 
 
<div id="bl_proj_right_header"> 
 
<h1>BELLEVUE CITY HALL 
<h2>Bellevue, Washington</h2> 
<h2>2007</h2></h1> 
 
</div><!-- end of bl_proj_right_header--> 
 
<div id="bl_proj_right_middle"> 
 
<p> 
<!--#if expr="$QUERY_STRING='1'" --> 
<!--#include virtual="inhalt1.txt" --> 
 
<!--#else --> 
Text 
<!--#endif --> 
</p> 

Hier der Inhalt meiner shtml:

Code

<img src="../img/proj_memory_a_01.jpg" width="530" height="350" border="0" alt=""> 
 
PFS was the Landscape Architect for a First Nation’s 
elementary school on an island in the Fraser River for the 
Seabird Band. The open space includes sports fields, play 
facilities and site reclamation within a cultural landscape. 
And ethnobotanical garden is a feature of the landscape 
supporting both the sense of place and serving as a learning 
tool. This award-winning school project was designed with Patkau Architects. 

Hier die Links zum testen, da siehst du nochmal mein Problem:
http://www.sebastianrost.de/...html/proj_test.shtml
http://www.sebastianrost.de/...ml/proj_test.shtml?1

Letzte Frage: kann ich auch die Einbindung so vornehmen, oder ist das nicht valide:

Code

<img src=" 
<!--#if expr="$QUERY_STRING='1'" --> 
<!--#include virtual="/inhalt1.txt" --> 
" width="530" height="350" border="0" alt=""> 

Ich hoffe, du kannst mir mal wieder weiterhelfen. An dieser Stelle muss ich mal das HDL loben, was wäre ich ohne euch. Großes Lob auch an dich Sabine.


Gruß Sero

>> Wie kann ich nun zuweisen, das der 1. Inhalt = Bild und der 2. Inhalt = Text ist.

Verwende einfach 2 verschiedene Textdateien:

<!--#if expr="$QUERY_STRING='1'" -->
<!--#include virtual="inhalt1.txt" -->
<!--#else -->
Slideshow
<!--#endif -->

...

<!--#if expr="$QUERY_STRING='1'" -->
<!--#include virtual="inhalt2.txt" -->

<!--#else -->
Text
<!--#endif -->

In den Textdateien kannst Du beliebigen HTML-Code speichern, für Text, Bild oder sonstwas.


Das hier:

<img src="
<!--#if expr="$QUERY_STRING='1'" -->
<!--#include virtual="/inhalt1.txt" -->
" width="530" height="350" border="0" alt="">

geht gar nicht.

Da hättest Du den gesamten Inhalt von inhalt1.txt im src-Attribut stehen.

Hi Sabine,

mit den 2 Textdateien habe ich mir auch schon gedacht, aber habe ich ja am Ende fuer jedes Projekt 4 TXT's, da Bild, Ueberschrift, Text und Subnavigation wechseln sollen. Das wird ganz schoen viel (50 x 4 = 200) und unuebersichtlich.
Kann man den include nicht noch ausbauen so dass man nur einen bestimmten Teil der TXT an die gewuenschte Stelle enfuegt. Geht das vielleicht ueber einen Anker?

Gruss Sero

Hallo Sero,

mit Ankern läßt sich da nichts machen.

Es liegt an Dir, den Code so zu organisieren, daß er übersichtlich bleibt.

So viele einzelne Dateien würde ich jedoch auch nicht gern verwenden,
sondern je Projekt eine einzelne Datei, die den gesamten Code für das jeweilige Projekt enthält.

Deiner Meinung nach laesst sich die TXT nicht in anwaehlbare Abschnitte einteilen, jedenfalls nicht ueber diese Methode.
Noch ne andere Frage, kann man eigentlich den Head Bereich (Metainfos) der shtml auslagern und ueber include referenzieren.

Sebastian