Newbie at HTML, could use some basic help.

[tbb4003]

I just created a Tumblr blog, and am trying to edit one of the pre-designed themes slightly. If you're able to see the screen shot I'm attaching (linked here: http://static.tumblr.com/ekfqihl/JT0lntz56/picture_1.png)

I would like to center the arrow button and "page 1 of 2" and get rid of that extra bullet point. I think this is the relevant HTML code:



<aside>


<div class="pages">

</div><!-- End Pages -->
<div class="links">


<ul class="link_list">
<li><a href="/archive">Archive</a></li>



<li><a href="/ask">Ask me a question</a></li></ul>
</div><!-- End Links -->




<!-- Insert any extra widgets below this line-->




<!-- Insert any extra widgets above this line -->





<nav id="stat-navigation">
<ul>

<li class="stat-nav-right"><a rel="next" href="/page/2"></a></li>

</ul>
</nav><!-- END#stat-navigation -->
</aside>
<div id="footer">

<div id="pagination">

<p class="page">
page {CurrentPage} of {TotalPages}
</p>

{block:Pagination}
{block:NextPage}
<a class="back" href="{NextPage}">&rarr;</a>
{/block:NextPage}
<br />
{block:PreviousPage}
<a class="forward" href="{PreviousPage}">&larr;</a>
{/block:PreviousPage}
{/block:Pagination}

{block:PermalinkPagination}
{block:PreviousPost}
<a class="back" href="{PreviousPost}">&rarr;</a>
{/block:PreviousPost}
<br />
{block:NextPost}
<a class="forward" href="{NextPost}">&larr;</a>
{/block:NextPost}
{/block:PermalinkPagination}

{block:DayPagination}
{block:PreviousDayPage}
<a class="back" href="{PreviousDayPage}">&rarr;</a>
{/block:PreviousDayPage}
<br />
{block:NextDayPage}
<a class="forward" href="{NextDayPage}">&larr;</a>
{/block:NextDayPage}
{/block:DayPagination}
</div>









</div>
</div>

{block:ifShowUserBox}
<div id="userbox">

<div id="avataricon">
<img src="{PortraitURL-64}">
</div>


<p>
{block:Pages}

<a class="multi" href="{URL}">{Label}</a>
<br />

{/block:Pages}
</p>



<p>

<div id="icons">
<a class="opacity" href="/archive"><img width="30px" src="http://static.tumblr.com/qxaauuk/vWLkyl431/calendar.png" title="archive"></a>
</div>

<div id="icons">
<a class="opacity" href="{RSS}"><img width="30px" src="http://static.tumblr.com/qxaauuk/SH4kyl425/rss.png" title="rss"></a>
</div>

<div id="icons">
<a class="opacity" href="/random"><img width="30px" src="http://static.tumblr.com/qxaauuk/UImkyl40d/shuffle.png" title="random post"></a>
</div>

</p>

</div>
{/block:ifShowUserBox}

{block:Twitter}

<script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}

</body>
</html>


I appreciate any help!

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[tbb4003]

How do I do that? I'm sorry-- I really am a total newbie. Thanks.

[Nile]

Just give us your tumblr url.

[tbb4003]

Oh! Duh. Thanks for your help:

http://absolutzo.tumblr.com/

[Nile]

It looks as if you fixed the bullet problem, correct?

To make the pagination centered, in your css find:


#pagination {font-size:16px; text-align:right; width:230px; line-height:20px;
margin-top:0; float:right;}

and replace it with:


#pagination {font-size:16px; text-align:right; width:58px; line-height:20px;
margin: 0 auto;}

[tbb4003]

Thank you SO much-- I really appreciate your help. Is it possible to create extra space between the "Page 1 of 2" and the arrow button?

[Nile]

Change:


#pagination .page {font:12px; text-align:right; text-transform:lowercase; margin-top:5px;}

To:



#pagination .page {font:12px; text-align:right; text-transform:lowercase; margin:5px 0;}

[tbb4003]

Hmm- I'm not sure that worked... it doesn't really look different. Thanks again for your help!

[Nile]

It looks like you've fixed it.

[Fritzel]

looks good :-)