I used unordered lists to create tabs across the top of my site.

http://hmstechnology.com/tabs2/tabs.html

As you can see, I need to get my content moved down below the picture and the tabs.

All CSS and html code is available to see when you "view source".

Greatly appreciated if you could explain how I can fix this, or if you could just fix it and email me the code (or paste code in your response).

<snipped>

Thank you very much,

Phil

Recommended Answers

All 16 Replies

you need to put all the contence in a width defined div tag and add padding to it or cheat and just use <br>

I still have a lot to learn.

I ended up opening it in DreamWeaver, and hitting "enter" several times.

How is that for cheating? Then again, I use frames.

Thank you for your help. Learning more all the time.

Phil

let me see... so, what you want to do is the list to appear directly below the tabs, or a hover menu to appear when you hover the tabs?

Plarsen, if you don't know what you are doing here, then I think you won't be able to solve it very easily. You may go to this mootabs site, and use their easy to use tab thing. It will make your life easier.

I resolved the issue using DreamWeaver.

If someone could point out how to show a tab as selected, it would be greatly appreciated and I will be on my transferring my old website into my new template.

BTW, thank you to all who are so helpful.

plarsen

You need p tags around each paragraph in your text.

In order to clear your content, you might want to try to float your #menu left; float your <li> and your <a> elements left also. It looks like you already assigned specific widths to the anchor items, yes?

Instead of putting in a bunch of <br> elements, you can enclose your content paragraphs in a <div> with whatever ID you want to use and have it clear: left in your CSS. Or you can just assign the clear: left declaration to the <p> tag.

You can assign whatever margin or padding you want to on the div tag to provide visual separation.

Please forgive my ignorance, but how does <p> tags around each paragraph help me show a selected tab?

I am using this person's code:

http://kalsey.com/tools/csstabs/

They don't. But they keep your text from bunching up like that. It looked awful.

Yes, you'll be able to style and position your paragraphs away from your navigation if you use the <p> tags as the styling "hooks".

If you look at the original code you are using, you'll see that the author has his paragraphs wrapped in a <div id="contents"> which has a clear: both style. This allows the text to clear from the navigation. He also has his paragraphs wrapped in <p> tags, so he can style them any way he wants.

I think I will have to learn more about how to position paragraphs later.

What I am still not seeing is how one creates the highlighted tab on this person's website.

http://kalsey.com/tools/csstabs/

I am not as sophisticated as you webdesigners (again, my training is education). If you could show me exactly what to change it would be greatly appreciated. I have compared the "home" tab source code with the "About Us" tab source code, and I am not seeing what he is changing to make the tab become white, and thus, selected.

Any help greatly appreciated.

Honestly, I don't see, except for the paragraph position, where you are having a problem. The one page that has the link active (your home page) shows the white tab. The other tabs are not linked to pages, or the links are broken. I'm almost sure that if your links went to properly named pages, those links would be white, too.

By the way. I have no formal training in this either. My background is law enforcement, not web design. I am also a relative newcomer - sometimes trying to help other struggling newcomers. So I guess you're like most of us here: learning as you go.

I looked at your site in Firefox and IE; in both browsers, your home page link shows white. You are after the "You-are-here" effect, am I correct?

All you have to do is:

1. Have a separate page for each tab selection.

2. On each page, set a class for the white background and a class for the gray background.

3. Within the tag for each tab, put the proper class for the color you want displayed for that tab.

Hi
I wouldnt take this harshley as i mean no offence and someone said it 2 me when i was first starting out.
These problems are simply solved if you understand what your doing, your asking question and people are just giving you the answers. Try googling "css tutorials" or "html tutorials". Just give it a try before asking daniweb :D
hope this helps in some weird way.

It does. I was hoping I could get the new site up and running with tabs.

I have actually been working through several books and have learned a lot about CSS.

I am going to keep plugging away at it until I get it.

FYI: I finally figured out how to show the highlighted tab. Did it to the first two tabs just fine. When I did it to the third tab, the remaining tabs all became white (highlighted) as well.

I know once I learn the code and exactly how to create tabs, then I will make it just the way I want.

Thanks for the kick in the pants,

Phil

:D
okais,well good luck

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.