The Joomla! Forum ™

Download

Demo


Board index » Joomla! 2.5 - Ask Support Questions Here » Templates for Joomla! 2.5 » Template overrides in Joomla! 2.5

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.



Post new topic Reply to topic  Page 1 of 1
  [ 12 posts ] 
  Print view Previous topic | Next topic 
Author Message
ray2mi
PostPosted: Mon Feb 13, 2012 8:00 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 17, 2010 2:22 pm
Posts: 16
Hi Guys,

I want to center the page navigation but somehow it is not working.
Iam creating a HTML 5 template and Iam using the following css to adjust the navigation.

Code:
div.pagination {
   clear: both;
   width: 940px;
   height: 90px;
   margin: 0 auto;
}
div.pagination p.counter {
   display: none;
}
div.pagination ul {
   list-style-type: none;
   margin: 0 auto;
}
div.pagination ul li {
   float: left;
   display: inline;
   padding: 0 10px;
}


I dont know what I do wrong but it is not working. The whole thing remains at the left side.
Top
 Profile  
 
ray2mi
PostPosted: Wed Feb 15, 2012 11:03 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 17, 2010 2:22 pm
Posts: 16
am I the only person with this question or is this board dead? :eek:
Top
 Profile  
 
andypasztirak
PostPosted: Thu Feb 16, 2012 7:26 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Mar 09, 2010 2:21 pm
Posts: 5
Hello,

There are two problems, you have your list items floated to the left, and you didn't specify a width for the "ul" so it will stretch to the full width of the page, so:

Code:
div.pagination {
   clear: both;
   width: 940px;
   height: 90px;
   margin: 0 auto;
}
div.pagination p.counter {
   display: none;
}
div.pagination ul {
   list-style-type: none;
   margin: 0 auto;
   width: 600px; /* Arbitrary width of course */
}
div.pagination ul li {
   /*float: left;    Don't float */
   display: inline;
   padding: 0 10px;
}
Top
 Profile  
 
ray2mi
PostPosted: Thu Feb 16, 2012 9:03 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 17, 2010 2:22 pm
Posts: 16
Hey,
thank you for your help. I had the same idea but when I do it like this, the single buttons with "last" "back" etc. are vertical aligned and not horizontal as it is when I am floating the li elements.

Mhhh, I need the pagination horizontal aligned and in the center of the page :/

Any suggestions?
Top
 Profile  
 
andypasztirak
PostPosted: Fri Feb 17, 2012 1:02 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Mar 09, 2010 2:21 pm
Posts: 5
Could you post a screenshot of it please? Or better yet, if you can show it to me on a live link that would be even more helpful!

I think it might be just the width being too small but if you can show me I will probably be able to help more.
Top
 Profile  
 
ray2mi
PostPosted: Fri Feb 17, 2012 6:51 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 17, 2010 2:22 pm
Posts: 16
I sure can upload a picture. I attached it to the post.
But havent uploaded the page yet.


You do not have the required permissions to view the files attached to this post.

Top
 Profile  
 
andypasztirak
PostPosted: Fri Feb 17, 2012 9:30 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Mar 09, 2010 2:21 pm
Posts: 5
You will need to give the ul tag a width to actually center it, and set it's text-align: center; that should fix it. :) [edit: sorry, the display of the li elements were inline already, my bad :) ]
Top
 Profile  
 
ray2mi
PostPosted: Fri Feb 17, 2012 11:29 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 17, 2010 2:22 pm
Posts: 16
I've tried that. Its not working.
It is to say, that I am using a html5 document. Maybe its because of that. I dont know.

But now I kind of solved it with position: relative
I've just defined the ul as a position relative and added a left distance of 19%.
If you have another idea that might help, please let me know :)
Top
 Profile  
 
andypasztirak
PostPosted: Sat Feb 18, 2012 5:02 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Mar 09, 2010 2:21 pm
Posts: 5
Sounds a bit odd, it's possible that some other rule is interfering there. I'm glad you found a solution, though if you have positioned it relatively keep in mind you will still need to add a width, otherwise what happens is the ul tag will expand beyond it's container, you don't want that. ;)
Top
 Profile  
 
ray2mi
PostPosted: Sat Feb 18, 2012 6:37 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 17, 2010 2:22 pm
Posts: 16
Yeah, I did that. Anyways, thanks for your help. That was very nice!
Top
 Profile  
 
piters
PostPosted: Sat Feb 25, 2012 12:03 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Feb 25, 2012 11:57 am
Posts: 4
I had the same idea but when I do it like this, the single buttons with "last" "back" etc. Image
Top
 Profile  
 
mirdj
PostPosted: Mon Apr 16, 2012 8:49 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Mar 04, 2010 9:11 pm
Posts: 39
I had the same issues, now I only have one issue left.

I have Joomla 2.5.4 with an Artisteer 3.1 template. The pagination is centered, now I want to get the Page 1 of .... centered as well. This is still on the left. Does anyone where I can change that?
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 12 posts ] 


Board index » Joomla! 2.5 - Ask Support Questions Here » Templates for Joomla! 2.5 » Template overrides in Joomla! 2.5

Who is online

Users browsing this forum: No registered users and 16 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group