Girlfrommars13: Unterschiedliche Darstellung Offline vs div. Browser

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

Hallo!
Ich hoffe, jemand kann mir folgendes für mich unerklärliche Phänomen erklären:

Folgende Seite http://www.riekmund.com/projectweddingdress.html sieht bei mir offline so aus (so soll es auch sein):

In meinem Safari (nachdem ich den Cache geleert habe auch noch) dann so:

Und in meinem Firefox Browser dann so:

Fangen wir erstmal mit der Menüleiste an... Die div-Formatierung im Head sieht wie folgt aus:

div.c4 {position:fixed;bottom:3%;right:4%;margin-right:0px;margin-bottom:0px}

Und im Body dann so:

<div class="c4"><a href="http://www.riekmund.com/about.html" class="class1"><img src="about.gif" border="0" width="7%" onmouseover="this.src='about.gif';" onmouseout="this.src='about.gif'; opacity:0.3" alt="about"></a>
<img src="blind.gif" border="0" width="1%" alt="">
<img src="collections_shop.png" border="0" width="20%" onmouseover="this.src='collections_shop.png';" onmouseout="this.src='collections_shop.png'; opacity:0.3" alt="collections and shop">
<img src="blind.gif" border="0" width="1%" alt="">
.
.
.
</div>

Ich hoffe auf Antwort! Vielen Dank schonmal!

Gruß,
Girlfrommars13

  1. Folgende Seite http://www.riekmund.com/projectweddingdress.html sieht bei mir offline so aus (so soll es auch sein):

    "vBulletin-Systemmitteilung
    Sie sind nicht angemeldet oder Sie haben keine Rechte diese Seite zu betreten."

    Ich finde Boards mit Registrierungszwang ja so geil :>

    <div class="c4"><a href="http://www.riekmund.com/about.html" class="class1"><img src="about.gif" border="0" width="7%" onmouseover="this.src='about.gif';" onmouseout="this.src='about.gif'; opacity:0.3" alt="about"></a>

    Ohje, mit dem Durcheinander wirst du hier gleich mächtig was auf die Nase kriegen …

    Die Darstellungsangaben (border, width) solltest du tunlichst separat in die Abteilung CSS verfrachten, Gleiches gilt für den Javascript-Teil (onmouse, Zuweisung in DOMContentLoaded).
    In deinem HTML/CSS/Javascript-Mischmasch verzettelst du dich früher oder später.

    1. Danke schonmal für die Antwort! Damit kann ich ja schonmal was anfangen.

      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.

      Egal... leider kann man hier keine Bilder hochladen, weshalb ich es so lösen musste. Nun kann man sie nicht sehen - schade. 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.

      Wie ist es denn bei dir/euch, wenn du/ihr den Link zur HP öffne(s)t?

      Vielen Dank!

      1. Liebes Girlfrommars13,

        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.

        hast Du das in irgendeiner Form erwähnt? Das muss ich echt überlesen haben.

        Auch wenn hier natürlich viele die Superheldenahnung haben, habe ich bereits - man mag es kaum glauben - von anderen Profis Lob dafür bekommen.

        Lob geht runter wie geschmolzene Butter, gell?

        Egal... leider kann man hier keine Bilder hochladen, weshalb ich es so lösen musste.

        Du hast selbst Webspace, den Du betreust...?

        Wie ist es denn bei dir/euch, wenn du/ihr den Link zur HP öffne(s)t?

        So (FF 35.0.1@ubuntu):

        Liebe Grüße,

        Felix Riesterer.

        --
        "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
      2. 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.

        1. @@Mattes:

          nuqneH

          Webseiten haben immer mindestens zwei Aspekte, die grafische Gestaltung und der technische Unterbau.

          Bloß gut, dass du mit „mindestens zwei“ Luft nach oben gelassen hast. Die ist auch bitter nötig, denn beides sind Nebenschauplätze.

          Die grafische Gestaltung ist das i-Tüpfelchen beim Design. Nicht mehr. (Aber auch nicht weniger.)

          Der technische Unterbau interessiert den Nutzer nicht, solange die Seite performant und benutzbar (auch barrirefrei) ist.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. Es gibt etliche Bilder-Upload-Dienste, unter den Stichworten "bilder" und "upload" findest du ganz schnell einen.

          Felix hat mich schon drauf hingewiesen, aber danke. ;)

          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.

          Genau, ich habe jetzt die Programmierung nochmal überarbeitet und erstmal sortiert, die Style-Informationen ins CSS gepackt. Es ist nun - für's erste - etwas übersichtlicher (wenn man mal von der "Div-Wüste" und nun auch "Img-Wüste" absieht) und wird auch in Safari zumindest so angezeigt (mit der großen Menüleiste unten), wie es aussehen soll.

          • 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).

          Ok, gut, das weiss ich nun. Wie gesagt, ist auch schon ein paar Jahre her, dass ich mich damit beschäftigt und die Website erstellt habe, nun gilt es, sie zu überarbeiten. Man ist dazu verleitet, wenn man sich nicht auskennt und sowas wie div kennenlernt - das ja funktioniert - es dann überall zu verwenden, ohne sich noch drum zu kümmern, was es sonst so gibt. Bzw hab ich da mit Sicherheit damals auch einige andere Dinge ausprobiert, aber kostet einfach Zeit und Nerven, wenn man sich damit nicht auskennt und es versucht, es aber nicht klappt. Dann nimmt man doch das, womit man schon klarkommt - in meinem Fall div. Aber ich möchte ja dazulernen und deshalb...

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

            
          habe ich das jetzt mal für die Seite <http://www.riekmund.com/projectweddingsdress.html> probiert für dieses kleine Menü.  
          Das Problem ist jetzt hierbei, sobald sich die/das Browserfenstergröße/-format verändert, verschiebt sich auch dieses Menü wieder.  
          Ich fürchte, das mit margin und padding hab ich noch nicht so ganz verstanden. Ich habe versucht, das Element am unteren und rechten Browserfensterrand auszurichten (margin-bottom, margin-right). Das funktionierte nicht, das Element hat sich gleich mittig an den oberen Rand verbarrikadiert, egal welche Werte ich eingegeben habe.  
            
          Bzgl dem <br>, was würde man denn innerhalb eines Textes für einen Zeilenumbruch verwenden?  
            
          Ich möchte halt erreichen, dass alle Elemente sich an die Größe des Fensters anpassen. Ähnlich wie hier: <http://www.carlosfernandez.de/index.php?page=contact> (wenn auch das bestimmt mit irgendeinem Baukastensystem hergestellt wurde und keine "freie Programmierung" war?!)  
            
          
          > - 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.  
            
          Du hast recht, ist nachvollziehbar, gut, dass ich das jetzt weiss.  
            
          
          > 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.  
            
          Das muss ich erst noch auschecken..  
            
          Vielen Dank schonmal für deine Hilfe!
          
          1. Liebes Girlfrommars13,

            Es ist nun - für's erste - etwas übersichtlicher (wenn man mal von der "Div-Wüste" und nun auch "Img-Wüste" absieht) und wird auch in Safari zumindest so angezeigt (mit der großen Menüleiste unten), wie es aussehen soll.

            Dein HTML-Code enthält einige Teile, die lediglich für das Aussehen der Seite ("Design") genutzt werden. Das sollte so nicht sein. Alles, was das Aussehen steuert, sollte über CSS realisiert werden. Dieser Baum links oben sollte rein über ein Hintergrundbild umgesetzt sein, keinesfalls jedoch von <img>-Elementen!

            Was die eigentlichen Inhalte der Seite angeht, so solltest Du für Überschriften tatsächlich <h1>, <h2>... <h6> benutzen, für Textabsätze <p>, für Listen <ul> oder <ol> (je nachdem, ob die Reihenfolge wesentlich ist), für die Navigation <nav> (wenn Du den neuen HTML5-Doctype einsetzt, ansonsten gerne <div id="nav"> stattdessen).

            Gerade für das visuelle Gestalten einer Navigation ist CSS sehr gut geeignet. [Beispiel]

            habe ich das jetzt mal für die Seite http://www.riekmund.com/projectweddingsdress.html probiert für dieses kleine Menü.

            In der URL ist wohl ein "s" nach "wedding" zuviel: http://www.riekmund.com/projectweddingdress.html

            Das Problem ist jetzt hierbei, sobald sich die/das Browserfenstergröße/-format verändert, verschiebt sich auch dieses Menü wieder.

            Du hast es noch nicht so umgesetzt, wie es im oben verlinkten CSS-Kapitel erklärt wird. Wenn die Darstellung rein mit CSS gesteuert wird, dann ist das heutzutage schon sehr robust und "funzt einwandfrei". Das setzt aber auch ein vernünftiges Markup (semantischen HTML-Code) voraus.

            Ich fürchte, das mit margin und padding hab ich noch nicht so ganz verstanden. Ich habe versucht, das Element am unteren und rechten Browserfensterrand auszurichten (margin-bottom, margin-right). Das funktionierte nicht, das Element hat sich gleich mittig an den oberen Rand verbarrikadiert, egal welche Werte ich eingegeben habe.

            Diese beiden Eigenschaften (margin und padding) haben wesentlich mit dem Box-Modell zu tun. Dieses müsstest Du verstehen, um diese beiden Eigenschaften sinnvoll einzusetzen. Für Deinen konkreten Zweck benötigst Du anscheinend außerdem noch das Konzept der absoluten Positionierung.

            Bzgl dem <br>, was würde man denn innerhalb eines Textes für einen Zeilenumbruch verwenden?

            Üblicherweise ist Text in Absätze aufgeteilt. Bei der korrekten Verwendung mehrer <p>-Elemente sollte ein Zeilenumbruch wie zu erwarten vorgenommen werden. Für einen Zeilenumbruch innerhalb eines Absatzes ist <br> sinnvoll und richtig, es ist aber keinesfalls ein "Abstandhalter" zwischen beispielsweise <img>- und <ol>-Elementen! Dafür brauchst Du das oben schon erwähnte Box-Modell und die margin-Eigenschaft.

            Nebenbei: <img>-Elemente sind inline-Elemente (denke "Smiley"), die wie ein Wort im Fließtext in einem umspannenden Block-Element liegen sollten/müssen (je nach verwendetem Doctype), damit Dein HTML laut Spezifikation korrekt ist. Für mich bedeutet das als Faustregel, dass ein <img> mindestens in einem <p> stehen muss, alternativ natürlich <li> oder <h1-6>. Die anderen Block-Elemente (<div>, <section>, <article>, <nav>...) finde ich weniger geeignet, da sie ihrerseits <p>, <li> (natürlich innerhalb <ol>/<ul>) und <h1-6> enthalten können. Rein der Dokumentstruktur nach fehlt da das eigentliche Text-Element innerhalb dessen das Bild eingebunden ist.

            In HTML5 findest Du insbesondere <figure> für Abbildungen. Das ist natürlich sehr zweckgebunden (eben Abbildungen) und für den Smiley im Fließtext eher nicht geeignet.

            Ich möchte halt erreichen, dass alle Elemente sich an die Größe des Fensters anpassen. Ähnlich wie hier: http://www.carlosfernandez.de/index.php?page=contact (wenn auch das bestimmt mit irgendeinem Baukastensystem hergestellt wurde und keine "freie Programmierung" war?!)

            Dazu benötigst Du noch mehr CSS. Die sogenannten "media queries" ermöglichen es, für bestimmte Fenstergrößen (also das, was man auch als "Viewport" bezeichnet) angepasste Layoutangaben (z.B. in eigens dafür angelegten CSS-Dateien) zu machen. Das wäre aber erst der nächste Schritt nachdem Du Deine Seite mit vernünftigem Markup erstellt hast.

            Liebe Grüße,

            Felix Riesterer.

            --
            "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
            1. @@Felix Riesterer:

              nuqneH

              für die Navigation <nav> (wenn Du den neuen HTML5-Doctype einsetzt, ansonsten gerne <div id="nav"> stattdessen).

              Nein. Kein Wenn und Aber. Es gibt keinen Grund, nicht HTML5 zu verwenden.

              Für einen Zeilenumbruch innerhalb eines Absatzes ist <br> sinnvoll und richtig,

              Innerhalb eines Absatzes sollte ein Zeilenumbruch nicht sinnvoll und richtig sein. Es sei denn, der Absatz ist eine Strophe eines Gedichts/Liedes oder eine Postadresse o.ä.

              Aber auch dann ist <br> nicht sinnvoll und richtig, sondern notgedrungen, weil Hixie den Sinn des l-Elements nicht verstanden hat.

              In HTML5 findest Du insbesondere <figure> für Abbildungen. Das ist natürlich sehr zweckgebunden (eben Abbildungen) und für den Smiley im Fließtext eher nicht geeignet.

              Nicht eher nicht, sondern gar nicht. <figure> dient zur Auszeichnung eines Blocks innerhalb des Textes (üblicherweise mit einer Unterschrift figcaption à la „Abbildung 42“), der aus dem Text heraus referenziert wird (à la „wie Abbildung 42 zeigt“). [HTML5]

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            2. > Dein HTML-Code enthält einige Teile, die lediglich für das Aussehen der Seite ("Design") genutzt werden. Das sollte so nicht sein. Alles, was das Aussehen steuert, sollte über CSS realisiert werden. Dieser Baum links oben sollte rein über ein Hintergrundbild umgesetzt sein, keinesfalls jedoch von <img>-Elementen!

              Den Baum habe ich nun mit auf den Hintergrund gepackt.

              Was die eigentlichen Inhalte der Seite angeht, so solltest Du für Überschriften tatsächlich <h1>, <h2>... <h6> benutzen, für Textabsätze <p>, für Listen <ul> oder <ol> (je nachdem, ob die Reihenfolge wesentlich ist), für die Navigation <nav> (wenn Du den neuen HTML5-Doctype einsetzt, ansonsten gerne <div id="nav"> stattdessen).

              Ich kenne nun immerhin <ul>, <ol>, <p> und <h1-6>, die ich noch einsetzen werde, wenn ihre Zeit gekommen ist ;)

              Gerade für das visuelle Gestalten einer Navigation ist CSS sehr gut geeignet. [Beispiel]

              Ich habe jetzt erstmal versucht, das Menüproblem zu lösen wie Matthes es beschrieben hat. Noch ist es nicht gelöst, obwohl das auch überein stimmt mit diesem Artikel. "display:inline" hab ich beachtet für's horizontale Menü, trotzdem sieht das aus wie Kraut und Rüben.

              Wie ich das alles gemacht habe und es aussieht, steht in der Antwort auf Matthes letzten Beitrag.

              In der URL ist wohl ein "s" nach "wedding" zuviel: http://www.riekmund.com/projectweddingdress.html

              ups, danke ;)

              Dazu benötigst Du noch mehr CSS. Die sogenannten "media queries" ermöglichen es, für bestimmte Fenstergrößen (also das, was man auch als "Viewport" bezeichnet) angepasste Layoutangaben (z.B. in eigens dafür angelegten CSS-Dateien) zu machen. Das wäre aber erst der nächste Schritt nachdem Du Deine Seite mit vernünftigem Markup erstellt hast.

              Damit werde ich mich dann am Ende mal auseinandersetzen, wenn die Website einigermaßen so ist, wie sie sein soll.

              Danke für die Tipps!

          2. Das Problem ist jetzt hierbei, sobald sich die/das Browserfenstergröße/-format verändert, verschiebt sich auch dieses Menü wieder.
            Ich fürchte, das mit margin und padding hab ich noch nicht so ganz verstanden. Ich habe versucht, das Element am unteren und rechten Browserfensterrand auszurichten (margin-bottom, margin-right).

            Box-Elemente haben vier Maße, von innen nach außen: das Innenmaß (width bzw. height), dann einen Innenabstand (padding), dann die Umrandung (border) und zuletzt den Außenabstand (margin).

            Der Begriff "Abstand", hier der äußere, bezieht sich eher auf den Abstand zu anderen Elementen, nicht zum Fenster- oder Seitenrand. Zum Positionieren in der Seite möchtest du stattdessen left/top/bottom/right zusammen mit position benutzen.
            Es gibt Ausnahmen von dieser Vorgehensweise, das scheint mir hier aber nicht nötig zu sein.

            Da das kleine Menü mit der unteren Menüleiste (about, collections & shop, etc) zusammenhängt (der Pfeil kommt von dort), sollte es in Abhängigkeit von ihr positioniert werden.
            Nächste Aufgaben also: div#c5 in eine Liste umwandeln und das kleine Menü im Unterpunkt collections & shop einfügen, in etwa so:

            <ol id="menue">  
             <li>about</li>  
             <li>collections & shop  
               <ol>  
                 <li>new collection</li>  
                 <li>dog coat</li>  
               </ol>  
             </li>  
            </ol>
            

            Das Hauptmenü bekommst du CSS-seitig über #menue zu fassen, das Untermenü über #menue ol. Da die beiden Menüs jetzt zusammenhängen, lässt sich auch das Untermenü in Abhängigkeit des Hauptmenüs positionieren – hast du das Hauptmenü in Abhängigkeit des Fensters positioniert, ist ohne weiteres Zutun auch das Untermenü in Abhängigkeit des Fensters positioniert. Verwende position sparsam, position:fixed nur einmal.

            Bzgl dem <br>, was würde man denn innerhalb eines Textes für einen Zeilenumbruch verwenden?

            <br> – aber du hattest mit dem Menü halt keinen (Fließ-) Text, sondern eine Liste. Und bevor du fragst: Für einen Absatz im Text ist <p> da, nicht <br><br>.

            1. @@Mattes:

              nuqneH

              und das kleine Menü im Unterpunkt collections & shop einfügen, in etwa so:
              <li>collections & shop

              In etwa. Nicht ganz.

              & ist in HTML ein Sonderzeichen; es leitet eine Zeichenreferenz ein. Wenn das Zeichen '&' gemeint ist, muss es escapet werden: &amp;

              In dem Fall also: <li>collections &amp; shop

              Qapla'

              --
              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
              1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

                & ist in HTML ein Sonderzeichen; es leitet eine Zeichenreferenz ein. Wenn das Zeichen '&' gemeint ist, muss es escapet werden: &amp;

                In dem Fall also: <li>collections &amp; shop

                In HTML5 darf es aber auch unmaskiert stehen, z.B. falls danach ein Leerzeichen folgt. Siehe https://mathiasbynens.be/notes/ambiguous-ampersands

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen chi und Chicago.

                1. @@Matthias Apsel:

                  nuqneH

                  In HTML5 darf es aber auch unmaskiert stehen, z.B. falls danach ein Leerzeichen folgt.

                  Eben wusst’ ich’s noch.

                  Qapla'

                  --
                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            2. Vielen vielen Dank für die vielen Tipps! Ich konnte jetzt erst probieren, weil ich die letzten 2 Tage gearbeitet habe und das Resultat meiner Versuche ist: Es wird irgendwie immer schlimmer X-(
              Seit 2 Stunden google ich und versuche diverse Sachen,...

              Da das kleine Menü mit der unteren Menüleiste (about, collections & shop, etc) zusammenhängt (der Pfeil kommt von dort), sollte es in Abhängigkeit von ihr positioniert werden.
              Nächste Aufgaben also: div#c5 in eine Liste umwandeln und das kleine Menü im Unterpunkt collections & shop einfügen, in etwa so:

              (...)

              hab ich so probiert (man muss dazu sagen, was ihr bisher nicht sehen konntet, dass die Menüpunkte im großen Menü keine Schrift, sondern Bilder sind):

                
              <ul id="menue">  
              	<li><a href="http://www.riekmund.com/about.html"><img src="about.gif" alt="about"></a></li>  
              	<li><img src="collections_shop.png" alt="collections and shop">  
              		<ul id="menue ul">  
              			<li><a href="http://www.riekmund.com/collectionsandshop.html" class="class2" >new collection</a></li>  
              			<li>dog coat - comes soon</li>  
              			<li><strong>project weddings dress</strong></li>  
              			<li><a href="http://www.riekmund.com/wherethewildthingsare.html">graduation collection</a></li>  
              		</ul>  
              	</li>  
              	<li><a href="http://www.riekmund.com/CV.html"><img src="CV.gif" alt="CV"></a></li>  
              	<li><a href="http://www.riekmund.com/artandpoetry.html"><img src="art_poetry.gif" alt="art and poetry"></a></li>  
              	<li><a href="http://www.riekmund.com/imprint.html"><img src="imprint.gif" alt="imprint"></a></li>  
              </ul>
              

              und im CSS dann:

                
              #menue {  
               		margin:0px auto;  
               		padding:0px;  
               		list-style-type: none;  
              	}  
              	  
              #menue li {  
                      display:inline;  
                      margin:0px;  
                  }  
                
              #menue li a:link {  
                      padding: 0px;  
                      color: #4b4949;  
                      opacity: 0.3;  
                      height: 1%;  
                
                  }  
                
              #menue li a:hover {  
                      border: 0px;  
                      background-color: none;  
                      color: #4b4949  
                      opacity: 1;  
                  }  
                
                
                
                
              #menue ul {  
               		margin-top:0px;  
               		margin-left:0px;  
               		padding:0px;  
               		list-style-type: none;  
              	}  
              	  
              #menue ul li {  
                      padding: 0px;  
                      margin: 5px;  
                      width: 50%;  
                      color: #4b4949;  
                      font-family: Lucida Sans Typewriter, Courier New;  
                      font-size:13px;  
                      text-align:right;  
                  }  
                
              #menue ul li a:link {  
                      border: 0;  
                      background-color: none;  
                      padding: 0px;  
                      font-color: #4b4949;  
                      font-family: Lucida Sans Typewriter, Courier New;  
                      font-size:13px;  
                  }  
                
              #menue ul li a:hover {  
                      display:block;  
                      border: 0;  
                      background-color: none;  
                      font-color: #4b4949;  
                  }  
                
              
              

              Width soll für die gesamte horizontale Menübreite stehen. Height war jetzt nur zum ausprobieren, was passiert,...

              Wie das ganze aussieht, könnt ihr hier sehen.
              Wie es aussehen sollte:
              http://pl.vc/4hf5c

              Ich frage mich, warum trotz "display:inline" die Elemente im großen Menü nicht nebeneinander stehen (und überhaupt: warum sie so überdimensional groß sind)?! Und im kleinen Menü dann schon, obwohl die Befehle andersherum sind?

              Ich habe auch versucht, die einzelnen Menüpunkte des großen Menüs ins CSS zu verfrachten wie auf dieser Seite beschrieben:

              http://studentwebhosting.com/tutorials/css-based-menu-with-images/

              Ihr wollt gar nicht wissen, wie die Seite danach aussah. ^^

              Ohje...

              1. Liebes Girlfrommars13,

                Ich frage mich, warum trotz "display:inline" die Elemente im großen Menü nicht nebeneinander stehen

                sie haben dafür nicht genügend Platz, da sie zu breit sind.

                (und überhaupt: warum sie so überdimensional groß sind)?!

                Die verwendeten Grafiken haben große Pixelwerte, die auf dem Monitor entsprechend viel Raum einnehmen. Du könntest Mittels CSS die Anzeigebreite festlegen (width-Eigenschaft mit festen Pixel-Werten), damit der Browser die Grafiken kleiner skaliert.

                Liebe Grüße,

                Felix Riesterer.

                --
                "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
              2. <ul id="menue">

                <li><a href="http://www.riekmund.com/about.html"><img src="about.gif" alt="about"></a></li>
                <li><img src="collections_shop.png" alt="collections and shop">
                <ul id="menue ul">
                <li><a href="http://www.riekmund.com/collectionsandshop.html" class="class2" >new collection</a></li>

                  
                Die Struktur ist so weit korrekt. Jedoch:  
                  
                - "menue ul" ist wegen des Leerzeichens keine gültige ID. "menue\_ul" wäre eine, aber dieses Element braucht derzeit überhaupt keine eigene ID, denn du erreichst es genauso gut über die ID der übergeordneten Liste #menue.  
                  
                - Du hast da noch eine nichtssagende Klasse class2 (wenn sie nicht sogar ebenfalls gänzlich überflüssig ist).  
                  
                
                > #menue {  
                >  		margin:0px auto;  
                >  		padding:0px;  
                >  		list-style-type: none;  
                > 	}  
                > 	  
                > #menue li {  
                >         display:inline;  
                >         margin:0px;  
                >     }  
                  
                Hier musst du aufpassen. Die Regel "#menue li" passt auf sämtliche (!) li, die sich irgendwo unterhalb des Elements #menue befinden. Das gilt also sowohl für die li-Elemente der Liste menue selbst, als auch für die li-Elemente der Untermenü-Liste!  
                Die Elemente des Untermenüs sollen aber nicht in einer Reihe (inline), sondern untereinander erscheinen.  
                  
                Ändere die Regel in "#menue > li". Der Pfeil bewirkt, dass sich die Regel nur auf die direkten Kinder bezieht.  
                  
                
                > #menue li a:link {  
                >         padding: 0px;  
                >         color: #4b4949;  
                >         opacity: 0.3;  
                >         height: 1%;  
                >     }  
                  
                height wirkt nicht auf inline-Elemente. a ist ein solches.  
                  
                
                > #menue ul li {  
                >         padding: 0px;  
                >         margin: 5px;  
                >         width: 50%;  
                >         color: #4b4949;  
                  
                Du verwendest an mehreren Stellen dieselbe Farbangabe. Du kannst die Farbe auch einmalig bei #menue setzen, sie wird an alle Kindelemente vererbt.  
                Ähnliches gilt für die Schriftfamilie und -größe und noch ein paar Eigenschaften mehr.  
                  
                
                > #menue ul li a:hover {  
                >         display:block;  
                  
                Beim Überfahren des Elements die display-Eigenschaft zu ändern, halte ich für unklug, weil an der display-Eigenschaft wesentliche Eigenarten der Positionierung des Elements hängen. Was vorher brav in einer Zeile nacheinander weglief, verteilt sich dann mit einem Male über die gesamte Seite …  
                  
                
                > Width soll für die gesamte horizontale Menübreite stehen. Height war jetzt nur zum ausprobieren, was passiert,...  
                  
                width und height brauchst du eigentlich gar nicht. Du kannst die Menüs mit bottom und right positionieren (zusammen mit position:absolute o.ä.) und den Rest dem Browser überlassen. Die Menüs breiten sich dann von alleine so aus, dass sie schön auf den Bildschirm passen, egal, welche Ausmaße Bildschirm und Schrift haben.  
                  
                
                > Ich frage mich, warum trotz "display:inline" die Elemente im großen Menü nicht nebeneinander stehen (und überhaupt: warum sie so überdimensional groß sind)?!  
                  
                Wie Felix schon schrieb, sind deine Textgrafiken riesig; collections & shop ist mit 1560 Pixeln gar breiter als mein Monitor. Verkleinere die Grafiken. Dann braucht man auch nicht mehr ein halbes Megabyte für fünf Wörter runterladen …  
                  
                
                > Ich habe auch versucht, die einzelnen Menüpunkte des großen Menüs ins CSS zu verfrachten wie auf dieser Seite beschrieben:  
                >   
                > <http://studentwebhosting.com/tutorials/css-based-menu-with-images/>  
                  
                Die Lösung ist insofern nicht mehr aktuell, als dass dort Text in einer Standardschrift als Grafik geladen wird (anstatt als echter Text). Diese Anzeige kann man mit heutigen Browsern auch ohne Textgrafiken lösen, lediglich die kleinen Piktogramme wären Grafikelemente.  
                Die Floaterei hat, davon abgesehen, auch so ihre Nachteile.  
                  
                Vergiss das.  
                  
                  
                Hast du dir in deinem Browser die Entwicklerwerkzeuge angeschaut? Bei Firefox stecken sie im Menü unter eben diesem Namen, es gibt auch eine Erweiterung namens [Firebug](https://getfirebug.com/). Andere Browser bieten Ähnliches.  
                Meist lässt sich auch mit Rechts auf ein Element in der Webseite klicken und dann etwas à la "Element untersuchen" auswählen.  
                  
                Du bekommst dort die gesamte Seite als Baum aus HTML-Elementen angezeigt, so, wie der Browser sie intern vorhält, und kannst für jedes Element die CSS-Eigenschaften einsehen und vor allem auch ändern.  
                Das ist superpraktisch zum Ausprobieren, da du die zugrundeliegenden Dateien nicht ändern brauchst. Du öffnest die Seite, bastelst im Browser die CSS-Sachen zurecht und erst, wenn's passt, übernimmst du das Gewünschte in die Datei.  
                Verzettelst du dich zwischendrin, brauchst du die Seite nur neu zu laden und kannst ohne Umstände da wieder anfangen, wo noch alles in Ordnung war.
                
                1. Vielen Dank!! Habe alles so geändert und nun sieht es schon besser aus, allerdings klappt die Positionierung noch nicht so.

                  width und height brauchst du eigentlich gar nicht. Du kannst die Menüs mit bottom und right positionieren (zusammen mit position:absolute o.ä.) und den Rest dem Browser überlassen.

                  Das habe ich nun so gelöst:

                  #menue {  
                   		list-style-type: none;  
                   		color: #4b4949  
                   		position: absolute;  
                   		bottom: 10%;  
                   		right: 4%;  
                  	}  
                  
                  

                  Funktioniert nicht so richtig! Es sieht daraufhin trotzdem so aus (die Positionierung wurde komplett ignoriert): http://www.riekmund.com/projectweddingdress.html

                  Und nochmal eine andere Frage: Bringe ich den Pfeil denn auch in diesen Code im Menü mit ein?

                  Hast du dir in deinem Browser die Entwicklerwerkzeuge angeschaut?

                  Noch nicht bzw bin ich mir grad nicht sicher, ob du das meinst, was ich denke.. aber das mache ich morgen mal, da hab ich etwas mehr Zeit!

                  1. Om nah hoo pez nyeetz, Girlfrommars13!

                    #menue {

                      list-style-type: none;  
                      color: #4b4949  
                      position: absolute;  
                      bottom: 10%;  
                      right: 4%;  
                    

                    }

                      
                    Schaut man sich die Seite (jetzt!) an, fehlt die Angabe „position: absolute;“ Das könnte ein Zeichen für einen Syntaxfehler sein. Und es gibt ihn auch, vor dem „po“. Erkennbar auch durch das Syntaxhighlighting in diesem Forum.  
                      
                    
                    > Funktioniert nicht so richtig! Es sieht daraufhin trotzdem so aus (die Positionierung wurde komplett ignoriert): <http://www.riekmund.com/projectweddingdress.html>  
                      
                    Vielleicht hilft auch [position richtig verwenden](http://selfhtml.apsel-mv.de/position/position.html), denn auch ohne Syntaxfehler scheint mir das nicht richtig zu sein.  
                      
                    Matthias
                    
                    -- 
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [TeX und Textmarker](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=T#tex).  
                    ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
                    
                    
                    1. Schaut man sich die Seite (jetzt!) an, fehlt die Angabe „position: absolute;“ Das könnte ein Zeichen für einen Syntaxfehler sein. Und es gibt ihn auch, vor dem „po“. Erkennbar auch durch das Syntaxhighlighting in diesem Forum.

                      Recht hast du! habe den Satzaufbau geändert und es ist tatsächlich was passiert! ;) Danke!

                      1. Om nah hoo pez nyeetz, Girlfrommars13!

                        Recht hast du! habe den Satzaufbau geändert und es ist tatsächlich was passiert! ;) Danke!

                        Eigentlich hätte ein Semikolon nach der Farbangabe gereicht.

                        foo {  
                          color: #abcdef  
                          position: absolute;  
                        }
                        

                        wird gelesen als

                        foo {  
                          color: #abcdef position: absolute;  
                        }
                        

                        und dass letzteres keine gültige Farbangabe ist, sollte klar sein ;-)

                        Matthias

                        --
                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen nass und Nasser.

                        1. und dass letzteres keine gültige Farbangabe ist, sollte klar sein ;-)

                          Allerdings! Aufmerksamkeitsfehler meinerseits! Dann ist die Reihenfolge innerhalb eines {...} egal?

                          Das mit dem Highlighting... meinst du damit die unterschiedlichen Farben in dem Code, wie es hier angezeigt wird? Weil das hier schon wieder passiert ist.. Rot bedeutet dann wohl etwas böses. ;)

                          1. Hallo,

                            Dann ist die Reihenfolge innerhalb eines {...} egal?

                            im Prinzip ja - außer wenn du verschiedenen Browsern verschiedene Werte für ein- und dieselbe Eigenschaft vorsetzen willst, je nachdem, was sie "verstehen". Es gilt dann immer die letzte Deklaration innerhalb eines Blocks, die vom Browser tatsächlich verstanden wird.

                            Das mit dem Highlighting... meinst du damit die unterschiedlichen Farben in dem Code, wie es hier angezeigt wird? Weil das hier schon wieder passiert ist.. Rot bedeutet dann wohl etwas böses. ;)

                            Genau. Es gibt keine CSS-Eigenschaft font-color (obwohl es von der Systematik her eigentlich sinnvoll wäre). Die Eigenschaft, die du meinst, heißt einfach nur color.

                            Ciao,
                             Martin

                            --
                            Zwei Kumpels sitzen vor dem Computer. "Welche Suchmaschine benutzt du eigentlich meistens?" - "Prima Vera." - "Hmm, kenn' ich gar nicht." Dann geht die Tür auf: "Schatz ich habe deine Sonnenbrille wiedergefunden!" - "Prima, Vera!"
                            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                  2. Liebes Girlfrommars13,

                    ich habe einmal etwas experimentiert. Dabei ist das hier herausgekommen:

                    #menue {  
                        bottom: 1%;  
                        display: block;  
                        list-style: outside none none;  
                        margin: 0;  
                        padding: 0;  
                        position: fixed;  
                        right: 5%;  
                        width: 920px;  
                    }  
                      
                    #menue > li {  
                        display: inline-block;  
                        height: 100px;  
                        line-height: 100px;  
                        text-align: center;  
                        width: 180px;  
                    }  
                      
                    #menue li a:link {  
                        opacity: 0.3;  
                    }  
                      
                    #menue img {  
                        max-height: 100%;  
                        max-width: 100%;  
                        vertical-align: middle;  
                    }  
                      
                    #menue2 {  
                        /* vorerst ausblenden, damit es nicht stört: */  
                        display: none;  
                    }
                    

                    Vielleicht nützt es Dir?

                    Liebe Grüße,

                    Felix Riesterer.

                    --
                    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                    1. #menue > li {
                          display: inline-block;
                          height: 100px;
                          line-height: 100px;
                          text-align: center;
                          width: 180px;
                      }

                      Das display: inline-block hat einige Probleme gelöst, genau wie Matthias' Hinweis darauf, dass ein Syntaxfehler vorliegt. Jetzt habe ich das große Menü so, wie ich es haben will.

                      Das kleine allerdings noch nicht. Ich habe #menue2 von der Positionierung nun sohttp://www.riekmund.com/projectweddingdress.html verändert, das geht auch schon exakt in die richtige Richtung:

                        
                      #menue2 {  
                       	position: absolute;  
                       	bottom: 80px;  
                       	right: 600px;  
                       	margin: 0px;  
                       	padding: 0px;  
                       	list-style-type: none;  
                       	font-family: Lucida Sans Typewriter, Courier New;  
                              font-size:13px;  
                              font-color: #4b4949;  
                            }  
                      
                      

                      Allerdings soll es ja noch weiter links sein, aber sobald ich bei right: 700px eingebe, verschiebt sich das ganze:

                      http://www.directupload.net/file/d/3892/enije6wr_png.htm

                      Liegt das an der Width des #menue ?

                      1. #menue2 {
                        position: absolute;
                        bottom: 80px;
                        right: 600px;
                        margin: 0px;
                        padding: 0px;
                        list-style-type: none;
                        font-family: Lucida Sans Typewriter, Courier New;
                                font-size:13px;
                                font-color: #4b4949;
                              }

                          
                        Hm.. Schon wieder ein Highlighting = schon wieder ein Syntaxfehler?
                        
                        1. @@Girlfrommars13:

                          nuqneH

                          font-color: #4b4949;

                          Hm.. Schon wieder ein Highlighting = schon wieder ein Syntaxfehler?

                          Es gibt keine Eigenschaft font-color.

                          Qapla'

                          --
                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                      2. #menue2 {

                        Allerdings soll es ja noch weiter links sein, aber sobald ich bei right: 700px eingebe, verschiebt sich das ganze:

                        http://www.directupload.net/file/d/3892/enije6wr_png.htm

                        Liegt das an der Width des #menue ?

                        Das Untermenü bekommt seine Grundposition vom Hauptmenü, denn letzteres agiert wegen seines position:fixed als containing block für das Untermenü.

                        Das Hauptmenü wiederum schleppt gewissermaßen den linken Seitenrand als Grenze mit und genau an dieser Grenze klappt das Untermenü ein. Wenn du beim Hauptmenü mal die Eigenschaft right wegnimmst, kannst du das genau beobachten.
                        Teil des Problems ist, dass das Untermenü mit right positioniert werden muss, die fehlende Eigenschaft left wird vom Browser berechnet und an jene Grenze gelegt. Eine schnelle Lösung des Problems wäre, left mit einem großen negativen Wert zu belegen.

                        Was den Pfeil zwischen Haupt- und Untermenü angeht:

                        Ich täte ihn als Hintergrundgrafik von #menue anlegen, background bringt alles Nötige mit. Die passenden Maße von #menue bekommst du durch Setzen von line-height:110px bei #menue. Da line-height vererbt wird, musst du es mit line-height:1em bei #menue2 zurückgesetzen; vertical-align:bottom bei #menue img platziert die Textgrafiken wieder am unteren Rand.

                        1. Ich täte ihn als Hintergrundgrafik von #menue anlegen, background bringt alles Nötige mit. Die passenden Maße von #menue bekommst du durch Setzen von line-height:110px bei #menue. Da line-height vererbt wird, musst du es mit line-height:1em bei #menue2 zurückgesetzen; vertical-align:bottom bei #menue img platziert die Textgrafiken wieder am unteren Rand.

                          Ich hab's probiert. Seit 4 Stunden. Und krieg's nicht gebacken. :(

                            
                          #menue {  
                          		background: url(pfeilkombi2.png);  
                          		background-position: center 10%;  
                          		position: fixed;  
                           		bottom: 0px;  
                           		right: 40px;  
                           		width: 60% auto;  
                           		display: block;  
                           		list-style-type: outside none none;  
                           		color: #4b4949;  
                          	}  
                          
                          

                          Was ist nun falsch?

                          Ich habe auch noch probiert, es doch mittels Dropdown-Menü zu lösen, das direkt über dem collections&shop nach oben ausklappt bei hover, aber da ich dafür das #menue auf position: relative setzen muss (soweit ich mich informiert habe) und sich dann wieder alles verschiebt, wie es will, bin ich auch da gescheitert.
                          Oder wäre das sowieso zu kompliziert zu ändern bei dem, was ich bisher habe?

                          Schon frustrierend, wenn man Dinge stundenlang vergeblich versucht, die andere in 2 Minuten lösen können :D

                          1. Ich täte ihn als Hintergrundgrafik von #menue anlegen, background bringt alles Nötige mit. Die passenden Maße von #menue bekommst du durch Setzen von line-height:110px bei #menue. Da line-height vererbt wird, musst du es mit line-height:1em bei #menue2 zurückgesetzen; vertical-align:bottom bei #menue img platziert die Textgrafiken wieder am unteren Rand.

                            #menue {
                            background: url(pfeilkombi2.png);
                            background-position: center 10%;
                            position: fixed;
                            bottom: 0px;
                            right: 40px;
                            width: 60% auto;
                            display: block;
                            list-style-type: outside none none;
                            color: #4b4949;
                            }

                            
                            >   
                            > Was ist nun falsch?  
                              
                            Vor allem ist die Pfeilgrafik ist viel zu groß.  
                              
                            Mit  
                              
                            background:url("pfeilkombi2.png") no-repeat 104px -21px / 30%;  
                            line-height:110px  
                              
                            bei #menue sollte der Pfeil zumindest schon mal erscheinen.  
                              
                            Du solltest die Grafik aber trotzdem verkleinern, anschließend die 30% aus obiger Angabe rausnehmen und die beiden px-Werte entsprechend anpassen. Beachte auch die oben genannten Änderungen bezüglich line-height.  
                              
                            
                            > Ich habe auch noch probiert, es doch mittels Dropdown-Menü zu lösen, das direkt über dem collections&shop nach oben ausklappt bei hover, aber da ich dafür das #menue auf position: relative setzen muss (soweit ich mich informiert habe) und sich dann wieder alles verschiebt, wie es will, bin ich auch da gescheitert.  
                            > Oder wäre das sowieso zu kompliziert zu ändern bei dem, was ich bisher habe?  
                              
                            Nein, nicht unbedingt. position:relative kannst du auch bei #menue > li setzen.  
                              
                            
                            > Schon frustrierend, wenn man Dinge stundenlang vergeblich versucht, die andere in 2 Minuten lösen können :D  
                              
                            Benutzt du inzwischen die schon angesprochenen Entwicklerwerkzeuge deines Browsers? Das erleichtert die Probiererei erheblich. Aber davon abgesehen: Es ist noch kein Meister vom Himmel gefallen.  
                            
                            
                            1. Hi,

                              Es ist noch kein Meister vom Himmel gefallen.

                              das wäre auch nicht gut, da würde er sich ja sämtliche Ohren brechen! ;-)

                              *scnr*
                               Martin

                              --
                              Es sagte...
                              ein korpulenter Lehrer zu einem Schüler, der ihn ein Fass genannt hatte: "Nein. Ein Fass ist von Reifen umgeben, ich dagegen von Unreifen."
                              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                            2. So! Ich habe die letzten Tage viel probiert, noch etwas recherchiert und bin echt stolz, dass ich jetzt - im Vergleich zum Anfang - etwas Schöneres präsentieren darf:

                              Das Ergebnis meiner Bemühungen! ;)

                              Gibt es da noch was dran zu verbessern? Das einzige, was mir jetzt noch einfallen würde, ist der .header (das Logo, das durch Klick immer wieder auf die Indexseite weiterleitet). Ich wusste nicht, wie ich das lösen kann. Hab versucht, wirklich einen #header draus zu machen mit< div id="header">
                              und

                              #header {  
                              	position: relative;  
                              	top: 10px;  
                              	right: 4%;  
                              	background-color: none;  
                              	text-align: right;	  
                              }
                              

                              oder auch

                              #header {  
                              	position: absolute;  
                              	top: 10px;  
                              	right: 3%;  
                              	width: 29%;	  
                              }
                              

                              oder auch

                              #header {  
                              	position: absolute;  
                               	top: 0px;  
                               	right: 0px;  
                               	width: 40%;  
                              	}
                              

                              aber bei keiner Variante sitzt es so wie jetzt mit der img-class

                              .header {  
                              	position: absolute;  
                              	top: 10px;  
                              	right: 3%;  
                              	width: 37%;	  
                              }
                              

                              was aber mit Sicherheit falsch ist, da man ja nicht einfach ein Image in die freie Wildbahn (-code) setzen kann?!

                              Würdet ihr das CSS noch auslagern?

                              1. @@Girlfrommars13:

                                nuqneH

                                Das Ergebnis meiner Bemühungen! ;)

                                Gibt es da noch was dran zu verbessern?

                                Unbedingt.

                                sieht recht unbrauchbar aus.

                                Qapla'

                                --
                                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                1. sieht recht unbrauchbar aus.

                                  Wenigstens eine Mini-Anerkennung der Verbesserung wäre nicht verheerend gewesen. ^^ Hast du mal den Quellcode angeguckt im Gegensatz zu vorher? Mir geht's gerade darum, dass das erstmal gut aussieht.
                                  Dass es noch nicht ganz Smartphone-kompatibel ist, ist mir wohl bewusst ^^

                                  Aber zu sagen "is scheisse" ist ja immer einfacher als n Tipp zu geben, nech!? ...

                                2. Jetzt klappt es auch mit den Hintergründen auf dem Smartphone, es schiebt sich zumindest soweit nichts mehr übereinander.
                                  Die Boxen mit Schrift und Bildergalerie sind allerdings nicht wirklich schön im Smartphoneformat.

                                  Was gäbe es denn da noch für einen Lösungsansatz? Dass sich die Boxen bei diesen kleinen Bildschirmen zb auf die Bildschirmbreite verteilen? Quasi untereinander stehen wie im "Blocksatz"-Format?

                                  1. Liebes Girlfrommars13,

                                    Die Boxen mit Schrift und Bildergalerie sind allerdings nicht wirklich schön im Smartphoneformat.

                                    wie hättest Du es denn gerne? Machbar ist sehr vieles, aber wie würde es Dir am besten gefallen?

                                    Liebe Grüße,

                                    Felix Riesterer.

                                    --
                                    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                                    1. So wäre es doch ganz schön:

                                      http://pl.vc/40wg6

                                      Oder ist das zu kompliziert zu ändern?

                                      Hab mich schonmal etwas "umgegooglet" und da sind mir Begriffe wie "Viewport" (Meta-Tag) oder "handheld" (Link-Tag) über den Weg gelaufen und ich habe das spaßeshalber mal in den HTML-Kopf eingegeben, aber hat sich jetzt nichts verändert. Gehört wahrscheinlich doch noch mehr dazu!? ;-/

                                      Macht man für die Smartphoneprogrammierung dann eine eigene CSS Datei?

                                      1. @@Girlfrommars13:

                                        nuqneH

                                        "handheld" (Link-Tag) über den Weg gelaufen

                                        media handheld kannst du gleich wieder vergessen, darauf ist wohl noch nie ein Client angesprungen.

                                        Macht man für die Smartphoneprogrammierung dann eine eigene CSS Datei?

                                        Nein, eher nicht, sondern Media-Queries in dem einen Stylesheet. Responsive Web Design (Original) sagt dir was?

                                        Qapla'

                                        --
                                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                              2. Liebes Girlfrommars13,

                                Das Ergebnis meiner Bemühungen! ;)

                                prima! Das passt jetzt auch auf meinem Firefox unter Linux.

                                Gibt es da noch was dran zu verbessern?

                                Klar! Beispielsweise könnte der gesamte HTML-Teil semantischer sein. Dazu eignet es sich, gleich auf HTML5 umzusteigen:

                                <!DOCTYPE html>  
                                <html>  
                                    <head>  
                                        <meta charset="utf-8" />  
                                        <meta name="description" content="Riekmund - Fashion & Style aus Hamburg" />  
                                        <meta name="author" content="Henrike Thiele" />  
                                        <title>riekmund.com - fashiondesign, art and poetry</title>  
                                        <link href="./styles.css" rel="stylesheet" type="text/css" />  
                                        <!-- noch JS-Gedöns... -->  
                                    </head>  
                                    <body>  
                                        <header><a href="/"></a></header>  
                                        <main role="main">  
                                            <article>  
                                                <h1>project "wedding dress"<br />AW 2010/2011</h1>  
                                                <p>after finishing my studies i was asked by a friend of mine to design  
                                                   and manufacture her wedding dress. this was a quite new experience for  
                                                   me because i've never worked with fabrics like silk and lace.  
                                                   besides i've never sewn a classical dress, not to mention a corsage.  
                                                   it was fun to meet a completely new challenge.  
                                                </p>  
                                                <p>photography by  
                                                    <a href="http://www.carlosfernandez.de" target="carlos website">carlos fernandez laser</a>  
                                                </p>  
                                            </article>  
                                            <article>  
                                                <ul id="picturegallery">  
                                                    <li><a href="projectweddingdress/_MG_2311.jpg" rel="lightbox[group]"><img src="projectweddingdress/_MG_2311_thumb.jpg" alt=""></a></li>  
                                                    <li><a href="projectweddingdress/_MG_2337.jpg" rel="lightbox[group]"><img src="projectweddingdress/_MG_2337_thumb.jpg" alt=""></a></li>  
                                                    ...  
                                                </ul>  
                                            </article>  
                                        </main>  
                                        <nav>  
                                            <ul>  
                                                <li><a href="http://www.riekmund.com/about.html"><img src="about.gif" alt="about"></a></li>  
                                                <li><a href=""><img src="collections_shop.png" alt="collections and shop"></a>  
                                                    <ul>  
                                                        <li><a href="http://www.riekmund.com/collectionsandshop.html" class="class2" >new collection</a></li>  
                                                        <li>dog coat - comes soon</li>  
                                                        ...  
                                                    </ul>  
                                                </li>  
                                                <li><a href="http://www.riekmund.com/CV.html"><img src="CV.gif" alt="CV"></a></li>  
                                            ...  
                                            </ul>  
                                        </nav>  
                                        <footer></footer>  
                                    </body>  
                                </html>
                                

                                Um nun Deine vorher mit ID bestückten Elemente wieder mit CSS anzusprechen, kannst Du jetzt den Nachfahren-Selektor benutzen. Aus #menue wird nav > ul, aus #submenue wird nav li ul und aus #text wird main > article:first-child.

                                Auch die Klasse "headline" ist nun überflüssig: main > article:first-child > h1. Sollten einmal mehrere <h1> im ersten <article> enthalten sein, kann man noch first-of-type benutzen, um die erste Überschrift von den anderen abzugrenzen: main > article:first-child > h1:first-of-type.

                                Würdet ihr das CSS noch auslagern?

                                Unbedingt! Dann muss es nicht jedesmal beim Seitenaufruf übertragen werden, sondern kann vom Browser-Cache übernommen werden. Das spart Bandbreite und beschleunigt weitere Seitenaufrufe.

                                Liebe Grüße,

                                Felix Riesterer.

                                --
                                "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                                1. Danke für die HTML5-Hilfe! Da muss man ja doch nochmal wieder ganz umlernen, jetzt wo ich mir einige Sachen gerade eingeprägt hatte.. :-/ Aber gut, dient ja der besseren Funktion!

                                  Das funktioniert auch soweit gut. Einziges Problem ist, dass das Hintergrundbild nun nicht mehr angezeigt wird, sondern der Hintergrund hellgrau ist. In meinem nun ausgelagerten CSS habe ich den Verweis auf den Hintergrund so gelassen wie vorher, also:

                                    
                                  html {											  
                                  	background: url(hintergrund2.jpg) no-repeat top left fixed;  
                                  	-webkit-background-size: cover;  
                                  	-moz-background-size: cover;  
                                  	-o-background-size: cover;  
                                  	background-size: cover;  
                                  	}  
                                    
                                  html body {										  
                                  	behavior: url(/path/csshover3.htc);  
                                  	}  
                                    
                                  html, body {  
                                  	width: 100%;  
                                  	min-height:100%;  
                                  	}  
                                  ...  
                                  
                                  

                                  Muss das jetzt irgendwie anders aussehen?

                                  1. Ich habe irgendwo gelesen, wo jmd ebenfalls das Hintergrundproblem hatte nach Auslagerung des CSS, dass in der ausgelagerten CSS-Datei kein <style type="text/css"> und </style> stehen darf?! Für denjenigen war's die Lösung, aber bei mir ändert es nichts.

                                    1. Yeah, funktioniert doch! Selbst geholfen ;)

                                      1. Liebes Girlfrommars13,

                                        Yeah, funktioniert doch! Selbst geholfen ;)

                                        wo kann man sich das anschauen? Deine Beispielseite ist noch "HTML 4.01 transitional"...

                                        Liebe Grüße,

                                        Felix Riesterer.

                                        --
                                        "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                                        1. wo kann man sich das anschauen?

                                          Oh sorry, hatte es noch nicht hochgeladen. Jetzt sollte es gehen.

                                          Bzgl. des Backgrounds habe ich mir nochmal Gedanken gemacht, wie das ganze denn auf einem Smartphone angezeigt werden würde, da der "Baum" sich ja bei verkleinern des Browsers doch über die Objekte schiebt. Ich habe dann in Photoshop einfach die vertikale Länge des Hintergrunds verdoppelt  und nochmal das "beige Papier" unten dran gesetzt. Das hat jetzt den Effekt, den ich will, allerdings ist die Hintergrund-Datei dadurch knapp 1 MB groß und dauert dann beim laden natürlich zu lang. Die vorherige Datei war 1849x1208 Pixel groß bei einer Auflösung von 150 px/Zoll, die jetzige dementsprechend 1849x2416. Wenn ich das Ganze kleiner mache (hab ich probiert), ist es halt zu verschwommen für meinen Geschmack.
                                          Was ist denn die gängige Größe bzw Auflösung für Hintergrundbilder?

                                          Gibt es eine andere Option (zB separieren von beigem Papier und Ast = 2 Hintergründe? Ist das möglich?) Die müssten dann allerdings unterschiedliche Eigenschaften haben.

                                          1. @@Girlfrommars13:

                                            nuqneH

                                            Gibt es eine andere Option (zB separieren von beigem Papier und Ast = 2 Hintergründe? Ist das möglich?)

                                            Da fragst du ernsthaft, nachdem ich genau das vorgeschlagen habe? Das hattest du schon gelesen, oder?

                                            Multiple Hintergründe.

                                            Qapla'

                                            --
                                            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                            1. Da fragst du ernsthaft, nachdem ich genau das vorgeschlagen habe? Das hattest du schon gelesen, oder?

                                              Das hatte ich nicht mehr auf dem Zettel, weil es mir zu dem Zeitpunkt vorrangig noch um ein anderes Problem ging. Ich kann nicht alles auf einmal ;)
                                              Jetzt nach nochmaligem lesen weiss ich auch, wie du das meinst mit dem einen Streifen.
                                              Dann würde man aber den Befehl repeat geben oder?

                                              Danke!

                                          2. Liebes Girlfrommars13,

                                            Oh sorry, hatte es noch nicht hochgeladen. Jetzt sollte es gehen.

                                            definitiv ein sehr großer Fortschritt im Vergleich zur Ausgangslage.

                                            Kompliment!

                                            Nur so aus Interesse, was wurde aus dem Thread im anderen Forum (forum-hilfe.de)?

                                            Bzgl. des Backgrounds

                                            ... hat sich Gunnar schon geäußert. Ja, da gibt es auch eine Lösung. Übrigens gleich hier im Wiki!

                                            Liebe Grüße,

                                            Felix Riesterer.

                                            --
                                            "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
                                            1. Kompliment!

                                              Danke! :) Freut mich, dass ich n bißchen was dazu gelernt habe!

                                              Nur so aus Interesse, was wurde aus dem Thread im anderen Forum (forum-hilfe.de)?

                                              Was glaubst du denn? ;) Ich habe vor Jahren auch schonmal 1-2 andere Foren konsultiert, aber nun festgestellt, dass man hier die beste Hilfe bekommt (wenn in den anderen Foren überhaupt).

                                              ... hat sich Gunnar schon geäußert. Ja, da gibt es auch eine Lösung. Übrigens gleich hier im Wiki!

                                              Danke!

                                    2. @@Girlfrommars13:

                                      nuqneH

                                      Ich habe irgendwo gelesen, wo jmd ebenfalls das Hintergrundproblem hatte nach Auslagerung des CSS, dass in der ausgelagerten CSS-Datei kein <style type="text/css"> und </style> stehen darf?!

                                      Natürlich darf es das nicht. Das ist HTML-Code, der hat in CSS-Code nichts zu suchen.

                                      Qapla'

                                      --
                                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                  2. @@Girlfrommars13:

                                    nuqneH

                                    html {

                                    background: url(hintergrund2.jpg) no-repeat top left fixed;
                                    -webkit-background-size: cover;
                                    -moz-background-size: cover;
                                    -o-background-size: cover;
                                    background-size: cover;
                                    }

                                    
                                    >   
                                    > Muss das jetzt irgendwie anders aussehen?  
                                      
                                    Ja. Sämtliche Eigenschaften mit Präfixen sollten weg. [[caniuse](http://caniuse.com/#feat=background-img-opts)]  
                                      
                                    Qapla'
                                    
                                    -- 
                                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                    
    2. Lieber Mattes,

      Folgende Seite http://www.riekmund.com/projectweddingdress.html sieht bei mir offline so aus (so soll es auch sein):

      dazu sollte man vielleicht sagen, dass die Resource "http://www.riekmund.com/www.riekmund.com.gif" nicht geladen werden kann.

      Ich finde Boards mit Registrierungszwang ja so geil :>

      Tja, wer nicht so weit denken kann, dass ein Board mit Registrierungszwang eine große Hürde für Hilfewillige darstellt, darf keine Hilfe erwarten.

      Ohje, mit dem Durcheinander wirst du hier gleich mächtig was auf die Nase kriegen …

      Nö, das wird brav ignoriert, sodass hier genauso wenig Antworten kommen werden, wie im Board.

      Die Darstellungsangaben (border, width) solltest du tunlichst separat in die Abteilung CSS verfrachten, Gleiches gilt für den Javascript-Teil (onmouse, Zuweisung in DOMContentLoaded).

      Ach, und Du meinst, dass die OP das versteht...? Bei den Vorüberlegungen, die sie bisher direkt und indirekt gezeigt hat?

      Was der Sinn hinter Deinem Link sein soll, erschließt sich mir nicht. Das kommt doch sicher nicht von ihr, sondern von so einem WYSIWYG-Proggi. Und wer diese ganzen Bibliotheken wie prototype.js, scriptaculous.js und lightbox.js einbindet, weiß der immer so genau, was er tut, wenn er dann auch noch diese Eventhandler in den Tags notiert?

      Schau doch mal "mit Vernunft" (tm) in den Quellcode (Stichwort "spacer gif") und sage mir, dass das in Handarbeit und Verständnis von irgendeinem HTML-Dialekt entstanden ist:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
          <html>  
        
          <head></head>  
          <body>  
              <div class="c5">  
                  <div id="font-face">  
                      <img class="c1" width="55%" height="80%" alt="" src="astbild.gif"></img>  
                      <br></br>  
                      <img class="c3" width="36%" height="41%" alt="" src="viereckfuertable.gif"></img>  
                      <img class="c6" width="50%" height="17%" alt="" src="viereckfuertable.gif"></img>  
                      <img class="c5" width="15%" alt="" src="voegel_beige.png"></img>  
                      <a class="class2" href="http://www.riekmund.com/index.html"></a>  
                      <tt>  
                          <div style="position:fixed;bottom:0%;right:0%;margin-right:57%; margin-bottom:14%; z-index:1;text-align:right;"></div>  
                          <div class="c10"></div>  
                          <div id="divid" class="examplediv"></div>  
                      </tt>  
                      <div id="dividzwei">  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2311.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2337.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2366.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2479.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2484.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2495.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2495a.jpg"></a>  
                          <a rel="lightbox[group]" href="projectweddingdress/_MG_2496.jpg"></a>  
                          <img width="9" alt="" style="position:absolute;margin-left:115%;margin-top:26%;" src="blind.gif"></img>  
                      </div>  
                      <div class="c4">  
                          <a class="class1" href="http://www.riekmund.com/about.html"></a>  
                          <img width="1%" border="0" alt="" src="blind.gif"></img>  
                          <img width="20%" border="0" alt="collections and shop" onmouseout="this.src='collections_shop.png'; opacity:0.3" onmouseover="this.src='collections_shop.png';" src="collections_shop.png"></img>  
        
                  <img width="1%" border="0" alt="" src="blind.gif"></img>  
                  <a class="class1" href="http://www.riekmund.com/CV.html"></a>  
                  <img width="1%" border="0" alt="" src="blind.gif"></img>  
                  <a class="class1" href="http://www.riekmund.com/artandpoetry.html"></a>  
                  <img width="1%" border="0" alt="" src="blind.gif"></img>  
                  <a class="class1" href="http://www.riekmund.com/imprint.html"></a>  
              </div>  
          </div>  
        
      </div>  
      <div id="overlay" style="display: none;"></div>  
        
      <div id="lightbox" style="display: none;"></div>  
      </body>  
      </html>
      

      Eine Semantik sucht man da übrigens ebenso vergeblich...

      In deinem HTML/CSS/Javascript-Mischmasch verzettelst du dich früher oder später.

      Das kommt von WYSIWYG-Editoren. Da ist kein Verzetteln, da ist ein Vereditieren und Verklicken schuld! Wir sollen richten, was die nicht eingehaltenen Versprechungen irgendeines tollen Webseitenbaukastenprogramms verursacht haben.

      <sarcasm intensity="light">Bestimmt ist daran nur das ausgewählte Template schuld. Da bin ich mir ganz sicher.</sarcasm>

      Liebe Grüße,

      Felix Riesterer.

      --
      "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
      1. Felix Riesterer, ich wurde lange schon nicht mehr so von oben herab und "charmant" behandelt, vielen Dank für nichts!

        Ich bin ein Anfänger und habe es mir selbst beigebracht. ICH würde nie auf die Idee kommen, jemanden auf so herablassende Art und Weise zu behandeln, der von etwas weniger Ahnung hat als ich.
        Da hab ich noch nicht mal mehr Lust, mich zu erklären/rechtfertigen. Das ist schlicht unverschämt!

        Und fangt doch für's erste mal an, euer Forum übersichtlicher zu machen und den Usern die Möglichkeit zu geben, Bilder hochzuladen, dann könnten sich einige von den Usern wie mir solche Beleidigungen ersparen!

        1. Liebes Girlfrommars13,

          ICH würde nie auf die Idee kommen, jemanden auf so herablassende Art und Weise zu behandeln, der von etwas weniger Ahnung hat als ich.

          prima! Aber gedankenlos alle mögliche Hürden in den Weg stellen, das findest Du nicht kritikwürdig? Auf mein erstes Posting hast Du ja geflissentlich nicht reagiert...

          Desweiteren war meine Kritik zuallererst an Mattes gerichtet, der mit einem technischen Hinweis zu JavaScript reagiert hatte, was ich aufgrund des von Dir gezeigten Wissensstand für nicht zielführend halte.

          Da hab ich noch nicht mal mehr Lust, mich zu erklären/rechtfertigen. Das ist schlicht unverschämt!

          So, wie einen Link zu einem Board mit Registrierungszwang? So, wie Crosspostings?

          Und fangt doch für's erste mal an, euer Forum übersichtlicher zu machen und den Usern die Möglichkeit zu geben, Bilder hochzuladen, dann könnten sich einige von den Usern wie mir solche Beleidigungen ersparen!

          Wer hier Probleme zu lösen sucht, hat in aller Regel Webspace zur Verfügung und kann selbst Bilder dort hochladen. Die Lösung mit kostenlosen Anbietern von Image Hostern hast Du anscheinend auch bequem überlesen?

          Nur weil Du bisher kein Forum gewöhnt warst, sondern in Boards unterwegs bist, ist das noch lange kein Grund, diese andere Form als Ursache für meine von Dir als Beleidigungen aufgefasste Kritik zu erklären.

          Liebe Grüße,

          Felix Riesterer.

          --
          "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
          1. »prima! Aber gedankenlos alle mögliche Hürden in den Weg stellen, das findest Du nicht kritikwürdig? Auf mein erstes Posting hast Du ja geflissentlich nicht reagiert...«

            Dann fange ich jetzt mal an, auf jeden deiner Sätze zu antworten. Ich finde es ja schonmal nett, dass du mir unterstellst, ich würde bewusst jmdm Hürden in den Weg stellen, wo du mich überhaupt gar nicht kennst. Es kann natürlich nicht sein, dass ich es nicht besser wusste bisher, wie ich dir ein Bild zeigen kann, ohne es hochzuladen...
            Und danke zur Verlinkung auf den Duden, aber ich kenne das Wort geflissentlich.

            »Desweiteren war meine Kritik zuallererst an Mattes gerichtet, der mit einem technischen Hinweis zu JavaScript reagiert hatte, was ich aufgrund des von Dir gezeigten Wissensstand für nicht zielführend halte.«

            Ok, alles klar, pikant formuliertes Kritisieren scheint hier der normale Umgang zu sein..

            »So, wie einen Link zu einem Board mit Registrierungszwang? So, wie Crosspostings?«

            und schon wieder hab ich jmdm extra einen reingedrückt... ich dreistes Ding! Zum Thema Crossposting... wenn man in diesem Board schon zum 2. Mal keine Antworten bekommt, geht man lieber woanders hin. (ja, jetzt lachst du dir bestimmt ins Fäustchen! #dabrauchtsiesichnichtzuwundern #ohmanistdiedoof )

            »Wer hier Probleme zu lösen sucht, hat in aller Regel Webspace zur Verfügung und kann selbst Bilder dort hochladen. Die Lösung mit kostenlosen Anbietern von Image Hostern hast Du anscheinend auch bequem überlesen

            Nein, habe ich nicht überlesen, aber für diesen Hinweis bin ich dir sogar dankbar, denn dann haben die Profis in Zukunft wenigstens einen Grund weniger, um sich lustig zu machen oder mir Dinge zu unterstellen.

            »Nur weil Du bisher kein Forum gewöhnt warst, sondern in Boards unterwegs bist, ist das noch lange kein Grund, diese andere Form als Ursache für meine von Dir als Beleidigungen aufgefasste Kritik zu erklären.«

            Blöd wie ich bin, weiss ich sogar den Unterschied zwischen Foren und Boards nicht, was daran liegen könnte, dass ich nicht ständig dort abhänge. Ihr seid die 2., die ich um Hilfe gebeten habe.
            Und zuguterletzt - der Ton macht die Musik!

            Who knows - vllt vertragen wir uns ja doch noch, wenn mal alle Missverständnisse aus dem Weg geräumt sind!?

            Liebe Grüße,
            Rike

      2. „Das kommt von WYSIWYG-Editoren. Da ist kein Verzetteln, da ist ein Vereditieren und Verklicken schuld! Wir sollen richten, was die nicht eingehaltenen Versprechungen irgendeines tollen Webseitenbaukastenprogramms verursacht haben.“

        Falsch übrigens! Ich habe alles selbst in einem Text-Editor geschrieben.

      3. Die Darstellungsangaben (border, width) solltest du tunlichst separat in die Abteilung CSS verfrachten, Gleiches gilt für den Javascript-Teil (onmouse, Zuweisung in DOMContentLoaded).

        Ach, und Du meinst, dass die OP das versteht...?

        Ich gehe davon aus, dass sie nachfragt. Irgendeinen Aufhänger, an dem sie anfangen kann, muss ich ihr ja geben.

        Bei den Vorüberlegungen, die sie bisher direkt und indirekt gezeigt hat?

        Was der Sinn hinter Deinem Link sein soll, erschließt sich mir nicht.

        Das wundert mich nicht. Wenn ich mir deine Pöbelei so anschaue, habe ich den Eindruck, du hast bestenfalls so wenig nachgedacht wie du es der Fragestellerin vorwirfst – eher noch weniger.

        Liebe Grüße,

        Felix Riesterer.

        Was ich auch immer schräg finde: Achtlos hingeklatschte Grüße aus der Automatik, die mit dem Ton im Beitrag so wirklich gar nichts zu tun haben.

    3. @@Mattes:

      nuqneH

      In deinem HTML/CSS/Javascript-Mischmasch verzettelst du dich früher oder später.

      Früher.

      … onmouseout="this.src='about.gif'; opacity:0.3" …

      Schon passiert.

      Und damit es Girlfrommars13 auch versteht: Im Wert von on…-Attributen stehen JavaScript-Anweisungen. opacity:0.3 ist keine.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Und wie würde man es sonst lösen, wenn man erreichen will, dass ein Link, über den man mit der Maus fährt, eine geringere Deckkraft hat? Ich bin bestimmt kein Profi, aber das erschien mir in meinem logischen Denken die Lösung zu sein und funktioniert ja auch.

        1. Liebes Girlfrommars13,

          Und wie würde man es sonst lösen, wenn man erreichen will, dass ein Link, über den man mit der Maus fährt, eine geringere Deckkraft hat?

          mit CSS. Auf Deiner Seite hast Du ein umfangreiches Stylesheet (der Code zwischen <style type="text/css"> und </style>. In dieser Layoutsprache kannst Du die Eigenschaft "opacity: 0.3" (oder vielleicht "color: #ddd"?) einer sogenannten Pseudoklasse geben, genauer einer sogenannten dynamischen Pseudoklasse, nämlich :hover. Das könnte so aussehen:

          <style type="text/css">

              a:hover {  
              opacity: 0.3;  
              color: #ddd;  
          }
          

          </style>

          Liebe Grüße,

          Felix Riesterer.

          --
          "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
          1. Vielen Dank! Das ist eine nette Antwort, mit der ich was anfangen kann. :)

            Ist denn grundsätzlich alles für den Müll, was ich da gebastelt habe?
            Oder kann ich mit nicht zu viel Umstand das Ganze umbauen, sodass das Problem mit der Leiste unten gelöst ist?
            Liegt es an dem "CSS-HTML-JS-Kuddelmuddel", wie von Mattes vermutet?

            1. Liebes Girlfrommars13,

              Vielen Dank! Das ist eine nette Antwort, mit der ich was anfangen kann. :)

              ich sehe Dein echtes Bemühen und kann es anerkennen. Dein Ausgangsposting hat auf mich einen gegenteiligen Eindruck gemacht. Aber das haben wir ja jetzt durch.

              Ist denn grundsätzlich alles für den Müll, was ich da gebastelt habe?

              Das kommt auf den eigenen Anspruch an... Hast Du schon an mobile Endgeräte mit kleinen Displays gedacht und wie Deine Seite dort angezeigt wird - und ob sie so überhaupt benutzbar ist?

              Lesetipps für Weiterbildung-bei-Bedarf hier im Wiki:

              * Webstandards/Benutzerfreundlichkeit und Barrierefreiheit
              * CSS/Anwendung und Praxis/Layouts

              Oder kann ich mit nicht zu viel Umstand das Ganze umbauen, sodass das Problem mit der Leiste unten gelöst ist?

              Das kommt auf die Menge Umstand an, und ob das Maß für Dich zuviel ist.

              Liegt es an dem "CSS-HTML-JS-Kuddelmuddel", wie von Mattes vermutet?

              Definitiv ja. Wenn man das streng trennt, dann ist später vieles leichter anpassbar. Das erlebe ich gerade mit der Schulwebsite, die ich betreue und bei der ich beginne, die Anzeige auf kleineren Displays besser nutzbar zu machen.

              Liebe Grüße,

              Felix Riesterer.

              --
              "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
              1. ich sehe Dein echtes Bemühen und kann es anerkennen. Dein Ausgangsposting hat auf mich einen gegenteiligen Eindruck gemacht. Aber das haben wir ja jetzt durch.

                Freut mich und... gut! Mach das hier ja nicht nur zum Spaß, sondern weil ich mich selbstständig gemacht habe und die Seite wichtig für mich ist und ich leider kein Budget habe, um Jemanden zu bezahlen, der mir das macht.

                Das kommt auf den eigenen Anspruch an... Hast Du schon an mobile Endgeräte mit kleinen Displays gedacht und wie Deine Seite dort angezeigt wird - und ob sie so überhaupt benutzbar ist?

                Ja, habe ich. Aber meine Priorität war erstmal, dass die Seite auf dem Computer funktioniert. Wobei ich schon daran dachte, dass, wenn Jemand irgendwo unterwegs Werbung sieht, derjenige möglicherweise zuerst auf dem Smartphone nachschaut. Es kommt hinzu, dass Menschen meist ungeduldig sind und wenn es nicht sofort so funktioniert oder man erkennt, worum es auf der Seite geht, haben sie keinen Bock mehr --> schlecht!

                Mir wurde nur von einem Bekannten gesagt, dass die Programmierung für Smartphones nochmal ganz anders funktioniert und man alles völlig neu schreiben muss?!

                Danke für die Tipps, lese ich mir mal durch!

                1. Hallo Girlfrommars13,

                  Mir wurde nur von einem Bekannten gesagt, dass die Programmierung für Smartphones nochmal ganz anders funktioniert und man alles völlig neu schreiben muss?!

                  das ist nicht korrekt. Dein Bekannter meinte wohl eher die Programmierung von Apps. Webseiten man mit Hilfe von CSS (und ggf. JavaScript) sehr gut an kleine Displays anpassen. Das Stichwort dazu ist »Responsive Design«. Im Wiki gibt es dazu einen Artikel (http://wiki.selfhtml.org/wiki/Webstandards/responsive_Webdesign) und im Web solltest du dazu auch eine Menge finden.

                  Ich bin mir nicht sicher ob es dir hilft: Es gibt auch CSS-Frameworks, bei denen viele Probleme auf die man stoßt bereits gelöst sind. Das bekannteste ist Bootstrap (http://getbootstrap.com/), es gibt aber noch weitere. Problem ist allerdings dass man sich, bevor diese Frameworks richtig benutzen kann, schon gut mit CSS und HTML auskennen sollte. Es gibt auch Leute - auch hier im Forum - die die Meinung vertreten, dass man CSS Frameworks besser nicht verwenden sollte, da diese den HTML und CSS-Code unnötigt aufblähen.

                  Beste Grüße

                  Stareagle

                  1. Vielen Dank, ich gucke mir das alles mal an und versuche weiterzukommen.

                    Liebe Grüße

  2. Liebes Girlfrommars13,

    Folgende Seite http://www.riekmund.com/projectweddingdress.html sieht bei mir offline so aus (so soll es auch sein):

    da kann ich nichts sehen, da das dortige "Forum" (es ist eigentlich ein Board) mich nur gegen Anmeldung etwas sehen lässt.

    1.) Ich denke ja nicht daran, mich extra dafür zu registrieren, damit ich sehen kann, welches visuelle Problem Du zu lösen versuchst. Es gibt Image-Hoster, deren Bilder ohne Registrierung meinerseits anschaubar sind!
    2.) Wenn Du schon bei forum-hilfe.de bist, warum fragst Du dann hier nach? Sollen wir die Erkenntnisse Deines Threads bei forum-hilfe.de hier mitverfolgen oder gar doppelte Arbeit leisten? Crosspostings sind hier sehr ungern gesehen (aus demselben Grund wie Doppelpostings)!

    Liebe Grüße,

    Felix Riesterer.

    --
    "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
  3. @@Girlfrommars13:

    nuqneH

    Folgende Seite http://www.riekmund.com/projectweddingdress.html sieht bei mir offline so aus (so soll es auch sein):

    Bei mir sieht sie so aus (und so soll es nicht sein):

    Es wird der meiste Platz verschenkt; der Hauptinhalt wird in kleine Boxen gefercht.

    Das Menü ist auf dem Hintergrung (Baum) so gut wie gar nicht zu erkennen.

    Mit über 600 kB ist die Datei viel zu groß; das Laden dauert ewig. Hier wäre es vielleicht angebracht, den Baum und die Streifen in zwei getrennte Dateien zu packen (dann nur ein Streifen, der wiederholt wird). Da passt dann in ein Zehntel der Dateigröße.

    „Impressum“ heißt auf englisch NICHT „Imprint“. Wirklich nicht.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hallo Gunnar,

      der Hauptinhalt wird in kleine Boxen gefercht.

      ge-was??

      Ich registriere zwar eine zunehmende Zahl von Tippfehlern in deinen Postings, die offensichtlich dem suboptimalen Tippgefühl eines Mobilgeräts geschuldet sind. Aber in Rechtschreibung bist du doch sonst eigentlich recht sattelfest, oder etwa nicht?

      Ciao,
       Martin

      --
      Husten kann böse Folgen haben.
      Besonders im Kleiderschrank.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. @@Der Martin:

        nuqneH

        der Hauptinhalt wird in kleine Boxen gefercht.

        ge-was??

        Grmpf. Da hatte ich es erst richtig. Sah irgendwie blöd aus, und ich hab das p getilgt. Ich hätte nachschlagen sollen. Aber bis zum nächsten Mal hätte ich es doch wieder vergessen. ;-)

        Kommt davon, wenn man in einer Gegend aufwächst, wo zwischen f und pf kaum unterschieden wird. Für mich sind auch „Pferd“ und „fährt“ Homophone. /feːɐ̯t/

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo,

          Für mich sind auch „Pferd“ und „fährt“ Homophone. /feːɐ̯t/

          Nicht zu vergessen: Fiat

          Gruß
          Kalk

          1. @@Tabellenkalk:

            nuqneH

            Für mich sind auch „Pferd“ und „fährt“ Homophone. /feːɐ̯t/

            Nicht zu vergessen: Fiat

            :-)

            Aber zwischen [eː] und [iː] können wir schon unterscheiden.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Ist es so schon besser?

      Danke für den imprint-Hinweis. Aber dieser Artikel sagt auch mehr, was falsch ist, als das, was richtig ist!? Hab ich es überlesen oder steht da keine Lösung? Vielleicht auch nur keine, die in meinen Augen schön aussah, sonst wäre sie hängen geblieben.. ;)

      1. @@Girlfrommars13:

        nuqneH

        Wirklich nicht.

        Danke für den imprint-Hinweis. Aber dieser Artikel sagt auch mehr, was falsch ist, als das, was richtig ist!? Hab ich es überlesen oder steht da keine Lösung?

        _Nicht_?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)