Navigationsmenü

[Dennis D.]

Hallo,

ich versuche ein Navigationsmenü zu bauen.

Hier das bisher erreichte: http://dennisdieckmann.de.funpic.de/test/

Ich bekomme es nicht hin, das der Border am Rand des Navis bis nach unten zum Impressumsbalken reicht.
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!

[kEv*]

Hallo liebe SELFHTMLer,

könntest du dich etwas genauer ausdrücken was du möchtest?
Welchen Browser benutzt du?
Eventuell eine kleine Grafik?

Mit der Frage kan zumindest ich persönlich nichts anfangen.
LG
kev1n

[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.

[Adda]

Hallo Felix,

auch wenn ich nicht der Fragende bin/war - herzlichen Dank für deine ausführlichen und verständlichen Erklärungen!
Ich habe nun einiges verstanden, was mir vorher unklar oder nicht bewusst war.
Super!
Schönen Gruß,
Adda

[Felix Riesterer]

Liebe(r) Adda,

Ich habe nun einiges verstanden, was mir vorher unklar oder nicht bewusst war.

freut mich, dass meine Mühe bereits von Nutzen war. Wenn Dennis nun seinen Quelltext umgebaut hat, dann können er und ich an dieser Stelle hier mit dem Layouten per CSS weitermachen. Momentan ist mir das noch zu vage, um bereits mit weiteren CSS-Tricks anzufangen.

Unsere Ergebnisse führen vielleicht letztenendes zu einer interessanten Diskussion, wenn meine Lösungsstrategien von anderen Forumsteilnehmern kritisiert werden, da ich vielleicht auch nicht unbedingt immer die sinnvollste Vorgehensweise anwende...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Længlich]

Udutahma!

Da Du in einem anderen Posting geschrieben hast, daß Du an einer Diskussion Deiner Methoden interessiert bist, fange ich einfach mal an:

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

Wozu soll da ein <div> stehen? Täte es ein <p> nicht auch?

<p><img src="1/head.jpg" alt="head" /></p> sieht für mich nicht besser aus, denn p ist ein Textabsatz, das darin enthaltene img aber kein Text. Ich finde div an dieser Stelle besser; zumindest wenn es einen Grund gibt, das img nicht einfach ganz alleine in den Raum zu stellen. (Ein Blockelement zu wollen reicht nicht als Begründung, denn das läßt sich mit CSS regeln. Aber in (X)HTML Strict darf kein img direkt im body stehen - das wäre ein Grund.)

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 wird die obige Diskussion für dieses Beispiel natürlich sowieso irrelevant, aber ich habe sie jetzt mal auf die Grundsatz-Ebene verlegt. ;-)

Was Du sonst noch so geschrieben hast, erscheint mir jetzt leider zu richtig zum Verreißen. ;-)

Viele Grüße vom Længlich

[Felix Riesterer]

Lieber Længlich,

Was Du sonst noch so geschrieben hast, erscheint mir jetzt leider zu richtig zum Verreißen. ;-)

dann lass uns doch über eine sinnvolle Reihenfolge von Inhalten in einem Dokument diskutieren! Ich bin nämlich mit dem Artikel im SELFHTML-Raum dazu nicht so ganz einversthanden. Meiner Meinung nach sollte zuerst der Inhalt und dann die Navi und alles andere stehen. So mache ich das jedenfalls in meinem CMS und sonst auch.

Dieses Thema ist im Zusammenhang mit dem OP durchaus hier relevant...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Længlich]

Salve!

dann lass uns doch über eine sinnvolle Reihenfolge von Inhalten in einem Dokument diskutieren!

Gerne.

Ich bin nämlich mit dem Artikel im SELFHTML-Raum dazu nicht so ganz einversthanden. Meiner Meinung nach sollte zuerst der Inhalt und dann die Navi und alles andere stehen. So mache ich das jedenfalls in meinem CMS und sonst auch.

Ich auch nicht. Ich halte theoretisch folgende Reihenfolge für die sinnvollste:
1. Header mit Seitentitel
2. Inhalt
3. Navi

... die wohl auch Deiner entspricht. (Zählst Du den Header zum Inhalt? Ich hatte eben erst vermutet, er gehöre zu "alles andere" und sei folglich unterhalb der Navi zu finden, was ich etwas seltsam fände.)

Warum diese Reihenfolge? Nun, für Leute, die sich die Seite schön mit CSS gestaltet im Browser ansehen, ist es im Prinzip wurscht (sinnvolle Tabreihenfolge etc. vorausgesetzt). Interessant ist es für diejenigen, die sich die Seite vorlesen lassen oder ohne CSS betrachten. Mit der o.g. Reihenfolge wird ihnen als erstes gesagt, wo sie sind (Seitentitel), dann der Inhalt vorgelesen und zum Schluß die Möglichkeiten des Wegnavigierens aufgezählt.
Wenn die Navi vor dem Inhalt kommt, interessiert sie den Benutzer* (noch) nicht, und nach dem Inhalt, wenn er weitersurfen möchte, vermißt er sie dann.

Deine beiden Links sind tolle Beispiele dafür, wie man diese Reihenfolge auch ordentlich stylen kann - einmal mit fester und einmal mit flexibler Gesamtbreite. Letzteres ist ein bißchen kniffliger, denn der naheliegende Ansatz mit float scheitert immer, wenn man dem Inhalt keine Breite geben will, aber bei Dir kann man schön sehen, wie es mit fixer/absoluter Positionierung funktioniert.

Viele Grüße vom Længlich

* Ich habe keine Studien über den Durchschnittsbenutzer vorliegen. Was ich hier schreibe, ist meine Meinung, abgeleitet von der Art und Weise, wie ich surfe, und in der Annahme, daß ich kein völlig abwegiger Sonderfall bin. ;-)

[Dennis D.]

Hallo Felix,

danke erstmal für die Kritik und die Verbesserungen.

Hab jetzt schon einen Teil umgesetzt, obwohl ich die Div für das Impressum und den Text (Beispiel 3) lasse. Das hat was mit dem Padding zu tun.

Doch nun zu der Navigationsleiste...

Sicher ist eine Tabelle keine optimale Lösung und ich habe es auch schon mit 2 Divs nebeneinander probiert.

Das Problem: Bis auf den Hauptbereich, der weiß ist, ist der Rest der Seite transparent, um das auslaufende Gelb durchscheinen zu lassen.

Ein Hintergrund-Bild, das den Rahmen zieht ist daher ummöglich.

Zwei Divs nebeneinander, die über float nebeneinander gestellt sind, erzeugen ebenfalls ein problem, da sich das Hauptelement (weiß) unter das Transparente schiebt. Mal ganz davon abgesehen, dass das Problem mit dem Border auch da besteht.

Das Kapitel Navigationsleisten kenne ich, aber eben das transparente Menü, in Verbindung damit, dass ich möchte dass das ausgewählte Objekt sozusagen als Finger mit dem Hauptelement verbunden ist, machen das alles so kompliziert.

Beste Grüße

Dennis

[Felix Riesterer]

Lieber Længlich,

Ich bin nämlich mit dem Artikel im SELFHTML-Raum dazu nicht so ganz einversthanden.

Ich auch nicht. Ich halte theoretisch folgende Reihenfolge für die sinnvollste

... die wohl auch Deiner entspricht.

da ging sie hin, die leidenschaftlich und kontrovers geführte Diskussion. *gg*

Deine beiden Links sind tolle Beispiele dafür, wie man diese Reihenfolge auch ordentlich stylen kann - einmal mit fester und einmal mit flexibler Gesamtbreite.

Danke für das Lob!

Letzteres ist ein bißchen kniffliger, denn der naheliegende Ansatz mit float scheitert immer, wenn man dem Inhalt keine Breite geben will, aber bei Dir kann man schön sehen, wie es mit fixer/absoluter Positionierung funktioniert.

Naja, man lernt eben aus Threads wie diesem immer wieder etwas dazu.

* Ich habe keine Studien über den Durchschnittsbenutzer vorliegen. Was ich hier schreibe, ist meine Meinung, abgeleitet von der Art und Weise, wie ich surfe, und in der Annahme, daß ich kein völlig abwegiger Sonderfall bin. ;-)

Du bist ein Sonderfall. Du _erstellst_ Seiten. Nicht jeder Seitenbesucher tut das. Deine Art der Seitenbetrachtung/-nutzung wird immer etwas (und wenn auch nur sehr geringfügig) von der eines Unbedarften abweichen.

Aber wenn ich so meine Schüler dabei beobachte, wie diese Internetseiten benutzen/betrachten, dann ist alles, was wir an strukturellen Diskussionen führen völlig bedeutungslos, denn die schauen nur auf den optischen Ersteindruck. Interessant wird es allerdings, wenn Sie anfangen mittels copy&paste Inhalte in Word-Dokumente einzufügen... Hehehehe.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Længlich]

Ola!

da ging sie hin, die leidenschaftlich und kontrovers geführte Diskussion. *gg*

Genau das habe ich auch gedacht, als ich Deinen Quelltext sah. Exakt dieselbe Reihenfolge, die ich auchgewählt hätte - worüber soll ich mich da leidenschaftlich echauffieren? Wir haben offensichtlich extrem ähnliche Vorstellungen, wie eine ordentliche Website aufgebaut zu sein hat.
Ah, eine Kleinigkeit habe ich doch noch gefunden: Du hast ein paar Klassen, die nach der Formatierung benannt sind. Eventuell fallen Dir da noch bessere Namen ein. Ich habe jetzt aber auch nicht nachgeschaut, wo sie verwendet werden; kann gut sein, daß ich da auch keine Ideen hätte. ;-)

Du bist ein Sonderfall. Du _erstellst_ Seiten. Nicht jeder Seitenbesucher tut das. Deine Art der Seitenbetrachtung/-nutzung wird immer etwas (und wenn auch nur sehr geringfügig) von der eines Unbedarften abweichen.

Offen gestanden weiche ich viel stärker ab als bisher beschrieben:

• In meinem Firefox mit zahlreichen Plugins, User-Stylesheet und deaktiviertem Javascript sehen viele Seiten sowieso anders aus, als der Autor sich das dachte. U.a. gibt es keine Bewegung und keinen Sound.
• Nach kurzer Zeit wandert mein Blick in die rechte untere Ecke und erfaßt das Validierungsergebnis sowie die Hinweise bezüglich der geblockten Scripte und Objekte und der automatisch verlinkten URIs.
• Seiten, die nicht bequem lesbar sind, werden entsprechend verändert: Schriftgröße geht direkt, alles andere (z.B. schlecht konstrastierende Farben) mit Firebug.
• Interessante Designs werden natürlich untersucht (Web Developer Toolbar, Firebug, Quelltext lesen).

Das hatte ich jetzt beim Versuch, mich in die Lage eines "normalen" Benutzers zu versetzen, alles schon herausgefiltert. ;-) In diesem Zusammenhang war ja nur die Reihenfolge meiner Interaktionen mit der Website von Bedeutung: Zuerst will ich wissen, wo ich bin, dann lesen (vielleicht alles, vielleicht auch nur einen Teil), dann die Navi verwenden. Und ich denke, diese Reihenfolge ist recht normal, denn erst via Navi verduften und dann den Inhalt lesen geht ja auch nicht so gut... ;-)

Aber wenn ich so meine Schüler dabei beobachte, wie diese Internetseiten benutzen/betrachten, dann ist alles, was wir an strukturellen Diskussionen führen völlig bedeutungslos, denn die schauen nur auf den optischen Ersteindruck. Interessant wird es allerdings, wenn Sie anfangen mittels copy&paste Inhalte in Word-Dokumente einzufügen... Hehehehe.

Das trifft sicher nicht nur auf Schüler zu, sondern auf die allermeisten Benutzer. Nichtsdestotrotz halte ich solche Diskussionen keineswegs für bedeutungslos, denn erstens gibt es nunmal auch andere Benutzer/Clients, die anders surfen (Blinde, Suchmaschinenbots, usw. usf.), und zweitens kriegt man auch den optischen Ersteindruck in möglichst vielen Browsern IMHO erst dann halbwegs zuverlässig hin, wenn man sich solche Überlegungen zu Gemüte geführt hat.

Viele Grüße vom Længlich

[Dennis D.]

Hallo Felix,

danke erstmal für die Kritik und die Verbesserungen.

Hab jetzt schon einen Teil umgesetzt, obwohl ich die Div für das Impressum und den Text (Beispiel 3) lasse. Das hat was mit dem Padding zu tun.

Doch nun zu der Navigationsleiste...

Sicher ist eine Tabelle keine optimale Lösung und ich habe es auch schon mit 2 Divs nebeneinander probiert.

Das Problem: Bis auf den Hauptbereich, der weiß ist, ist der Rest der Seite transparent, um das auslaufende Gelb durchscheinen zu lassen.

Ein Hintergrund-Bild, das den Rahmen zieht ist daher ummöglich.

Zwei Divs nebeneinander, die über float nebeneinander gestellt sind, erzeugen ebenfalls ein problem, da sich das Hauptelement (weiß) unter das Transparente schiebt. Mal ganz davon abgesehen, dass das Problem mit dem Border auch da besteht.

Das Kapitel Navigationsleisten kenne ich, aber eben das transparente Menü, in Verbindung damit, dass ich möchte dass das ausgewählte Objekt sozusagen als Finger mit dem Hauptelement verbunden ist, machen das alles so kompliziert.

Beste Grüße

Dennis

[Felix Riesterer]

Lieber Dennis,

danke erstmal für die Kritik und die Verbesserungen.

gerne!

Hab jetzt schon einen Teil umgesetzt, obwohl ich die Div für das Impressum und den Text (Beispiel 3) lasse. Das hat was mit dem Padding zu tun.

Völliger Quatsch! Wieso kannst Du denn Dein Padding nicht dem <p> selbst geben? Wozu das unnötige <div>? Ich habe mal auf Deiner Seite mit Hilfe des Firebugs im Firefox etwas herumgespielt. Dabei ist die zusätzliche Verwendung Deines <div> als ebensolche offensichtlich geworden. Weg damit! Und wozu hast Du diesem <div> auch noch eine ebenso unnötige Klasse verabreicht? Macht diese das <div> etwa sinnvoller? *g*

Das Problem: Bis auf den Hauptbereich, der weiß ist, ist der Rest der Seite transparent, um das auslaufende Gelb durchscheinen zu lassen.

Das ist kein Problem! Das ist nur eine Aufgabenstellung. Nicht unmöglich, sondern absolut lösbar.

Ein Hintergrund-Bild, das den Rahmen zieht ist daher ummöglich.

Schon wieder Unsinn! Wer sagt denn, dass ein Bild nicht vollkommen transparent sein kann, bis auf eine wie auch immer eingefärbte senkrechte Linie???

Zwei Divs nebeneinander, die über float nebeneinander gestellt sind, erzeugen ebenfalls ein problem, da sich das Hauptelement (weiß) unter das Transparente schiebt. Mal ganz davon abgesehen, dass das Problem mit dem Border auch da besteht.

Du unterschätzt die Möglichkeiten von CSS gewaltig mein Freund! Mach' doch einfach mal schön, wie ich Dir das vorgeschlagen habe, dann biegen wir zwei das hier zusammen vor aller Augen hin, OK?

Außerdem kennst Du anscheinend die Bedeutung von "margin" nicht, sonst würdest Du nicht behaupten, dass da etwas weißes unter etwas transparentes rutscht...

Das Kapitel Navigationsleisten kenne ich, aber eben das transparente Menü, in Verbindung damit, dass ich möchte dass das ausgewählte Objekt sozusagen als Finger mit dem Hauptelement verbunden ist, machen das alles so kompliziert.

Erstens ist kompliziert nicht unmöglich und zweitens habe ich gerade absolut nicht verstanden, was Du mit Finger und Hauptelement meinst!

Beste Grüße

Trau' Dich! Das ist alles möglich und Du könntest eine ganze Menge dabei lernen (und ich auch)!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Dennis D.]

So,

ich hab jetzt seine Vorschläge realisiert.

Anstelle der Div-Tags gibts jetzt nur noch einen P-Tag.

Und die Tabellen habe ich durch zwei Divs in einem großen Div realisiert.

Habe allerdings immer noch Probleme.

Aber die habe ich dir zur Veranschaulichung direkt in die Seite geschrieben.

Und was der Finger ist, habe ich auch beigeschrieben :D.

Danke für deine Hilfe.

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

Gruß

Dennis

[Felix Riesterer]

Lieber Dennis,

ich hab jetzt seine Vorschläge realisiert.

wessen "seine"? *gg*

Anstelle der Div-Tags gibts jetzt nur noch einen P-Tag.

Und die Tabellen habe ich durch zwei Divs in einem großen Div realisiert.

Habe allerdings immer noch Probleme.

Das werden wir jetzt einmal genauer ansehen.

Ich habe Deine Idee aufgegriffen, alles in ein zusammenfassendes <div> zu packen. Das bringt nocheinmal weitere Gestaltungsmöglichkeiten (mache ich auch).

Ich habe weiterhin die Reihenfolge von Content und Navi vertauscht, da der Inhalt meiner Meinung nach (siehe Diskussion mit Laenglich in diesem Thread) im Quelltext _vor_ der Navigation stehen sollte.

Jedoch habe ich eine Sache für mich unzufriedenstellend gelöst: Im Footer ist das Hintergrundbild nicht mit den korrekten Koordinaten eingestellt, da die exakte Position des Footers variieren kann, der Wert im CSS aber nunmal nicht. Sollte der Inhalt länger sein, dann wirkt die Hinterrgundgrafik zu dunkel, da ein "falscher Ausschnitt" des Hintergrundbildes angezeigt wird. Weiß jemand, wie man das schlauer machen kann?

Momentaner Stand der Testseite: test.htm

Du brauchst noch eine Bild-Datei... "content.png". Die bekommst Du hier: content.png

Ach ja: "bmp" ist kein Internetformat, auch wenn es immer mehr Browser unterstützen. Benutze jpg oder png! Für animierte smilies geht momentan nur gif... Also lautet Dein Hintergrundbild nun back.png.

Der Quelltext sieht jetzt so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title>Homepage</title>  
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />  
<meta http-equiv="Content-Style-Type" content="text/css" />  
<style type="text/css">  
body {  
    background-image: url('1/back.png');  
    background-repeat: repeat-x;  
    color: #7791B0;  
    font-family: Calibri, Arial, Verdana, Sans-Serif;  
    font-size: medium;  
    margin: 0px;  
    text-align: center;  
}  
  
a:link {  
    color: #7791B0;  
}  
  
#main {  
    background-image: url('1/content.png');  
    background-repeat: repeat-y;  
    background-position: 200px;  
    border-left: 1px #ACD0FC solid;  
    border-right: 1px #ACD0FC solid;  
    width: 804px;  
    margin: 0 auto;  
}  
  
#head {  
    background-image: url('1/head.jpg');  
    background-position: top;  
    background-repeat: no-repeat;  
    height: 283px;  
}  
  
#hier {  
    background-image: url('1/back.png');  
    background-repeat: repeat-x;  
    background-position: 0px -285px;  
    border-top: 1px #acd0fc solid;  
    border-bottom: 1px #acd0fc solid;  
    margin: 0px;  
    padding: 3px 6px 3px 6px;  
    text-align: left;  
}  
  
#content {  
    float: right;  
    background-color: #ffffff;  
    padding: 5px 10px;  
    text-align: left;  
    width: 580px;  
    overflow: auto;  
}  
  
#menu {  
    border-right: 1px #acd0fc solid;  
    float: left;  
    width: 200px;  
    background-repeat: repeat-y;  
    background-position: 199px;  
}  
  
#menu ul {  
    margin: 0px;  
    padding: 0px;  
    list-style: none;  
    text-align: left;  
}  
  
#menu ul ul {  
    margin-left: 15px;  
}  
  
#menu ul li {  
    padding: 5px 0px 5px 15px;  
    font-weight: bold;  
}  
  
#menu ul ul li {  
    font-weight: normal;  
}  
  
#menu li a {  
    display: block;  
    width: 100%;  
}  
  
#menu li a:visited {  
    text-decoration: none;  
}  
  
#menu ul li a:link {  
    text-decoration: none;  
}  
  
#menu ul ul li a:link {  
    text-decoration: underline;  
}  
  
#menu .finger {  
    border: 1px #ACD0FC solid;  
    border-right: none;  
    background: #ffffff;  
    margin-right: -1px;  
}  
  
#menu .finger a:link {  
    color: red;  
}  
  
#menu h2 {  
    margin: 0px;  
    padding: 0px;  
    text-align: center;  
}  
  
#footer {  
    clear: both;  
    border-top: 1px #acd0fc solid;  
    border-bottom: 1px #acd0fc solid;  
    margin: 0px;  
    padding-bottom: 3px;  
    padding-left: 6px;  
    padding-right: 6px;  
    padding-top: 3px;  
    text-align: center;  
    background-image: url('1/back.png');  
    background-position: 0px -600px;  
}  
</style>  
</head>  
<body>  
    <div id="main">  
        <div id="head"></div>  
        <p id="hier">Text 1</p>  
        <div id="content">  
            <p>Der weiße Teil muss aus Design gründen immer bis zum ende gehen.. sieht sonst halt nicht gut aus. So wie jetzt eben :D</p>  
            <p>Also auch wenn das Menü mal länger ist und in diesem bereich nur wenig ist, muss es bis unten hin weiß sein! <a href="index2.htm" title="Nächste seite">klick bitte hier</a></p>  
        </div>  
        <div id="menu">  
            <h2>Navigation</h2>  
            <ul>  
                <li><a href="#">Homepage</a></li>  
                <li><a href="#">Geöffnetes Menü</a>  
                <ul>  
                    <li><a href="#">Sammlung 1</a></li>  
                    <li class="finger"><a href="#">Das ist der Finger!!!!</a></li>  
                <li><a href="#">Sammlung 3</a></li>  
                    <li><a href="#">Sammlung 4</a></li>  
                </ul>  
                </li>  
                <li><a href="#">Ungeöffnetes Menü</a></li>  
            </ul>  
        </div>  
        <p id="footer"><a href="#">Impressum</a> | <a href="#">Rechtliche Hinweise</a> | <a href="#">Kontakt</a></p>  
    </div>  
</body>  
</html>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Dennis D.]

Moin Felix,

die Idee, das Menü erst am Ende zu erstellen ist nicht schlecht, war mir allerdings bisher nie möglich. Habe bisher immer mit Tabellen gearbeitet :D.

Soweit ich das geshen habe, hast du den weißen Teil über einen genaue Pixelhöhe angegeben.
Das hatte ich extra nicht so gemacht, da es sich nur um eine Demo-Seite handelt, die hinterher komplett in PHP umgeschrieben wird, und daher der Inhalt immer anders aussieht.

Feste Größenangeben sind damit nicht möglich.

Auch ist der "Finger" jetzt vom Hauptbereich durch einen Strich getrennt.

Das ganze Bedarf also noch ein paar Änderungen...

Nennen wir es Milestone 2.

Aber hoffentlich wird es nicht wie bei Vista.. Am Ende doch unfertig und ein Haufen Müll :D

Werde mal ein wenig dran rumbauen und wieder hochladen.. melde mich dann Morgen wieder.

[Felix Riesterer]

Lieber Dennis,

Soweit ich das geshen habe, hast du den weißen Teil über einen genaue Pixelhöhe angegeben.

meinst Du width? Das ist nur die Breite. Deine Seite hatte eine feste Breite, daher konnte ich Inhalt und Navi floaten lassen, da sie beide eine feste Breite hatten. Von einer festen Höhe kann nicht die Rede sein. Ein so naiver Anfänger bin ich dann nun doch nicht mehr!

Nun habe ich das Konzept aber nocheinmal überdacht und nur den Inhalt (weil er eine feste Breite hat geht das) floaten lassen, die Navi aber regulär anzeigen lassen. Daher konnte ich der Navi ein Hintergrundbild geben, das über die gesamte Breite geht (innerhalb von #main natürlich, der body hat ein eigenes Hintergrundbild), und welches die senkrechte Linie zur Abtrennung der Navi vom Inhalt beisteuert. Dadurch muss ich auch weder in #hier noch im #footer irgendwie mit dem Hintergrundbild tricksen.

Das hatte ich extra nicht so gemacht, da es sich nur um eine Demo-Seite handelt, die hinterher komplett in PHP umgeschrieben wird, und daher der Inhalt immer anders aussieht.

Das ist mir auch klar. Bin ja nicht von gestern. Jedoch sollte auch die PHP-Seite eine externe CSS-Datei einbinden, sonst erzeugst Du sinnlos höheren Traffic! Sprich: Alles, was im <style>-Element steht, wandert in eine externe CSS-Datei!

Feste Größenangeben sind damit nicht möglich.

Wenn Du mit "Größenangaben" Höhenangaben meinst, dann gebe ich Dir Recht, ansonsten widerspreche ich Dir und beweise mit meiner Arbeit das Gegenteil.

Auch ist der "Finger" jetzt vom Hauptbereich durch einen Strich getrennt.

Im IE ist er das, ja. Ich habe auf die Schnelle nur für Standardkonforme Browser geschrieben. Wenn man den IE in den standardkonformen Modus schickt, dann sollte bis auf diesen Rand alles stimmen. Der IE in der Version <7 versteht nichts von negativen Margins, daher ist beim Finger ein begrenzender rechter Rand zu sehen. Aber wer sich das in einem echten Browser ansieht, der wird das eben nicht zu sehen bekommen.

Ich wiederhole mich hier nur ungern, aber ich bin kein so dusslicher Anfänger mehr, daher erstelle und teste ich in verlässlichen Browsern!

Und was den saudämlichen IE angeht, für den habe ich das Problem jetzt anstatt eines negativen Wertes für margin-right (was der IE nicht versteht), mit relativer Positionierung und einem left-Wert von 1px gelöst. Voilà! Nun sieht es sowohl in standard-konformen Browsern, als auch im IE so aus, wie von Dir gewollt. Du darfst jetzt klatschen!

Das ganze Bedarf also noch ein paar Änderungen...

Welchen denn?

Nennen wir es Milestone 2.

Wie Du willst. Für mich ist es aus der Beta-Phase heraus und kann released werden.

Aber hoffentlich wird es nicht wie bei Vista.. Am Ende doch unfertig und ein Haufen Müll :D

Wir arbeiten hier mit verlässlichen Standards. Die sind erprobt und kein Müll! Und selbst der IE lässt sich bis Version 6 (die 5.5er mag ich nicht mehr unterstützen müssen) mit kleinen Tricks auch zur Kooperation bewegen.

Werde mal ein wenig dran rumbauen und wieder hochladen.. melde mich dann Morgen wieder.

Ich bin mit meinem letzten Ergebnis absolut zufrieden. Neueste Version nach wie vor unter test.htm zu bestaunen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Dennis D.]

Moinsen Felix,

besten Dank erstmal, vorzüglich gelöst das Ganze.

Wenn Du mit "Größenangaben" Höhenangaben meinst, dann gebe ich Dir Recht

Selbstverständlich meine ich damit nur die Höhenangeben.

Was den IE angeht...

Nunja.. ca. 100% der Besucher werden die IE nehmen, einschließlich mir, weil ich als MS-Beta-Tester nur auf MS-Ware zurückgreife.

Ja ich weiß.. Meine Kumpels sagen auch immer ich hätte Corporate Identity falsch verstanden, das ist ja nur für Mitarbeiter, aber ich zähl eben zu der eingefleischten MS-Fan-Gemeinde.

Wie dem auch sei, wenn dich das jetzt nicht zu stark anwidert, hätte ich da nochmal ne Frage.

Wie du vielleicht schon bemerkt hast, soll das eine NYC-Urlaubs-Page werden, wo man Bilder anschauen kann.

Normalerweise würde ich das in Tabellenform lösen, siehe hier:
http://wgrinteln.wg.funpic.de/pics.php?act=view&alb=1
(Hinweis: Die Seite stammt noch aus einer alten Zeit, der Quellcode is eine Katastrophe und die Seite ist <u>ausschließlich</u> mit dem IE zu betrachten. Aber ich werde sie schon bald umdesignen und dann gibts auch ne spezielle Text-Version. So schaffe ich WCAG 1.0 AAA :D)

Aber so in etwa will ich das haben.
4 Bilder nebeneinander. Jedes Bild in einem kästchen, durch padding etwas vom rand entfernt und unter dem bild dann der "Ansehen" link.

Ich hatte da folgende idee: http://dennisdieckmann.de.funpic.de/test/

Ich weiß, sind wieder verschachtelte Divs, aber ich bin das verschachteln gewohnt.

Also besten Dank für Vorschläge.

Viele Grüße und gute Nacht

Dennis

[Felix Riesterer]

Lieber Dennis,

besten Dank erstmal, vorzüglich gelöst das Ganze.

freut mich. Habe selbst auch wieder was dabei gelernt. :-) Was mich etwas wundert, ist der Umstand dass Du so überhaupt nix von Lerneffekt Deinerseits hier schreibst... Aber was erwarte ich denn?!

Was den IE angeht...

Das muss jeder selbst wissen. Was Webbrowser angeht, kann Microsoft technisch nur sehr bedingt mitreden. Im Moment jedenfalls. Was den Marktanteil angeht, dann gilt das mit den Millionen von Fliegen, die sich bei Sch...... angeblich auch nicht irren können.

Aber so in etwa will ich das haben.
4 Bilder nebeneinander. Jedes Bild in einem kästchen, durch padding etwas vom rand entfernt und unter dem bild dann der "Ansehen" link.

Bildergalerien löse ich so. Dazu verwende ich mein Bilderpopup-Script. Die <p>s innerhalb des <div id="bildergalerie"> kann man wie in obigem Beispiel kästchenweise layouten. Dass oben nur drei Kästchen pro Zeile stehen ist eine Frage der Maße - also absolut abänderbar.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Dennis D.]

Guten Morgen,

danke nochmal für Alles.

Was den Lerneffekt angeht. Nunja.. vergleich die ABI-Seite mit der jetztigen.. Das ist wei einem Blinden die Sehkraft geben.

Also kam schon einiges bei rtum, mal ganz davon abgesehen, das ich nun mit float und so was vertraut bin.

Ich denke mal der Fertigstellung der Seite sollte nun nichts mehr im Weg stehen.

Wenn noch was sein sollte, weiß ich ja jetzt, wo ich kompetente Antworten bekomme.

Beste Grüße

Dennis

[Felix Riesterer]

Lieber Dennis,

Was den Lerneffekt angeht. Nunja.. vergleich die ABI-Seite mit der jetztigen.. Das ist wei einem Blinden die Sehkraft geben.

welche ABI-Seite? http://wgrinteln.wg.funpic.de/? Da sehe ich übelste Layouttabellen... Zudem wird mir der Download des IE6 vorgeschlagen, da mein Firefox 2.0.0.11 angeblich "zu alt für den neuen Code dieser Seite" sei. Was ein himmelschreiender Quatsch!

Übrigens scheint mir der Code der Seite sowas von neu zu sein, dass man keinen Link benutzen kann, da (zumindest im Firefox) kein einziger Klick auf eine neue Seite führt. Irgendwie wirkt das unfertig.

Also kam schon einiges bei rtum, mal ganz davon abgesehen, das ich nun mit float und so was vertraut bin.

Also welche ABI-Seite meinst Du nun? http://wgrinteln.wg.funpic.de/pics.php?act=view&alb=1? Auch dort dasselbe. Außer im Ticker kann ich keinen Link benutzen. Und dass ein Ticker auch nicht wirklich prickelnd ist, kannst Du in diversen Archiv-Threads nachlesen, so von wegen Langsamkeit und Widerspruch im Sinne des sich-Informationen-gezielt-holen eines Seitenbesuchers...

Ich denke mal der Fertigstellung der Seite sollte nun nichts mehr im Weg stehen.

Ich bin mal darauf gespannt, was Du auf der ABI-Seite demnächst verändern wirst!

Wenn noch was sein sollte, weiß ich ja jetzt, wo ich kompetente Antworten bekomme.

Antworten ja, aber was Du dann daraus machst...?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Kai345]

[latex]Moin![/latex]

welche ABI-Seite? http://wgrinteln.wg.funpic.de/? Da sehe ich übelste Layouttabellen... Zudem wird mir der Download des IE6 vorgeschlagen, da mein Firefox 2.0.0.11 angeblich "zu alt für den neuen Code dieser Seite" sei. Was ein himmelschreiender Quatsch!

Immerhin ist

  
  function valid() {  
    if (navigator.appName != "Microsoft Internet Explorer")  
    {  
      document.getElementById("browser").style.visibility = "visible";  
    };  
  };

sehr konsequent ;)

Cü,

Kai

[Dennis D.]

Moin,

die Links sind alle klickbar, aber eben nur mit dem IE, weil ich dort etwas angewandt habe, wofür mich jeder htmler hassen wird:

<a href="bla"><td></td></a>

Ich hab das a um die tabelle gelegt um den klickbaren Bereich auch außerhalb der Schrift zu haben.

Ich weiß, läßt sich bestimmt auch mit css lösen.

Und das hintergrundbild wird über einen DirectX-Filter generiert, der nur im Internet Explorer funktioniert.
Müsste daher bei dir weiß sein.

Ich baue die Seite in kürze komplett um.
Auch eine textbasierte Seite ist geplant.

Was deinen Bildervorschlag angeht.. ich habe mir die Seite mal angesehen. Die Linkliste laut code is unheimlich groß, aber auf der Seite sehe ich sie nicht (class="erweiterbar").
Liegt das auch am IE, oder ist das so gewollt?

[Felix Riesterer]

Lieber Dennis,

weil ich dort etwas angewandt habe, wofür mich jeder htmler hassen wird:

<a href="bla"><td></td></a>

es ist halt invalider Code...

Ich hab das a um die tabelle gelegt um den klickbaren Bereich auch außerhalb der Schrift zu haben.

Ich weiß, läßt sich bestimmt auch mit css lösen.

Siehe Dein NYC-Projekt: Die Links in der Navi sind entsprechend formatiert, so wie Du das ursprünglich wolltest.

Und das hintergrundbild wird über einen DirectX-Filter generiert, der nur im Internet Explorer funktioniert.

Tja, wer sich nicht an die Standards hält (und nein, der IE ist kein Standard!), der riskiert, dass es eben nicht überall "funzt".

Ich baue die Seite in kürze komplett um.
Auch eine textbasierte Seite ist geplant.

Was soll jetzt dieser Quark mit "eine [zusätzliche] Textseite"??? Nimm doch mal bitte einen vernünftigen Browser und schalte das CSS darin ab! Dann siehst Du, dass die "textbasierte Seite" bereits enthalten ist!!

Was deinen Bildervorschlag angeht.. ich habe mir die Seite mal angesehen. Die Linkliste laut code is unheimlich groß, aber auf der Seite sehe ich sie nicht (class="erweiterbar").
Liegt das auch am IE, oder ist das so gewollt?

Das ist momentan so gewollt. Ich hatte einmal eine Version, in der die Hauptpunkte in der Navigation aufklappbar waren und die Inhalte der Unterpunkte entsprechend aufgeklappt wurden, wenn man mit der Maus darüber fuhr - es war etwas nervig, daher habe ich das per CSS wieder abgestellt.

Mal ganz im Ernst Dennis: Wenn Du Webseiten erstellst, dann solltest Du ganz schnell Firefox und Opera installieren, denn diese beiden Browser sind standardkonform. Mit diesen beiden allein solltest Du arbeiten, wenn Du eine Seite erstellst (ich arbeite nur mit dem Firefox und einem Plugin namens "Firebug"). Wenn in diesen beiden Browsern alles zur Zufriedenheit ist, dann kannst Du anschließend im IE testen - aber eben _anschließend_ und nicht vorher!

Liebe Grüße aus Ellwangen,

Felix Riesterer.