CSS - Position eines Elements "bestimmen"?

  • Hey,


    ich habe eine Frage. (Es handelt sich btw. um einen RageMP Server!) Bin relativ neu in Sachen HTML/CSS und möchte nun gerne mehrere Elemente die ich erstellt habe verschieben.
    Momentan ist es so, dass diese am unteren Rande vom Bildschirm angezeigt werden.


    Ich möchte diese Elemente allerdings jetzt gerne rechts von der GTA 5 Karte anzeigen lassen.


    Also quasi so:



    https://i.gyazo.com/37bf434b3ccb5c559ce7ef2f63505fbc.png


    Wie mache ich das nun?


    Danke. :)

  • An der Map selbst kannst du es nicht ausrichten.
    Du kannst es lediglich so positionieren, dass es einigermaßen passt (position absolute) und für die hören Auflösungen noch media querys schreiben.


    Hoffe das hilft dir. :)

    graphics frontend web

  • Dann drehen wir das mal um, ich würde das Teil gerne unten rechts am Bildschirm haben, allerdings dann etwas nach oben verschoben.
    Wie müsste ich da vorgehen?

    Immernoch position: absolute; mit "right" und "bottom" justieren und alles Jut

  • Hey, danke. Hab das hinbekommen.


    Ich habe nun noch eine Frage.
    Ich habe eine kleine Box erstellt die sieht so aus:


    Ich möchte nun gerne, sobald der Text, der in der Box angezeigt wird, dass die Box unten großer wird.
    Das ganze sieht grade so aus:


    Ich möchte jetzt aber, dass die Box beim letzten Text endet, und wenn der Text halt länger wird, dass die Box dementsprechend auch länger wird pro Zeile.

  • Würde eher garkeine Höhe angeben und mit padding arbeiten. Dann errechnet er sich die jeweilige Höhe automatisch

  • Generell noch ein Tipp. Mit "vw" und "vh" arbeiten sollte man nicht zu oft machen so wie du es verwendest. Es kann perfekt passen aber sollte der Bildschirm sich dramatisch ändern (große) kann das auch dramatische Folgen haben.


    Angenommen du hast eine Box die wie in deiner Box width: 8vw; breit ist und in dieser Box ein Text steht wird der Text "überlappen" sobald die Bildschirmgröße kleiner wird. (Text sollte man sowieso nie skalieren mit vw/vh, für texte eher "rem" und "em" verwenden.)


    Und hier noch ein Beispiel zu deinem Bild Beispiel. Könnte so funktionieren:


    https://jsfiddle.net/qhxrnsvj/

  • Generell noch ein Tipp. Mit "vw" und "vh" arbeiten sollte man nicht zu oft machen so wie du es verwendest. Es kann perfekt passen aber sollte der Bildschirm sich dramatisch ändern (große) kann das auch dramatische Folgen haben.
    Angenommen du hast eine Box die wie in deiner Box width: 8vw; breit ist und in dieser Box ein Text steht wird der Text "überlappen" sobald die Bildschirmgröße kleiner wird. (Text sollte man sowieso nie skalieren mit vw/vh, für texte eher "rem" und "em" verwenden.)


    Und hier noch ein Beispiel zu deinem Bild Beispiel. Könnte so funktionieren:


    https://jsfiddle.net/qhxrnsvj/

    Danke dir. ;)
    Kann ich da denn jetzt auch noch die Ränder so wie bei mir machen? Also dass nicht der Text so nah am Rand der Box ist? (Siehe in meinem Beispiel wie bei Tutorial)
    Arbeitet man da mit Padding ambesten?