Matthias Coy: span-Breite per CSS

0 4

span-Breite per CSS

Matthias Coy 28.04.2006 13:41

css

0
Struppi 28.04.2006 15:14
1. 0
  Matthias Coy 28.04.2006 15:26
  1. 0
    Struppi 29.04.2006 16:49

SELF-Forum

span-Breite per CSS

Matthias Coy 28.04.2006 13:41

css

– Informationen zu den Bewertungsregeln

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&action=edit&skillId=2">(e)</a>
          <a href="index.php?modul=skill&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&action=edit&skillId=22">(e)</a>
              <a href="index.php?modul=skill&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&action=edit&skillId=23">(e)</a>
              <a href="index.php?modul=skill&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

– Informationen zu den Bewertungsregeln

span-Breite per CSS

Struppi Homepage des Autors 28.04.2006 15:14

css

– Informationen zu den Bewertungsregeln

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

Keine Ahnung ob das optimal ist, aber im FF und IE funktioniert es:
CSS:

  
ul  
{  
width:30em;  
margin-left:1em;  
padding:0;  
}  
ul ul  
{  
width:29em;  
}  
ul li span  
{  
float:right;  
margin-top: -1em;  
}  
li  
{  
clear:right;  
}

HTML:

  
   <ul>  
      <li class="liStylePlus" id="img2">  
          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>  
            <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>  
        <ul >  
  
          <li class="liStyleNeutral" id="img22">  
              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>  
                <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>  
          </li>  
          <li class="liStyleNeutral" id="img23">  
              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>  
                <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>  
  
          </li>  
        </ul>  
      </li>  
      </ul>

Struppi.

--
Javascript ist toll

– Informationen zu den Bewertungsregeln

span-Breite per CSS

Matthias Coy 28.04.2006 15:26

css

– Informationen zu den Bewertungsregeln

Fast :) Jetzt siehts so aus:

*_____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

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

Keine Ahnung ob das optimal ist, aber im FF und IE funktioniert es:
CSS:

ul
{
width:30em;
margin-left:1em;
padding:0;
}
ul ul
{
width:29em;
}
ul li span
{
float:right;
margin-top: -1em;
}
li
{
clear:right;
}


>   
> HTML:  
> ~~~html
  

>    <ul>  
>       <li class="liStylePlus" id="img2">  
>           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>  
>             <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>  
>         <ul >  
>   
>           <li class="liStyleNeutral" id="img22">  
>               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>  
>                 <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>  
>           </li>  
>           <li class="liStyleNeutral" id="img23">  
>               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>  
>                 <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>  
>   
>           </li>  
>         </ul>  
>       </li>  
>       </ul>  
>

Struppi.

– Informationen zu den Bewertungsregeln

span-Breite per CSS
Struppi Homepage des Autors 29.04.2006 16:49

css
– Informationen zu den Bewertungsregeln
Fast :) Jetzt siehts so aus:

*_____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

Bei mir nicht, da sieht es so aus:

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

http://jstruebig.de/web/javascript/test/css.html

Du musst halt je nachdem wieviel Listen du hast, von jeder die entsprechenden em in der Breite abziehen.

Struppi.

--
Javascript ist toll
Beitrag melden

–
Informationen zu den Bewertungsregeln