Benjamin: Aktiven Verweis in Menueleiste mit HTML/CSS/SSI betonen

Hallo zusammen!

Ich stehe vor dem Problem meine WebSeite,
die ich schon vor einigen Wochen zu Papier gebracht habe,
in sinnvolles und so perfektes (um zu lernen) wie mögliches HTML umzuwandeln.

Die aktuelle Version der Seite:
www.bkeil.com/new4/

Das Konzept ist ganz einfach:
Das Inhaltsfenster hat ein Format von 16:9
Inhaltsfenster PLUS Navigation oben + SubNavigation ist 4:3

Meine ersten Versuche waren damals Frames,
jetzt bin ich einen Schritt weiter und versuche es
mit HTML 4.01 Transitional /CSS / SSI
(ohne Iframes und ohne JavaScript, habe ich beschlossen)

Das Grundgerüst steht nun vorerst Pixelgenau und Netscape 4
wird mit einem Warnhinweis getadelt.

MEIN AKTUELLES PROBLEM

Die Links verändern ja wunderbar in allen Situationen
die Farben (hover,link,...), allerdings bekomme ich
es nicht hin, dass wenn ich z.B. auf der Seite "Gästebuch"
bin dieser Link auch irgendwie als aktiv ausgezeichnet ist.

Da ich vorhabe das Grundgerüst in 2 Abschnitte (header,footer)
zu zerlegen und diese dann in den einzelnen HTML-Seiten
per include zu laden, kann ich die Navagation nicht individuell
anpassen. (als Übung für größere Projekte)

Ich bräucht quasi irgendeinen Trick um mit einer Art Varialen
zu arbeiten, oder einen Befehl, der sagt:
Wenn eine Seite auf sich selbst verweist, hat der Verweis folgende
 Eigenschaften:... oder so.

Ich hoffe, ich habe nicht zuviel und kompliziert geschrieben
und würde mich sehr über Hilfestellungen, Links oder Nachfragen
freuen!!

Grüße,

Benjamin

P.S. War es Eurer Meinung nach sinnvoll, das Grundgerüst
mit einer Tabelle zu gestalten, oder gibt es (für diese Seite)
eine sinnvollere Lösung?

  1. Hallo zusammen!

    Hallo du alleine!

    Ich stehe vor dem Problem meine WebSeite,
    die ich schon vor einigen Wochen zu Papier gebracht habe,
    in sinnvolles und so perfektes (um zu lernen) wie mögliches HTML umzuwandeln.

    Perfekt - fast, kann soweit keine formellen Fehler erkennen, allerdings ist eine prozentuelle Breitenagabe einer Tabelle nicht shcön, wenn die Spalten alle absolut definiert sind. Funktioniert zwar bei Browsern, die die relativen Spaltenbreiten anhand der absoluten Angaben ausrechnen (ich denke, der Standard sieht das auch so vor, aber es halten sich halt nicht alle Browser dran...). Allerdings merke ich gerade, dass dein Layout gar nicht möchte, dass der Browser das hochrechnet... leider noch ein Minuspunkt für PErfektheit
    sinnvoll - naja,ich finde es sehr gut, dass du mit einer externen Stylesheet-Datei arbeitest. Wieso bist du nicht konsequent dabei, sondern hast zuhauf zu den class-Bezügen noch 'manuelle' style-Angaben in den Tags???

    Die aktuelle Version der Seite:
    www.bkeil.com/new4/

    steht ja oben auch :-)

    Das Konzept ist ganz einfach:
    Das Inhaltsfenster hat ein Format von 16:9
    Inhaltsfenster PLUS Navigation oben + SubNavigation ist 4:3

    gut gedacht, zeigen leider nicht alle Browser so :-(
    Ja, Opera berechnet die Spaltenbreiten neu (s.o.) um die Seitenbreite ganz auszufüllen (das sagst du ja im 'table'-Tag).

    Ausweg, das auch Browser ohne leichte HTML-SChwächen dein Layout so sehen, wie sie möchten: Du arbeitest doch schon mit zwei inneinandergeschachtelten Tabellen, zur Zentrierung. Gebe der inneren einfach eine absolute Breite. Es müssten 578px sein...

    Meine ersten Versuche waren damals Frames,
    jetzt bin ich einen Schritt weiter und versuche es
    mit HTML 4.01 Transitional /CSS / SSI
    (ohne Iframes und ohne JavaScript, habe ich beschlossen)

    ohne Iframes: Brav!
    ohne JS: Geschmackssache

    Das Grundgerüst steht nun vorerst Pixelgenau und Netscape 4
    wird mit einem Warnhinweis getadelt.

    Wieso warnst du den IE 5.0 nicht? DEr zeigt die Seite auch nicht nach Vorschrift an und hält sich (genauso wieder IE 5.5) nicht an die von dir genannten 'etablierten Standards' (wäre übrigens schön, wenn sie etabliert wären, es sind nunmal die offiziellen Standards).

    MEIN AKTUELLES PROBLEM

    Die Links verändern ja wunderbar in allen Situationen
    die Farben (hover,link,...), allerdings bekomme ich
    es nicht hin, dass wenn ich z.B. auf der Seite "Gästebuch"
    bin dieser Link auch irgendwie als aktiv ausgezeichnet ist.

    Geht leider ohne JavaScript nicht :-(

    Ansonsten würde ich es wirklich mit individueller Navigation machen, oder du legst PHP oder CGi unter die ganze Sache (ist eh die beste Übung für 'große Projekte')

    Ich hoffe, ich habe nicht zuviel und kompliziert geschrieben

    Ich hoffe, dass ich das auch nicht getan habe ;-)

    und würde mich sehr über Hilfestellungen, Links oder Nachfragen
    freuen!!

    Gern geschehen!
    Achso einen Link hättest du gerne: Mir fällt auf, dass meine Seite in einigen technischen Sachen deiner gleicht (Tabellen, Zentrierung, CSS-lastige formatierung, Standard-Konformität, anschaubar mit allen Browsern). Allerdings verwende ich eine individuelle Navigation, die du ja verhindern möchtest (die auch sehr aufwendig in der Wartung ist...).
    www.spaltnagel.net/dw

    P.S. War es Eurer Meinung nach sinnvoll, das Grundgerüst
    mit einer Tabelle zu gestalten, oder gibt es (für diese Seite)
    eine sinnvollere Lösung?

    AUf jeden Fall!

    Gruß aus der bayrischen Pampa,

    Arne.

    1. Hallo zusammen!
      Hallo du alleine!

      Hallo nochmal!

      Perfekt - fast, kann soweit keine formellen Fehler erkennen, allerdings ist eine prozentuelle Breitenagabe einer Tabelle nicht shcön, wenn die Spalten alle absolut definiert sind. Funktioniert zwar bei Browsern, die die relativen Spaltenbreiten anhand der absoluten Angaben ausrechnen (ich denke, der Standard sieht das auch so vor, aber es halten sich halt nicht alle Browser dran...). Allerdings merke ich gerade, dass dein Layout gar nicht möchte, dass der Browser das hochrechnet... leider noch ein Minuspunkt für PErfektheit
      sinnvoll - naja,ich finde es sehr gut, dass du mit einer externen Stylesheet-Datei arbeitest. Wieso bist du nicht konsequent dabei, sondern hast zuhauf zu den class-Bezügen noch 'manuelle' style-Angaben in den Tags???

      Ich bin mir nicht ganz sicher ob ich Dich richtig verstanden habe,
      ich zitiere mal kurz aus meinem Quelltext:

      <tr>
      <th style="height:55px;" class="borderobun"> </th>
      <th width="117" style="width:117px;" class="borderlireobunnav"><a href="index.html" class="nav">Design</a></th>
      <th width="115" style="width:115px;" class="borderreobunnav"><a href="index.html" class="nav">Literatur-Tips</a></th>
      <th width="115" style="width:115px;" class="borderreobunnav"><a href="index.html" class="nav">Ben</a></th>
      <th width="115" style="width:115px;" class="borderreobunnav"><a href="index.html" class="nav">Links</a></th>
      <th width="116" style="width:116px;" class="borderreobunnav"><a href="index.html" class="nav">Gästebuch</a></th>
      <th class="borderobun"> </th>
      </tr>

      Diese Tabelle hat eine Gesamtbreite von 100% (im externen css angegeben), da ich beim ersten und letzten th keine
      Breitenangabe gemacht habe, gehe ich davon aus, dass sie so
      dargestellt wird:  *,117px,115px,115px,115px,116px,*

      Ist das falsch, bzw. muss ich das anders machen?

      Ich habe mit Mozilla & IE6 Screenshots gemacht und
      alles wird genauso dargestellt wie es sein soll.

      Das CSS wird noch überarbeitet, mir ist es
      auch lieber, wenn ich alles extern habe,
      aber soweit bin ich noch nicht.

      Das Konzept ist ganz einfach:
      Das Inhaltsfenster hat ein Format von 16:9
      Inhaltsfenster PLUS Navigation oben + SubNavigation ist 4:3
      gut gedacht, zeigen leider nicht alle Browser so :-(
      Ja, Opera berechnet die Spaltenbreiten neu (s.o.) um die Seitenbreite ganz auszufüllen (das sagst du ja im 'table'-Tag).

      Ausweg, das auch Browser ohne leichte HTML-SChwächen dein Layout so sehen, wie sie möchten: Du arbeitest doch schon mit zwei inneinandergeschachtelten Tabellen, zur Zentrierung. Gebe der inneren einfach eine absolute Breite. Es müssten 578px sein...

      Das geht ja nicht, da sie ja eine Breite von 100% haben soll;
      die horizontalen SchmuckLinien sollen ja bis zum Rand gehen.

      Das Grundgerüst steht nun vorerst Pixelgenau und Netscape 4
      wird mit einem Warnhinweis getadelt.
      Wieso warnst du den IE 5.0 nicht? DEr zeigt die Seite auch nicht nach Vorschrift an und hält sich (genauso wieder IE 5.5) nicht an die von dir genannten 'etablierten Standards' (wäre übrigens schön, wenn sie etabliert wären, es sind nunmal die offiziellen Standards).

      Muss ich mir mal mit IE 5.0 anschauen, ich dachte
      eigentlich dass alle Browser meine Warnmeldung anzeigen,
      die das mit dem CSS Import nicht verstehen und daher
      auch problematisch sind. Kann man den 5er zusätzlich installieren?

      Etabliert werd ich ändern zu ´offiziell´, danke.

      Ansonsten würde ich es wirklich mit individueller Navigation machen, oder du legst PHP oder CGi unter die ganze Sache (ist eh die beste Übung für 'große Projekte')

      Achso einen Link hättest du gerne: Mir fällt auf, dass meine Seite in einigen technischen Sachen deiner gleicht (Tabellen, Zentrierung, CSS-lastige formatierung, Standard-Konformität, anschaubar mit allen Browsern). Allerdings verwende ich eine individuelle Navigation, die du ja verhindern möchtest (die auch sehr aufwendig in der Wartung ist...).
      www.spaltnagel.net/dw

      Muss ich mir morgen mal in aller Ruhe anschauen.

      Ich werd mal schauen ob ich das mit dem PHP blicke...
      Wird wohl dann die beste Lösung sein.

      Vielen Dank schonmal für die Hilfe!!!!!

      Grüße aus Bötzingen (bei Freiburg),

      Benjamin

      1. Hallo nochmal!

        Auch nochmal HAllo!

        Ich bin mir nicht ganz sicher ob ich Dich richtig verstanden habe,
        ich zitiere mal kurz aus meinem Quelltext:

        <tr>
        <th style="height:55px;" class="borderobun"> </th>
        <th width="117" style="width:117px;" class="borderlireobunnav"><a href="index.html" class="nav">Design</a></th>
        <th width="115" style="width:115px;" class="borderreobunnav"><a href="index.html" class="nav">Literatur-Tips</a></th>
        <th width="115" style="width:115px;" class="borderreobunnav"><a href="index.html" class="nav">Ben</a></th>
        <th width="115" style="width:115px;" class="borderreobunnav"><a href="index.html" class="nav">Links</a></th>
        <th width="116" style="width:116px;" class="borderreobunnav"><a href="index.html" class="nav">Gästebuch</a></th>
        <th class="borderobun"> </th>
        </tr>

        Diese Tabelle hat eine Gesamtbreite von 100% (im externen css angegeben), da ich beim ersten und letzten th keine
        Breitenangabe gemacht habe, gehe ich davon aus, dass sie so
        dargestellt wird:  *,117px,115px,115px,115px,116px,*

        Tabellen sind nunmal keine frames;). Platzhalterangaben gibt es quasi nicht. da du jeweils ein Leerzeichen in den *-ZEllen hast und keine Breitenangabe wird die Spaltenbreite aus der Laufweite eines Leerzeichen errechnet...

        Ist das falsch, bzw. muss ich das anders machen?

        ja, siehe oben

        Ich habe mit Mozilla & IE6 Screenshots gemacht und
        alles wird genauso dargestellt wie es sein soll.

        Ich habe es mit verschiedenen REleases des 6er Opera getestet, da wird es so angezeigt wie oben beschrieben...

        Das CSS wird noch überarbeitet, mir ist es
        auch lieber, wenn ich alles extern habe,
        aber soweit bin ich noch nicht.

        guter Ansatz!

        Ausweg, das auch Browser ohne leichte HTML-SChwächen dein Layout so sehen, wie sie möchten: Du arbeitest doch schon mit zwei inneinandergeschachtelten Tabellen, zur Zentrierung. Gebe der inneren einfach eine absolute Breite. Es müssten 578px sein...

        Das geht ja nicht, da sie ja eine Breite von 100% haben soll;
        die horizontalen SchmuckLinien sollen ja bis zum Rand gehen.

        Ok, das stellt tatsächlich ein Problem dar... Versuche es doch mal damit, den beiden Tabellenzellen links und rechts width="50%" zu geben.. Eine andere Lösung hätte ich nicht...

        Das Grundgerüst steht nun vorerst Pixelgenau und Netscape 4
        wird mit einem Warnhinweis getadelt.
        Wieso warnst du den IE 5.0 nicht? DEr zeigt die Seite auch nicht nach Vorschrift an und hält sich (genauso wieder IE 5.5) nicht an die von dir genannten 'etablierten Standards' (wäre übrigens schön, wenn sie etabliert wären, es sind nunmal die offiziellen Standards).

        Muss ich mir mal mit IE 5.0 anschauen, ich dachte
        eigentlich dass alle Browser meine Warnmeldung anzeigen,
        die das mit dem CSS Import nicht verstehen und daher
        auch problematisch sind.

        Den Zusammenhang verstehe ich zwar nicht so ganz, ist im Prinzip aber so machbar, denke ich.
        Übrigens fällt mir gerade ein, ich könnte mir ja mal den Spaß machen und mir die Seite mit lynx anschauen...

        Kann man den 5er zusätzlich installieren?

        Nein, IE ist der einzige Browser, der keine zwei Versionen auf einem Rechner zulässt...

        Ich werd mal schauen ob ich das mit dem PHP blicke...
        Wird wohl dann die beste Lösung sein.

        Ist mit SIchrheit nicht schlecht...

        Vielen Dank schonmal für die Hilfe!!!!!

        Gern geschehen!

        Grüße aus einem Keller in München....

        Arne.

        1. Auch nochmal HAllo!

          Hallo :-)

          Das geht ja nicht, da sie ja eine Breite von 100% haben soll;
          die horizontalen SchmuckLinien sollen ja bis zum Rand gehen.

          Ok, das stellt tatsächlich ein Problem dar... Versuche es doch mal damit, den beiden Tabellenzellen links und rechts width="50%" zu geben.. Eine andere Lösung hätte ich nicht...

          Das müsste eigentlich funktionieren, allerdings sind
          50% + 50% + 578px mehr als 100% und von daher auch
          nicht ganz korrekt, ich sehe schon dass mein TabellenLayout
          irgendwie auf Tolleranz der Browser spekuliert, egal wie ich´s mache.
          Am Besten ich Versuchs mal ohne Tabellen.

          Übrigens fällt mir gerade ein, ich könnte mir ja mal den Spaß machen und mir die Seite mit lynx anschauen...

          Hab ich schon gemacht und war eigentlich ganz zufrieden.

          Grüße aus Bötzingen,

          Benjamin

  2. Hi, Benjamin

    Meine ersten Versuche waren damals Frames,
    jetzt bin ich einen Schritt weiter und versuche es
    mit HTML 4.01 Transitional /CSS / SSI
    (ohne Iframes und ohne JavaScript, habe ich beschlossen)

    Das hört sich alles so wunderbar an, dass man es kaum glauben mag. Weiter so ;)

    Das Grundgerüst steht nun vorerst Pixelgenau und Netscape 4
    wird mit einem Warnhinweis getadelt.

    Hm. Pixelgenaues Layout birgt zwar Risiken in sich, aber in deinem Fall könnte es ohne Probleme funktionieren. N4: ACK.

    Ich bräucht quasi irgendeinen Trick um mit einer Art Varialen
    zu arbeiten, oder einen Befehl, der sagt:
    Wenn eine Seite auf sich selbst verweist, hat der Verweis folgende
    Eigenschaften:... oder so.

    Du könntest per Javascript den Pfad der Seite abfragen und dementsprechend die Eigenschaft der entsprechenden ID ändern. Dazu muss natürlich jede Zelle eine eigene ID haben. Da du ohne Javascript auskommen willst (ich könnte dich drücken), definiere einfach eine neue Klasse (zB .aktiv) und weise diese der gewünschten Zelle zu. Das klappt allerdings nur, wenn du auch fünf verschiedene Includes verwendest. Ich denke, das ist der beste Weg.

    Ich hoffe, ich habe nicht zuviel und kompliziert geschrieben
    und würde mich sehr über Hilfestellungen, Links oder Nachfragen
    freuen!!

    s. unten ;)

    P.S. War es Eurer Meinung nach sinnvoll, das Grundgerüst
    mit einer Tabelle zu gestalten, oder gibt es (für diese Seite)
    eine sinnvollere Lösung?

    Wenn du schon so eine 'saubere' Seite haben willst (und das willst du), solltest du dich auch beim Layout auf CSS beschränken. Tabellen sind ja nicht dafür gedacht. Wenn alle Seitenelemente mittels Stylsheets positioniert werden, sind spätere Änderungen wesentlich leichter. Weiters kannst für verschiedene Ausgabemedien eigene Layouts definieren. Und und und...

    Alles, was du brauchst, findest du in http://selfhtml.teamone.de/css/eigenschaften/index.htm.

    Wenn du Beispiele benötigst, sieh' dich mal auf dieser Seite um:
    http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    Besonders gelungen finde ich auch http://www.giersche.com/ (benötigt allerdings JS). Mein derzeitiges Spielzeug: URI siehe oben.

    LG & Viel Spaß
    Orlando

    PS: Bevor Kai sich die Finger wundtippt, setze ich lieber gleich den Link: http://mozilla.linuxfaqs.de/ *scnr*

    1. Hi, Benjamin

      Hallo Orlando

      Das Grundgerüst steht nun vorerst Pixelgenau und Netscape 4
      wird mit einem Warnhinweis getadelt.

      Hm. Pixelgenaues Layout birgt zwar Risiken in sich, aber in deinem Fall könnte es ohne Probleme funktionieren. N4: ACK.

      Was ist ACK?

      Ich bräucht quasi irgendeinen Trick um mit einer Art Varialen
      zu arbeiten, oder einen Befehl, der sagt:
      Wenn eine Seite auf sich selbst verweist, hat der Verweis folgende
      Eigenschaften:... oder so.

      Du könntest per Javascript den Pfad der Seite abfragen und dementsprechend die Eigenschaft der entsprechenden ID ändern. Dazu muss natürlich jede Zelle eine eigene ID haben. Da du ohne Javascript auskommen willst (ich könnte dich drücken), definiere einfach eine neue Klasse (zB .aktiv) und weise diese der gewünschten Zelle zu. Das klappt allerdings nur, wenn du auch fünf verschiedene Includes verwendest. Ich denke, das ist der beste Weg.

      Naja, 5 verschiedene Includes sind auch nicht weniger
      Aufwand als wenn der Quelltext direkt in den HTMLs steht.
      Muss wohl irgendwann php lernen, aber ein Schritt nach dem anderen.

      P.S. War es Eurer Meinung nach sinnvoll, das Grundgerüst
      mit einer Tabelle zu gestalten, oder gibt es (für diese Seite)
      eine sinnvollere Lösung?

      Wenn du schon so eine 'saubere' Seite haben willst (und das willst du), solltest du dich auch beim Layout auf CSS beschränken. Tabellen sind ja nicht dafür gedacht. Wenn alle Seitenelemente mittels Stylsheets positioniert werden, sind spätere Änderungen wesentlich leichter. Weiters kannst für verschiedene Ausgabemedien eigene Layouts definieren. Und und und...

      Alles, was du brauchst, findest du in http://selfhtml.teamone.de/css/eigenschaften/index.htm.

      Da war ich in den letzten, vielen Tagen schon sehr sehr oft :-)
      Aber Danke. Selfhtml ist echt genial!

      Wenn du Beispiele benötigst, sieh' dich mal auf dieser Seite um:
      http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

      Besonders gelungen finde ich auch http://www.giersche.com/ (benötigt allerdings JS). Mein derzeitiges Spielzeug: URI siehe oben.

      Sehr schöne Beispiele, auch Dein ´Spielzeug´ ist sehr beeinduckend.

      PS: Bevor Kai sich die Finger wundtippt, setze ich lieber gleich den Link: http://mozilla.linuxfaqs.de/ *scnr*

      Hätte nicht gedacht dass Mozialla so viel kann!!

      Viele Grüße,

      Benjamin