News:

Do you need help?
Simutrans Wiki Manual can help you to play and extend Simutrans. In 9 languages.

CSS - Formatierung

Started by Frank, October 03, 2008, 08:20:02 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Frank

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&auml;ude ein Wohnhaus, Gesch&auml;fts- oder Industriegeb&auml;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.

sojo

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 festlassen und musst sie nicht ändern. bei mouseover wird dann der jeweilige Hilfe-Layer dort angezeigt.
"English is a easy language. But not for me." ;) sojo

follow simutrans_de on Twitter
- A home for Simutrans (in german)

Frank

Quote from: sojo on October 04, 2008, 11:53:57 AM
...
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 festlassen 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.

sojo

"English is a easy language. But not for me." ;) sojo

follow simutrans_de on Twitter
- A home for Simutrans (in german)

Frank

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.

robofish

Ich würde das height-Attribut von #help_tip einfach weglassen, 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 weglassen 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 :)

Frank

#6
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?

sojo

Quote from: Frank on October 10, 2008, 09:38:34 PM
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.
"English is a easy language. But not for me." ;) sojo

follow simutrans_de on Twitter
- A home for Simutrans (in german)

Frank

Quote from: sojo on October 11, 2008, 05:33:51 AM
Bei position=absolute; auf die linke obere Ecke des Browsers.
...

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.

robofish

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, dass #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.

sojo

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.
"English is a easy language. But not for me." ;) sojo

follow simutrans_de on Twitter
- A home for Simutrans (in german)

Frank

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

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

sojo

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 lassen. Könnte gehen. Bin mir aber nicht sicher.
"English is a easy language. But not for me." ;) sojo

follow simutrans_de on Twitter
- A home for Simutrans (in german)

Frank

Quote from: sojo on February 12, 2009, 10:41:07 AM
... eine id geben und von javascript die position der box ausgeben lassen. ...

genau die JS-Syntax wollte ich ja wissen

werd halt doch in der Doku suchen gehen

Dwachs

vielleicht hilft ja das hier weiter:

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

ob man da aber die aktuelle Position rausbekommt, weiss ich nicht.
Parsley, sage, rosemary, and maggikraut.

sojo

"English is a easy language. But not for me." ;) sojo

follow simutrans_de on Twitter
- A home for Simutrans (in german)

Frank

Danke erst mal.

So langsam komm ich dahin, wo ich hin will.