The International Simutrans Forum

Hallo,

schöne moderne Internetwelt mit schönen einfachen Standards.

In der Grafik ist ein und die selbe css-Formatierung in 3 verschiedenen Browsern zu sehen. Auch die Possitionierung der Box ist mit dem selben Wert. Ich hab keine Ahnung, warum Opera die Box zu weit unten anzeigt.

Die Box besteht aus mehreren DIV-Containern.

HTML

  <div id="help_tip" >
  <div id="help_tip_text" ><?php echo $HELP_OBJECTNAME[0]; ?></div>
  <div id="help_tip_para" ><?php echo $BEZ_PARAMETER; ?>:</div><div id="help_tip_para2" ><?php echo $HELP_OBJECTNAME[1]; ?></div>
  <div id="closebutton" ><a href="Javascript:hide_helptip();"><img src="close.gif" alt="<?php echo $BEZ_CLOSE; ?>" title="<?php echo $BEZ_CLOSE; ?>" border="0" /></a></div>
  </div>

CSS

#help_tip 
	{
		display: none;
		position: absolute;
		z-index: 100;
		height: 5em;
		width: 10em;
		border:0.1em;
		border-style:solid;
		background-color:#F0EA73;
		border-color:#C46200;
		margin: 7.5em 5em 0em 1em;
	}

#help_tip_text
	{
		text-align: justify;
		border-width: 1px;
		padding:0.5em;
		font-size:0.8em;
	}

#help_tip_para
	{
		padding:0.5em;
		float:left;
		font-size:0.8em;
		font-style:oblique;
	}

#help_tip_para2
	{
		padding:0.5em;
		font-size:0.8em;
		
	}

#closebutton, #closebutton2
	{
	 	text-align:center;
	 	padding: 0.5;
		margin: 1em 0em 0.5em 0em;
		font-size:0.8em;
	}

Nebenbei zeigt Opera die html-formatierten Sonderzeichen falsch an.

TEXT

$HELP_CITYBUILDINGTYPE = array("Definiert, ob das Stadtgebäude ein Wohnhaus, Geschäfts- oder Industriegebäude ist", "type");
$BEZ_PARAMETER = "Parameter";

Hat jemand eine Idee, wie ich auf einen gemeinsamen Nenner komme, ohne 3 verschiedene Versionen zu schreiben?

Und da hab ich noch keine Tests von Safari und anderen Betriebsystemen.

Versuch mal den margin von "help_tip" zu entfernen und dafür mit

position: absolute;
left: xxpx;
top: xxpx;

zu arbeiten.

Sollte das Fenster dann falsch angezeigt werden also immer an xx,xx so musst du die Position des Mauszeigers per javascript übergeben und left sowie top direkt in die entsprechende .html/.php mit style="" einfügen.

Du kannst aber auch auf den flexiblen Layer verzichten und einen festen Hilfebereich in der Seite einfügen. Vielleicht ganz oben 2 Zeilen. Dann kannst du left und top festl****en und musst sie nicht ändern. bei mouseover wird dann der jeweilige Hilfe-Layer dort angezeigt.

Kann ich nicht.

Da die Seite länger als das Browserfenster ist. Dann würde die Hilfebox ausserhalb des Sichtbereichs angezeigt, wenn die unteren Fragezeichen angeklickt werden.

Schau mal hier: http://www.web-toolbox.net/webtoolbox/dhtml/info-box/linkinfo-box.htm

Vielleicht hilft das.

Nein, tut es nicht wirklich.

Meine Umsetzung der Box ist schon so ähnlich. Und das ist ja auch nicht mein Problem.

Mein Problem ist, das sich FF an geschachtelten DIV-Boxen verschluckt.

Und das Opera die Schriftkodierung verwürfelt.

Das Opera für die Höhe einen anderen Bezugspunkt hat wiegt nicht ganz so schwer, da die Box immer noch in der Nähe des angeklickten Fragezeichens ist.

Ich würde das height-Attribut von #help_tip einfach wegl****en, dann sieht es schonmal fast identisch aus. Die Randbreite würde ich übrigens ins Pixeln (px) statt in em angeben, dann sieht auch das gleicher aus.
Ansonsten ist übrigens die border-width-Angabe von #help_tip_text überflüssig, soweit ich das erkennen kann.
Darüber hinaus würde ich die margin-Angaben allesamt wegl****en und stattdessen left- und top-Angaben benutzen. Damit die jedoch exakt stimmen muss #citybuilding_php noch den Zusatz "position:relative;" bekommen.
Ich hoffe das hilft dir weiter :)

Der FF Fehler lag tatsächlich am height.

em deshalb, weil bei anderen Sachen Pixel von manchen Browser ignoriert wurde.
Deshalb verwende ich inzwischen fast nur noch em.

---

Auf welchen Punkt bezieht sich denn top und left?

Bei position=absolute; auf die linke obere Ecke des Browsers.
Bei position=relative; auf die Position des vorherigen bzw. Kind-Objektes.

Was zu Problemen führen dürfte, da sich der Inhalt der Seiten ändert. Also die Possition innerhalb der Seite kann sich ändern. Zumindest bei einigen Elementen.

Da bleib ich dann doch bei einer einheitlichen Schreibweise.

das ist leider nicht ganz richtig
bei position:absolute; beziehen sich die Angaben auf das nächsthöhere Element das eine position-Angabe hat. Daher habe ich vorgeschlagen, d**** #citybuilding_php noch den Zusatz "position:relative;" bekommt. Dann beziehen sich left und top auf deine rechte Spalte und du kannst sie quasie so verwenden, wie du momentan margin einsetzt.
position:relative; ist bezieht sich auf die position an der das Element ursprünglich erzeugt werden sollte. Wenn man beispielsweise einem Absatz als Formatierung "position:relative; left:1em; top:0;" zuweist, wird der Absatz um 1em nach rechts, aber nicht in der Höhe verschoben.

Ok robofish. Deine Erklärung ist viel genauer. Aber so ungefähr habe ich es auch gemeint.  ;)

Wenn ich nur ein Objekt habe dann ist natürlich für position: absolute; das Fenster das Maß aller Dinge.
Bei position: relative; ist natürlich nur das vorherige Objekt wichtig, da es die Position des nächsten Elements bestimmt. Das Kind-Element in diesem Fall nicht. Mein Fehler.

Weis jemand, wie sich die Possition eines Elements ( konkret Fragezeichengrafik ) per Javascript ermitteln lässt?

Würde das Anzeigen/Possitionieren der Hilfebox sehr vereinfachen.

Für im Text: http://de.selfhtml.org/javascript/objekte/string.htm#index_of

Ansonsten vielleicht in eine div box stecken diese eine id geben und von javascript die position der box ausgeben l****en. Könnte gehen. Bin mir aber nicht sicher.

genau die JS-Syntax wollte ich ja wissen

werd halt doch in der Doku suchen gehen

vielleicht hilft ja das hier weiter:

http://de.selfhtml.org/javascript/objekte/style.htm (http://de.selfhtml.org/javascript/objekte/style.htm)

ob man da aber die aktuelle Position rausbekommt, weiss ich nicht.

http://javascript.jstruebig.de/javascript/53/ Könnte die Problemlösung sein.

Danke erst mal.

So langsam komm ich dahin, wo ich hin will.