problem with centering my div

Discuss PivotX 2.0.x themes here, and view themes that are available for download.

problem with centering my div

Postby rabbeltje » Tue Sep 02, 2008 7:37 am

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!
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: problem with centering my div

Postby Bob » Tue Sep 02, 2008 1:16 pm

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
Lead Developer
 
Posts: 1374
Joined: Tue Nov 20, 2007 11:16 pm

Re: problem with centering my div

Postby Bob » Tue Sep 02, 2008 1:25 pm

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..
Bob
Lead Developer
 
Posts: 1374
Joined: Tue Nov 20, 2007 11:16 pm

Re: problem with centering my div

Postby rabbeltje » Tue Sep 02, 2008 1:32 pm

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?
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands

Re: problem with centering my div

Postby Bob » Tue Sep 02, 2008 3:21 pm

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.
Bob
Lead Developer
 
Posts: 1374
Joined: Tue Nov 20, 2007 11:16 pm

Re: problem with centering my div

Postby rabbeltje » Wed Sep 03, 2008 6:39 am

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.
User avatar
rabbeltje
 
Posts: 358
Joined: Mon Aug 25, 2008 11:54 am
Location: Neerbeek, The Netherlands


Return to 2.x Themes

Who is online

Users browsing this forum: No registered users and 2 guests

cron