Ankündigung

Einklappen
Keine Ankündigung bisher.

text-align

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • text-align

    Guten Tag an alle,
    nun ich bekomme es irgendwie nicht hin, dass der Text "Informationen" mittig ist (siehe Foto).

    Mein HTML-Code sieht wie folgt aus:

    HTML-Code:
    <div class="inf" id="info">
    <h1> Informationen </h1>
    </div>

    Mein CSS-Code sieht wie folgt aus:

    Code:
    #info {
    position: fixed;
    text-align: center;
    }
    Meine Frage ist, ob ich einen Befehl vergessen habe?
    Und die Position ist auf "fixed" eingestellt, da die Seite automatisch Scrollt, wenn der "Vertretungsplan" zu lang ist und ich möchte das die "Informationen" Div "mit scrollt".

    VG!
    Angehängte Dateien

  • #2
    Das text-align:center zentriert das Element, das darin liegt und das ist <h1>. Weil <h1> aber die ganze Breite ausfüllt, wirkt diese Zentrierung nicht. Du musst den Text innerhalb des <h1> zentrieren:
    Code:
    #info h1 {
        text-align: center;
    }
    oder das <h1> zu einem inline-block-Element machen.

    Kommentar


    • #3
      Durch "position: fixed" wird der Container #info auf die Breite des Inhalts beschränkt. Das kannst du sehen, wenn du #info eine Hintergrundfarbe gibst. Zur Abhilfe kannst du #info eine Breite von 100% zuweisen.

      Insgesamt wirst du mit fixed aber wohl nicht glücklich werden. In Zeiten vom responsive Design bereitet es mehr Probleme als das es hilft und wird deshalb kaum noch verwendet.
      Zuletzt geändert von MrMurphy; 27.10.2020, 11:47.

      Kommentar


      • #4
        Guten Morgen,
        Sempervivum das hatte ich auch schon probiert gehabt, leider ohne Erfolg, es ist dennoch auf der Linken Seite. :-/

        MrMurphy Aber wie bekomme ich es dann hin, dass die rechte Seite nicht mit scrollt?
        Ich habe im Netz schon Beispiele gesehen, wo die es hinbekommen haben, dass sie nur auf der einen Seite einen Scroll Balken haben, allerdings habe ich keine Ahnung wie ich dieses verwirklichen kann.

        VG!

        Kommentar


        • #5
          das hatte ich auch schon probiert gehabt, leider ohne Erfolg, es ist dennoch auf der Linken Seite.
          Bist Du denn mit den Hinweisen von MrMurphy zum Ziel gekommen?

          Aber wie bekomme ich es dann hin, dass die rechte Seite nicht mit scrollt?
          Ich habe im Netz schon Beispiele gesehen, wo die es hinbekommen haben, dass sie nur auf der einen Seite einen Scroll Balken haben, allerdings habe ich keine Ahnung wie ich dieses verwirklichen kann.
          Ich bin zwar nicht MrMurphy aber ich kann dir u. U. eine Lösung nennen :-) :
          Du kannst nicht nur das gesamte Dokument scrollen sondern auch einen einzelnen Container indem Du overflow: auto; oder overflow: scroll; für diesen setzt.

          Kommentar


          • #6
            Deine Problembeschreibung ist leider nur ansatzweise nachvollziehbar. Jetzt kommst du plötzlich damit um die Ecke, dass nur auf einer Seite gescrollt werden soll. Davon war bislang überhaupt nicht die Rede. Um dir helfen zu können brauchen wir schon alle relevanten Informationen. Dazu gehört zum Beispiel auch der Quellcode. So können wir dir nur sehr allgemein helfen.

            Dass du mit position: fixed nicht glücklich werden wirst habe ich bereits geschrieben.

            Wenn nur der Inhalt eines Containers gescrollt werden soll muss der eine feste Höhe bekommen, da sich sonst die Höhe seinem Inhalt anpasst. Mit overflow kann dann das Scrollverhalten bestimmt werden.

            Allerdings solltest du dir auch Gedanken zu Geräten mit Touchscreens machen. Die lassen sich mit solchen Lösungen nur schwer bis gar nicht steuern. Die von dir angedachte Lösung erscheint mir eher nicht benutzerfreundlich. Aber, wie schon geschrieben, kann ich das anhand deiner Informationen nur raten.

            Kommentar


            • #7
              MrMurphy ich hatte in meiner Frage schon geschrieben gehabt, dass nur die eine Seite gescrollt werden soll und mir war bisher nur bekannt, die andere Seite mit "fixed" zu fixieren. Desweiteren, ist das alles nicht für Smartphone User gedacht, da die Webseite nie Online gehen soll. Ich bin zur Zeit in der Lernphase.
              Ich werde eure Tipps morgen probieren, da ich heute nicht mehr dazu kommen werde.

              VG!

              Kommentar


              • #8
                Guten Morgen,
                ich habe es soeben mit "overflow: auto" sowie mit "overflow: scroll" versucht, leider ohne Erfolg, der zeigt mir zwar mittlerweile im linken Div den Scrollbalken, allerdings kann ich dort auch nicht Scrollen, da der Balken von oben bis unten gefüllt ist. (leicht erkennbar im Bild)

                VG!

                Code:
                #leftdiv {
                float: left;
                width: 49.5%;
                border-right-style: solid;
                overflow: scroll;
                }
                Angehängte Dateien

                Kommentar


                • #9
                  In dem Fall würde ich stark vermuten, dass der Inhalt in den linken Container hinein passt, so dass keine Notwendigkeit zum Scrollen besteht.

                  Kommentar


                  • #10
                    Allerdings wird der Inhalt nicht komplett auf der Seite angezeigt. Sozusagen nur die hälfte. :-/

                    Kommentar


                    • #11
                      Da hatte ich mich beim Copy&Paste und dem Editieren vertan und der Spamfilter hat zugeschlagen. Hier noch mal die verkürzte Version, die bei mir funktioniert:
                      HTML-Code:
                      <!doctype html>
                      <html lang="en">
                      <head>
                          <meta charset="UTF-8">
                          <title>Test</title>
                          <style>
                              html,
                              body {
                                  height: 100%;
                              }
                              body {
                                  margin: 0;
                              }
                              div#left,
                              div#right {
                                  width: 48%;
                                  overflow: auto;
                                  height: 100%;
                              }
                              div#left {
                                  float: left;
                              }
                              div#right {
                                  float: right;
                              }
                          </style>
                      </head>
                      <body>
                          <div id="left">
                              Hier ganz langer Inhalt
                          </div>
                          <div id="right">
                          </div>
                      </body>
                      
                      </html>
                      Ich habe es mal mit float gemacht, um genau deinen Code nachzustellen, empfehle aber, auf Flex umzustellen.

                      Kommentar


                      • #12
                        Sempervivum Dankeschön, werde ich direkt mal probieren, allerdings verstehe ich nicht ganz, weshalb mir jedesmal vom float abgeraten wird?
                        Ich habe es mit flex ersetzt und konnte keinen Unterschied feststellen. :-/

                        VG!

                        Kommentar


                        • #13
                          Zitat von silent Beitrag anzeigen
                          Sempervivum Dankeschön, werde ich direkt mal probieren, allerdings verstehe ich nicht ganz, weshalb mir jedesmal vom float abgeraten wird?
                          Ich habe es mit flex ersetzt und konnte keinen Unterschied feststellen. :-/
                          Wo machst du das ganze denn, im eigenen PC? Oder im Server, refresh sagt dir was, Cache leeren und so?
                          https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                          VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

                          Kommentar


                          • #14
                            Sempervivum ich habe deine Code in meinen implementiert, leider hatte dieses keine Auswirkung, auf das was ich vorhabe.

                            Eventuell habe ich mich zu kurz ausgedrückt gehabt, deswegen versuche ich es nochmals ausführlich zu erklären, was mein Problem ist:
                            Ich hab auf meiner Seite eine linke-Div und eine rechte-Div, auf der linken Seite kommen Informationen, in Textform, welches auch länger sein kann als eine Seite, auf der rechten Seite kommen Bilder, die über eine Diashow laufen (dort müsste ich es auch noch hinbekommen, dass sich die Bilder automatisch skallieren bin noch dran). Desweiteren habe ich mit jQuery einen Autoscroll hinzugefügt, welches die komplette Seite scrollt, sobald dieser zu lang ist. Ich möchte aber nicht, dass die rechte Seite mit scrollt, deswegen habe ich die Diashow mit "position: fixed" fixiert. Wenn ich dieses aber bei der Überschrift mache, so wandert dieser von der Mitte auf die linke Seite des rechten-Divs, quasi ist er im rechten-Div nicht mehr zentriert, welches ich lösen möchte. Ich bin zur Zeit, auf der Suche nach einer lösung, wie ich dieses wieder in Mitte bekommen kann, weil sobald ich "position: fixed" raus nehme, wandert er wieder in die Mitte, wie ich es möchte, allerdings scrollt er dann nicht mit, er verschwindet quasi aus dem Bild. Und genau dafür bin ich gerade auf der Suche nach einer Lösung.
                            Ich hoffe, dass ich es diesmal verständlicher Erklären konnte und auch nachvollziehbarer.

                            VG!

                            Kommentar


                            • #15
                              arnego2 ich mache dieses am eigenen PC. Natürlich benutze ich auch dafür den Privaten Modus im Browser, damit genau so was nicht passiert.

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.735   Beiträge: 429.427   Mitglieder: 28.490   Aktive Mitglieder: 41
                              Willkommen an unser neuestes Mitglied, KoaLa13bfp.

                              Online-Benutzer

                              Einklappen

                              215 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 212.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X