Drei Boxen anordnen, float oder was anderes?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Drei Boxen anordnen, float oder was anderes?

    Code:
    <ul id="nav"></ul>
    <div id="content"></div>
    <div id="stats"></div>
    Meine Seite besteht im Prinzip aus diesen drei Bereichen, die Anordnung im Quelltext ist, denke ich, halbwegs vernünftig und auch für Suchmaschinen geeignet.

    Angezeigt werden soll es aber so:
    Code:
     ___________   _____________
    |           | |             |
    |           | |             |
    |  nav      | |  content    |
    |           | |             |
    |___________| |             |
                  |             |
     ___________  |             |
    |           | |             |
    |           | |             |
    |  stats    | |             |
    |           | |             |
    |___________| |             |
                  |             |
                  |             |
                  |_____________|
    Alles kein Problem, oder doch?
    Ich verpasse der nav float:left und es sieht schon fast aus wie gewünscht. Nur wie bekomme ich die stats auch links neben den content?

    Ich erreiche das gewünschte optische Erscheinungsbild mit
    Code:
    <div id="nav_stats">
      <ul id="nav"></ul>
      <div id="stats"></div>
    </div>
    <div id="content"></div>
    Aber das würde ich lieber vermeiden, da der content wichtiger als die Statistik ist und im Quelltext vornedran stehen sollte.

    Wie kann ich also dies Problem lösen?
    Außer mit einer Tabelle wenn irgend möglich
    Ich denke, also bin ich. - Einige sind trotzdem...

  • #2
    Re: Drei Boxen anordnen, float oder was anderes?

    Original geschrieben von mrhappiness
    Aber das würde ich lieber vermeiden, da der content wichtiger als die Statistik ist und im Quelltext vornedran stehen sollte.
    content auch noch vor die navi packen, und dann nach rechts floaten?
    hm, geht aber wahrscheinlich nicht, weil der ja keine feste breite haben sollte ...

    navi und stats absolut positionieren?
    bzw. noch erst in einen weiteren umgebenden container packen, und den dann absolut positionieren, damit navi nicht die stats überlagern kann.
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      Re: Re: Drei Boxen anordnen, float oder was anderes?

      Original geschrieben von wahsaga
      content auch noch vor die navi packen, und dann nach rechts floaten?
      hm, geht aber wahrscheinlich nicht, weil der ja keine feste breite haben sollte ...
      Leider wahr

      navi und stats absolut positionieren?
      bzw. noch erst in einen weiteren umgebenden container packen, und den dann absolut positionieren, damit navi nicht die stats überlagern kann.
      Muss ich mir mal anschauen, aber wäre es nicht besser, erst die Navigation und dann den Inhalt zum gewählten Menüpunkt der Navigation auszugeben anstatt das andersrum zu machen?
      Mir erscheint die Anordnung Navigation -> Inhalt irgendwie logischer

      Naja, wenn kein Weg dran vorbeiführt, werd ich wohl absolut positionieren oder eben doch eine Tabelle benutzen, sollte der Suchmaschine ja nicht unbedingt sauer aufstoßen oder?
      Ich denke, also bin ich. - Einige sind trotzdem...

      Kommentar


      • #4
        Re: Re: Re: Drei Boxen anordnen, float oder was anderes?

        Original geschrieben von mrhappiness
        Muss ich mir mal anschauen, aber wäre es nicht besser, erst die Navigation und dann den Inhalt zum gewählten Menüpunkt der Navigation auszugeben anstatt das andersrum zu machen?
        Mir erscheint die Anordnung Navigation -> Inhalt irgendwie logischer
        nein, nicht unbedingt.
        stell dir einen benutzer mit einem screenreader vor, der sich auf jeder seite erneut die navigation vorlesen lassen muss, bevor er überhaupt an den inhalt kommt.
        im sinne der barrierefreiheit setzt man dann oftn einen anker-link oben drüber zum überspringen der navigation, der per CSS ausgeblendet werden kann - normale besucher sehen ihn nicht, der screenreader-benutzer kann ihn aber nutzen um gleich zum inahlt zu gelangen.
        ob man das nun so rum macht, erst navigation und ankerlink zum inhalt, oder andersherum, erst den inhalt und unsichtbarer link zur navigation, dürfte m.E. weitgehend geschmacksache sein ...

        aber ich schweife ab :-), barrierefreiheit ist hier ja gar nicht das hauptthema.
        es spricht jedenfalls m.E. wenig dagegen, den inhalt vor der navigation im code zu platzieren.

        Naja, wenn kein Weg dran vorbeiführt, werd ich wohl absolut positionieren oder eben doch eine Tabelle benutzen, sollte der Suchmaschine ja nicht unbedingt sauer aufstoßen oder?
        na ja, ohne wär' halt schon schöner, gell? :-)

        erst navi, dann content und dann stats sollte ja auch gehen, auch in kombination mit absoluter positionierung - musst dann halt nur darauf achten, stats mit em zu positionieren, damit menü sich nicht darüberlegt bei schriftvergrößerung ...
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          Re: Re: Re: Re: Drei Boxen anordnen, float oder was anderes?

          Original geschrieben von wahsaga
          na ja, ohne wär' halt schon schöner, gell? :-)
          si

          erst navi, dann content und dann stats sollte ja auch gehen, auch in kombination mit absoluter positionierung - musst dann halt nur darauf achten, stats mit em zu positionieren, damit menü sich nicht darüberlegt bei schriftvergrößerung ...
          Leider nein, denn das Menü ist nicht immer gleich lang
          Ausgangszustand (Im Contentbereich steht der Inhalt der Startseite):
          Code:
          Link 1
          Link 2
          Link 3
          Benutzer klickt auf Link 2 (im Contentbereich steht der Inhalt von Link 2):
          Code:
          Link 1
          Link 2
            Link 2.1
            Link 2.2
          Link 3
          Da hilft mir auch em nicht wirklich weiter, insofern wird's auf eine Tabelle rauslaufen, wenn ich navi - content - stats haben will

          Ich werde mal in mich gehen und überlegen, ob ich auch mit content - navi - stats leben kann
          Ich denke, also bin ich. - Einige sind trotzdem...

          Kommentar


          • #6
            hab grad mal was zusammengefrickelt.

            im IE klappt es. im FF leider nicht. :-(

            aber vielleicht ist es ein ansatz in die richtige richtung?

            Code:
            <!DOCTYPE HTML PUBLIC
                        "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">
            <html>
                <head>
                    <title>...</title>
                </head>
            
                <style type="text/css">
                    #nav, #stat, #content {
                        border: 1px solid #333;
                    }
            
                    #nav, #stat {
                        display: block;
                        width: 90px;
                        margin-bottom: 10px;
                    }
            
                    #nav {
                        margin-top: -58px;
                    }
            
                    #content {
                        display: block;
                        width: auto;
                        float: right;
                        margin: 0;
                        padding: 0;
                        margin-left: 100px;
                    }
            
                    #content h1 {
                        border-bottom: 1px solid #333;
                        width: 100%;
                        height: 20px;
                    }
            
                </style>
            
            <body>
            
            <div id=content>
                <h1>headline</h1>
            </div>
            
            <div id=nav>
                nav
            </div>
            
            <div id=stat>
                stat
            </div>
            
            
            </body>
            </html>
            INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


            Kommentar

            Lädt...
            X