Eddie: Lösungsvorschlag für grafische Spielerei gesucht

Hallo allerseits,

könnt Ihr mir sagen, wie ich folgendes erreichen kann:

(vgl. http://www.gaedekenet.de/screenshot.gif)

Die transparente Grafik (die Ränder sind rot markiert) im <div>-Bereich Nr. 1 (grün) soll den Linkbereich Nr.2 (blau, auch <div>) überlagern. Funktioniert auch (wie man sieht) ganz wunderbar.
Problem: die Links sind jetzt nicht mehr anklickbar.

Habt Ihr eine Idee?

Eddie

  1. Hallo

    Problem: die Links sind jetzt nicht mehr anklickbar.

    Versuche es mal mit Image Maps.
    Programme zum Image Maps produzieren findest du z.B. über google.

    Grüsse,
    NiX.

  2. Hi Eddie,

    (vgl. http://www.gaedekenet.de/screenshot.gif)

    Die transparente Grafik (die Ränder sind rot markiert) im <div>-Bereich Nr. 1 (grün) soll den Linkbereich Nr.2 (blau, auch <div>) überlagern. Funktioniert auch (wie man sieht) ganz wunderbar.
    Problem: die Links sind jetzt nicht mehr anklickbar.

    Dein Vorhaben ist *so* nicht umzusetzen, da du *immer* auf den überlagernden Bereich klickst. Ein Ausweg wäre, diesen in Form einer Imagemap mit gleichlautenden Verweisen zu gestalten, denn die darunterliegenden Links wirst du niemals anklicken können.

    http://selfhtml.teamone.de/html/grafiken/verweis_sensitive.htm

    Grüße,
     Roland

    --
    http://my.opera.com/dev/articles/20030519/
    http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
    selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|
    1. Hi Roland,

      Dein Vorhaben ist *so* nicht umzusetzen, da du *immer* auf den überlagernden Bereich klickst.

      Problem: die Links werden dynamisch generiert (also nicht nur ihr Inhalt, sondern auch ihre Anzahl, Anordnung, etc.)

      Was wuerdet Ihr von folgendem Vorgehen halten:
      Ich erzeuge den Linkbereich zweimal, mit exakt denselben Ausmassen und bastel das ganze übereinander:

      oben: anklickbare Links
      mitte: Grafik
      unten: nicht anklickbare, aber vorhandene Links (nötig wegen der dynamischen Breite)

      Und der oberen Schicht weise ich dann einfach keine Farbe (weder für den grauen Rahmen, noch für den Inhalt) zu.

      Ist das machbar, oder stellen die verschiedenen Browser sowas dann verschoben zueinander dar? (==> bei schon einem Pixel Verschiebung hätten meine Links dann einen Schatten)

      Thanks, Eddie

      1. Hi Eddie,

        oben: anklickbare Links
        mitte: Grafik
        unten: nicht anklickbare, aber vorhandene Links (nötig wegen der dynamischen Breite)

        Und der oberen Schicht weise ich dann einfach keine Farbe (weder für den grauen Rahmen, noch für den Inhalt) zu.

        Ist das machbar, oder stellen die verschiedenen Browser sowas dann verschoben zueinander dar? (==> bei schon einem Pixel Verschiebung hätten meine Links dann einen Schatten)

        Lies bitte

        http://aktuell.de.selfhtml.org/artikel/css/fontsize/

        Du wirst erkennen, dass diese Methode im Grunde scheitern muss. Abgesehen davon verschieben sich alle Elemente, sobald sich die Fenstergröße ändert, in einem Browser eine Mindestgröße für den Text eingestellt ist oder jemand die Schrift hochskalieren muss, um etwas lesen zu können. Eventuell kommt es sogar zu Problemen, wenn man die Grafiken abstellt. Du kannst einiges abfangen, aber garantiert nicht alles. Besser also, du positionierst nichts über einem Link, sondern daneben.

        Grüße,
         Roland

        --
        http://my.opera.com/dev/articles/20030519/
        http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
        selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|
        1. Hi Roland,

          http://aktuell.de.selfhtml.org/artikel/css/fontsize/

          danke Dir, hab's gelesen, es aber dann trotzdem mal ausprobiert:

          http://www.gaedekenet.de/layer.htm

          Und bei mir sieht's mit IE 5.5, IE 6, Opera 6, Mozilla 1.2 ganz ok aus (wenn man mal davon absieht, dass ein paar der Browser die Positionierung noch ein bisschen verwurschteln).

          Ich habe bei der Schrift ein bisschen schummeln muessen und ihr im unteren Layer dieselbe Farbe gegeben, wie dem Hintergrund.
          Und die Grafiken sind ein bisschen verschwommen, aber da koennte ich ja dem unteren Layer einfach blanks derselben Groesse zuweisen.

          Was meinst Du (respektive Ihr) dazu?

          Eddie

          1. Hi Eddie,

            Was meinst Du (respektive Ihr) dazu?

            Ist das so gewollt?

            <img src="http://skop.net/self/gaedekenet.de.png" border="0" alt="">
            (Opera 7.03)

            Grüße,
             Roland

            --
            http://my.opera.com/dev/articles/20030519/
            http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
            selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|
            1. Hi Roland,

              Ist das so gewollt?

              vorerst ja. Die korrekt Anordnung der Buttons ist im Augenblick sekundär (im IE sieht's ueberigens so aus, wie es letztlich sein soll).
              Mir geht es nur darum, die Sache mit der Überlagerung zu realisieren und das sieht mir in Deinem Screenshot doch ganz gut aus.

              Die Links sind anklickbar, oder?

              Hast Du, abgesehen von der bloeden Anordnung der Buttons, noch irgendwelche Problem, oder bist Du der Meinung, ich kann das so machen?

              Eddie

              1. Hi Eddie,

                Die Links sind anklickbar, oder?

                Nein, sie liegen in Opera 7.03 unter einem anderen Bereich, das zeigt der Screenshot recht gut.

                Hast Du, abgesehen von der bloeden Anordnung der Buttons, noch irgendwelche Problem, oder bist Du der Meinung, ich kann das so machen?

                Hauptsache, es *funktioniert*, das tut es derzeit leider noch nicht vollständig. An deiner Stelle würde ich alle relevanten Browser (das sind einige...) installieren und nach jeder Änderung testen. Das Leben ist verdammt hart ;-)

                Grüße,
                 Roland

                --
                http://my.opera.com/dev/articles/20030519/
                http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
                selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|
                1. Das Leben ist verdammt hart ;-)

                  Den Eindruck habe ich gerade auch. :-)

                  Die Links sind anklickbar, oder?

                  Nein, sie liegen in Opera 7.03 unter einem anderen Bereich, das zeigt der Screenshot recht gut.

                  Bist Du sicher, dass Du sie nicht anklicken kannst?
                  Bei mir geht's mit Opera 6.01 und 7.11.

                  Hier nochmal 2 Versionen, die das Ganze veranschaulichen. Der Unterschied besteht nur im verschobenen oberen Layer:

                  Original: http://www.gaedekenet.de/layer.htm
                  Demo: http://www.gaedekenet.de/layer_sichtbar.htm

                  Ich kann mit jedem meiner Browser die Text und die (oberen) Bilder anklicken.

                  Eddie

                  1. hi,

                    Ich kann mit jedem meiner Browser die Text und die (oberen) Bilder anklicken.

                    die oberen bilder (über dem layer) lassen sich natürlich anklicken.
                    aber bei denen ist doch kein zusammenhang zur fragetsellung gegeben, oder?

                    gruss,
                    wahsaga

                    1. die oberen bilder (über dem layer) lassen sich natürlich anklicken.
                      aber bei denen ist doch kein zusammenhang zur fragetsellung gegeben, oder?

                      naja, nach mittlerweile 10 Antworten hat die Fragestellung sich ja auch fortentwickelt.
                      Das untere Layer soll einzig und allein dazu dienen, den farbigen Hintergrund mit dem grauen Rahmen passgenau aufzuspannen.
                      Die Links kommen dann natuerlich alle doppelt vor (im Quelltext).

                      Gibt es noch irgendwelche Einwaende gegen dieses Fahrfahren? Kann es jemals passieren, dass mir ein CSS-geeigneter moderner Browser da die beiden Layer verschoben darstellt?

                      Eddie

                      1. Hallo nochmal,

                        es wäre wirklich nett, wenn Ihr mir zu dieser Konstruktion (http://www.gaedekenet.de/layer.htm) Eure Meinung sagen könntet.
                        (http://www.gaedekenet.de/layer_sichtbar.htm veranschaulicht dabei nochmal die verwendete Technik.)

                        Insbesondere wäre ich Euch für einen Blick auf den Quelltext dankbar!
                        Validiert ist es, sowohl das HTML, als auch das CSS.

                        Kann ich das Eurer Meinung nach so lassen?

                        Danke, Eddie

                        P.S.: Und falls Ihr eine Idee habt, wie ich in Opera oder Mozilla das "Löschen"-Icon ganz nach rechts bekommen kann, fände ich das auch toll.

                        1. Hi,

                          Fällt Euch garnichts dazu ein?

                          Roland, Du hast doch ganz am Anfang mit der Schriftgröße, etc. argumentiert. Es ist mir aber in keinem meiner Browser gelungen, da wirklich Probleme zu bekommen. Mittlerweile habe ich meine Navigation fertig, bin mir aber immer noch nicht sicher, ob das in Ordnung ist:

                          http://www.gaedekenet.de/layer.htm
                          http://www.gaedekenet.de/layer_sichtbar.htm

                          Eddie

                        2. es wäre wirklich nett, wenn Ihr mir zu dieser Konstruktion (http://www.gaedekenet.de/layer.htm) Eure Meinung sagen könntet.

                          Öhm, sieht auf beiden Seiten reichlich schief und krum aus, was mich bei einem Blick in den Quellcode aber nicht wundert :) Da steckt so ziemlich alles drin, was ich nicht verwenden würde, sowohl aus prinzipiellen als auch aus Kompatibilitätsgründen: Tausende <div>s und <span>s (Betonung auf "Tausende"), Tabellenlayout, Tabellenlayout mit CSS-Layout gemischt, pixelgenau festgezimmertes Layout, "Layer".

                          Kann ich das Eurer Meinung nach so lassen?

                          Nein. Optisch nett, technisch gruselig.

                          P.S.: Und falls Ihr eine Idee habt, wie ich in Opera oder Mozilla das "Löschen"-Icon ganz nach rechts bekommen kann, fände ich das auch toll.

                          Da würde mir als erstes float:right einfallen, eventuell auch right:0px - aber bei dem Grundgerüst traue ich mich nicht zu sagen, ob das wirkt.

                          Davon unabhängig: Verzichte bei der Angabe von URLs besser auf die Angabe "./". Es ist erstens vollkommen unnötig und zweitens gibt es allem Anschein nach einige Programme, die damit nicht umgehen können.

                          Gruß,
                            soenk.e

                          1. Hi Sönke,

                            dank Dir für die Antwort!
                            Meinst Du denn, das Layout ist überhaupt realisierbar?

                            Tausende <div>s und <span>s (Betonung auf "Tausende"), Tabellenlayout, Tabellenlayout mit CSS-Layout gemischt, pixelgenau festgezimmertes Layout, "Layer".

                            Mmmh, ich hatte immer gedacht (bzw. die letzten Tage gehofft), dass zu viele <div>s kein Problem sind.
                            Und die <span>s dachte ich, seien ein Muss, um Schrift korrekt zu beschreiben. <p> passt nicht, sind ja keine Absätze, sondern nur Worte.
                            Die Tabellen habe ich aus reiner Verzweiflung eingesetzt, weil sich meine bloeden farbigen <div>s immer über die gesamte Breite gezogen haben, anstatt sich dem dynamischen Inhalt dynamisch anzupassen.

                            Da würde mir als erstes float:right einfallen, eventuell auch right:0px

                            Werde ich ausprobieren. Meinst Du, ich kann die Angaben "display:table-cell;" weiterhin verwenden oder ist davon auch eher abzuraten?

                            Verzichte bei der Angabe von URLs besser auf die Angabe "./". Es ist erstens vollkommen unnötig und zweitens gibt es allem Anschein nach einige Programme, die damit nicht umgehen können.

                            Wird gemacht !!!

                            Danke, Eddie

                            1. dank Dir für die Antwort!
                              Meinst Du denn, das Layout ist überhaupt realisierbar?

                              Durchaus. Zumindest scheint das Layout im Grunde recht einfach zu sein, was zwar nicht automatisch bedeutet, daß auch die Umsetzung einfach ist, aber es sollte ohne allzu große Verrenkungen möglich sein (behaupte ich jetzt mal ohne mir große Gedaken gemacht zu haben).

                              Tausende <div>s und <span>s (Betonung auf "Tausende"), Tabellenlayout, Tabellenlayout mit CSS-Layout gemischt, pixelgenau festgezimmertes Layout, "Layer".

                              Mmmh, ich hatte immer gedacht (bzw. die letzten Tage gehofft), dass zu viele <div>s kein Problem sind.

                              Jein, es ist eher das Gesamtwerk. In Deiner Seite befinden sich fünf Verweise (mit drumherum) und eine (Hintergrund-) Grafik, dafür erscheint mir der Aufwand, den Du betreibst, viel zu groß zu sein.

                              Ich behaupte mal so ganz blöd: Das gesamte Layout sollte sich mit höchstens einer Handvoll Verschachtelungen lösen lassen.

                              Und die <span>s dachte ich, seien ein Muss, um Schrift korrekt zu beschreiben. <p> passt nicht, sind ja keine Absätze, sondern nur Worte.

                              Ja, aber Deine Worte sind <a>-Elemente, also formatiere das <a> und, so nötig, <img> innerhalb des <a>s. <span> ist nur sehr selten wirklich unverzichtbar.

                              Die Tabellen habe ich aus reiner Verzweiflung eingesetzt, weil sich meine bloeden farbigen <div>s immer über die gesamte Breite gezogen haben, anstatt sich dem dynamischen Inhalt dynamisch anzupassen.

                              Vielleicht wäre es auch vom optischen her besser, wenn die Elemente alle gleich groß sind. Nehme ein <div> für die komplette Menüleiste und setze da die einzelnen Felder mit jeweils angepasstem width rein (hier: 100%:5=20%; Ränder gehören nicht zu width, Breite deshalb noch etwas kleiner setzen! IE-Fehler beachten!).

                              Du wirst die Felder wahrscheinlich floaten und, sofern nicht eh schon passiert, das Leisten-<div> mit position:relative oder position:absolute ausstatten müssen. Letzteres ist nötig, damit die Felder sich an der Leiste ausrichten und nicht am Fenster (das derzeitige Verhalten der Browser erscheint mir etwas zweifelhaft).

                              Da würde mir als erstes float:right einfallen, eventuell auch right:0px

                              Werde ich ausprobieren. Meinst Du, ich kann die Angaben "display:table-cell;" weiterhin verwenden oder ist davon auch eher abzuraten?

                              Da würde ich eher von abraten, schlicht und ergreifend weil dieser display-Wert doch etwas exotisch ist und dementsprechend zur Stolperfalle für nicht ganz so dolle Browser werden könnte. Und obendrein haben wir es ja nicht mit einer Tabelle zu tun.

                              Gruß,
                                soenk.e

                              1. Hi Sönke,

                                danke nochmal für Deine Mühe, werd's heut abend ausprobieren.
                                Noch eine ganz Kurze:
                                ist allgemein (also nicht bei diesem Problem) etwas gegen den Einsatz von Tabellen einzuwenden? Ich denke nämlich immer noch in Tabellen-Strukturen ...

                                Eddie

                                1. ist allgemein (also nicht bei diesem Problem) etwas gegen den Einsatz von Tabellen einzuwenden?

                                  Das ist eine Glaubensfrage ;) Das Tabellenlayout hat den Vorteil, auf so ziemlich allen grafischen Browsern zu einem vernünftigen Ergebnis zu führen. Der Nachteil ist, daß der Seiteninhalt logisch gesehen auseinander fällt und damit eine nicht-grafische Verarbeitung unnötig erschwert wird. Als Beispiel wird hier gern ein Blinden-Browser oder Textbrowser wie Lynx angeführt, aber die Problematik trifft genauso auf rein maschinelle Verarbeitung zu, Stichwort Suchmaschinen.

                                  Obendrein neigen mit Tabellen aufgebaute Seiten dazu, deutlichst größer zu sein als solche, die mit CSS arbeiten.

                                  Nichtsdestotrotz ist alleine der Einsatz von Layouttabellen noch keine Katastrophe, wirklich problematisch wird es erst, wenn die Tabellen vielmals verschachtelt überhand nehmen und/oder dann noch andere Vorgehensweisen, die aus derselben Ära stammen, dazukommen: <font> zum Beispiel.

                                  Andererseits kann man auch mit CSS viel Mist bauen. Seiten, die außer <div> und <span> so ziemlich gar keine HTML-Tags mehr enthalten, sind keinen Deut besser als solche, die nur aus Tabellen und <font> bestehen - im Hinblick auf ältere Browser sind sie vielleicht eher noch schlechter.

                                  Es gilt also, das Ganze zu betrachten. Die IMHO güldene Ideallösung: HTML zur logischen Textauszeichnung ausreizen (<h1>, <p>, <strong> & Co.), so daß das Dokument _ohne_ CSS, vielleicht sogar ohne HTML, also im Texteditor, übersichtlich und gut lesbar bleibt, dann die Darstellung mit CSS realisieren.

                                  Um auf Deine Ausgangsfrage zurück zu kommen: Tabellen lassen sich auch von HTML- & CSS-Puristen viel öfter einsetzen, als manch einer denkt. Tabellen sind nicht grundsätzlich böse, sie müssen nur ihren Sinn erfüllen.

                                  Gruß,
                                    soenk.e

                                  1. Hi Sönke!

                                    Danke nochmal für all die Infos, hat mir wirklich weitergeholfen!

                                    Eddie

  3. Hallo,

    Du könntest natürlich auch mit mehreren kleinen Graphiken in einzelnen <div>s arbeiten, und Dich so dem sichtbaren Rand der Graphik (also dem Bereich ab dem Du die darunter liegenden Links siehst) annähern. Zur Erläuterung eine Szizze:

    Deine Version (in einem <div>):
     ______________________
    | \                  / |
    |  \    sichtbar    /  |
    |   \              /   |
    |    \            /    |
    |     \__________/     |
    |     transparent      |
    |______________________|

    unterteilt (in fünf <div>s):
     ______________________
    |_\_________________/_|
     |_\
    _______________/_|
      |_\_____________/_|
       |_\
    ___________/_|
        |_\__________/_|

    Ich hoffe, es ird klar, was ich meine. Allerdings weiss ich nicht in wiefern die Idee halbwegs browserübergreifend durchfürbar ist.

    Ausprobieren.

    Viel Erfolg + schö
    stefan

    1. Hallo nochmal,

      Bei meiner Methode würde ich überigends die einzelnen Bilder nicht als <img> sondern mit CSS (background) einbinden. Grund: Bei nicht CSS fähigen Browsern verschieben (siehe [1]) sich so die einzelnen Bilder nicht, sondern verschwinden einfach ganz.

      Für nicht CSS-fähige Browser könntest Du denn noch zusätzlich das Bild am Stück als <img> mit style="display:none" einbinden, falls das Bild auch dann noch sichtbar sein muss.

      Ach ja, wenn Du in diesem Fall nicht mit <div>s, sondern mit <span>s + display:block arbeitest, hast Du noch den Vorteil, dass Du (wiederum ohne CSS-Darstellung) nicht fünf leere Blocklevelelemente (also die <div>s) _untereinander_ hast (die ja Inhaltlich sinnlos sind und so einige leere Zeilen erzeugen), sondern nur 5 inline-Elemente (sie <span>s), die garkeinen Platz wegnehmen.

      schö
      stefan

      -----
      zu [1]:
       ______________________
      |_\_________________/_|
      |_\
      _______________/_|
      |_\_____________/_|
      |_\
      ___________/_|
      |_\__________/_|

  4. hi,

    Die transparente Grafik (die Ränder sind rot markiert) im <div>-Bereich Nr. 1 (grün) soll den Linkbereich Nr.2 (blau, auch <div>) überlagern. Funktioniert auch (wie man sieht) ganz wunderbar.
    Problem: die Links sind jetzt nicht mehr anklickbar.

    warum soll eine grafik links überlagern?
    wenn du willst, dass der user einen link anklickt, dann überlagere ihn nicht mit anderen elementen.
    wenn jetzt das argument kommt, der überlagernde bereich ist doch aber transparent - ja warum soll er denn dann den link überhaupt überlagern?
    dann lasse die transparenten bereiche doch ganz weg, und platziere nur die sichtbaren elemente der grafik (afaics nur die schuhe & 'um die welt'-text?) so, dass sie eben nichts überlagern.

    gruss,
    wahsaga

  5. Moin!

    Die transparente Grafik (die Ränder sind rot markiert) im <div>-Bereich Nr. 1 (grün) soll den Linkbereich Nr.2 (blau, auch <div>) überlagern. Funktioniert auch (wie man sieht) ganz wunderbar.
    Problem: die Links sind jetzt nicht mehr anklickbar.

    Transparent hin oder her: so wird's nicht gehen!
    Du kannst Waren im Schaufenster auch nicht anfassen, obwohl die Scheibe transparent ist!
    Also zurück zum guten alten CSS:
    Alles was irgendwie nach Weltkarte aussieht wird auf jeden Fall ein Hintergrundbild.
    Wenn die Buttons fest/starr sind, kannst deren Symbole sogar in den _einen_ Hintergrund
    integrieren. Passen sich die Buttons in der Breite an, wirst du um eine Tabelle nicht
    herum kommen, in der die erste Zelle den "Rest" Weltkarte als Bild enthält.
    So wie ich das im Moment sehe, wird die erste Zelle wahrscheinlich sogar eine feste
    Breite bekommen müssen!? Oder wie sollte das Auge, der Link UND der Kartenrest in die
    eine Zelle? *grübel* Die anderen Zellen könnten aber wieder dynamisch sein.

    Gruß

    Der Hans