I'm learning CSS and I need some expert input

**krisjohnson** · 11-06-2008, 05:37 PM

I'm just starting to learn CSS and I've tried to tackle a Navigation Menu.
So I figured I'd start with a clean "tabs" type menu -- with no graphics in it.

So I wrote the html file below and used the attached CSS file too (after reviewing various examples and reading through my CSS books).

I created the menu header and then tried to generate a floting box for content to complete the overall look

I managed to generate the navigation tabs, but I cannot seem to get the over all look be connected.

My content box is not connected to the navigation bar -- so it looks disjointed.

Can anyone point out my shortcoming?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Values Navigation Menu</title>

<!-- Cascading Style Sheet Section -->
<link  rel="stylesheet" href="values_tabs.css" type="text/css" media="screen">
</head>

<body>
<h2>Tab Menu</h2>
<div id=""navcontainer"> 
  <ul id="navlist">
    <!-- CSS Tabs -->
    <li><a id="current" href="admin_index.html">Administration</a></li>
    <li><a href="categories.php">Categories</a></li>
    <li><a href="subcategories.php">Subcategories</a></li>
    <li><a href="media_types.php">Media Types</a></li>
    <li><a href="roles.php">Roles</a></li>
  </ul>
</div>
<div id="main_header">
<p> Test this out </p>
</div>
</body>
</html>

**olveyphotodesign** · 11-06-2008, 05:54 PM

This looks pretty good for a first attempt. From what I can tell your problem is that you have not specified margins in your CSS.

Code:

#navlist {
        padding: 3px 0px;
	margin:0;
	bottom: -1px;
        border-bottom: 1px solid #778;
        font: bold 10px Tahoma, sans-serif;		
}

Changing your margin-left:0 attribute to margin:0 brings the two together. Remember that when dealing with CSS you are working with a cascading effect. If you do not specify an attribute, the browser will look at it's defaults for guidance.

Because each browser has it's own defaults, each will display your code differently if you do not tell it exactly how you want it shown.

The star hack is common to where we apply the following code to your stylesheet.

Good Luck,
Ben

**krisjohnson** · 11-06-2008, 09:32 PM

Thanks Ben!
I've been trying for 3 days -- so I guess I've learned a few things.

OK -- I made the adjustment that you suggested from the thread earlier and it worked.

So I made two more adjustment now that I have reparied the disjointed look:

1) #navlist li a - I moved the "margin" value to 0px
2) #navlist li a.cuurent -- I moved this to the same color of my content box

But that brings me to a new issue that I don't think I understand properly.

Now the content box bumps directly up against the nav bar -- the "knock out" effect that I was using on the active tab (in this case it's the "Adminstration" tab) is ruined because the bottom line that forms the "tab" look.

How could I approach controlling this affect for the active tab?

**Schmoopy** · 11-06-2008, 09:43 PM

Simple solution to this is to remove the border-bottom from #navlist, so you end up with:

Code:

#navlist {
padding: 3px 0px;
margin: 0;
bottom: -1px;
font: bold 10px Tahoma, sans-serif;		
}

After doing so you get a nice tabbed look

Jack.

**krisjohnson** · 11-06-2008, 10:00 PM

I applied the suggestion given -- but I see no difference

**Schmoopy** · 11-06-2008, 10:16 PM

Ok figured it out now, here is the modified CSS, sorry about me not seeing what you wanted before...

CSS:

Code:

#navlist li a#current {
background: #fff3b3;
border-bottom:1px solid #fff3b3; /*Mergers in with the colour of the content box*/
}

#navlist {
padding: 3px 0px;
margin: 0;
bottom: -1px;
font: bold 10px Tahoma, sans-serif;		
}

I have also changed the HTML a little bit, as you do not need the "navcontainer" and the code you provided actually showed <div id=""navcontainer"> Which is invalid, but if you just take the navcontainer out you still maintain the same look. Also took out the link for the active tab, since it's active you don't need a link for it.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Values Navigation Menu</title>

<!-- Cascading Style Sheet Section -->
<link rel="stylesheet" href="values_tabs.css" type="text/css" media="screen">
</head>

<body>
<h2>Tab Menu</h2>
<ul id="navlist">
<!-- CSS Tabs -->
<li><a id="current">Administration</a></li>
<li><a href="categories.php">Categories</a></li>
<li><a href="subcategories.php">Subcategories</a></li>
<li><a href="media_types.php">Media Types</a></li>
<li><a href="roles.php">Roles</a></li>
</ul>
<div id="main_header">
<p> Content goes here... </p>
</div>
</body>
</html>

Hope this sorts it for you, just tell me if that's not how you wanted it, final version's also at: http://www.bombthehills.com/test/tabs.html

Jack.

**krisjohnson** · 11-08-2008, 07:34 AM

Jack:
Thanks!

I looked at you example and that is the effect that I was shooting for

Can you attach the stylesheet in a posting so I can compare it to what I have?

I continued to work at it and my current version probably is different than what you made modifications to.

I've been reviwing and looking at the next level type of menu too. I'll have some new questions soon.

Thanks for the tips.

Kristopher

**Schmoopy** · 11-08-2008, 01:47 PM

Sure, I have attached the full CSS, I can't attach the HTML file so I'll put it in here just for clarification:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Values Navigation Menu</title>

<!-- Cascading Style Sheet Section -->
<link rel="stylesheet" href="values_tabs.css" type="text/css" media="screen">
</head>

<body>
<h2>Tab Menu</h2>
<ul id="navlist">
<!-- CSS Tabs -->
<li><a id="current">Administration</a></li>

<li><a href="categories.php">Categories</a></li>
<li><a href="subcategories.php">Subcategories</a></li>
<li><a href="media_types.php">Media Types</a></li>
<li><a href="roles.php">Roles</a></li>
</ul>
<div id="main_header">
<p>Content goes here...</p>
</div>
</body>
</html>

Good luck

**krisjohnson** · 11-10-2008, 08:37 AM

Got it!! I'll compare it and make the suggested adjustments

By the way, I just tried a CSS Menu with a second level menu

I only had one problem display it -- I didn't have the right doc type declared

Not too bad. My learning continues

Thanks again!!!