Felix Riesterer: dynamische Navigation und <div>-Gebrauch

Beitrag lesen

SELF-Forum

dynamische Navigation und <div>-Gebrauch

Felix Riesterer Homepage des Autors
– Informationen zu den Bewertungsregeln

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.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Beitrag melden
–
Informationen zu den Bewertungsregeln