problem with centering my div

[rabbeltje]

i am working on another style and i want to place the div with the pages (next page, pagenr's) at the bottom, in the center. the html-part looks like this:

Code: Select all

         <div id="content">
            <div class="weblog">
   
               <!-- begin of weblog 'standard' -->
                                                                                 ................................
               <!-- end of weblog 'standard' -->

         
                    [[ paging action="digg" ]]

            </div>
         </div>

The source-code of the output:

Code: Select all

         <div id="content">
            <div class="weblog">
   
               <!-- begin of weblog 'standard' -->   
                                                                                  ..................
                          <!-- end of weblog 'standard' -->                
<div id="pages">
    <ul>
    <li class="nolink">&#171; Vorige Pagina</li><li class="current">1</li><li><a href="/pivotx/?o=1">2</a></li><li><a href="/pivotx/?o=2">3</a></li><li><a href="/pivotx/?o=1">Volgende Pagina &#187;</a></li>
    </ul>
</div>

and the css-code:

Code: Select all

#pages {
   clear: both;
   margin: 20px auto;
   padding: 0px;
   min-height: 24px;
   text-align: center;
   }

#pages ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px auto;
   }

#pages li {
   float: left;
   display: inline;
   margin: 0 2px 0 0;
   display: block;
   line-height: 1.2em;       
   }
   
#pages li a {
   color: #888888;
   background-color: #777777;
   padding: 4px;
   border: 1px solid #aaaaaa;
   text-decoration: none;
   float: left;
   background-image: none;
   line-height: 1.2em;
   }

#pages li a:hover {
   color: #eeeeee;
   background: #bbbbbb;
   border: 1px solid #aaaaaa;
   }

#pages li.nolink {
   color: #555555;
   border: 1px solid #aaaaaa;
   padding: 4px;
   }

#pages li.current {
   color: #bbbbbb;
   border: 1px solid #aaaaaa;
   padding: 4px;
   background: #aaaaaa;
}

#pages li.skip {
   color: #ffffff;
   border: 0px;
   padding: 1px;
}

i thought setting left- and right-margin to auto would center it... but it doesn't

any idea what i am doing wrong?

also, i can't seem to find where to style the commentform!

[Bob]

I'd suggest getting Firebug(www.getfirebug.com), and then you can use the 'inspect' function to see what CSS is allpied to the paginator (as well as the commentform).. It'll help you fihure out what's going on..

Also, for the commentform, it'll tell you what classes apply to what elements, so you can add those to your css.

[Bob]

Oh, wait.. I see it now on your site.. I think it'll be a _real_ tough cookie to get the paginator to center properly. It's built up as an unordered list, with the elements floated on the left side. Which means it breaks out of the 'flow' of the page, and therefore is really hard to center.

What you could do instead is this: give #pages a background-color, and some padding. That way it will become as wide as the column of text, and it won't be so obvious anymore that there's this one thing aligned to the left..

[rabbeltje]

thanks for the reply! yey for me wanting something impossible again

i'll figure something out though there's nowhere i can change the paging-setup, right?

[Bob]

The settings you can change are here: http://docs.pivotx.net/doku.php?id=template_tags#paging

The colors and such you can override in your CSS.

[rabbeltje]

thanks for your help i'll have a look into it. maybe i'll change it to just previous and next, with a fixed width i can easily adjust the padding so it centers.