Ankündigung

Einklappen
Keine Ankündigung bisher.

Inhalt von Div zentrieren:

Einklappen

Neue Werbung 2019

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

  • Inhalt von Div zentrieren:

    Hallöchen zusammen in den früher Morgenstunden...

    Also ich habe folgendes Problem, ich habe mir eine Pagination gebastelt und versuche nun verzweifelt den Inhalt eines DIV's zu zentrieren. Ich weiß, dass an sich net geht, da es kein Block-Element glaube ich ist. Ich leider eine absolute Null was CSS angeht

    Aussehen tut das ganze folgendermaßen:

    Ich möchte gerne den Inhalt im Div mit dem Border zentrieren.

    meine Pagination sieht folgendermaßen aus:
    Code:
    <div class="paginationOuter">
        <div class="paginationButton paginationJumper"><a href="/index/index?page=0">«</a></div>
        <div class="paginationButton paginationJumper"><a href="/index/index?page=4">‹</a></div>
        <div class="paginationButton disabledPage">...</div>
    
        <div class="paginationButton"><a href="/index/index?page=2">3</a></div>
        <div class="paginationButton"><a href="/index/index?page=3">4</a></div>
        <div class="paginationButton"><a href="/index/index?page=4">5</a></div>
        <div class="paginationButton activePage"><a href="#">6</a></div>
        
        <div class="paginationButton paginationJumper disabledPage">›</div>
        <div class="paginationButton paginationJumper disabledPage">»</div>
    </div>
    .paginationOuter -> Ist so definiert, das er die maximal Länge des divs hat, also mit 13Buttons. Da dies aber wohl nicht so oft vorkommen wird, möchte ich den Inhalt Standardmäßig zentrieren.

    und die Dazu passende CSS:
    Code:
    <style type="text/css">
        .paginationOuter {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:10px;
            line-height:15px;
            width:403px;    /* paginationButton-width(21px) + 2*( paginationButton-border(1px) + paginationButton-padding(3px) + paginationButton-margin(1px) )= 31px (maximal 13Buttons) */
            height: 21px;
            
            border:1px solid black;      /* only for debug */
        }
        .paginationButton {
            float:left;
            margin: 0 1px;
            border: 1px solid #ccc;
            width:21px;
            max-width:27px;
            min-width:27px;
            heigth: 14px;
            text-align:center;
            overflow: hidden;
            color:#84827B;
        }
    
        .activePage {
            background-color: #F9D1D1;
            font-weight:bold;
        }
        
        .paginationButton a:hover {
            background-color: #F9D1D1;
            text-decoration:none;
            font-weight:bold;
            color:#84827B;
        }
        
        .paginationButton a {
            padding: 2px 3px;
            width:21px;
            heigth: 14px;
            display: block;
        }
        
        .paginationButton a:link {
            text-decoration:none;
            color:#84827B;
        }
        
        .paginationButton a:visited {
            text-decoration:none;
            color:#84827B;
        }
        
        .paginationButton a:active {
            text-decoration:none;
            color:#84827B;
        }
    
        .paginationJumper {
            font-weight:bold;
            font-size:11px;
        }
    
        .disabledPage {
            background-color: #EDEDED;
            color: #9E9E9E;
            padding:2px 0;
        }
    </style>
    Meine Frage ist nun, ist das möglich?
    "My software never has bugs, it just develops random features."
    "Real programmers don't comment. If it was hard to write, it should be hard to understand!"


  • #2
    Ich weiß, dass an sich net geht, da es kein Block-Element glaube ich ist. Ich leider eine absolute Null was CSS angeht
    http://www.php.de/php-einsteiger/489...rundlagen.html

    Ich sehe auch nicht mal einen SInn, hier überhaupt so viele Divs zu verwenden..
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      Vielen dank für den konstruktiven Beitrag...
      Als ob ich da nicht schon gewesen wäre...
      "My software never has bugs, it just develops random features."
      "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

      Kommentar


      • #4
        Verwende einfach inline-Elemente und gib dann dem umgebenen div text-align: center.
        Signatur:
        PHP-Code:
        $s '0048656c6c6f20576f726c64';
        while(
        $i=substr($s=substr($s,2),0,2))echo"&#x00$i;"

        Kommentar


        • #5
          Zitat von Paul.Schramenko Beitrag anzeigen
          Ich leider eine absolute Null was CSS angeht
          Das darfst du von dir auch gerne schon in Bezug auf HTML behaupten, wenn du eine solche DIV-Suppe kochst ... sinnvoll wäre bspw. die Umsetzung einer solchen Blätter-Navigation als Liste.

          Bzgl. der Zentrierung ist der Hinweis auf text-align schon passend. Wenn du Elemente nutzt, die einen display-Typ haben, auf den text-align nicht wirkt - dann änderst du diesen halt, in dem du für diese Eigenschaft einen passenderen Wert vergibst.
          float beißt sich auf jeden Fall mit dem Wunsch nach Zentrierung, weil das eben explizit für eine Ausrichtung nach links oder rechts gedacht ist. (Wenn du das weiterhin nutzen willst, dann könntest du höchstens noch das umgebende Element zentrieren - aber dafür müsstest du diesem wiederum explizit eine Breite geben, also die Breite der einzelnen Nachfahrenelemente kennen und aufaddieren, was in der Praxis meist auch nicht gegeben ist.)

          Kommentar


          • #6
            Bau doch um deinen "Inhalt" wiederum ein Div, und gebe diesem die CSS Eigenschaft style="margin-right:auto; margin-left:auto;"

            Kommentar


            • #7
              Zitat von halskrause Beitrag anzeigen
              Bau doch um deinen "Inhalt" wiederum ein Div, und gebe diesem die CSS Eigenschaft style="margin-right:auto; margin-left:auto;"
              War das Satire?

              @Paul: nimm lieber den Post von ChrisB als Vorlage. Soll heißen - statt float:left; nutzt du display:inline-block; für die Kindelemente der Pagination.

              P.S. wieso hast du eigentlichen den "Buttons" eine Breite verpasst, die schmaler ist als die minimale Breite? Scheint mir sinnbefreit.
              Code:
              width:21px;
              min-width:27px;
              Je grösser der Dachschaden, desto schöner der Ausblick zum Himmel. - [WIKI]Karlheinz Deschner[/WIKI]

              Kommentar


              • #8
                Als erstes mal Danke für die Antworten!

                Nun kommen wir zu den Antworten:
                Zitat von feeela Beitrag anzeigen
                P.S. wieso hast du eigentlichen den "Buttons" eine Breite verpasst, die schmaler ist als die minimale Breite? Scheint mir sinnbefreit.
                Das nennt man wohl nen freudschen Verschreiber...

                Zitat von ChrisB Beitrag anzeigen
                Das darfst du von dir auch gerne schon in Bezug auf HTML behaupten, wenn du eine solche DIV-Suppe kochst ... sinnvoll wäre bspw. die Umsetzung einer solchen Blätter-Navigation als Liste.
                1. Was hast du gegen Suppen?
                2. Was gibt es denn gegen den Einsatz eines DIV-Konstukts?

                Zitat von halskrause Beitrag anzeigen
                Bau doch um deinen "Inhalt" wiederum ein Div, und gebe diesem die CSS Eigenschaft style="margin-right:auto; margin-left:auto;"
                hat nicht funktioniert... hatte ich auch bereits ausprobiert!

                Zitat von ChrisB Beitrag anzeigen
                float beißt sich auf jeden Fall mit dem Wunsch nach Zentrierung, weil das eben explizit für eine Ausrichtung nach links oder rechts gedacht ist.
                Das war mir so nicht direkt bewusst... Vielen Dank... Muss mir wohl doch noch mein CSS Buch zu Gemüte führen. Nicht nur die Tutorials anschauen...
                "My software never has bugs, it just develops random features."
                "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                Kommentar


                • #9
                  Was gibt es denn gegen den Einsatz eines DIV-Konstukts?
                  Jedes unnütze Element ist zu kritisieren.
                  --

                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                  --

                  Kommentar


                  • #10
                    Zitat von nikosch Beitrag anzeigen
                    Jedes unnütze Element ist zu kritisieren.
                    Hmm. Ich bin mir da ja mal net so sicher, in wie weit unnütz das sein soll. Aber das mit der Liste werde ich wohl umsetzte... Hört sich eigentlich sehr gut an.
                    "My software never has bugs, it just develops random features."
                    "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                    Kommentar


                    • #11
                      Warum es unnütz ist? Divs sind nur dazu da um andere Elemente zu gruppieren oder hat selbst sozusagen keine Bedeutung. Eine Seiten-Navigation ist aber eindeutig eine Liste. Fertig aus.

                      Kommentar


                      • #12
                        Zitat von Baltasar Beitrag anzeigen
                        Warum es unnütz ist? Divs sind nur dazu da um andere Elemente zu gruppieren oder hat selbst sozusagen keine Bedeutung. Eine Seiten-Navigation ist aber eindeutig eine Liste. Fertig aus.
                        Ok ich werds ändern =)
                        "My software never has bugs, it just develops random features."
                        "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

                        Kommentar

                        Lädt...
                        X