Nick: Divs direkt unterinander darstellen

SELF-Forum

Divs direkt unterinander darstellen

Nick
– Informationen zu den Bewertungsregeln

Sehr Mysteriös, aber vielleicht erkennt Ihr ja den Fehler:

Ich möchte innerhalb eines Fieldset eine Reihe von Divs ausgeben.
Zwei nebeneinander und davon dann 13 untereinander.
Im jeweils ersten Div pro Zeile befindet sich eine checkbox (rechtsbündig).
Im zweiten Div wird ein Name ausgegeben (linksbündig)

programmiert wie folgt:
__________________________________________________________________________

<fieldset><legend><font class=kl_stichwort>Teilnehmer</font></legend>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname1</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname2</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname3</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname4</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname5</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname6</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname7</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname8</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname9</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname10</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname11</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname12</font></div>

<div style="float:left;width:40%;text-align:right;background:red;"><input type="checkbox" name="test" value="test"></div>
<div style="float:right;width:60%;text-align:left;background:green;"><font class=stichwort>Vorname Nachname13</font></div>

</fieldset>
__________________________________________________________________________

Natürlich läuft das ganze über eine Whileschleife.
Warum wird die Checkbox der zweiten Reihe auf der linken seite dargestellt, alle anderen aber auf der rechten Seite, wo doch der Code überall gleich ist?

Das Obermysterium kommt jetzt:
Wenn Ihr sämmtliche Divs nocheinmal kopiert und ans Ende setzt (also die Ausgabe verdoppelt), hätte ich ja nun erwartet, dass wiederrum die entsprechend zweite Checkbox auf der rechten Seite dargestellt wird, oder der zweite Teil richtig, stattdessen wird jedoch zusätzlich zur zweiten Checkbox des ersten Teils auch die 9. Checkbox des 2. Teils rechts angezeigt ???

Ich verstehe da jetzt garnichts mehr und hoffe, dass ich nur den Wald vor lauter Bäumen nicht mehr sehe.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Divs direkt unterinander darstellen

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Sehr Mysteriös, aber vielleicht erkennt Ihr ja den Fehler:

    Ich sehe erst mal nur extrem unsinniges HTML.

    Ich möchte innerhalb eines Fieldset eine Reihe von Divs ausgeben.
    Zwei nebeneinander und davon dann 13 untereinander.
    Im jeweils ersten Div pro Zeile befindet sich eine checkbox (rechtsbündig).
    Im zweiten Div wird ein Name ausgegeben (linksbündig)

    Du möchtest die sinnfreien DIVs weglassen, und stattdessen die Beschriftung der Checkboxen in LABEL-Elementen unterbringen.

    Natürlich läuft das ganze über eine Whileschleife.

    Ebenso natürlich ist das bei einem clientseitigen Problem vollkommen uninteressant.

    Warum wird die Checkbox der zweiten Reihe auf der linken seite dargestellt, alle anderen aber auf der rechten Seite, wo doch der Code überall gleich ist?

    Ich sehe nur Code.
    Wenn du den Link zu einem Online-Beispiel mitliefern würdest, könnte ich vielleicht sehen, was du meinst. (Dieses aber bitte mit validem Code.)

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Divs direkt unterinander darstellen

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Nick:

    nuqneH

    Warum wird die Checkbox der zweiten Reihe auf der linken seite dargestellt, alle anderen aber auf der rechten Seite, wo doch der Code überall gleich ist?

    Wird doch gar nicht.

    Dein HTML-Code ist dennoch schlecht:

    (1) Es ist nicht sinnvoll, Stilangaben inline in @style-Attributen zu tätigen. Besonders dann nicht, wenn man wiederholt für gleichartige Elemente dieselben Stile angeben will. Gib sämtliche Stilangaben http://de.selfhtml.org/css/formate/zentrale.htm@title=zentral im Stylesheet an! Vergiss, dass es das @style-Attribut überhaupt gibt!

    Und gib sämtliche Stilangaben im Stylesheet an! Nicht mit missbilligten HTML-Elementen und -Attribute. Weg mit 'font'!

    (2) Verwende 'http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label' für Eingabefelder! Dann muss der Nutzer auch nicht auf die winzige Checkbox zielen (Fitts’s Law).

    Derselbe @value-Wert für alle Checkboxen dürfte auch wenig sinnvoll sein.

    Dein Markup sollte so aussehen:

    <fieldset>  
    <legend>Teilnehmer</legend>  
    <div>  
        <input type="checkbox" name="teilnehmer" value="test1" id="teilnehmer1">  
        <label for="teilnehmer1">Vorname Nachname1</label>  
    </div>  
    <div>  
        <input type="checkbox" name="teilnehmer" value="test2" id="teilnehmer2">  
        <label for="teilnehmer2">Vorname Nachname2</label>  
    </div>  
    ⋮  
</fieldset>

    Den Rest erledigt das Stylesheet:

    div  
{  
    background: url(red-green.png) repeat-y 40% 0%;  
    background: -moz-linear-gradient(left, red, red 40%, green 40%, green);  
    background: -webkit-gradient(linear, left center, right center, from(red), color-stop(40%,red), color-stop(40%,green), to(green));  
    position: relative;  
    height: 1.2em;  
}  
  
input  
{  
    margin: 0;  
    position: absolute;  
    right: 60%;  
}  
  
label  
{  
    left: 40%;  
    padding-left: 1em;  
    position: absolute;  
}

    Das Hintergrundbild red-green.png ist für Browser, die mit Gradienten noch nichts anzufangen wissen, und enthält Rot und Grün im Verhältnis 40:60, s. dieses Posting.

    Qapla'

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

    1. Divs direkt unterinander darstellen

      Deus Figendi
      – Informationen zu den Bewertungsregeln

      Dein Markup sollte so aussehen:

      <fieldset>

      <legend>Teilnehmer</legend>
          <div>
              <input type="checkbox" name="teilnehmer" value="test1" id="teilnehmer1">
              <label for="teilnehmer1">Vorname Nachname1</label>
          </div>
          <div>
              <input type="checkbox" name="teilnehmer" value="test2" id="teilnehmer2">
              <label for="teilnehmer2">Vorname Nachname2</label>
          </div>
          ⋮
      </fieldset>

      Ich persönlich packe oftmals auch die Inputs ins Label und lasse umgebende Elemente weg:  
  
~~~html
<fieldset>  
 <legend>Teilnehmer</legend>  
  <label for="teilnehmer1">  
   <input type="checkbox" name="teilnehmer[1]" value="test1" id="teilnehmer1" />  
   Vorname Nachname (1)  
  </label>  
  <label for="teilnehmer2">  
   <input type="checkbox" name="teilnehmer[2]" value="test1" id="teilnehmer2" />  
   Vorname Nachname (2)  
  </label>  
    ⋮  
</fieldset>

      Ist aber vielleicht Geschmacksfrage, ist nicht soooo semantisch, aber 'n Element gespart :D
      Btw: Label sind block-Element IIRC.

      --
      sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Divs direkt unterinander darstellen

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Deus Figendi:

        nuqneH

        Ich persönlich packe oftmals auch die Inputs ins Label und lasse umgebende Elemente weg […]
        Ist aber vielleicht Geschmacksfrage, ist nicht soooo semantisch,

        Yep.

        aber 'n Element gespart :D

        Dürfte aber schwer werden, die 40:60-Aufteilung hinzubekommen.

        Btw: Label sind block-Element IIRC.

        YDNRC. Ein Blick in die DTD verrät:

        <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

        <!-- %inline; covers inline or "text-level" elements -->
        <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

        Und es würde auch meist wenig Sinn machen, dass der Nutzer nicht nur dort clicken kann, wo die Beschriftung steht, sondern auch auf Leerraum.

        Qapla'

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