1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

inline Element akzeptiert width nicht.

Dieses Thema im Forum "CSS" wurde erstellt von Nord-Süd-Richtung, 6. September 2008.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Nord-Süd-Richtung

    Nord-Süd-Richtung Grünschnabel

    Hi

    ich möchte gerne das diese spans alle gleichlang haben, damit ich nicht auf eine Tabelle zurückgreifen muss:
    Code (HTML5):
    1.  
    2. <div class="ress_div">
    3.         <div class="ress_outer">
    4.             <span class="ress">Bevölkerung: <? echo number_format($ress["Bevoelkerung"],0,",","."); ?></span>
    5.             <span class="ress">Energie: <? echo number_format($ress["Energie"],0,",","."); ?></span>
    6.          </div>
    7.          <div class="ress_outer">
    8.             <span class="ress">Ress1: <? echo number_format($ress["Res1"],0,",","."); ?></span>
    9.             <span class="ress">Ress2: <? echo number_format($ress["Res2"],0,",","."); ?></span>
    10.          </div>
    11.          <div class="ress_outer">
    12.             <span class="ress">Ress3: <? echo number_format($ress["Res3"],0,",","."); ?></span>
    13.             <span class="ress">Ress4: <? echo number_format($ress["Res4"],0,",","."); ?></span>
    14.          </div>
    15.       </div>
    16. </div>
    17.  
    Code (CSS):
    1.  
    2. .ress{
    3.     width:250px;
    4.          background-color:#0000FF;
    5. }
    6. .ress_outer{
    7. }
    8. .ress_div{
    9.     margin: -40px 0px 0px 575px;
    10. }
    11.  
    Was muss ich am Code ändern?
  2. Maik

    Maik Gast

    Hi,

    das Inline-Element muß "Block-Level-Charakteristika" erhalten, damit es die width-Deklaration akzeptiert.

    Code (Text):
    1.  
    2. .ress{
    3. width:250px;
    4. background-color:#0000FF;
    5. [b]display:block;[/b]
    6. }
    mfg Maik
  3. Nord-Süd-Richtung

    Nord-Süd-Richtung Grünschnabel

    Hi

    das habe ich schon probiert, aber dann werden alle 6 spans untereinander angezeigt,
    es soll aber so aussehen:
    span span
    span span
    span span
  4. Maik

    Maik Gast

    Die float-Eigenschaft hat die gleiche Wirkung auf ein Inline-Element.

    mfg Maik
  5. Nord-Süd-Richtung

    Nord-Süd-Richtung Grünschnabel

    Sieht jetzt so aus:
    Code (HTML5):
    1.  
    2.       <!-- Ressourcen -->
    3.       <div class="ress_div">
    4.         <div class="ress_outer">
    5.             <span class="ress_l">Bevölkerung: <? echo number_format($ress["Bevoelkerung"],0,",","."); ?></span>
    6.             <span class="ress_r">Energie: <? echo number_format($ress["Energie"],0,",","."); ?></span>
    7.          </div>
    8.          <div class="ress_outer">
    9.             <span class="ress_l">Ress1: <? echo number_format($ress["Res1"],0,",","."); ?></span>
    10.             <span class="ress_r">Ress2: <? echo number_format($ress["Res2"],0,",","."); ?></span>
    11.          </div>
    12.          <div class="ress_outer">
    13.             <span class="ress_l">Ress3: <? echo number_format($ress["Res3"],0,",","."); ?></span>
    14.             <span class="ress_r">Ress4: <? echo number_format($ress["Res4"],0,",","."); ?></span>
    15.          </div>
    16.       </div>
    17.  
    Code (CSS):
    1.  
    2. .ress_l{
    3.     float:left;
    4. }
    5. .ress_r{
    6.     float:right;
    7. }
    8. .ress_div{
    9.     margin: -40px 0px 0px 575px;
    10. }
    11. .ress_outer{
    12. }
    13.  
    Aber es ist immer noch nicht das gewünschte Ergebnis zu sehen.
  6. Maik

    Maik Gast

    Merke: wo float zum Einsatz kommt, ist clear nicht weit entfernt, um den Textfluß unterhalb der Floatumgebung zu erzwingen.

    Code (Text):
    1.  
    2. .ress_outer{
    3. clear:both;
    4. }
    5.  
    mfg Maik
  7. Nord-Süd-Richtung

    Nord-Süd-Richtung Grünschnabel

    Super, Danke

    Kannst du mir vielleicht auch hier noch helfen?
    Code (HTML5):
    1.  
    2. <li class="navi_outer_link"><span class="navi_link">Übersicht</span></li>
    3.  
    Code (CSS):
    1.  
    2. .navi_link{
    3.     color:#CCCCCC;
    4.          cursor:pointer;
    5. }
    6. .navi_link:hover{
    7.     color:#FFFFFF;
    8. }
    9. .navi_outer_link, .navi_outer_header{
    10.     display:block;
    11.     width:140px;
    12.          height:30px;
    13.     background-image: url(../pics/Eingabefeld.jpg);
    14.          padding-left:10px;
    15.          padding-top:5px;
    16. }
    17.  
    Der Hovereffekt wird nicht ausgeführt.
  8. Maik

    Maik Gast

    Laß mich raten: du sprichst hier vom IE<7.

    Die Vorgänger der aktuellen Version interpretieren die :hover-Pseudoklasse ausschliesslich für das a-Element.

    mfg Maik
  9. Nord-Süd-Richtung

    Nord-Süd-Richtung Grünschnabel

    Nö, lass ich dich nicht :p
    Ich spreche vom FF 2.xxx
  10. Maik

    Maik Gast

    Im FF 2 + 3, sowie den übrigen standardkonformen Browsern, kann ich da erwartungsgemäß keine Probleme bzw. eine Arbeitsverweigerung der allgemeinen :hover-Pseudoklasse feststellen.

    Die Schriftfarbe wechselt auf weiß und der Text verschwindet daraufhin im Weiß des Seitenhintergrundes :)

    mfg Maik
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen