Today’s post features the second Cascading Style Sheet(CSS) Video Tutorial on creating horizontal tabs such as are used for the top navigation of this website. The video is 4 minutes in length.
What is most excellent about CSS is how a few lines of code in the styles greatly alters the visual structure of a page element.
With a recently purchased microphone headset the quality of the recording is greatly improved. Let me know what you think and what else you would like to learn about in subsequent tutorials.
13 Comments
Hi Phil,
Thank you so much for this tutorial. It was great! You explained it very well. I learned a lot from this tutorial. I will be going to try it out with my blog soon.
I wonder whether CSS could highlight the entire paragraph (denote by a full stop) when mouse over a paragraph then highlight the next paragraph when the mouse moves to the next.
Blessings and joy to you Phil.
Sam, Glad it was helpful. Yes, there is a way to do what I think you are asking about.
Hi Phil…
OK, I’m excited to learn about tech stuff.
I went for a long time without even know what CSS meant.
I figure if I learn one little thing each day, in time I will become a true techie!
OK, maybe not but at least I will have a sense of the tech world!
Thanks Phil,
Jen
Hi again…
OK, I’m TOTALLY excited about this.
I’ve actually been trying to figure out how to create those tab things for months and have not had any luck…
So, I have a couple questions… can I do this on blogspot? To create this horizontal list, where do I put it in the code? I know it is in the body but does it matter where? Also, can I use any font?
If my questions get too annoying just let me know! I do not want to take advantage of your skills.. but I truly am so excited to learn this stuff!
Thanks Phil,
Jen
Jen, in short yes to all of the above, but there are some caveats. I’ve got to run but will return to provide a better answer either back to this post or create a supplemental post. You’ve asked several great questions, so I may need to answer with several posts. How excellent. Hang tight and I’ll try and answer your questions over the next several days this week. BTW, if you are going to pursue doing much tweaking, I highly recommend considering getting your own host account, own domains and breaking free of blogspot, but that’s another topic. I wrote a post on that topic: http://urltea.com/1fxc Just something to think about.
Hi Phil…
Thanks for your help!
I’ll keep reading!
JJ
Jen, glad to help as always.
Hi Phil,
Although I had managed to get the tab out in my blog, it is still not working very right. The padding doesn’t work. The size not the same with IE compare to Firefox or Opera browser. Besides, I am not able to use the entire width of the body for the tabs. Do you have any hints or tips?
Thank you.
Best Wishes
Sam,
Looking at your code, it seems that your styles are unnecessarily complex. In cases like these you have styles working against one another which returns unpredictable results in the two browsers. The example I gave opens the same in either browser.
It looks like you’ve set the padding for “#nav-menu li to” “0″ and made padding adjustment for “#nav-menu a” as “0px 6px 3px 6px; ” Without doing any troubleshooting, cutting the padding from “#nav-menu a” and pasting into # “nav-menu li” which would follow more closely the example I gave.
CSS is deceptively simple, however if consecutive changes are made, over time it gets overly complex. Let me look into doing a template in blogspot with tabs such as you are wanting and then post that for viewing. Beyond that, let’s get in touch off-line to do more troubleshooting.
Sometimes in cases like these, I start from scratch and rebuild with the new changes. While that may take a little time, you may consider doing just that. In the greater scheme of things, I think it’s time to consider moving away from blogspot as you will have much more control for layout with a WordPress install. Given the amount of time you spend on your blog, it really would be worth it.
Phil, Thanks for the suggestions. I had made some changes but I still find that IE display padding is more at the bottom of the tab compare to Firefox browser.
The idea of hosting on another domain and using Wordpress indeed has more advantages. However, blogspot also got it benefits such as unlimited bandwidth and Google widgets and templates. Anyway, I might consider your suggestion about hosting on another domain in the future.
Best Wishes
Sam, If I have time later I’ll look more into it. Thinking about tweaking a new template design in blogspot for folks to use the elements. We’ll see if I get to that soon. In terms of templates, widgets etc. There are a plethora of them with WordPress, no contest there. The bandwidth issue is one to note, but if you have that problem, hopefully some ads/donations will help off-set the cost. That’s what I’m hoping to cultivate in the right manner. In the long-run I think you’ll be pleased to take the step. I certainly appreciate the issues.
Thanks Phil this is really great and was helpful.
Abyot, so glad it helped you out. I should do more tutorials like it. Thanks!
2 Trackbacks
[...] Phil over at Thought Sparks, started posting a CSS tutorial. Part 1 – The Body Tag, Part 2 – Horizontal Tabs. Really good [...]
[...] Lists are flexible for styling. By assigning classes to lists, the list can change it’s display without changing the content. A good example of that is illustrated in the post Horizontal Tabs – CSS Video Tutorial #2. [...]