Next/Previous Navigation using CSS

[dr00bie]

I am updating our Intranet from table-based design to CSS and am having problems getting my first/previous/next/last navigation to look right.

Basically it shows |< First and <Previous links if the user is not on the first page and shows the Next > and Last >| links if the user is not on the last page.

My old table-based code looks like this (dynamic code has been omitted),

<tr>
	<td width="25%"><div align="center">
		<A HREF="first.htm">I&lt; First</A>
	</div></td>
	<td width="25%"><div align="center">
		<A HREF="previous.htm">&lt; Previous</A>
	</div></td>
	<td width="25%"><div align="center">
		<A HREF="next.htm">Next &gt;</A>
	</div></td>
	<td width="25%"><div align="center">
		<A HREF="last.htm">Last &gt;I</A>
	</div></td>
</tr>

I would like the same type of navigation with CSS, but I have been unable to get it right.

Here is my new code,

<div id="resultsnav">
	<ul>
		<li><a href="first.htm">|< First</a></li>
		<li><a href="previous.htm">< Previous</a></li>
		<li><a href="next.htm">Next ></a></li>
		<li><a href="last.htm">Last >|</a></li>
	</ul>
</div>

And here is my CSS,

#resultsnav {
	size:100%;
	text-align:center;
}
#resultsnav ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
#resultsnav ul li {
     display: inline;
}
#resultsnav ul li a {
	padding: 2% 6%;
	font-size: 16px;
}

The problem I am having is that when a user is on the first page, the Next > and Last >| links are centered on the page, they are not in place like the table does.

How can I fix this? Or should I just continue to use a table for this?

Thanks,
Drew

 

[monksnake]

In this code:

<div id="resultsnav">
    <ul>
        <li><a href="first.htm">|< First</a></li>
        <li><a href="previous.htm">< Previous</a></li>
        <li><a href="next.htm">Next ></a></li>
        <li><a href="last.htm">Last >|</a></li>
    </ul>
</div>

How are you not showing the list items that don't apply to a certain page?

If they all display properly when all list item elements are shown, I'd "hide" the list items when you need to with:

visibility:hidden;

<.

 

[dr00bie]

I am using Macromedia Dreamweaver code to show/hide the links...

	<div id="resultsnav">
		<ul>
			<% If MM_offset <> 0 Then %>
			<li><a href="<%=MM_moveFirst%>">|< First</a></li>
			<li><a href="<%=MM_movePrev%>">< Previous</a></li>
			<% End If ' end MM_offset <> 0 %>
			<% If MM_offset = 0 Then %>
			<li><a href="<%=MM_moveNext%>">Next ></a></li>
			<li><a href="<%=MM_moveLast%>">Last >|</a></li>
			<% End If ' end MM_offset <> 0 %>
		</ul>
	</div>

Thanks,
Drew

 

[monksnake]

I am using Macromedia Dreamweaver code to show/hide the links

I'd just go back to using the tables.




<.

 

[dr00bie]

Thanks for your reply... I believe that is what I'll do.

Thanks,
Drew

 

[Vragabond]

He was just kidding. What he meant was, program your own php and come up with a better solution. I find it pretty simple. If you look at your list idea vs your table idea, one has each button defined as being 25% wide and the other one doesn't. So, float the anchor elements and give them 25% width. And, there is not size attribute in css.