Ergebnis 1 bis 10 von 10
  1. #1
    Homero ist offline Eroberer
    registriert
    20-07-2004
    Beiträge
    58

    Exclamation img im span display block PROBLEM

    habe float:left spans display block,
    als tabellenersatz.
    4 span nebeneinander
    im letzten steht im span ein img. (span class=fleft-xs siehe unten)
    Dieser passt isch ledier in der Höhe dem img an, womit die border-bottom nicht mehr in einer linie steht.
    beigefügt ein bild, um das problem zu verdeutlichen.

    das der span sich in der höhe anpasst, weis ich, weil ich dem span eine komplette border verpasst habe.
    er ist also nicht hochgerutscht

    dieser span nimmt die line-height nicht an und past sich in der höhe dem img an.
    WAS KANN ICH TUN???
    ausprobiert:
    - img display:inline
    - text vor das img
    - img text-valign:bottom
    - span text-valign:bottom
    hat nicht geholfen..

    html ,das wiederholt sich:
    ersetze ich das bild durch text, ist alles in ordnung

    Code:
    <span class="fleft">www.schwerter-mittelalter.de</span>
    
     	<span class="fleft-s">17.03.2005</span>
    
     	<span class="fleft-xs">879</span>
    
     	<span class="fleft-xs"><img src="http://www.oxxo.de/images/g.gif"></span>
    
     	<br style="clear:left;">
    css, Auszug,
    Code:
    .fleft {
    display:block; 
    float: left; 
    text-align: left; 
    width: 33em; 
    margin: 0px;
    padding:0px;
    margin-left:5px;
    font-size:0.9em;
    border-bottom: 1px solid navy;
    font-weight:bold;
    line-height:1.8em;
    } 
    .fleft-s { 
    display:block;
    float: left; 
    text-align: left; 
    width: 8em; 
    margin: 0px;
     padding:0px;
    font-size:0.8em;
    border-bottom: 1px solid navy;
    font-weight:bold;
    line-height:2em;
    } 
    .fleft-xs { 
    display:block;
    float: left; 
    text-align: left; 
    width: 4em; 
    margin: 0px;
     padding:0px;
    font-size:0.8em;
    border-bottom: 1px solid navy;
    font-weight:bold;
    line-height:2em;
    } 
    .fleft-xs img{padding:0px;margin:0px;border:none;}
    
    .fleft-sp { 
    display:block;
    float: left; 
    text-align: left; 
    width: 8em; 
    margin-right: .3em;
     padding:0px;
     margin-left:10px;
    font-size:0.8em;
    border-bottom: 1px solid navy;
    font-weight:bold;
    line-height:2em;
    }
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: img im span display block PROBLEM

    Schon overflow:hidden; probiert?

  3. #3
    Homero ist offline Eroberer
    registriert
    20-07-2004
    Beiträge
    58

    AW: img im span display block PROBLEM

    erstmal danke für die schnelle reaktion,

    habe ich ausprobiert, aber wiese soll overflow:hiden helfen?
    der zusammenhang entzieht sich mir,
    magst du mir das kurz erläutern?
    im span und im img, da sich mir, wei gesgt, der zusammenhang entzieht..

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: img im span display block PROBLEM

    Zitat Zitat von Homero
    dieser span nimmt die line-height nicht an und past sich in der höhe dem img an.
    Beim Durchlesen kam mir das spontan in den Sinn...
    Wenn das span eine Höhe bekommen hat und der Inhalt übergroß ist,
    wird der 'überstehende' Teil versteckt.

    Achso, hier:
    Code:
    .fleft-xs { 
    display:block;
    float: left; 
    text-align: left; 
    width: 4em; 
    margin: 0px;
     padding:0px;
    font-size:0.8em;
    border-bottom: 1px solid navy;
    font-weight:bold;
    line-height:2em;
    overflow:hidden;
    }

  5. #5
    Homero ist offline Eroberer
    registriert
    20-07-2004
    Beiträge
    58

    AW: img im span display block PROBLEM

    OK,
    doch das ist hier ja nicht der fall,
    der text wird ja sauber dargestellt, auch neben dem img, nur die Höhe der span mit dem img entpricht nicht der eingestellten höhe, sondern ist kleiner
    anbie noch einmal ein img mit border für den span..
    mit overflow:hidden;
    keine veänderung
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: img im span display block PROBLEM

    Und wenn Du hier mal die Größe korrekt angibst?
    <img src="http://www.oxxo.de/images/g.gif">
    Manchmal hängts an Kleinigkeiten...

  7. #7
    Homero ist offline Eroberer
    registriert
    20-07-2004
    Beiträge
    58

    AW: img im span display block PROBLEM

    Guter Gedanke,
    udn danke,
    doch: nützt nichts,
    weder im img tag noch in der css,
    habe das ganze ersteinmal mit margin-top:0.5em; margin-bottom:0.4em für das img eingestelt.
    ist aber irgendwie eine notlösung.
    stell mir die frage, warum sich ein block-element in der höhe verkleinert und sich einem img anpasst..

    NACHTRAG:
    habe es auch noch ienmal mit margin:auto; für das img verscuht, auch erfolglos,
    weil img ganz am anfang der css einmal auf margin bottom 0 border none gestellt wurde..
    aber das war es auch nicht..
    Geändert von Homero (25-06-2005 um 23:03 Uhr)

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: img im span display block PROBLEM

    Hm, blöd, ich komm jetzt irgendwie auch nicht drauf...

    Aber mal eine andere Frage.
    Ich bin ja auch Verfechter von tabellenlosem Layout,
    aber für den vorliegenden Fall sind doch Tabellen da?

  9. #9
    Homero ist offline Eroberer
    registriert
    20-07-2004
    Beiträge
    58

    AW: img im span display block PROBLEM

    OK,
    das stimmt wohl,
    aber die mit css stylen ist mir zu kompliziert...
    da bleibe ich leiber bei spans und schmisse tabellen ganz raus..
    hab zwischen druch auch noch weiter probeirt, mit margin:auto und anderen klienigekeiten,
    denada..
    naja, solange keiner seien schrfitgrößeneinstellunge ändert, bleibt es wohl so..
    aber vielelicht kommt ja noch jemand drauf.. (::schulterzuck:
    dank Dir erstmal

  10. #10
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: img im span display block PROBLEM

    Hm, Danke für Nix...

    Gern geschehen...

Ähnliche Themen

  1. [js] problem beim wechsel der src eines img
    Von SeTiggerX im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 19-11-2004, 16:16

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •