dynamische Navigation

[Sebastian Brüll]

Hallo,
nachdem ihr mir geraten habt keine Frames zu verwenden, habe ich angefangen meine hp zu überarbeiten und bin nun dabei eine dynamische Navigatin mit externer css Datei zu erstellen, unter die Navigation soll dann ein Bild oder evtl. auch ein Text.
Nun ist das Problem das das dropdown menü in das Bild hinein ragt und darunter verschwindet, ich habe jetzt versucht über z-index, das zuändern aber irgendwie funktioniert das nicht.
Unter folgender Adresse findet ihr die aktuelle Version

http://www.sebastianbruell.de/testhp/index.html

Könnt ihr mir helfen??

Viele Grüße
Sebastian

[Patrick Andrieu]

Hallo Sebastian!

nachdem ihr mir geraten habt keine Frames zu verwenden, habe ich angefangen meine hp zu überarbeiten

Das ist schon mal ein sehr guter Einsatz. Leider hat sich im Bezug auf kleinen Fenstergrößen bei

http://www.sebastianbruell.de/testhp/index.html (by the way, schau mal bitte in den Forumsfaq, wie man links einbindet)

nichts geändert: Bei den Fenstergrößen, die ich auf dem 19-Zöller sonst einstelle (wie gesagt entspricht es ca. 1024*768), sehe ich nur
"ebastian Brüll" - wobei das "e" auch noch abgeschnitten ist. Du hast den Anzeigebereich zu breit gemacht. Erst wenn ich das Fenster auf Bildschirmgröße maximieren, sehe ich wieder alles. Insofern ist die Idee, auf Frames zu verzichten nur zu begrüßen, Feintunen ist aber leider noch notwendig.

Die IE-Abfrage: if(window.navigator.systemLanguage && !window.navigator.language)  habe ich in der Form noch nie gesehen, und weiß nicht, ob sie treffsicher ist. Ich würde hier:

if (document.all&&document.getElementById&&!window.opera)

einsetzen (man möge mich aber eines Besseren belehren).

In Deinem Script finde ich ein div id=navi_rahmen und einen div id =navi, finde aber in Deiner css keine entsprechende Formatierungen? Das ist doch die Datei: http://www.sebastianbruell.de/formate.css oder?

Die ist ziemlich lang, so dass du Sie, wenn Du

Könnt ihr mir helfen??

Hilfe erwartest, auf das Minimum reduzieren solltest (hier fürs Forum).

Viele Grüße aus Frankfurt/Main,
Patrick

[Sebastian Brüll]

by the way, schau mal bitte in den Forumsfaq, wie man links einbindet

okay werde ich mir anschauen

Bei den Fenstergrößen, die ich auf dem 19-Zöller sonst einstelle (wie gesagt entspricht es ca. 1024*768), sehe ich nur

"ebastian Brüll" - wobei das "e" auch noch abgeschnitten ist. Du hast den Anzeigebereich zu breit gemacht.

Mhh bei 1024px breite, wie viele px darf den dann die anzuzeigende Fläche maximal sein damit es passt? Ich habe jetzt die helle box 960px breit gemacht, welche im window zentriert seien sollte, und dachte das 64px ausreichend platz wären??
Kann es sein das dei window etwa nur 900px breit ist anstelle von 1024px??

Die IE-Abfrage: if(window.navigator.systemLanguage && !window.navigator.language)  habe ich in der Form noch nie gesehen, und weiß nicht, ob sie treffsicher ist. Ich würde hier:

Also die habe ich von dieser hp wenn du unter http://de.selfhtml.org/css/layouts/navigationsleisten.htm

dir das letzte Beispiel anschausst, da steht es drin, ich kenne mich mit java script ehrlich gesagt nicht aus und habe es deshalb einfach kopiert.

In Deinem Script finde ich ein div id=navi_rahmen und einen div id =navi, finde aber in Deiner css keine entsprechende Formatierungen? Das ist doch die Datei: http://www.sebastianbruell.de/formate.css oder?

ne das ist die falsche, die index.html verweisst auf eine css datei im selben ordner auch mit dem Namen formate.css
hier zufinden

http://www.sebastianbruell.de/testhp/formate.css

Schonmal vielen Dank und viele Grüße
Sebastian

[Felix Riesterer]

Lieber Sebastian,

nachdem ihr mir geraten habt keine Frames zu verwenden, habe ich angefangen meine hp zu überarbeiten und bin nun dabei eine dynamische Navigatin mit externer css Datei zu erstellen, unter die Navigation soll dann ein Bild oder evtl. auch ein Text.

Ausgezeichnet! Deine Seite wird jetzt technisch aktuell und barrierearm werden.

Nun ist das Problem das

... Dein HTML-Code böse Fehler enthält, was einen Browser in den Rate-Modus schickt. Bitte korrigieren! Ich zeige Dir ein paar Dinge, die mir aufgefallen sind:

<html>  
<head>  
...  
<title></title>  
<link rel="stylesheet" type="text/css" href="formate.css">  
  
<script type="text/javascript">  
...  
</script>  
  
<html>  
</head>  
<title>Sebastian Br&uuml;ll</title>  
</body>

Ich denke, Du siehst hier sehr schnell, was man dringend verbessern muss...

Ein paar Anmerkungen zu Deinem <div>-Gebrauch:
<div id="logo"><img src="stuff/logo.jpg"></div>

Das Bild solltest Du als Hintergrundbild einbinden! Das <img />-Element ist für Inhalt, Deine Grafik aber reine Gestaltung, also kein konkreter Bestandteil Deines auf dieser Seite angezeigten Contents. Also das <img />-Element entfernen und die Grafik als Hintergrundbild einbinden.

<div id="navi_rahmen">  
 <ul id="navi">

Hier frage ich mich, warum Du die <ul> zusätzlich noch in ein <div> packst. Mittels #navi kannst Du doch per CSS alles machen...

Anders verhielte es sich, wenn Du innerhalb des navi_rahmen-DIVs noch eine Überschrift hättest. Damit brauchst Du dann auch der <ul> selbst keine eigene ID mehr zu geben, da Du sie als Kindelement des DIVs direkt "ansprechen" kannst.

<div id="navi">  
    <h2>Navigation</h2>  
    <ul>  
        <li>...  
    </ul>  
</div>

Also ich mache das jedenfalls so, sowohl auf meiner eigenen Website, als auch auf der meiner Schule.

<li><a href="index.html"><img src="stuff/home.jpg" width="75px" height="20px"></a></li>

Hier fehlt in den <img />-Tags das zwingend notwendige alt-Attribut. Wenn ein Browser (warum auch immer) diese Bilder nicht laden kann (oder eine Suchmaschine sich unter den verlinkten Seiten etwas "vorstellen" soll), dann würde dieser alt-Text anstelle der Grafiken angezeigt: Unbedingt ergänzen:

<li><a href="index.html"><img src="stuff/home.jpg" width="75px" height="20px" alt="Startseite"></a></li>

Auch hier gilt dasselbe, wie das bereits oben zum Logo Gesagte:

<div id="show">  
 <img src="start.jpg" width="700px" height="466px">  
</div>

Besser, Du ersetzt dieses "Design"-Element durch eine Hintergrund-Grafik. Es ist durchaus gut und sinnvoll, wenn Du in einem Style-Bereich im Kopf jeder Seite, diesem DIV eine individuelle Grafik zuordnest, während Dein restliches Stylesheet ansonsten ausgelagert ist.

Nun zu Deinem eigentlichen Problem:

das dropdown menü in das Bild hinein ragt und darunter verschwindet, ich habe jetzt versucht über z-index, das zuändern aber irgendwie funktioniert das nicht.

Wenn Du Dein Navi-Div ans Ende des HTML-Dokuments setzt, es mittels http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position aber oben anzeigen lässt, dann sollte das Problem der Vergangenheit angehören.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sebastian Brüll]

HI Felix

Ich denke, Du siehst hier sehr schnell, was man dringend verbessern muss...

Oh du hast recht, da waren ein paar "schöne" Fehler drinnen, ich hoffe ich habe alle gefunden :)

<div id="logo"><img src="stuff/logo.jpg"></div>

Das Bild solltest Du als Hintergrundbild einbinden!

Gute Idee, hat auch gut geklappt nur weiß ich nicht ob es so eine gute Idee ist, das Bild im <div id="show"> durch eine Hintergundgrafik zu ersetzten bzw. weiß ich auch nicht wie ich 2 Hg-images in dem selben div tag an unterschiedlichen stellen setzen kann.

<div id="navi_rahmen">

<ul id="navi">

>   
> Hier frage ich mich, warum Du die <ul> zusätzlich noch in ein <div> packst. Mittels #navi kannst Du doch per CSS alles machen...  
  
Mhh auch hier habe ich das Prinzip von dieser hp  
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#ebenen  
  
unten im zweiten Beispiel zum Thema "Mehrere Navigationsebenen"  
Aber ich schaue mal b ich das einfacher hinbekomme.  
  
  

> Hier fehlt in den <img />-Tags das zwingend notwendige alt-Attribut. Wenn ein Browser (warum auch immer) diese Bilder nicht laden kann (oder eine Suchmaschine sich unter den verlinkten Seiten etwas "vorstellen" soll), dann würde dieser alt-Text anstelle der Grafiken angezeigt: Unbedingt ergänzen:  
  
Danke, das habe ich auch korrigiert.  
  
  

> Besser, Du ersetzt dieses "Design"-Element durch eine Hintergrund-Grafik. Es ist durchaus gut und sinnvoll, wenn Du in einem Style-Bereich im Kopf jeder Seite, diesem DIV eine individuelle Grafik zuordnest, während Dein restliches Stylesheet ansonsten ausgelagert ist.  
  
Das habe ich nicht ganz verstanden, was genau meinst du mit Design-Element? Den div id=show bereich?  
  
der soll ja nur auf der home und in der Gallery Bilder enthalten, in den anderen Kategorien soll er Text enthalten, dann wäre das mit dem background-image ja nicht so vorteilhaft, oder?  
  
  

> Wenn Du Dein Navi-Div ans Ende des HTML-Dokuments setzt, es mittels <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position> aber oben anzeigen lässt, dann sollte das Problem der Vergangenheit angehören.  
>   
  
Das ans Ende setzten hat gereicht, vielen Dank :)  
  
Viele Grüße  
Sebastian

[Felix Riesterer]

Lieber Sebastian,

bzw. weiß ich auch nicht wie ich 2 Hg-images in dem selben div tag an unterschiedlichen stellen setzen kann.

#zwei_bilder {  
    background: url(.../bild1.jpg) top left no-repeat;  
}  
#zwei_bilder span [  
    background: url(.../bild2.jpg) bottom right no-repeat;  
}

<div id="zwei_bilder"><span></span></div>

Das mache ich bei unserer Schulwebsite so im Header...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Bla]

<div id="logo"><img src="stuff/logo.jpg"></div>

Das Bild solltest Du als Hintergrundbild einbinden! Das <img />-Element ist für Inhalt, Deine Grafik aber reine Gestaltung, also kein konkreter Bestandteil Deines auf dieser Seite angezeigten Contents.

Unsinn, hast du dir die Grafik überhaupt angesehen? Mal abgesehen davon, dass Logos selbstverständlich zum Inhalt einer Seite gehören, enthält dieses Logo obendrein den Text "Sebastian Brüll" und stellt damit in gewisser Hinsicht sogar alleine die Seitenüberschrift dar - also alles andere als Hintergrundgeschnörkel, wie du glaubst.

Dass um diese Grafik nur wegen der id kein <div>-Element bepackt werden muss, ist richtig, aber

<img id="logo" src="stuff/logo.jpg" alt="Sebastian Brüll">

ist hier vollkommen in Ordnung. Ich würde es sogar für angebracht halten, das <img>-Element angesichts seiner Aussage in <h1> zu legen. Denn wo sind wir da? Das Logo sagt's: Bei Sebastian.

[Patrick Andrieu]

Hallo Bla!

Denn wo sind wir da? Das Logo sagt's: Bei Sebastian.

Aus dem Grund würde ich es (persönlich, meine Meinung) vorziehen, sogar gänzlich auf Grafiken zu verzichten, und Sebastian Brüll als Text ausgeben. Gleiches für die Navi.

Viele Grüße aus Frankfurt/Main,
Patrick

[Felix Riesterer]

Liebe(r) Bla,

Unsinn,

na, da wäre ich mir nicht so sicher!

hast du dir die Grafik überhaupt angesehen?

<ironie>Nein, natürlich nicht. Erstens bin ich völlig blind und zweitens rate ich immer ins Blaue hinein, denn zu was ich da meinen Senf abgebe, das kann ich mir im Nachhinein noch immer anschauen, wenn ich denn wollte.</ironie>

Mal abgesehen davon, dass Logos selbstverständlich zum Inhalt einer Seite gehören, enthält dieses Logo obendrein den Text "Sebastian Brüll" und stellt damit in gewisser Hinsicht sogar alleine die Seitenüberschrift dar - also alles andere als Hintergrundgeschnörkel, wie du glaubst.

Das mag für die Startseite vielleicht gelten, für alle Folgeseiten halte ich eine immergleiche Haupt-Überschrift für sinnfrei. Daher ist es meiner Meinung nach eher ein Gestaltungsmittel, denn konkreter Content.

Dass um diese Grafik nur wegen der id kein <div>-Element bepackt werden muss, ist richtig,

Nein, ist es nicht! <body><img .../> ist kein valides XHTML! Und <body><div><img /> (valide) ist auch kaum besser, da unsemantisch.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[wahsaga]

hi,

<body><img .../> ist kein valides XHTML!

Das kommt (abgesehen von dem Slash) nicht auf XHTML oder HTML an - sondern auf Strict oder Transitional.

gruß,
wahsaga

[Bla]

Mal abgesehen davon, dass Logos selbstverständlich zum Inhalt einer Seite gehören, enthält dieses Logo obendrein den Text "Sebastian Brüll" und stellt damit in gewisser Hinsicht sogar alleine die Seitenüberschrift dar

Das mag für die Startseite vielleicht gelten, für alle Folgeseiten halte ich eine immergleiche Haupt-Überschrift für sinnfrei. Daher ist es meiner Meinung nach eher ein Gestaltungsmittel, denn konkreter Content.

Ich schrieb es bereits: Ein Logo zeigt dem Leser an, wessen Seite er vor der Nase hat, somit gehört es genauso zum Inhalt wie eine Fußnote à la "Geschrieben von Max Muster". Dass ein Element gestalterische Eigenschaften hat, bedeutet noch lange nicht, dass es auch keinerlei Aussage hat und somit nicht zum Inhalt gehöre. (Und die Designer werden jetzt in einem Aufschrei darauf hinweisen, dass Gestaltung und Inhalt nicht nur selbstverständlich eine Einheit bilden, sondern als gleichwertig anzusehen sind.)

Dass um diese Grafik nur wegen der id kein <div>-Element bepackt werden muss, ist richtig,

Nein, ist es nicht! <body><img .../> ist kein valides XHTML!

Oh Gott! Ein Invalide! Feuerwehr! Und was sagt die Feuerwehr? Bitte komplett zitieren.

Dass um diese Grafik nur wegen der id kein <div>-Element bepackt werden muss, ist richtig, aber

<img id="logo" src="stuff/logo.jpg" alt="Sebastian Brüll">

ist hier vollkommen in Ordnung.

Ich habe nur gesagt, dass ein umfassendes <div> nur als id-Platzhalter nicht sein muss, sondern die id ohne Abstriche beim <img> selbst gesetzt werden kann. Deshalb muss die Grafik ja nicht unbedingt gleich direkt im <body>-Element erscheinen; mal ganz abgesehen davon, dass er bereits ein <div> um große Teile des Inhalts hat, in dem dann völlig korrekt und wie zuvor schon auch das Logo-<img> erscheinen darf. Also kein Grund für Ausrufungszeicheninvalidenpanik.

Und <body><div><img /> (valide) ist auch kaum besser, da unsemantisch.

Diese pauschale Aussage unterschlägt nicht nur den gruppierenden Sinn von <div> und ist damit alleine schon überflüssig, in Verbindung mit deiner Empfehlung <body><div><ul> zu verwenden, finde ich sie gelinde gesagt drollig.