Gerald: 3 Boxen über Seitenbreite verteilt

SELF-Forum

3 Boxen über Seitenbreite verteilt

Gerald Homepage des Autors
– Informationen zu den Bewertungsregeln

Ich nutze DIV-Boxen als Navigationsschaltflächen und möchte in einer Zeile 3 gleich breite Boxen, die gemeinsam 100 % breit sind. Wenn ich die Breite der 3 Boxen mit 33 % definiere, wird das Gesamtergebnis zu breit und die letzte Box wird in die nächste Zeile umgebrochen. Wenn ich das gleiche mit 32 % mache, habe ich entweder ganz rechts (wenn die rechteste Box linksbündig steht) oder zwischen der 2. und der 3. Box einen größeren Abstand.
Auch probiert habe ich die Breite auf auto zu setzen, dann sind die Boxen aber nur so schmal, dass der Linktext Platz hat.
Nachdem 2 Stunden googeln keine Verbesserungen gebracht hat, melde ich mich hier.
Den aktuellen Stand meiner Versuche seht Ihr hier: http://m.tauchclubinnsbruck.at/
Vielleicht hat einer eine Idee.

CSS-Definition:

.nav_l {float:left;width:33%;text-align:center;padding:8px 5px;border:1px solid;border-color:#E5EBFF;cursor:pointer;background-color:#0039D8;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}  
.nav_m {float:left;width:33%;text-align:center;padding:8px 5px;border:1px solid;border-color:#E5EBFF;cursor:pointer;background-color:#0039D8;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}  
.nav_r {float:right;width:33%;text-align:center;padding:8px 5px;border:1px solid;border-color:#E5EBFF;cursor:pointer;background-color:#0039D8;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

HTML-Aufruf:

<div><div class="nav_l"><a href="/ausbild.php" class="weiss">Club</a></div>  
<div class="nav_m"><a href="/ausbild.php" class="weiss">Ausbildung</a></div>  
<div class="nav_r"><a href="/termine.php" class="weiss">Termine</a></div></div>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 3 Boxen über Seitenbreite verteilt

    Thomas Luethi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,
    Gemäss dem http://de.selfhtml.org/css/formate/box_modell.htm@title=Box-Modell setzt sich die totale Breite zusammen aus width + padding + border + margin.
    33%+33%+33%+12px+12px+12px sind höchstwahrscheinlich mehr als 100%...

    Statt der DIV-Suppe könntest/solltest Du eine Liste verwenden.
    Die drei Listen-Elemente (LI) wären dann 33% breit, ohne margin/border/padding.
    Und die restlichen Layout-Eigenschaften könntest Du auf die A-Elemente übertragen.
    Grob gesagt etwas in der Art (ungetestet!):

    <ul class="nav">  
 <li><a href="#">Club</a></li>  
 <li><a href="#">Ausbildung</a></li>  
 <li><a href="#">Termine</a></li>  
</ul>

    ul.nav { list-style-type:none; }  
.nav li { float:left; display:inline; width:33%; margin:0; padding:0; }  
.nav li a { display:block; text-align:center; padding:8px 5px; border:1px solid #E5EBFF; border-radius:5px; cursor:pointer; color:#ffffff; background-color:#0039D8; }

    Ergänzungen/Korrekturen werden sicher noch folgen von Leuten, die wacher sind als ich gerade jetzt...

    Statt float:left; und display:inline; könntest Du ggf. auch display:inline-block; nehmen, siehe den Artikel von Gunnar.

    Gute Nacht!
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 3 Boxen über Seitenbreite verteilt

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Thomas Luethi:

      nuqneH

      <ul class="nav">
      […]
      Ergänzungen/Korrekturen werden sicher noch folgen von Leuten, die wacher sind als ich gerade jetzt...

      Das Menü sollte noch in ein nav-Element gesteckt werden.* Dann wäre auch die Klasse "nav" überflüssig. Ist sie auch so schon, denn wenn ein Attribut, dann WAI-ARIA, was der Barrierefreiheit zugute kommt: <ul role="navigation">.

      Styling dann per Nachfahrenselektoren 'nav ul'/'nav li'/'nav a' bzw. Attributselektoren '[role="navigation"]'/'[role="navigation"] li'/'[role="navigation"] a'. (IE 6 unterstützen wir nicht mehr, oder?)

      Bei mehreren 'nav'- bzw. @role="navigation"-Elementen auf der Seite sollte man natürlich zusätzlich noch IDs (oder Klassen) verwenden.

      Und dann ist da noch Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]: „Verlinke niemals auf die aktuelle Seite.“

      Auf der Club-Seite sollte das Menü so aussehen:

      <nav>
        <ul>
          <li><a>Club</a></li>
          <li><a href="/ausbild.php">Ausbildung</a></li>
          <li><a href="/termine.php">Termine</a></li>
        </ul>
      </nav>

      Auf der Ausbildung-Seite:

      <nav>
        <ul>
          <li><a href="/club.php">Club</a></li>
          <li><a>Ausbildung</a></li>
          <li><a href="/termine.php">Termine</a></li>
        </ul>
      </nav>

      Auf der Termine-Seite … – die Denkaufgabe überlass ich mal Euch.

      Statt float:left; und display:inline; […]

      Oh, wir unterstützen doch noch IE 6‽

      […] könntest Du ggf. auch display:inline-block; nehmen, siehe den Artikel von Gunnar.

      Da muss man bedenken, dass Whitespace zwischen den </li>- und <li>-Tags als Leerzeichen angezeigt wird.

      Qapla'

      Das Kleingedruckte:
      * in HTML5

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 3 Boxen über Seitenbreite verteilt

        Gerald Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @Thomas und Gunnar:

        zuerstmal vielen Dank für Eure frühmorgentlichen Tipps. Ich habe Eure Varianten ausprobiert und vorläufig alle drei Versionen (meine, Thomas, Gunnar) untereinander gestellt. Wie ihr auf http://m.tauchclubinnsbruck.at sehen könnt, sind alle drei noch nicht optimal, wobei die Version von Gunnar dem ganzen schon recht nahe kommt, aber einfach ein Stück zu weit rechts beginnt und zu weit links endet (sollte sich optimalerweise mit den Links unten decken).

        Folgendes habe ich für die Version "Thomas" übernommen:

        <ul class="nav">  
 <li><a href="/club.php">Club</a></li>  
 <li><a href="/ausbild.php">Ausbildung</a></li>  
 <li><a href="/termine.php">Termine</a></li>  
</ul>  


        ul.nav { list-style-type:none; width:100% }  
.nav li { display:inline-block; width:33%; margin:0; padding:0; }  
.nav li a { display:block; text-align:center; padding:8px 5px; border:1px solid #E5EBFF; border-radius:5px; cursor:pointer; color:#ffffff;font-weight:bold; background-color:#0039D8; }

        Folgendes habe ich für die Version "Gunnar" eingegeben:

        <nav class="navg">  
  <ul>  
    <li><a href="/club.php">Club</a></li>  
    <li><a href="/ausbild.php">Ausbildung</a></li>  
    <li><a href="/termine.php">Termine</a></li>  
  </ul>  
</nav>

        nav.navg{ list-style-type:none; width:100%}  
.navg li { display:inline-block; width:33%; margin:0; padding:0; }  
.navg li a { display:block; text-align:center; padding:8px 5px; border:1px solid #E5EBFF; border-radius:5px; cursor:pointer; color:#ffffff;font-weight:bold; background-color:#0039D8; }

        Jetzt schon danke für weitere Vorschläge. Danke!
        Liebe Grüße aus dem tief verschneiten Tirol!

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. 3 Boxen über Seitenbreite verteilt

          Thomas Luethi Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Gerald,

          Meine Variante - ergänzt mit margin:0; padding:0; für die UL - "funktioniert" wie gewünscht:

          ul.nav { list-style-type:none; width:100%; margin:0; padding:0; }

          Bitte lies mal in der Forums-Hilfe, wie man hier Links macht.
          (Es gibt dafür auch den praktischen Button "Link" über dem Textfeld.)

          @Gunnar: Mit HTML5 habe ich mich bisher kaum befasst.
          Und ich code gerne abwärtskompatibel, wenn es keine grossen Umstände macht.
          Danke für den Hinweis auf das NAV-Element und überhaupt auf die HTML5 Edition for Web Authors. Werde ich mir bei Gelegenheit reinziehen.

          Freundliche Grüsse
          Thomas

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. 3 Boxen über Seitenbreite verteilt

            Gerald Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo Thomas,

            zuerst ein großes DANKE für deine Hilfe – mit deinen Einstellungen klappt’s perfekt: http://m.tauchclubinnsbruck.at/

            Aber da das Ganze ja für (schmale) Handy-Browser sein soll, hab ich es mal mit einer kleineren Anzeige angeschaut. Und hoppla, plötzlich rutscht der dritte Button in die nächste Zeile. Einfach mal den Browser schmäler ziehen oder hier ansehen: http://m.tauchclubinnsbruck.at/schmal.html

            Beim Firefox (8.0) liegt die Grenze bei einer Breite von 826 Pixel (gehen noch). Ab 825 und schmaler wird umgebrochen.

            Beim Internet-Explorer (9.0.8112.16421) passiert das gleiche Spiel bei 833 Pixel Breite.

            Interessanter Effekt (wenn auch nicht wirklich relevant): Wenn ich das Browserfenster noch schmäler ziehe, werden die Buttons nie schmäler als 100 Pixel (Firefox) bzw. 75 Pixel (IE). Wenn dann aber auch der zweite Button nicht mehr Platz hat, wird trotzdem nicht umgebrochen.

            Das Ganze ist mir schleierhaft! Eine Idee?

            Liebe Grüße

            Gerald

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. 3 Boxen über Seitenbreite verteilt

              Gerald Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Habe herumexperimentiert und dabei die Breite jetzt verkleinert auf width:32.4% und damit werden auch schmalere Fenster noch korrekt angezeigt (zumindest in meinen beiden Browsern und bei der Handy-Simulation von Mobilizer (http://www.springbox.com/mobilizer/).
              Was an 97,2 % (3 × 32,4%) besser ist als an 99 %, kann ich wirklich nicht sagen. Mit 32,5% klappt's schon wieder nicht mehr.

              Nochmals vielen dank für Eure Hilfe!

              Gerald

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

  2. 3 Boxen über Seitenbreite verteilt

    Gerald Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Habe herumexperimentiert und dabei die Breite jetzt verkleinert auf width:32.4% und damit werden auch schmalere Fenster noch korrekt angezeigt (zumindest in meinen beiden Browsern und bei der Handy-Simulation von Mobilizer (http://www.springbox.com/mobilizer/).
    Was an 97,2 % (3 × 32,4%) besser ist als an 99 %, kann ich wirklich nicht sagen. Mit 32,5% klappt's schon wieder nicht mehr.

    Nochmals vielen dank für Eure Hilfe!

    Gerald

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln