[ERLEDIGT] Div od. Span: "display:inline" vs. "width:200px"

[Feuerrabe]

Hallo,

ich habe ein Problem mit einem Inline <div> Element, dessen Breite ich gerne festlegen möchte. Das Element soll im Text erscheinen, einen linear-gradient und einen Rahmen haben - es handelt sich in dem Falle um einen Prozentbalken.

Da ich das ganze für ein Forum-System mache, habe ich auf den darumliegenden Text keinen Einfluss. Das Element muss einfach in einen bestehenden Text eingebettet werden, ohne diesen zu verändern.

Das Problem ist, das wenn ich ein <div> Element "display" CSS Attribut einfüge, bricht der Text an der Stelle um. Wenn ich statt dessen ihm ein "display: inline" mitgebe, dann ignoriert der Browser (also zumindest Firefox, ich habe gelesen, dass das Verhalten anderer Browser da anders sein soll, aber noch nicht ausprobiert) die Angabe zur Breite und stellt ihn so schmal wie möglich dar, was bei einem Prozentbalken eine Katastrophe ist.

Wenn ich dagegen einen <span> verwende, dann wird der Text in dem Balken fortgesetzt und die Elemente überlappen sich.

Beispiel:

Hit Points: <div style="border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #200000 88%, black 88%, black 88.5%, transparent 88.5%, transparent 100%)">&nbsp;</div>&nbsp;7&nbsp;/&nbsp;8 ... noch mehr Text in derselben Zeile

Ebenfalls problematische Alternativen:

Hit Points: <div style="display: inline; border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #200000 88%, black 88%, black 88.5%, transparent 88.5%, transparent 100%)">&nbsp;</div>&nbsp;7&nbsp;/&nbsp;8

<span style=\"display: table-cell; display: inline-block; vertical-align: top;

Hit Points: <span style=\"display: table-cell; display: inline-block; vertical-align: top; border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #200000 88%, black 88%, black 88.5%, transparent 88.5%, transparent 100%)">&nbsp;</span>&nbsp;7&nbsp;/&nbsp;8

Das ganze soll als eine einzige Zeile dargestellt werden.

 

[threadi]

Spontan würde ich sagen, dass "display: inline-block;" eigentlich funktionieren sollte. Aber das Beispiel ist in deinem Beitrag entweder kaputt untergebracht oder nur zur Hälfte rein kopiert?

 

[Tronjer]

Geht es dir hier nur darum, dem Div keine width zu geben und gleichzeitig zu verhindern, dass der Text umbrochen wird? Dann würde ich es mit einem whitespace: nowrap versuchen.

 

[Feuerrabe]

Spontan würde ich sagen, dass "display: inline-block;" eigentlich funktionieren sollte. Aber das Beispiel ist in deinem Beitrag entweder kaputt untergebracht oder nur zur Hälfte rein kopiert?

Danke, jetzt geht's.

<div style="display: inline-block; border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, #FF0000 0%, #926D00 43%, black 43%, black 43.5%, transparent 43.5%, transparent 100%)">&nbsp;</div>&nbsp;3&nbsp;/&nbsp;7

Und hier die PHP Funktion um aus einem Zähler und einem Nenner so einen Balken zu machen. Der "Tag" Parameter wird nur benutzt, wenn die Eingabe blödsinn war, dann wird der Inhalt dieses Feldes zurückgegeben.

/**
 * @param string $tag Is returned in an error case (divide by zero, numerator exceeds denominator)
 * @param int $numerator Numerator, i.e. actual quantity of the fraction to be displayed
 * @param int $denominator Denominator, i.e. possible to total of the fraction to be displayed
 * @return string HTML code that displays the given fraction as bar
 */
function getLevel($tag, $numerator, $denominator) {
  $startColor = array(0xFF, 0x00, 0x00); // red
  $endColor = array(0x00, 0xFF, 0x00); // green

  $startString = sprintf('#%02X%02X%02X', $startColor[0], $startColor[1], $startColor[2]);
  $endString = sprintf('#%02X%02X%02X', $endColor[0], $endColor[1], $endColor[2]);
  if ($numerator == 0 && $denominator == 0) {
  return "0 / 0";
  } elseif ($numerator > $denominator) {
  return $tag;
  } elseif ($numerator == $denominator) {
  return "<div style=\"border:thin black solid; height: 1em;width: 200px; background: linear-gradient(to right, $startString 0%, $endString 100%);\">&nbsp;</div>&nbsp;$numerator&nbsp;/&nbsp;$denominator";
  } else {
  $quotient = (float) $numerator / $denominator;
  $percentage = (int) round($quotient * 100);
  $targetColor = array();
  for ($i = 0; $i < 3; $i++) $targetColor[$i] = (int) round($startColor[$i] * (1 - $quotient) + $endColor[$i] * $quotient);
  $targetString = sprintf('#%02X%02X%02X', $targetColor[0], $targetColor[1], $targeColor[2]);
  return "<div style=\"display: inline-block; border: thin black solid;height: 1em;width: 200px;background: linear-gradient(to right, $startString 0%, $targetString $percentage%, black $percentage%, black $percentage.5%, transparent $percentage.5%, transparent 100%)\">&nbsp;</div>&nbsp;$numerator&nbsp;/&nbsp;$denominator";
  }
}