Acfurino Posted November 17, 2011 Share Posted November 17, 2011 Hey everyone, I heard good things about this forum so hopefully someone can help me before I go pay someone money that I would rather save for the price of gas in new york! How can I create four tabs to separate content on a page with a little icon (image) next to the title on each tab? More info can be found here:http://wordpress.org/support/topic/how-to-create-tabs-with-icons-on-each-tab?replies=31 and here:http://wordpress.org/support/topic/plugin-gt-tabs-formerly-posttabs-how-to-add-iconsimages-next-to-title-on-each-tab?replies=9 Regards,Tony Link to comment Share on other sites More sharing options...
Ingolme Posted November 17, 2011 Share Posted November 17, 2011 A tab is basically just a link.Normally, we use lists to make tabs and then style them with CSS.You can use an <img> element for the icon, or just make it the background image of the link. To make the link be a tab, you use a block display. When displayed as a block, not just the text is clickable, but a surrounding rectangular region determined by width, height, padding and floating. Since CSS does all the work, we just use HTML as a base structure. <ul id="tabs"> <li><a class="tab1" href="url">Text</a></li> <li><a class="tab2" href="url">Text</a></li> <li><a class="tab3" href="url">Text</a></li></ul> The CSS is what give the tabs the appearance and adds the icon to it: #tabs { /* Remove default list values */ padding: 0; margin: 0; list-style-type: none;}#tabs li { /* Define the color of the tab */ background-color: #0099FF; /* These lines give the tab shape (rounded borders on the top corners */ -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Make the tabs be next to eachother horizontally */ float: left;}#tabs li a { /* Make the link rectangular */ display: block; /* Since the icon is a background image, make it only appear once and on the top left with a little separation */ background-position: 3px 3px; background-repeat: no-repeat;} /* Add individual icon images to the links */.tab1 { background-image: url(tab1.png); }.tab1 { background-image: url(tab2.png); }.tab1 { background-image: url(tab3.png); } Link to comment Share on other sites More sharing options...
Acfurino Posted November 18, 2011 Author Share Posted November 18, 2011 Thank you so much... i'll toy around with it later today and let you know how it works. Link to comment Share on other sites More sharing options...
Acfurino Posted November 18, 2011 Author Share Posted November 18, 2011 I can't seem to tweak it properly to the way I want it to look... Here is the page and what I want the tabs to look like:http://theifhl.com/tabs-for-page/ Whenever you get a chance if you could just be a little more specific then that would be great. I'm sorry I have very little to no experience with CSS but i respect your time and will be patient if it takes you a while to reply. Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2011 Share Posted November 19, 2011 First you need to show me how much you've done so I can see where you went wrong. The code I gave you is about as specific as it could be. If you don't have experience with CSS then you should read the W3Schools CSS tutorial and practise with the TryIt editors. Link to comment Share on other sites More sharing options...
Acfurino Posted November 19, 2011 Author Share Posted November 19, 2011 Ok I'm going to keep practicising. Here is the page: http://www.theifhl.com/tabs-for-page And here is the code on my css file: #tabs { /* Remove default list values */ padding: 0; margin: 0; list-style-type: none;}#tabs li { /* Define the color of the tab */ background-color: #0099FF; /* These lines give the tab shape (rounded borders on the top corners */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Make the tabs be next to eachother horizontally */ float: left;}#tabs li a { /* Make the link rectangular */ display: block; /* Since the icon is a background image, make it only appear once and on the top left with a little separation */ background-position: 3px 3px; background-repeat: no-repeat;} /* Add individual icon images to the links */.tab1 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/hockey-icon.png); }.tab2 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/football-icon.png); }.tab3 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/baseball-icon.png); }.tab4 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/basketball-icon.png); } Link to comment Share on other sites More sharing options...
Acfurino Posted November 19, 2011 Author Share Posted November 19, 2011 Ok I've made it a little bit better but can't seem to figure out the rest. Here is the updated code... #tabs { /* Remove default list values */ padding: 0; margin: 0; list-style-type: none;}#tabs li { /* Define the color of the tab */ background-color: #FFFFFF; /* These lines give the tab shape (rounded borders on the top corners */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; /* Make the tabs be next to eachother horizontally */ float: left;}#tabs li a { /* Make the link rectangular */ display: block; /* Since the icon is a background image, make it only appear once and on the top left with a little separation */ background-position: 3px 0px; background-repeat: no-repeat;} /* Add individual icon images to the links */.tab1 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/hockey-mini-icon-2.png); }.tab2 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/football-icon.png); }.tab3 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/baseball-icon.png); }.tab4 { background-image: url(http://theifhl.com/wp-content/uploads/2011/11/basketball-mini-icon.bmp); } Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2011 Share Posted November 19, 2011 What happens when you try that code. What, specifically, is wrong? Link to comment Share on other sites More sharing options...
Acfurino Posted November 19, 2011 Author Share Posted November 19, 2011 Things I want that I can't figure out... - Center the tabs.- Space the tabs apart from each other a little bit more.- Take away the red line that shows when I hover mouse over tab.- Get images to show in full instead of pieces being cut off.- Add content under each tab. Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2011 Share Posted November 19, 2011 To center the tabs, you'll have to display the <li> elements as inline.blocks and remove the float: left declaration. Then set the text-align of the <ul> element to "center." Give left or right margin to the <li> elements to space them out further. You could set the text-decoration of the <a> element to "none" to remove the underline. I can't think of anything else that would cause a line to appear. To make the images appear completely, you will need to give the <a> element at least the same height as the icon image. In order to prevent the text from appearing ontop of the image, set a left-padding on the <a> element greater or equal to the width of the icon image. To add content under the tab is a whole other story that doesn't involve CSS. I'd need to know what you mean by it, because the tabs can't all have their own content under them at the same time. Link to comment Share on other sites More sharing options...
Acfurino Posted November 19, 2011 Author Share Posted November 19, 2011 This is what I mean by adding content under each tab...http://wordpress.org/extend/plugins/posttabs/ To serve that purpose... thats basically what I've been wanting to do... only problem is that plugin doesn't let me customize the tabs like add images next to the titles in the tabs. Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2011 Share Posted November 19, 2011 You need to make it with Javascript. Add an onclick handler to each link that will change the content inside a certain element. Link to comment Share on other sites More sharing options...
Acfurino Posted November 20, 2011 Author Share Posted November 20, 2011 Alright I'm finally up to this last part... can you tell me anything else about this onclick handler? I've been researching how to do that but i keep hitting dead ends Link to comment Share on other sites More sharing options...
Ingolme Posted November 20, 2011 Share Posted November 20, 2011 You need to get a full understanding of Javascript. Events are one of its most important features. Learn about events here Link to comment Share on other sites More sharing options...
Acfurino Posted November 22, 2011 Author Share Posted November 22, 2011 Is there any other way to do this? Link to comment Share on other sites More sharing options...
Ingolme Posted November 22, 2011 Share Posted November 22, 2011 The other alternative is to have separate pages, each one with different content under the tabs. When you click on a tab it goes to another page. Link to comment Share on other sites More sharing options...
Acfurino Posted November 22, 2011 Author Share Posted November 22, 2011 But that alternative would refresh the website right? Link to comment Share on other sites More sharing options...
Ingolme Posted November 22, 2011 Share Posted November 22, 2011 Yes. If you're not going to use Javascript, that's what you have to do. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.