3 replies [Last post]
grimaldi
Offline
Enthusiast
Last seen: 1 year 47 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

I feel like I'm doing something totally stupid here and that I've overlooked some really simple and obvious but I've been banging my head off the wall with this for a short while now and I'll in a bit of a hurry to get on with other aspects of the site.

Pagination for an image slideshow.

Basically I have a pagination div (nav) and in that is an unordered list. The first and last list items (prev & next) are positioned absolute to the left and right of the pagination containing div (nav) as they will never move. Now, I need the remaining list items to align always to the centre of the UL, inbetween the 2 arrows. At the minute I have the UL centered in #pagination (I can see this is I apply a background colour) but I can't get the list items to appear centered in the UL (Always with the same marging/padding). The anchors within the list items are display block as they have a hover background image on them. excluding next and prev there are 7 other list items (1-7) This can go up to 9 but could be a lower number depending on images. If there was 9 images there wouldn't be a great deal of gap between the number and arrow. If there was only 5 there would be more space - IE, the numbers spacing would not increase.

Here is the HTML Mark up:

<nav id="pag" class="clearfix">
	<ul class="clearfix">
		<li><a href="#" alt="" class="prev">Previous</a></li>
		<li><a href="#" alt="" class="first">1</a></li>
		<li><a href="#" alt="" class="second">2</a></li>
		<li><a href="#" alt="" class="third active">3</a></li>
		<li><a href="#" alt="" class="forth">4</a></li>
		<li><a href="#" alt="" class="fifth">5</a></li>
		<li><a href="#" alt="" class="sixth">6</a></li>
		<li><a href="#" alt="" class="seventh">7</a></li>
		<li><a href="#" alt="" class="next">Next</a></li>
	</ul>
</nav>

And CSS:

#pag	                {height:45px; width:317px; position:relative; background: url(../img/bg/pag_bg.png) no-repeat 0 0; display:block; margin:-36px auto 10px;}
#pag ul		        {padding:6px 0 0; margin:0 auto; width:240px; text-align:center; background:#0f0;}
#pag li		        {display:inline; float:left; padding:0;}
#pag li a		{display:block; color:#f00; width:26px; height:18px; padding-top:4px; text-align:center;}
#pag li a:hover	        {background: url(../img/bg/pag_hover.png) no-repeat 0 0; text-decoration:none;}
#pag li a.active	{color:#000;}
#pag .next,
#pag .prev		{text-indent:-9999px; overflow:hidden; display:block; height:21px; width:17px; position:absolute; top:7px; float:none;}
#pag .prev		{background-position:0 -938px; left:15px;}
#pag .prev:hover	{background-position:0 -959px;}
#pag .next		{background-position:-17px -938px; right:15px;}
#pag .next:hover	{background-position:-17px -959px;}

Cheers and I hope you can help - you always do! Smile

grimaldi
Offline
Enthusiast
Last seen: 1 year 47 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Bump ...anyone got any ideas

Bump ...anyone got any ideas - I feel like I'm missing something really simple.

Thanks again!

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 13 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

try giving the li

try giving the li display:inline-block

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

grimaldi
Offline
Enthusiast
Last seen: 1 year 47 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Hmmm design block on the list

Hmmm design block on the list items didn't do the trick.

I'm sure you can center align a ul with out setting a width? Or if you do set a width make the objects inside it centered.

Unless its the first and last list items being position absolute thats effecting it?

Thanks again!