Mattes: Unterschiedliche Darstellung Offline vs div. Browser

Beitrag lesen

Wie erwartet: Auf die Nase hast du ja bereits anständig bekommen, widmen wir uns also dem Problem. Obwohl …

Bzgl dem auf die Nase kriegen: ich habe mir die ganze Sache selbst beigebracht ohne Vorkenntnisse, das sollte bei einem solchen Kommentar berücksichtigt werden. Auch wenn hier natürlich viele die Superheldenahnung haben, habe ich bereits - man mag es kaum glauben - von anderen Profis Lob dafür bekommen.

Naja, "Profi" ist ein weites Feld. Was du da zusammengebastelt hast, macht im Browser in der Tat schon einen ansehnlichen Eindruck. Unter der Haube sieht es allerdings eher nicht so schön aus (nein, offen und ehrlich: gruselig, je tiefer ich da reinschaue).

Webseiten haben immer mindestens zwei Aspekte, die grafische Gestaltung und der technische Unterbau. Ein Grafiker, echter oder nur gefühlter Profi, muss nicht automatisch Ahnung von HTML & Co. haben. Und andersrum haben Techniker erfahrungsgemäß noch weniger Ahnung von guter Gestaltung …

Egal... leider kann man hier keine Bilder hochladen, weshalb ich es so lösen musste. Nun kann man sie nicht sehen - schade.

Es gibt etliche Bilder-Upload-Dienste, unter den Stichworten "bilder" und "upload" findest du ganz schnell einen.

Es ist so:

Offline-Modus: Menüleiste unten wird angezeigt.

Safari-Modus: Menüleiste wird nicht angezeigt.

Firefox-Modus: Menüleiste wird angezeigt, dafür nicht die auf der Seite enthaltenen Bilder.

Felix hat bereits (s)ein Beispiel gezeigt, bei mir sieht es gleich aus. Ich vermute, die Menüleiste, die du vermisst, soll unten stehen, wo die vier Pfeile ihren gemeinsamen Ursprung haben.

Woran das nun liegt, mag ich im Moment nicht schauen, weil dein Code sehr schlecht zu überblicken ist und mir die Zeit fehlt (oder die Langeweile). Dass du viel CSS und auch etwas Javascript in den HTML-Elementen stecken hast, ist da noch das kleinere Problem:

  • Du eine div-Wüste fabriziert. Dein Code hat HTML-seitig kaum Struktur, weil du ausser div, a und img fast nichts verwendet hast, was HTML anbietet. Und das, was du verwendest, ist dann auch noch aus der Steinzeit und falsch angewendet (die Funktion von tt wird heutzutage mit CSS/font-family umgesetzt und Blockelemente haben in dem Inline-Element tt schon grundsätzlich nichts zu suchen).

Die kleine Menüliste setzt du zum Beispiel so um:

<font size="large" color="#4b4949">  
<a href="http://www.riekmund.com/collectionsandshop.html">new collection</a>  
<br>  
<br>  
dog coat - comes soon  
<br>  
<br>  
<strong>project weddings dress</strong>  

anstatt so:

<ol id="menue">  
<li><a href="http://www.riekmund.com/collectionsandshop.html">new collection</a></li>  
<li>dog coat - comes soon</li>  
<li class="gewaehlt">project weddings dress</li>  
</ol>

Der Unterschied, die klarere Struktur sollte offensichtlich sein. Es ist eine Liste als solche zu erkennen (ol), es sind die Menüpunkte als solche zu erkennen (li) und das ganze Geraffel für die Gestaltung (font, br) verschwindet ins CSS (menue, gewaehlt).
Von Details wie der Tatsache, dass du mit CSS-margin oder -padding die Abstände viel feiner steuern kannst als mit plump dahingeklatschten br, will ich gar nicht anfangen.

  • Die Elementbezeichner sagen nichts über ihr Element aus. Könntest du auf Anhieb, ohne Nachzuschauen, sagen, welche Funktion c2 hat? Vermutlich nicht – und du hast das geschrieben. Wie soll's anderen erst gehen? Etwas à la "menue" wäre doch gleich viel feiner.

Verwende immer Bezeichner, die ihrem Namen auch gerecht werden. Falls dir für irgendwas kein Bezeichner einfällt, ist in aller Regel auch der Bezeichner überflüssig. CSS lässt sich nicht nur über id und class mit HTML verknüpfen, ganz im Gegenteil, das Meiste lässt sich mittels http://wiki.selfhtml.org/wiki/CSS/Selektoren ansprechen.

Wie schon angesprochen wirst du dich früher oder später in diesem Durcheinander aus verschiedenen Seitenteilen (HTML, CSS, Javascript) und nichtssagenden Elementen (div-Wüste, Blanko-Bezeichner) verzetteln.
Solange du daran arbeitest, mag das für dich funktionieren, aber lass' das mal ein, zwei Monate ruhen. Noch schlimmer ist es für diejenigen, die den Code gar nicht kennen und dir bei der Fehlersuche helfen sollen (wir).

Kurzum: Ich möchte dir _dringendst_ ans Herz legen, erstmal aufzuräumen und Struktur in die Angelegenheit zu bringen. Glaube mir, wenn du dich jetzt auf die fehlende Menüleiste oder andere Kleinigkeiten stürzt, wird es später nur noch um so schlimmer. Schaffe erstmal das Fundament, auf dem du deine Villa bauen kannst.

0 72

Unterschiedliche Darstellung Offline vs div. Browser

Girlfrommars13
  • browser
  1. 0
    Mattes
    1. 0
      Girlfrommars13
      1. 0
        Felix Riesterer
      2. 3
        Mattes
        1. 0
          Gunnar Bittersmann
        2. 0
          Girlfrommars13
          1. 0
            Felix Riesterer
            1. 0
              Gunnar Bittersmann
            2. 0
              Girlfrommars13
          2. 0
            Mattes
            1. 0
              Gunnar Bittersmann
              1. 0
                Matthias Apsel
                1. 0
                  Gunnar Bittersmann
            2. 0
              Girlfrommars13
              1. 0
                Felix Riesterer
              2. 0
                Mattes
                1. 0
                  Girlfrommars13
                  1. 0
                    Matthias Apsel
                    1. 0
                      Girlfrommars13
                      1. 0
                        Matthias Apsel
                        1. 0
                          Girlfrommars13
                          1. 0
                            Der Martin
                  2. 0
                    Felix Riesterer
                    1. 0
                      Girlfrommars13
                      1. 0
                        Girlfrommars13
                        1. 0
                          Gunnar Bittersmann
                      2. 0
                        Mattes
                        1. 0
                          Girlfrommars13
                          1. 0
                            Mattes
                            1. 0
                              Der Martin
                            2. 0
                              Girlfrommars13
                              1. 0
                                Gunnar Bittersmann
                                1. 0
                                  Girlfrommars13
                                2. 0
                                  Girlfrommars13
                                  1. 0
                                    Felix Riesterer
                                    1. 0
                                      Girlfrommars13
                                      1. 0
                                        Gunnar Bittersmann
                              2. 0
                                Felix Riesterer
                                1. 0
                                  Girlfrommars13
                                  1. 0
                                    Girlfrommars13
                                    1. 0
                                      Girlfrommars13
                                      1. 0
                                        Felix Riesterer
                                        1. 0
                                          Girlfrommars13
                                          1. 0
                                            Gunnar Bittersmann
                                            1. 0
                                              Girlfrommars13
                                          2. 0
                                            Felix Riesterer
                                            1. 0
                                              Girlfrommars13
                                    2. 0
                                      Gunnar Bittersmann
                                  2. 0
                                    Gunnar Bittersmann
    2. 0
      Felix Riesterer
      1. 0
        Girlfrommars13
        1. 0
          Felix Riesterer
          1. 0
            Girlfrommars13
      2. 0
        Girlfrommars13
      3. 0
        Mattes
    3. 0
      Gunnar Bittersmann
      1. 0
        Girlfrommars13
        1. 0

          Hover-Effekt bei Hyperlinks

          Felix Riesterer
          • css
          1. 0
            Girlfrommars13
            1. 0
              Felix Riesterer
              1. 0
                Girlfrommars13
                1. 0
                  stareagle
                  1. 0
                    Girlfrommars13
  2. 2
    Felix Riesterer
  3. 0
    Gunnar Bittersmann
    1. 0
      Der Martin
      • menschelei
      1. 0
        Gunnar Bittersmann
        1. 0
          Tabellenkalk
          1. 0
            Gunnar Bittersmann
    2. 0
      Girlfrommars13
      1. 0
        Gunnar Bittersmann