Yadgar: Link in <div> funktioniert nicht

Hi(gh)!

Ich haben ein Problem mit einem per <div> positioniertem Linkelement:

  
body div { position:relative; margin-left:191px; margin-right:191px; margin-top:5px; margin-bottom:5px; background-color:#eeeeee }  
.navleft { background-color:transparent; position:static; top:0px; left:0px }  
.navright { background-color:transparent; position:relative; top:-29px; margin-right:191px }  

  
    <div>  
      <p>  
        <span class="b">1. Juli 2013</span><br>  
        Heute also mit Rosinante XXIV nach Neu-Ehrenfeld in die Werkstatt... der Inhaber lehnte es anfangs ab, gebrauchte Teile (die Stütze aus Rosinante XXVI) einzubauen, war aber dann doch einverstanden. Reparaturen am Planetengetriebe kämen jedoch grundsätzlich nicht in Frage, zumal ich selbst ja bereits Öl eingefüllt hätte, ohne dass der erste Gang wieder gängig geworden wäre. Das Rad war heute am frühen Abend bereits abholbereit, ich war jedoch nach einer kurzen Nacht zu müde, noch einmal in die Landmannstraße zu fahren... ich werde es morgen abholen.  
      </p>  
    </div>  
    <div class="navleft">  
      <p class="l"><a href="bikeblog_2013-06.php">Zurück zum Juni 2013</a></p>  
    </div>  
    <div class="navright">  
      <p class="r"><a href="bikeblog_2013-08.php">Weiter zum August 2013</a></p>  
    </div>  

Auf allen "Monatsseiten" meines Fahrrad-Blogs (http://www.bergisch-afghanistan.de/khyberspace/bikeblog.php) ist immer nur das rechts stehende, auf die jeweils nächste Monatsseite verweisende Element anklickbar, nicht aber das linke. Wieso? Könnte es etwas mit einer Kollision zwischen den Definitionen von body div (auch die Navigationselemente stehen innerhalb von body) und den beiden Klassendefinitionen zu tun haben?

Bis bald im Khyberspace!

Yadgar

  1. Hi,

    Auf allen "Monatsseiten" meines Fahrrad-Blogs (http://www.bergisch-afghanistan.de/khyberspace/bikeblog.php) ist immer nur das rechts stehende, auf die jeweils nächste Monatsseite verweisende Element anklickbar, nicht aber das linke. Wieso?

    Weil – und das hättest du mit Rechtsklick/„Element untersuchen“ (oder wie auch immer das für deinen Browser und sein Developer-Werkzeug heisst) auch leicht selbst herausfinden können! – .navright, dass du einfach per top:-29px „hoch gezogen“ hast, darüber liegt.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hi,

      Auf allen "Monatsseiten" meines Fahrrad-Blogs (http://www.bergisch-afghanistan.de/khyberspace/bikeblog.php) ist immer nur das rechts stehende, auf die jeweils nächste Monatsseite verweisende Element anklickbar, nicht aber das linke. Wieso?

      Weil – und das hättest du mit Rechtsklick/„Element untersuchen“

      Das Ding kriege ich nicht bedient, ich bin wohl zu blöd dazu.

      Jetzt habe ich die CSS-Definitionen folgendermaßen geändert:

        
      .navleft { background-color:transparent; position:relative; top:0px; left:0px; width:100px; margin-left:191px; text-align:left }  
      .navright { background-color:transparent; position:relative; top:-29px; right:0px; width:100px; margin-right:191px; text-align:right }  
      
      

      Was bekomme ich als Ergebnis? Unbenutzbar ineinander geknäuelte Links am linken Rand des Textbereichs! WARUM IST DAS ALLES SO SCHEISSE KOMPLIZIERT??? Ich bin kurz davor, stattdessen wieder "Deppen-Layout" zu verwenden, nämlich per Tabelle! Hat all die Jahre prima geklappt, wieso sollte ich diesen ganzen CSS-Firlefanz mitmachen? Mein Fahrrad hat auch nur drei Gänge und ich komme damit trotzdem überall hin, wo ich hin will!

      Bis bald im Khyberspyce!

      Yadgar

      1. Om nah hoo pez nyeetz, Yadgar!

        [Verzweiflung]

        Ich empfehle folgende Struktur:

        <p class="blaettern">  
          <a class="zurueck" href="">April</a>  
          <a class="weiter" href="">Juni</a>  
        </p>
        

        mit dem CSS

        .blaettern a {  
          display: inline-block;  
          width: 50%;  
        }  
          
        .blaettern a.weiter {  
          text-align: right;  
        }
        

        Auf die Klasse "zurueck" ließe sich auch verzichten. In HTML5 gern nav statt p.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Arsen und Arsenal.

        1. Hi(gh)!

          [ neumodischen CSS-Firlefanz ]

          Nee, lass mal, ich bleibe bei meinen Tabellen! Sind zwar alles andere als orthodox, funktionieren aber dafür wenigstens!

          Und jetzt geh ich erst mal eine Runde Fahrradfahren!

          Bis bald,

          Yadgar

          1. Om nah hoo pez nyeetz, Yadgar!

            [ Verzweiflung ]
            [ neumodischen CSS-Firlefanz ]
            Nee, lass mal, ich bleibe bei meinen Tabellen! Sind zwar alles andere als orthodox, funktionieren aber dafür wenigstens!

            Auch für dich das passende T-Shirt:

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Penn und Penner.

        2. Hallo,

          <p class="blaettern">

          <a class="zurueck" href="">April</a>
            <a class="weiter" href="">Juni</a>
          </p>

          
          >   
          > ~~~css
          
          .blaettern a {  
          
          >   display: inline-block;  
          >   width: 50%;  
          > }
          
          

          Das ist so nicht zu empfehlen. display: inline-block ist leider sehr tückisch:

          50% + 50% + die drei Textknoten zwischen den Tags, die anonymous inline boxes erzeugen, ergeben zusammen mehr als 100%. Somit liegen die Elemente nicht mehr in einer Zeile.

          float ist hier in dieser Hinsicht besser. Dann muss man sich aber mit Clear/Clearfixes beschäftigen.

          Yadgar hat schon nicht unrecht: CSS-Layout ist nicht einfach. Wir kämpfen seit 10 Jahren damit, »mal eben« Spalten robust in CSS umzusetzen. (Jetzt kommt mir nicht mit Flexbox: Das ist noch tausendmal komplizierter – und leistungsfähiger natürlich.)

          Mathias

          1. Hallo!

            Das ist so nicht zu empfehlen. display: inline-block ist leider sehr tückisch:

            50% + 50% + die drei Textknoten zwischen den Tags, die anonymous inline boxes erzeugen, ergeben zusammen mehr als 100%. Somit liegen die Elemente nicht mehr in einer Zeile.

            Das ist doch so nicht richtig. Es ist der Zeilenumbruch, der für zusätzlichen Whitespace sorgt, der wiederum dafür verantwortlich ist, dass die 100% überschritten werden.

            Alles worauf man achten muss ist, dass es keine Zeilenumbrüche_zwischen_den Elementen gibt:

            <p class="blaettern">  
              <a class="zurueck" href="">April</a  
              ><a class="weiter" href="">Juni</a>  
            </p>
            

            float ist hier in dieser Hinsicht besser.

            Auch hier wage ich zu widersprechen.
            Ein 'display: table-cell' für die beiden Links erscheint mir hier vorteilhafter, denn ...

            Dann muss man sich aber mit Clear/Clearfixes beschäftigen.

            ... dann muss man sich genau nicht mit diesen Dingen zusätzlich beschäftigen (jedenfalls nicht an dieser Stelle/ in diesem Zusammenhang).

            Yadgar hat schon nicht unrecht: CSS-Layout ist nicht einfach.

            Das hängt ja vom gewünschten Layout ab ...! :-P
            Und ich würde das weniger auf CSS-Layout beziehen, als vielmehr auf CSS als Ganzes, welches aufgrund seiner Komplexität, Struktur und "Wechselwirkungen", bei der gleichzeitigen Fülle an Optionen "nicht einfach" ist.

            Weil man eigentlich zuerst in seiner Gesamtheit verstanden haben/ kennen muss, um "vernünftig" damit arbeiten zu können.

            Wir kämpfen seit 10 Jahren damit, »mal eben« Spalten robust in CSS umzusetzen. (Jetzt kommt mir nicht mit Flexbox: Das ist noch tausendmal komplizierter – und leistungsfähiger natürlich.)

            Aber genau das doch der Punkt!
            Vor Einführung des Flexbox-Moduls gab es doch im Prinzip nichts, was auf die speziellen Anforderungen für das Layout zugeschnitten war. Stattdessen musste man seit jeher mit irgendwelchen "Behelfskrücken" (wie 'float') arbeiten, um in etwa das zu erreichen, was ansonsten nur mit Tabellen-Layouts möglich war.

            Gruß Gunther

            1. Hallo,

              Das ist doch so nicht richtig.

              Stimmt, es ist nur der Textknoten zwischen den Inline-Block-Boxen, der eine Anonymous Inline Box erzeugt.

              Alles worauf man achten muss ist, dass es keine Zeilenumbrüche_zwischen_den Elementen gibt:

              Ja, das ist »alles«.

              <p class="blaettern">

              <a class="zurueck" href="">April</a
                ><a class="weiter" href="">Juni</a>
              </p>

                
              Solchen Code sollte man NIE schreiben. Jeder Normalsterbliche würde obigen Code für einen Fehler halten. Die Formatierung des Quellcodes sollte keine Rolle spielen. Bei »display: inline-block als Float-Ersatz« tut sie das leider. Deshalb ist der Ansatz nicht wirklich praxistauglich, da er auf ganz perfidem Wege Textauszeichnung und Styling vermischt.  
                
              Mathias
              
              -- 
              [9elements – Ruby on Rails and HTML5 development](http://9elements.com/)
              
              1. Hallo,

                Solchen Code sollte man NIE schreiben. Jeder Normalsterbliche würde obigen Code für einen Fehler halten.

                Na ja "NIE" würde ich jetzt auch nicht sagen, zumal wenn den Code dynamisch generiert und bspw. sämtliche Zeilenumbrüche (da wo es darauf ankommt) entfernt.

                Und ansonsten gilt doch, dass sich kein Besucher für den Quelltext interessiert (von Leuten wie uns mal abgesehen), sondern sich immer die daraus erzeugte Seite anguckt! ;-)

                Die Formatierung des Quellcodes sollte keine Rolle spielen. Bei »display: inline-block als Float-Ersatz« tut sie das leider.

                Ja, ein großes Manko.
                David Walsh hat dazu eine nette Übersicht: http://davidwalsh.name/remove-whitespace-inline-block

                Deshalb ist der Ansatz nicht wirklich praxistauglich, da er auf ganz perfidem Wege Textauszeichnung und Styling vermischt.

                Deshalb habe ich ja auch 'display: table-cell' vorgeschlagen (was du hier jetzt geflissentlich weggelassen hast).

                Es mag aber durchaus Situationen geben, wo das eben doch keine sinnvolle ALternative für 'inline-block' ist. Und für mich jedenfalls wiegt die "Problematik der Code Schreibweise" nicht so schwer, als dass ich deswegen auf die Verwendung von 'inline-block' verzichten würde.

                Gruß Gunther

              2. Om nah hoo pez nyeetz, molily!

                <p class="blaettern">

                <a class="zurueck" href="">April</a
                  ><a class="weiter" href="">Juni</a>
                </p>

                
                >   
                > Solchen Code sollte man NIE schreiben. Jeder Normalsterbliche würde obigen Code für einen Fehler halten. Die Formatierung des Quellcodes sollte keine Rolle spielen. Bei »display: inline-block als Float-Ersatz« tut sie das leider.  
                  
                Ja. Immer dann, wenn whitespace der Übersichtlichkeit im Quelltext dient und im Original nicht vorkommen soll (Abstände zwischen inline-Elementen beispielsweise).  
                  
                
                > Deshalb ist der Ansatz nicht wirklich praxistauglich, da er auf ganz perfidem Wege Textauszeichnung und Styling vermischt.  
                  
                In diesem Fall tuts aber auch  
                  
                <nav class="blaettern">  
                   <a ...>April</a><a ...>Juni</a>  
                </nav>  
                  
                Matthias
                
                -- 
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Kant und Kantate](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=K#kant).  
                ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
                
                
        3. @@Matthias Apsel:

          nuqneH

          Auf die Klasse "zurueck" ließe sich auch verzichten.

          Auf "weiter" auch:

          <nav class="blaettern">  
            <a rel="prev" href="">April</a>  
            <a rel="next" href="">Juni</a>  
          </nav>
          

          Qapla'

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