Rückegabewert einer Funktion im CSS nutzen

[Micha023]

Hallo,

ich habe hier ein kleines Problem und irgendwie ein Denkfehler. Vielleicht hat da jemand eine Ide und kann mir helfen oder mir einen Denkanstoß geben.

Zu meinem Problem:

Ich habe mit Javascript die Mitte der sichtbaren Bildschirmbreite berechnen lassen. Nun möchte ich den Rückgabewert der Funktion im CSS nutzen. Ist dies generell möglich? Wenn ja wie? Es sollte natürlich in alles gängigen Browsern funktionieren.

  
<style type="text/css">  
#pos1  
        {  
           position:absolute;  
           left:000px; <======== Hier möchte ich den Rückgabewert der Funktion nutzen  
           top:0px;  
           border: none;  
        }  
</style>  

Schon mal vielen Dank für die Hilfe!

LG Micha

[ChrisB]

Hi,

Ich habe mit Javascript die Mitte der sichtbaren Bildschirmbreite berechnen lassen. Nun möchte ich den Rückgabewert der Funktion im CSS nutzen. Ist dies generell möglich?

Nein, so nicht. (Höchstens im IE mit expressions.)

Aber du kannst per JavaScript die style-Eigenschaften eines Elements setzen.

MfG ChrisB

[MudGuard]

Hi,

ich habe hier ein kleines Problem und irgendwie ein Denkfehler. Vielleicht hat da jemand eine Ide und kann mir helfen oder mir einen Denkanstoß geben.
Ich habe mit Javascript die Mitte der sichtbaren Bildschirmbreite berechnen lassen.

Und wozu? Damit hast Du eine Position errechnet, die sich möglicherweise außerhalb des Browsers befindet.
Oder meinst Du die Mitte des Viewports? Die befindet sich ggf. genau bei left:50%

cu,
Andreas

[Micha023]

Und wozu? Damit hast Du eine Position errechnet, die sich möglicherweise außerhalb des Browsers befindet.
Oder meinst Du die Mitte des Viewports? Die befindet sich ggf. genau bei left:50%

Hallo,

ich habe mir den Wert ausgeben lassen, er ist korrekt.

Wozu?
-----------------------------
Ich habe einen Rahmen (500 Pix x 500 Pix) mittig im Browser. In diesem möchte ich einzelne Grafiken ausgeben. Der Ausrichtungspunkt jeder Grafik ist im Rahmen oben-links. Je nach Bildschirmauflösung befinden sich aber die einzelnen Grafiken nicht mehr an den richtigen Stellen.

Dies funktioniert leider nur im IE, aber es zeigt, worauf ich hinaus will:

  
<style type="text/css">  
#pos1  
        {  
           position:absolute;  
           left:50%-250px;  
           top:0px;  
           border: none;  
        }  
</style>  

Die Positionierung der Grafiken ist dann kein Problem, sie passen zueinander:

  
<div id="pos1">  
  <img src="gfx1.gif" style="position:absolute;top:  0px;left:  0px" alt="gfx 1">  
  <img src="gfx2.gif" style="position:absolute;top: 60px;left: 60px" alt="gfx 2">  
  <img src="gfx3.gif" style="position:absolute;top:100px;left:150px" alt="gfx 3">  
</div>  

Garantiert ist die Lösung ganz einfach und ich sehe das Naheliegenste nicht. Aber schon mal Danke für eure Mühe.

Grüße Micha

[ChrisB]

Hi,

Ich habe einen Rahmen (500 Pix x 500 Pix) mittig im Browser. In diesem möchte ich einzelne Grafiken ausgeben. Der Ausrichtungspunkt jeder Grafik ist im Rahmen oben-links. Je nach Bildschirmauflösung befinden sich aber die einzelnen Grafiken nicht mehr an den richtigen Stellen.

Wenn du nicht unsinnigerweise absolute Positionierung zur horizontalen Zentrierung verwenden würdest, dann hättest du das Problem gar nicht.

MfG ChrisB

[Micha023]

Hallo ChrisB,

danke, das war der Punkt. Es war zu einfach ;-)

Schönen Dank an alle und eine gute Nacht!

Gruß Micha

[MudGuard]

Hi,

Je nach Bildschirmauflösung

Das bezweifle ich, denn CSS interessiert sich nicht im geringsten für die Bildschirmauflösung.

cu,
Andreas

[Micha023]

Hallo Andreas,

ok. Dann frage ich anders:

Was habe ich vor? Stell dir eine Landkarte vor, worauf ich Pins plazieren möchte.

• die Karte soll immer in der Browsermitte sein
• die Pins sollen immer an der richtigen Stelle bleiben
• die Positionierung der Pins soll immer von oben/links der Karte aus gehen
• ich möchte einzelne Pins entfernen können, ohne das sich das Gesamtbild ändert

Hast Du dazu einen Lösungsansatz?

Irgendwie drehe ich mich gerade im Kreis, aber ich denke, nun ist klar was ich vor habe.

Danke für Deine Hilfe!

Gruß Micha

[Længlich]

Hââ-pô!

Was habe ich vor? Stell dir eine Landkarte vor, worauf ich Pins plazieren möchte.

Pins als Kindelemente der Landkarte realisieren.

• die Karte soll immer in der Browsermitte sein

margin:auto

• die Pins sollen immer an der richtigen Stelle bleiben

position:absolute; left:richtig; top:richtig;

• die Positionierung der Pins soll immer von oben/links der Karte aus gehen

position:relative für die Karte, dann ist deren linke obere Ecke der Ursprung, an dem sich die Kindelemente orientieren.

• ich möchte einzelne Pins entfernen können, ohne das sich das Gesamtbild ändert

display:none oder gar nicht erst ins HTML schreiben.

Hast Du dazu einen Lösungsansatz?

Ja. ;-)

Irgendwie drehe ich mich gerade im Kreis, aber ich denke, nun ist klar was ich vor habe.

Ob ich Dich richtig verstanden habe, werden wir daran sehen, ob Du mit obigem weiterkommst. ;-)

Viele Grüße vom Længlich

[Micha023]

Hallo Længlich,

damit kann ich doch was anfangen. Habe mich nun etwas in die Vererbung gelesen, allerdings verstehe ich noch nicht, wie es mit dem Zentrieren der Karte funktioniert. Wäre schön, wenn Du mir bei der letzten Hürde noch mal helfen könntest.

Hier mein Quelltext:

  
<html>  
<head>  
<title>Karte</title>  
  
<style type="text/css">  
  
#karte  
        {  
           position:relative;  
           top:20px;  
           border: none;  
        }  
  
#pin  
        {  
           position:absolute;  
           width:16px;  
           heigth:16px;  
        }  
</style>  
</head>  
  
<body>  
  
<div id="karte">  
  <img src="gfx/karte.jpg" width="500" height="500" border="0" alt="">  
    <img id="pin" src="gfx/pin.gif" style="top: 40px;left:390px"  alt="">  
    <img id="pin" src="gfx/pin.gif" style="top:358px;left:453px"  alt="">  
    <img id="pin" src="gfx/pin.gif" style="top: 90px;left:410px"  alt="">  
</div>  
  
</body>  
</html>  

Gruß Micha

[EKKi]

Mahlzeit Micha023,

#karte
        {
           position:relative;
           top:20px;
           border: none;
        }

Du hast das von Længlich vorgeschlagene margin: auto; vergessen.

<img id="pin" src="gfx/pin.gif" style="top: 40px;left:390px"  alt="">
    <img id="pin" src="gfx/pin.gif" style="top:358px;left:453px"  alt="">
    <img id="pin" src="gfx/pin.gif" style="top: 90px;left:410px"  alt="">

Dein HTML ist nicht valide. Eine ID darf pro Dokument nur einmal vorkommen. Versuche es doch stattdessen mit einer http://de.selfhtml.org/html/attribute/allgemeine.htm#uebersicht@title=Klasse ...

MfG,
EKKi

[Micha023]

Hallo EKKi,

habe ich versucht, klappt nicht. Keine Ahnung was ich falsch mache.

  
#karte  
        {  
           margin:0px auto;  
           position:relative;  
           top:20px;  
           border: none;  
        }  

Um die Validierung mache ich mir später Gedanken, aber danke für den Tipp!

Gruß Micha

[EKKi]

Mahlzeit Micha023,

Um die Validierung mache ich mir später Gedanken, aber danke für den Tipp!

Um die Validierung solltest Du Dir *grundsätzlich* von Anfang Gedanken machen - immerhin zwingst Du einen Browser dazu, in den Rate-Modus zu schalten und wild herumzuinterpretieren, was Du vielleicht gemeint haben könntest, wenn Du ihm invaliden Code vorsetzt.

Im konkreten Fall ist das nun auch wirklich alles andere als schwer - einfach die gleichlautenden IDs durch eine entsprechend benannte Klasse austauschen, fertig.

MfG,
EKKi

[Micha023]

Hallo EKKi,

Du hast natürlich Recht, aber ich bekomme es nicht mal hin, dass sich meine Karte auf dem Browser zentriert. Mit "margin: auto;" passiert nix. Warscheinlich habe ich wieder ein Denkfehler in der Vererbung. Inzwischen habe ich auf so vielen Seiten nachgelesen, dass mir der Kopf raucht und ehrlich gesagt möchte mich das Problem gelöst haben, bevor ich mich Klassen beschäftige.

An dem "Kinderkram" sitze ich nun seit gestern Abend dran und so langsam verliere ich die Lust.

Gruß Micha

[EKKi]

Mahlzeit Micha023,

Du hast natürlich Recht, aber ich bekomme es nicht mal hin, dass sich meine Karte auf dem Browser zentriert. Mit "margin: auto;" passiert nix.

Wie Længlich ja auch bereits anmerkte kann das durchaus (mit) daran liegen, dass Dein Code eben nicht valide ist. Also beseitige bitte zunächst die offensichtlichen strukturellen Probleme, bevor Du Dich ans "Aufhübschen" (und dazu gehört IMHO auch das "Hinzirkeln" von soundso positionierten Bereichen) machst.

Welchen Browser nutzt Du übrigens? Ich habe keinerlei Information darüber gelesen - ist mir da etwas entgangen? Habe ich etwas übersehen? Wenn ja: tut mir leid.

ehrlich gesagt möchte mich das Problem gelöst haben, bevor ich mich Klassen beschäftige.

Dein Problem ist viel grundsätzlicher Natur als Du im Moment gerade denkst - und dazu gehören auch die Klassen.

An dem "Kinderkram" sitze ich nun seit gestern Abend dran und so langsam verliere ich die Lust.

Das kann ich verstehen und nachvollziehen - aber es ändert nichts daran, dass Du zuerst ein tragfähiges Gerüst aufbauen solltest, bevor Du mit Tapeten und Farbeimern herumeierst ... :-)

MfG,
EKKi

[Micha023]

Hallo ihr Beiden,

hier nun der einfache Quelltext (ohne Kleisterung und Aufhübschung ;-) )

  
<html>  
<head>  
<title>Karte</title>  
  
<style type="text/css">  
  
#karte  
        {  
           position:relative;  
           top:20px;  
           border: none;  
        }  
  
</style>  
</head>  
  
<body>  
  
<div id="karte">  
  <img src="gfx/karte.jpg" width="500" height="500" border="0" alt="">  
</div>  
  
</body>  
</html>  

Das Ding sitzt nicht in der Mitte. Vielleicht könnte einer mal die entsprechenden Zeilen korrigieren, bzw. einfügen. Vielleicht komme ich dann endlich dahinter, was ich falsch mache.

Im übrigen nutze ich Firefox 3.5.7, IE 7.0.6000 und Opera 10.10

Gruß Micha

[ChrisB]

Hi,

hier nun der einfache Quelltext (ohne Kleisterung und Aufhübschung ;-) )

Das Ding sitzt nicht in der Mitte.

Natürlich nicht.

Vielleicht könnte einer mal die entsprechenden Zeilen korrigieren, bzw. einfügen.

Warum fügst du sie nicht ein?
margin wurde schon erwähnt, und ein anderer wesentlicher Punkt auch noch.

Vielleicht komme ich dann endlich dahinter, was ich falsch mache.

Vermutlich ist dein Fehler, dass du nicht aufmerksam liest.

MfG ChrisB

[Micha023]

Hi,

hier nun der einfache Quelltext (ohne Kleisterung und Aufhübschung ;-) )

Das Ding sitzt nicht in der Mitte.

Natürlich nicht.

Vielleicht könnte einer mal die entsprechenden Zeilen korrigieren, bzw. einfügen.

Warum fügst du sie nicht ein?
margin wurde schon erwähnt, und ein anderer wesentlicher Punkt auch noch.

Vielleicht komme ich dann endlich dahinter, was ich falsch mache.

Vermutlich ist dein Fehler, dass du nicht aufmerksam liest.

MfG ChrisB

So,

ich habe aufgegeben. Dafür ist mir die Zeit zu schade. Damit spare ich auch die Zeit fürs validieren.

@ChrisB: Den Punkt ViewPoint habe ich schon wargenommen, komme aber nicht weiter. Sonst würde ich wohl kaum nachfragen. Aber ok, habe zur Belustigung beigetragen.

In diesem Sinne, viel Spaß noch!

MfG Micha

[ChrisB]

Hi,

bitte vernünftig zitieren, nicht einfach alles!

ich habe aufgegeben. Dafür ist mir die Zeit zu schade.

Für was - eine so simple Sache umzusetzen?

Damit spare ich auch die Zeit fürs validieren.

Dann sparst du am falschen Ende, wenn du irgendwann mal lernen willst, mit HTML und CSS vernünftig umzugehen.

Den Punkt ViewPoint habe ich schon wargenommen,

Dann geht die Phanatasie mit dir durch. Höchstens das Stichwort Viewport könntest du wahrgenommen haben :-)

komme aber nicht weiter. Sonst würde ich wohl kaum nachfragen.

Nachfragen erwarten wir hier auf einem gewissen Mindestniveau, </hilfe/charta.htm#tipps-fuer-fragende>

Weder „funzt nicht“ noch „ich bekomme es nicht hin“ sind brauchbare Nachfragen.
Und „baut ihr mir das bitte mal ein“ ist auch keine.

Du hast hier brauchbare Hinweise bekommen, und in den FAQ steht auch explizit was zur Zentrierung per CSS.

MfG ChrisB

[Længlich]

Më të wa kone!

Das Ding sitzt nicht in der Mitte. Vielleicht könnte einer mal die entsprechenden Zeilen korrigieren, bzw. einfügen. Vielleicht komme ich dann endlich dahinter, was ich falsch mache.

Im übrigen nutze ich Firefox 3.5.7, IE 7.0.6000 und Opera 10.10

Ach, ich habe mir die ganze Zeit was dazugedacht, was gar nicht dasteht: Du hast der Karte keine Breite gegeben. Also nimmt sie sich so viel Platz wie möglich, und sie ist (auch wenn Du es nicht siehst) perfekt zentriert – mit jeweils 0 Abstand nach links und rechts.

Und Dein Denkfehler bezüglich Vererbung besteht wohl in der Definition von Vererbung in CSS (das ist hier nämlich was ganz anderes als z.B. in objektorientierter Programmierung). Wenn Du z.B. einem div eine Textfarbe gibst, wird die auf alle Kindelemente (h1, p, …) übertragen, d.h. vererbt, sofern für diese keine eigenen Formatierungen vorliegen. Für jede CSS-Eigenschaft ist definiert, ob sie vererbt wird oder nicht. Grobe einfache Faustregel: Textformatierungen werden vererbt; Positionierung, Abstände etc. nicht.

Da wir uns hier gerade nur um Positionierungen und margins kümmern, spielt Vererbung für Dein aktuelles Problem überhaupt keine Rolle.

Viele Grüße vom Længlich

[Micha023]

Hallo Længlich

danke! Jetzt mache ich mich an das Thema Klassen.

Micha

[EKKi]

Mahlzeit Micha023,

<html>

Es fehlt die Angabe eines Dokumenttyps. Ohne schickst Du den IE in den Quirksmodus und kannst Dir nahezu 100%ig sicher sein, dass er dann rumspinnt.

#karte
        {
           position:relative;
           top:20px;
           border: none;
        }

Wo ist die Dir genannte Angabe zu http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=margin? Außerdem solltest Du ggf. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#height@title=Höhen- und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=Breitenangaben auch hier (und *nicht* im HTML-Code) machen.

Dazu gilt insbesondere das von Længlich Gesagte zum Thema "Platzbedarf".

Das Ding sitzt nicht in der Mitte.

Natürlich nicht - das sagst Du ihm ja auch nicht.

Vielleicht könnte einer mal die entsprechenden Zeilen korrigieren, bzw. einfügen. Vielleicht komme ich dann endlich dahinter, was ich falsch mache.

Die Zeile wurde Dir doch bereits mehrfach genannt?

MfG,
EKKi

[Længlich]

Nàwng a náwng kàwwê?

habe ich versucht, klappt nicht. Keine Ahnung was ich falsch mache.

Ist das Elternelement so breit wie der Viewport? margin:auto zentriert die Karte nur innerhalb von diesem. Und IE6 muß sich im standardkonformen Modus befinden.

Um die Validierung mache ich mir später Gedanken, aber danke für den Tipp!

Mach das lieber gleich, sonst mußt Du später alle Selektoren überarbeiten. Und es kann, je nach Art der Fehler, auch das Aussehen beeinflussen.

Viele Grüße vom Længlich