eine Spielkarte in Bildschirm Mitte plazieren

  • Hallo zusammen, ich habe folgende Seite geschrieben.

    Bildschirm Mitte

    wie bringe ich die Aus

    Code
    document.getElementById("hoehe").innerHTML = "ermittelte Hoehe = " + screen.availHeight;
    document.getElementById("breite").innerHTML = "ermittelte breite = " + screen.availWidth ;

    ermitelten werte in

    Code
    die karte soll aber die ermittelte Hoehe /2 -40   fuer den top Wert haben , also 345 Px erhalten.
     </br>
      die karte soll aber die ermittelte Breite /2 +20   fuer den top Wert haben , also 660 Px erhalten.
    left:660px; top:345px; rein?

    und wie kann ich die werte im Body benutzen ??


    danke gruss roland

    :?:

  • Dein Ansatz ist schon mal falsch. Die Bildschirmgröße hat nichts mit der Größe des Browserfensters zu tun. Außerdem ist das Browserfenster nicht unbedingt mittig auf dem Bildschirm plaziert.


    Wie Sempervivum bereits schrieb ist das Zentrieren mit CSS (Flexbox oder CSS-Grid) zudem deutlich einfacher und erfordert keine Berechnungen.

  • Guten Morgen,


    danke für beide Antworten.


    also die karte (ASS) siehe Broswermitte


    soll im Browser in der Höhe und Breite in die Mitte gesetzt weden!

    ( dazu brauche ich ja die browswermitte )

    nach rechts um x pixel versetzt und nach oben um y pixel versetzt.

    (Einfügepunkt, Breite und Hoehe der Karte kann ich dann wohl selbst einfliessen lassen)


    Ich habe alle CD gekauft ....aber ich finde da nicht das Thema das zu Lösung führt.


    Danke Euch die Frage mag Trivial erscheinen :saint:


    Gruss Roland Alias: Super47


    PS; 47 = Jahrgang X/


    Zentrieren mit CSS (Flexbox oder CSS-Grid)

    ich werde mal versuchen ob ich damit das problem loesen kann. Danke

  • Mit diesem CSS kannst Du eine Karte in der Mitte platzieren:

    Code
    <div style="left:50%; top:50%; transform:translate(-50%, -50%); z-index:2;"><img src="PNG/P_02.png"></div>

    Ich habe es mit einer beliebigen Karte im HTML-Inspektor getestet. Mit left:50%; top:50%; wird die linke obere Ecke der Karte in die Mitte gesetzt. Damit das Zentrum der Karte in der Mitte ist, braucht man zusätzlich transform: translate(-50%, -50%); wobei sich die Prozentwerte auf die Karte selber beziehen. Mit transform: translate() kannst Du eine Karte um einen beliebigen Betrag aus der Mitte verschieben.


    Leider kann ich kein Skat :(


    Gruß - Ulrich

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!