span-Breite per CSS

[Matthias Coy]

IST-Zustand:

code:

* TEXT_r_r_r_r
    __* TEXT_r_r_r_r
    ____* TEXT_r_r_r_r
    ____* TEXT_r_r_r_r
    __* TEXT_r_r_r_r
    * TEXT_r_r_r_r
    __*_TEXT_r_r_r_r

SOLL-Zustand:

code:

* TEXT_____r_r_r_r
    __* TEXT___r_r_r_r
    ____* TEXT_r_r_r_r
    ____* TEXT_r_r_r_r
    __* TEXT___r_r_r_r
    * TEXT_____r_r_r_r
    __*_TEXT___r_r_r_r

Ich hoffe soweit ist das Problem klar (UL und LI Listen). da der Abstand zwischen dem TEXT und den 'r' manchmal ziemlich groß ist, hab ich im Stylesheet nen :hover mit verändeter Hintergrundfarbe, damit man sieht welche Knöpfe man gerade drückt.

1. Lösungversuch:
zwei span, das zweite span mit "position:absolute;left:400px;", dann hab ich das Problem das das :hover nur auf den TEXT wirkt und nicht mehr auf den weißen Zwischenraum

2. Lösungsversuch:
zwei span, das zweite im Ersten drinne
Damit hab ich dann wieder die komplette Zeile per Hover, allerdings geht dann das "position:absolute;left:400px;" nicht mehr.

3. Lösungsversuch:
zwei span, das erste mit fester Breite (style="width:800px"), das zweite span wieder im ersten und mit "text-align:right;". Auch dies funktioniert nicht, im Sinne von "wird ignoriert".

Noch jemand eine Idee (ausser: "nimm ne Tabelle", ich WILL/MUSS das UL,LI-Konstrukt haben)

hier noch nen bissle Beispiel-Code:

code:

<ul>
      <li class="liStylePlus" id="img2">
        <span class="bling" onclick="showhide(event);" id="entry2">
          TEXT
          <a href="index.php?modul=skill&amp;action=edit&amp;skillId=2">(e)</a>
          <a href="index.php?modul=skill&amp;action=add">(a)</a>

<span style="white-space:nowrap; text-align:right;">
            <input type="radio" name="radio[2]" value="1" title="TEXT: Note 1" class="Check" checked="checked" />
            <input type="radio" name="radio[2]" value="2" title="TEXT: Note 2" class="Check" />
            <input type="radio" name="radio[2]" value="3" title="TEXT: Note 3" class="Check" />
            <input type="radio" name="radio[2]" value="4" title="TEXT: Note 4" class="Check" />
            <input type="radio" name="radio[2]" value="5" title="TEXT: Note 5" class="Check" />
          </span>
        </span>
        <ul style="display:none">

<li class="liStyleNeutral" id="img22">
            <span class="bling" id="entry22">
              TEXT2
              <a href="index.php?modul=skill&amp;action=edit&amp;skillId=22">(e)</a>
              <a href="index.php?modul=skill&amp;action=add">(a)</a>
                        <span style="margin-left:260px; white-space:nowrap;">
                <input type="radio" name="radio[22]" value="1" title="TEXT2: Note 1" class="Check" />
                <input type="radio" name="radio[22]" value="2" title="TEXT2: Note 2" class="Check" />
                <input type="radio" name="radio[22]" value="3" title="TEXT2: Note 3" class="Check" checked="checked" />

<input type="radio" name="radio[22]" value="4" title="TEXT2: Note 4" class="Check" />
                <input type="radio" name="radio[22]" value="5" title="TEXT2: Note 5" class="Check" />
              </span>
            </span>
          </li>
          <li class="liStyleNeutral" id="img23">
            <span class="bling" id="entry23">
              TEXT3
              <a href="index.php?modul=skill&amp;action=edit&amp;skillId=23">(e)</a>
              <a href="index.php?modul=skill&amp;action=add">(a)</a>

<span style="margin-left:260px; white-space:nowrap;">
                <input type="radio" name="radio[23]" value="1" title="TEXT3: Note 1" class="Check" />
                <input type="radio" name="radio[23]" value="2" title="TEXT3: Note 2" class="Check" checked="checked" />
                <input type="radio" name="radio[23]" value="3" title="TEXT3: Note 3" class="Check" />
                <input type="radio" name="radio[23]" value="4" title="TEXT3: Note 4" class="Check" />
                <input type="radio" name="radio[23]" value="5" title="TEXT3: Note 5" class="Check" />
              </span>
            </span>
          </li>

</ul>
      </li>
    ....//ab hier wiederholt sich es ähnlich

CSS:

code:

span.bling:hover {
      background-color: rgb(217,249,255);
    }

.bling {
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select:none;
      width: 800px;
    }

liStyleXXX macht nur das Listenbild anders
showhide() macht was der name schon sagt, setzt display auf block oder none