Inhalt von Div zentrieren:

Paul.Schramenko · 24.04.2010, 08:56

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?

nikosch · 24.04.2010, 09:04

Zitat:

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..

Paul.Schramenko · 24.04.2010, 09:06

Vielen dank für den konstruktiven Beitrag...
Als ob ich da nicht schon gewesen wäre...

ByStones · 24.04.2010, 15:13

Verwende einfach inline-Elemente und gib dann dem umgebenen div text-align: center.

ChrisB · 24.04.2010, 17:55

Zitat:

Zitat von Paul.Schramenko

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.)

halskrause · 24.04.2010, 18:21

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

feeela · 25.04.2010, 23:19

Zitat:

Zitat von halskrause

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;

Paul.Schramenko · 26.04.2010, 10:59

Als erstes mal Danke für die Antworten!

Nun kommen wir zu den Antworten:

Zitat:

Zitat von feeela

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:

Zitat von ChrisB

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:

Zitat von halskrause

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:

Zitat von ChrisB

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...

nikosch · 26.04.2010, 12:11

Zitat:

Was gibt es denn gegen den Einsatz eines DIV-Konstukts?

Jedes unnütze Element ist zu kritisieren.

Paul.Schramenko · 26.04.2010, 12:17

Zitat:

Zitat von nikosch

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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
inhalt eines problem - arrays kürzen bzw. einer variablen zuweisen	geuloth	PHP Tipps 2010	6	27.02.2010 18:05
Inhalt textarea mit link übergeben?	Nabla	PHP Tipps 2010	5	01.02.2010 23:36
[Erledigt] 2-Spalten-Layout, dass sich an Inhalt anpasst	Turamisi	HTML, Usability und Barrierefreiheit	3	13.09.2009 12:27
[Erledigt] variable auf inhalt prüfen	level31	PHP Tipps 2009	2	23.06.2009 13:00
[Erledigt] session variablen haben keinen inhalt mehr	xstefxanx	PHP Tipps 2009	3	08.04.2009 14:59
[Erledigt] jede Seite hat den selben Inhalt...	ocean85	PHP Tipps 2009	14	10.03.2009 11:59
Hilfe, Seite im Internet Explorer Buggy	trowman	HTML, Usability und Barrierefreiheit	4	15.09.2008 08:32
Bild verschafft sich platz		HTML, Usability und Barrierefreiheit	14	11.08.2008 23:45
Variable mit externen Inhalt setzen?	errox	PHP Tipps 2008	7	30.05.2008 21:39
Inhalt zentrieren trotz Scrolleiste	max-dhom	HTML, Usability und Barrierefreiheit	5	20.05.2006 17:24
innerHTML/document.write und Inhalt in anderen Frame ändern		HTML, Usability und Barrierefreiheit	1	29.01.2006 10:35
Variablen inhalt verändern (löschen und einfügen)		PHP Tipps 2004	2	16.09.2004 11:57
Inhalt einer Datei einbinden ohne Inhalt anzuzeigen	Corvin	PHP Tipps 2004	4	22.07.2004 09:24
Inhalt mit css zentrieren	RudiS	HTML, Usability und Barrierefreiheit	3	03.07.2004 23:23


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

24.04.2010, 09:06
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Vielen dank für den konstruktiven Beitrag... Als ob ich da nicht schon gewesen wäre... Geändert von Paul.Schramenko (24.04.2010 um 09:33 Uhr).

24.04.2010, 15:13
ByStones Erfahrener Benutzer Registriert seit: 23.03.2010 Beiträge: 626 PHP-Kenntnisse: Anfänger	Verwende einfach inline-Elemente und gib dann dem umgebenen div text-align: center.

24.04.2010, 18:21
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Bau doch um deinen "Inhalt" wiederum ein Div, und gebe diesem die CSS Eigenschaft style="margin-right:auto; margin-left:auto;"