The International Simutrans Forum

 

Author Topic: CSS - Formatierung  (Read 9239 times)

0 Members and 1 Guest are viewing this topic.

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
CSS - Formatierung
« on: October 03, 2008, 08:20:02 PM »
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
Code: [Select]
  <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
Code: [Select]
#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
Code: [Select]
$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.
« Last Edit: October 03, 2008, 08:22:42 PM by Frank »

Offline sojo

  • Devotees (Inactive)
  • *
  • Posts: 851
  • Maintainer pak96.comic
    • German home of Simutrans
Re: CSS - Formatierung
« Reply #1 on: October 04, 2008, 11:53:57 AM »
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.

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #2 on: October 09, 2008, 09:53:04 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.

Offline sojo

  • Devotees (Inactive)
  • *
  • Posts: 851
  • Maintainer pak96.comic
    • German home of Simutrans
Re: CSS - Formatierung
« Reply #3 on: October 09, 2008, 11:09:26 AM »

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #4 on: October 09, 2008, 08:48:49 PM »
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.

Offline robofish

  • Devotees (Inactive)
  • *
  • Posts: 130
  • Languages: DE, EN
Re: CSS - Formatierung
« Reply #5 on: October 10, 2008, 09:01:06 PM »
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 :)

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #6 on: October 10, 2008, 09:38:34 PM »
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?
« Last Edit: October 11, 2008, 06:57:37 AM by Frank »

Offline sojo

  • Devotees (Inactive)
  • *
  • Posts: 851
  • Maintainer pak96.comic
    • German home of Simutrans
Re: CSS - Formatierung
« Reply #7 on: October 11, 2008, 05:33:51 AM »
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.

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #8 on: October 11, 2008, 08:26:28 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.

Offline robofish

  • Devotees (Inactive)
  • *
  • Posts: 130
  • Languages: DE, EN
Re: CSS - Formatierung
« Reply #9 on: October 11, 2008, 09:11:07 AM »
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.

Offline sojo

  • Devotees (Inactive)
  • *
  • Posts: 851
  • Maintainer pak96.comic
    • German home of Simutrans
Re: CSS - Formatierung
« Reply #10 on: October 11, 2008, 11:41:09 AM »
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.

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #11 on: February 12, 2009, 09:44:50 AM »
Weis jemand, wie sich die Possition eines Elements ( konkret Fragezeichengrafik ) per Javascript ermitteln lässt?

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

Offline sojo

  • Devotees (Inactive)
  • *
  • Posts: 851
  • Maintainer pak96.comic
    • German home of Simutrans
Re: CSS - Formatierung
« Reply #12 on: February 12, 2009, 10:41:07 AM »
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.

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #13 on: February 12, 2009, 10:57:51 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

Offline Dwachs

  • DevTeam, Coder/patcher
  • Administrator
  • *
  • Posts: 4601
  • Languages: EN, DE, AT
Re: CSS - Formatierung
« Reply #14 on: February 12, 2009, 11:32:02 AM »
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.

Offline sojo

  • Devotees (Inactive)
  • *
  • Posts: 851
  • Maintainer pak96.comic
    • German home of Simutrans
Re: CSS - Formatierung
« Reply #15 on: February 12, 2009, 12:31:46 PM »
http://javascript.jstruebig.de/javascript/53/ Könnte die Problemlösung sein.

Offline Frank

  • Inactive/Retired
  • *
  • Posts: 1431
  • Languages: DE
Re: CSS - Formatierung
« Reply #16 on: February 13, 2009, 09:34:45 AM »
Danke erst mal.

So langsam komm ich dahin, wo ich hin will.