[CSS] Positionierung

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • [CSS] Positionierung

      Frage:
      Der tee, die suche und die übersetzung sollen fix an einem ort bleiben.
      Derzeit verschieben sie sich wenn man die seite vergrößert/verkleinert bzw ne andere bildschirmauflösung hat.
      Wie kann man dass ändern?

      Unbenannt.png

      1. tee
      2. suche
      3. google translate & flaggen

      CSS

      PHP-Quellcode

      1. #tee {
      2. position: absolute !important;
      3. z-index: 100;
      4. top: 206px;
      5. right: 460px;
      6. }
      8. #google_translate_element {
      9. position: absolute !important;
      10. top: 490px;
      11. z-index: 100;
      12. right: 160px;
      13. }
      15. #flaggen {
      16. position: absolute !important;
      17. top: 515px;
      18. right: 167px;
      19. }
      21. #search {
      22. background: rgba(255,255,255,.6);
      23. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
      24. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
      25. -moz-border-radius: 6px;
      26. -webkit-border-radius: 6px;
      27. margin-bottom:3px;
      28. margin-top: 115px;
      29. margin-right: -33px;
      30. }
      Alles anzeigen


      PHP

      PHP-Quellcode

      1. <div style="text-align: right;" id="google_translate_element"></div><script>
      2. function googleTranslateElementInit() {
      3. new google.translate.TranslateElement({
      4. pageLanguage: 'de',
      5. autoDisplay: false,
      6. multilanguagePage: true,
      7. gaTrack: true,
      8. gaId: 'UA-28626833-1',
      9. layout: google.translate.TranslateElement.InlineLayout.SIMPLE
      10. }, 'google_translate_element');
      11. }
      12. </script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
      13. </div>
      15. <div id="flaggen">
      16. <img src="./wcf/dateien/flaggen.png"></img>
      17. </div>
      19. <div id="tee">
      20. {includePHP file='tee.php'}
      21. </div>
      Alles anzeigen

    • glaube position: fixed; sollte dein problem lösen
      sonst die boxen, weißt was ich mein?, dafür eine neue div erstellen
      und die position anpassen.

      e: du hast ja immer right: 132px; also von rechts (<-) versuch das mal von links also left: 123px;

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Toast ()

    • Versuchs mal mit margin
      Afugrnud enier Sduite an enier elingshcen Unvirestiät ist es eagl,
      in wlehcer Rienhnelfoge die Bcuhtsbaen in eniem Wrot sethen,
      das enizg wcihitge dbaei ist, dsas der estre und lzete Bcuhtsbae am rcihgiten Paltz snid.
      Der Rset knan ttolaer Bölsdinn sien, und du knasnt es torztedm onhe Porbelme lseen.
      Das ghet dseahlb, wiel wir nchit Bcuhtsbae für Bcuhtsbae enizlen lseen, snodren Wröetr als Gnaezs.

    • Pancake schrieb:

      Is zwar recht simpel, aber schon mal überlegt statt "right" "left" zu verwenden und es darauf anzupassen. Mehr fällt mir jetzt gerade ohne Google-Suche auch nicht ein.

      left geht schonmal besser
      - tee bewegt sich keinen cm mehr vom fleck
      - suche bleibt auch immer im gleichen abstand nebem header
      - google bewegt sich immer noch (diesmal halt nach links)

      Toast schrieb:

      glaube position: fixed; sollte dein problem lösen
      mit fixed bleibt er zwar an der gleichen stelle, scrollt aber mit ^^

      margin ändert gar nix

      und mit "position:relative" rückt die oberste zeile ( Angemeldet als Phoenix. Abmelden Profil bearbeiten Private Nachrichten Abonnements Benachrichtigungen ) eine zeile weiter nach unten.

    • Wie setzt du margin ein?
      Afugrnud enier Sduite an enier elingshcen Unvirestiät ist es eagl,
      in wlehcer Rienhnelfoge die Bcuhtsbaen in eniem Wrot sethen,
      das enizg wcihitge dbaei ist, dsas der estre und lzete Bcuhtsbae am rcihgiten Paltz snid.
      Der Rset knan ttolaer Bölsdinn sien, und du knasnt es torztedm onhe Porbelme lseen.
      Das ghet dseahlb, wiel wir nchit Bcuhtsbae für Bcuhtsbae enizlen lseen, snodren Wröetr als Gnaezs.

    • Also das grundsätzliche Problem ist, dass sich fast alles auf der Seite verschiebt. Die Seite wird dynamisch Breiter, wenn man das Browserfenster größer skaliert. Entgegen des Rests der Seite ist der Hintergrund nicht zentriert. Ändere beim background-Attribut vom body mal alle "left" zu "center".
      Um dann z.B. die Suche relativ zur Mitte auszurichten, musst du so vorgehen:
      position: absolute;
      left: 50%;
      margin-left: 260px; (hier das kannst du anpassen)

    • Teelevision schrieb:

      Also das grundsätzliche Problem ist, dass sich fast alles auf der Seite verschiebt. Die Seite wird dynamisch Breiter, wenn man das Browserfenster größer skaliert. Entgegen des Rests der Seite ist der Hintergrund nicht zentriert. Ändere beim background-Attribut vom body mal alle "left" zu "center".
      Um dann z.B. die Suche relativ zur Mitte auszurichten, musst du so vorgehen:
      position: absolute;
      left: 50%;
      margin-left: 260px; (hier das kannst du anpassen)

      dass war aber sowas von goldrichtig :D
      jetzt bleibt alles da wo es bleiben soll :3
      dankö