Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Centering tabbed spry tabs


  • Please log in to reply
6 replies to this topic

#1 SyianZi

SyianZi

  • Members
  • 79 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England - UK
  • Local time:10:59 AM

Posted 01 July 2013 - 08:26 AM

Ok so I'm building a website, and I have a list of "groups" that I've put into a tabbed spry menu in order  to not reload the page every time I select one, trouble is it doesn't center properly, and I've no idea how to solve it. I've put a link just below here showing the problem. Any help would be great, thanks.

 

http://postimg.org/image/gm4pit0nt/

 


System Information:

Spoiler

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:04:59 AM

Posted 01 July 2013 - 06:44 PM

Do you mean like margin: 0 auto;?



#3 SyianZi

SyianZi
  • Topic Starter

  • Members
  • 79 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England - UK
  • Local time:10:59 AM

Posted 05 July 2013 - 05:27 AM

I only get time to work on this while I'm at work, but because I'm working on a pre made website from Dreamweaver and when I insert a spry tabbed menu it pushes the tabs to the right, where as when I do it on a blank page the tabs are directly to the left.

 

I am currently using this CSS for the spy tabs

.TabbedPanelsTab {
	position: relative;
	top: 0px;
	float: left;
	padding: 4px 10px;
	margin: 0px 5px 5px 0px;
	background-color: #;
	background-image:url(../img/buttonbacker.jpg);
	color: #fff;
	list-style: none;
	border-left: solid 1px #222;
	border-bottom: solid 1px #333;
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	width: 150px;
	left: px;
	height: px;
	text-align:center;
	font-family: sans-serif;
	font-size: 0.7em;
	font-weight: bold;

but unless I put in "left: -40px;" it is 40pixels right of the start, my only thought is that other CSS in the page is pushing it out, but regardless if I start with or without a page, it's almost impossible to centre the tabs.

 

The CSS above made the groups fall into a 3 x 3 looking box, I had to put a 1px border on them otherwise they go weird when I click them (pushing the boxes "below" down).

 

For now, the problem is somewhat remedied with making them appear 3 by 3, however I would love to know if it is possible to centre spry tabs in .TabbedPanelsTab or if it has to be done somewhere else like the .js


System Information:

Spoiler

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:04:59 AM

Posted 05 July 2013 - 08:28 AM

There are a couple of different things happening. First, the content is being pushed to the left on purpose. Removing the line float:left; might work, but since I cannot see the css for the rest of your elements, other factors may apply. Typically to center an element on a page horizontally, one would set the margins as I described above, by using margin: 0 auto;. Your code already shows you setting margins explicitly, so you cannot just add the margin:0 auto; because the other margin statement will override it. To put it another way, whichever rule the browser sees last is the rule that will be applied. Presumably someone set the margins that way on purpose, so tinkering with margins may result in having to tinker with some of the other css in order to maintain page layout.

 

Hopefully the first option will work. If not, then it will take some tweaking in other areas of the css to get this to work correctly.



#5 SyianZi

SyianZi
  • Topic Starter

  • Members
  • 79 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England - UK
  • Local time:10:59 AM

Posted 05 July 2013 - 08:47 AM

I wasn't aware of that, though I have 3 CSS' attached to this page because of what it contains so it's a bit of a headache, and I am learning HTML and CSS from scratch, thus the initial question. Thank you for your answer, I understand what's happening now a lot more and I am able to get my desired effect, if I wasn't such a perfectionist I could be ignorant.

 

Thanks again.

 

Kind regards,

 

Daniel. B


System Information:

Spoiler

#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:04:59 AM

Posted 05 July 2013 - 01:56 PM

It is a lot easier to debug if you use something like Firebug (in Firefox); you can see exactly which styles have been applied to which elements. In IE, you can select F12 to bring up the debugger. If you go up to 'Find' in the top level menu, and then 'Select Element by Click', you can click on any element in your page to see what styles have been applied. the debugger ought to blow your mind for a while. :)



#7 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:09:59 PM

Posted 07 July 2013 - 06:07 PM

Chrome & Safari you can right click and go to "Inspect element" which will take you to that section of code.

 

It would be a lot easier for someone to help if we could see the webpage itself? Any chance of a link?


There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users