Navigationsmenü

[Felix Riesterer]

Lieber Dennis,

http://dennisdieckmann.de.funpic.de/test/

die Struktur Deines HTML ist sehr mangelhaft, wenn man es unter semantischen Gesichstpunkten betrachtet.

1. Beispiel:
<div><img src="1/head.jpg" alt="head" /></div>

Wozu soll da ein <div> stehen? Täte es ein <p> nicht auch? Und welchen inhaltlichen Bezug hat diese Konstruktion für Deine Seite? Ich vermute mal: keine. Es soll eine Headergrafik anzeigen, sonst nichts. Und da sind wir bei der Darstellung: Alles was rein mit der Darstellung zu tun hat, gehört ins CSS! Also ändern wir diese Struktur so:

<div id="header"></div>

Damit die Headergrafik auch zu sehen ist, muss im CSS stehen:

#header {  
    background: url(/1/head.jpg) no-repeat center center;  
}

2. Beispiel:

<div>&nbsp;</div>

Wozu steht da ein <div>? Täte es nicht auch ein <p>? Welchen inhaltlichen Bezug hat dieser Code? Ich vermute mal, es geht schon wieder um eine Darstellungsfrage: Du möchtest einen Abstand nach unten. Das ist wieder Aufgabe von CSS! Also passen wir das CSS für #header entsprechend an:

#header {  
    background: url(/1/head.jpg) no-repeat center top;  
    height: 38px;  
}

Der Code des zweiten Beispiels kann somit ersatzlos entfallen!

3. Beispiel:

<div style="width: 804px; border: 1px #ACD0FC solid; text-align: left;"><p style="padding: 3px; padding-left: 6px;">Text</p></div>

Wozu muss da schon wieder ein <div> stehen? Merkst Du, dass Du hier eine gewaltige <div>-Suppe gebraut hast? Der Textabsatz kann auch ohne <div> stehen und die style-Informationen direkt selbst erhalten. Dazu brauchst Du kein <div> um ihn herumzubasteln... es sei denn, dass auf einer Unterseite zu diesem Textabsatz einmal noch weitere Textabsätze kämen. Dann ist das <div> sinnvoll, da es dann diese Textabsätze gruppiert. Daher solltest Du dem <div>/<p> eine ID verpassen, wie ich oben dem #header eine verpasst habe. In einem externen Stylesheet steht dann nur die ID, sodass die Style-Informationen auf das <p> oder das <div> angewendet werden, je nachdem, welches die ID trägt.

4. Beispiel:

<div style="width: 804px; border-right: 1px #ACD0FC solid; border-left: 1px #ACD0FC solid; text-align: left;">  
        <table cellpadding="0" cellspacing="0" style="width: 100%">  
            <tr>  
                <td style="width: 200px; vertical-align: top; height: 100%">  
                    <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%; list-style-position: inside;"><tr>

Ja was soll das denn??? Du missbrauchst hier eine Tabelle, in die Du eine weitere Tabelle verschachtelt hast, um Deine Inhalte nebeneinander anzuordnen. Wozu haben wir hier eigentlich CSS??? Jetzt aber ganz schnell weg mit diesem Tabellenwahnsinn!!

Was Du eigentlich möchtest: Links eine Navigation und rechts davon den eigentlichen Inhalt der Seite. Also machen wir das doch auch!

ich versuche ein Navigationsmenü zu bauen.

Das geht, <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=wie man bei SELFHTML nachlesen kann>, am besten mit einer Liste. Einer ungeordneten Liste, denn die Reihenfolge der Listenpunkte ist nicht relevant. Was ich von Deiner Seite bisher gesehen habe, wird Deine Navi aus mehreren Ebenen bestehen. Dazu sind Listen schön verschachtelbar!

<div id="navi">  
    <h2>Navigation</h2>  
    <ul>  
        <li><a href="#">Link1</a></li>  
        <li><a href="#">Link2</a>  
            <ul>  
                <li><a href="#">Sammlung 1</a></li>  
                <li><a href="#">Sammlung 2</a></li>  
                <li><a href="#">Sammlung 3</a></li>  
                <li><a href="#">Sammlung 4</a></li>  
            </ul>  
        </li>  
        <li><a href="#">Link2</a></li>  
    </ul>  
</div>

Wenn Dir die Überschrift mit "Navigation" nicht gefällt, dann kannst Du sie mittels CSS unsichtbar schalten, aber der Semantik nach sollte sie meiner Meinung nach dort unbedingt stehen.

Deinen Textinhalt steckst Du auch nicht mittels <br />s in eine Tabellenzelle, sondern Du verwendest brav Textabsätze, so wie man Text eben als Text auszeichnet. Da Du das ganze in seiner Struktur zusammen gruppieren musst, kannst und sollst Du dort auch ein <div> verwenden dürfen:

<div id="inhalt">  
    <p>Textinhalt...</p>  
    <p>...</p>  
</div>

Uff! Jetzt ist Dein Dokument schon ein ganzes Stück semantischer aufgebaut. Fehlt nur noch der Link zu Deinem Impressum.

<p id="impressumslink"><a href="impressum.htm">Impressum</a></p>

So einfach könnte dieser sein. Sieht schon fast zu einfach aus, oder?

Ich bekomme es nicht hin, das der Border am Rand des Navis bis nach unten zum Impressumsbalken reicht.

Das wird nachher relativ schnell bewerkstelligt sein. Wenn es Not tut, dann sogar mit einem entsprechenden Hintergrundbild, aber das sieht man dann, wenn Du soweit bist.

Ich kann dort ein td mit height 100% erstellen, oder eine neue tabelle oder ein div mit jeweils 100%, aber jedesmal ist es nur eine reihe groß, anstatt wie erhofft bis nach ganz unten.

Ich weiß einfach nicht weiter!

Wenn Du mit den Umbauarbeiten fertig bist, dann fragst Du hier einfach wieder nach! Bitte lies aber unbedingt das Kapitel zu den Navigationsleisten nach!

Liebe Grüße aus Ellwangen,

Felix Riesterer.