...

View Full Version : Need help with Menu Bar



dcroose
05-29-2009, 06:21 PM
Hi All,
I am 72 and very new to css. It didn't exist when I was working in the field 20 years ago. But I am trying to learn.

Here is some code I got off of the net and I am trying to get it to do what I want, i.e. wider tabs with less height. I thought all I would need to do was specify the width and height in the style definition but it has no effect. Can some one give me a hand?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"" content="text/html; charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="description" revisit-after"7 days" content="7 days">
<meta content="MSHTML 6.00.5730.13" name="GENERATOR">
<title>Title</title>

<Style>

#tswcsstabs ul {
margin: 0 ;
padding: 0 ;
height: 15px;
width: 100px;
list-style: none ;
display: inline ;
}
#tswcsstabs ul li {
margin: 0 ;
padding: 0 ;
height: 15px;
width: 100px;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}
#tswcsstabs li a {
color: #000 ;
background-color: #9cf ;
height: 15px;
width: 100px;
border: 1px outset #00f ;
padding: 8px ;
text-decoration: none ;
display: inline ;
}
#tswcsstabs li a:hover {
color: #ff0 ;
background-color: #0000c0 ;
}
</style>

</head>
<body>
<! Header begin>
<div align="center">
Header Goes Here
</div>
<! Header end>
<! Center column begin>
<! Menu Bar Begin>
<div id="tswcsstabs">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.htmp">About</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
</ul>
</div>
<! Menu Bar End>

Stuff Here
<! Center column end>
<! Footer begin>
<div align="center">
Footer goes here!
</div>
<! Footer end>
</body>
</html>




Thanks
Dick Roose

KenZag
05-29-2009, 06:49 PM
Hello!

Try to use a TABLE structure. How about this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"" content="text/html; charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="description" revisit-after"7 days" content="7 days">
<meta content="MSHTML 6.00.5730.13" name="GENERATOR">
<title>Title</title>

<Style>

#tswcsstabs td {
height: 15px;
width: 100px;
background-color: #9cf ;
text-align: center;
border: 1px outset #00f ;
padding: 8px ;
text-decoration: none ;
display: inline ;
}
#tswcsstabs td a {
color: #000 ;
text-decoration: none ;
display: inline ;
}
#tswcsstabs td a:hover {
color: #ff0 ;
background-color: #0000c0 ;
}
</style>

</head>
<body>
<! Header begin>
<div align="center">
Header Goes Here
</div>
<! Header end>
<! Center column begin>
<! Menu Bar Begin>
<div id="tswcsstabs">
<TABLE>
<TR>
<TD><a href="index.php">Home</a></TD>
<TD><a href="about.htmp">About</a></TD>
</TR>
</TABLE>
<! Menu Bar End>

Stuff Here
<! Center column end>
<! Footer begin>
<div align="center">
Footer goes here!
</div>
<! Footer end>
</body>
</html>


Good luck!
Owen

SB65
05-29-2009, 08:46 PM
DON'T use tables. Can't believe nobody else has said this yet.

Read a view on why here (http://www.hotdesign.com/seybold/). Less emotionally, tables clutter up your code, make it more complicated than it needs to be, are harder to change, and are unnecessary.

dcroose, welcome. First off, the W3C validator (http://validator.w3.org/) is a useful resource if you haven't come across it yet - you can use it to check your code as you go along - it spots those easy to miss errors.

Re your code,
<meta http-equiv="Content-Type"" content="text/html; charset=UTF-8"> has an extra quote which needs removing.

Then, if you are using XHTML then you need to close all your statements like this:


<meta name="keywords" content=""/>

Next, your comments need to be formatted like this:


<!-- Menu Bar Begin-->

Your height and width aren't going to have any effect unless you make the <a> a block element with display:block. I had a bit of a play with your css - give this a try:


<style type="text/css" media="screen">
*{margin:0px;padding:0px;border:none}/*set everything to 0px - avoids different browsers applying different defaults*/

#tswcsstabs ul {
list-style-type: none ;
overflow:auto;/* this clears the float at the end of the menu */
}

#tswcsstabs ul li {
float:left;/* use this to make the menu horizontal */
font-family: Arial, Helvetica, sans-serif ;
margin-right:5px/* space between the menu items */
}

#tswcsstabs li a {
color: #000 ;
background-color: #9cf ;
line-height: 20px;/* this will vertically centre the text in your box*/
width: 100px;
border: 1px outset #00f ;
text-decoration: none ;
display: block ;
text-align: center ;
}
#tswcsstabs li a:hover {
color: #ff0 ;
background-color: #0000c0 ;
}
</style>


That might be closer to what you want. You can then play around with the width and line height until you're happy.

Hope that helps.

Edit: Also,


<meta name="description" revisit-after="7 days" content="7 days"/>


should be


<meta name="revisit-after" content="7 days"/>

although I'm not sure it has much effect.

dcroose
05-29-2009, 09:40 PM
Thanks All,

SD65, your suggestions worked fine for the width but the height is still to much and there doesn't seem to be anything I can change tomake the height any less. I changed the style definition as follows...

#tswcsstabs li a {
color: #000 ;
background-color: #9cf ;
line-height: 10px;/* this will vertically centre the text in your box*/
heigth: 15px;
width: 100px;
border: 1px outset #00f ;
text-decoration: none ;
display: block ;
text-align: center ;
}
Adding a height statement but it has no effect anywhere from 10 to 100 px. Is there a way to change the height?

Thanks
Dick Roose

SB65
05-29-2009, 09:49 PM
line-height: 10px;/* this will vertically centre the text in your box*/
heigth: 15px;

I think this might be the problem.

You can just change the line-height to change the height of the box without adding a height value.

dcroose
05-30-2009, 09:11 AM
Hi SB65,

I don't understand what you mean! I have tried every combination of height and line-heght and nothing changes the display. The boxes are twice the Height I would like them. Could you be a little more explicit, I really don't understand all of the little I know about css.

Thanks
Dick Roose

SB65
05-30-2009, 09:17 AM
Ok - the problem with the code you posted was that height was spelled incorrectly. However, to change the height of the box you just need to change the line-height value:


#tswcsstabs li a {
color: #000 ;
background-color: #9cf ;
line-height: 20px;
width: 100px;
border: 1px outset #00f ;
text-decoration: none ;
display: block ;
text-align: center ;
}

- so you don't need a separate "height" setting.

dcroose
05-30-2009, 07:03 PM
Hi SD65,

Something isn't clicking. When I change the line-height to 150px I move the text down out of the box. It isn't the text that is the problem, it's the BOX! And I can find nowhere to change the size of the box. I can change the box width to anything I want with the "width: xxx" statement, but nothing I do changes the height of the box. How can it be that the width statement effects the width of the box but the height statement has no effect and the line-height statement only positions the text relative to the top of the box and does not effect the box at all.

SB65
05-30-2009, 08:21 PM
Hi dcroose

EDIT: Are you maybe still applying a height to #tswcsstabs li a? That might be causing the symptoms you describe. If not...

There must be something else different. Here's my amended version of your original code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="revisit-after" content="7 days"/>
<meta content="MSHTML 6.00.5730.13" name="GENERATOR"/>
<title>Title</title>

<style type="text/css" media="screen">
*{margin:0px;padding:0px;border:none}/*set everything to 0px*/

#tswcsstabs ul {
list-style-type: none ;
overflow:auto;/* this clears the float at the end of the menu */
}

#tswcsstabs ul li {
float:left;/* use this to make the menu horizontal */
font-family: Arial, Helvetica, sans-serif ;
margin-right:5px/* space between the menu items */
}

#tswcsstabs li a {
color: #000 ;
background-color: #9cf ;
line-height: 20px;
width: 100px;
border: 1px outset #00f ;
text-decoration: none ;
display: block ;
text-align: center ;
}
#tswcsstabs li a:hover {
color: #ff0 ;
background-color: #0000c0 ;
}
</style>

</head>
<body>
<!--Header begin-->
<div align="center">
Header Goes Here
</div>
<!--Header end-->
<!-- Center column begin-->
<!-- Menu Bar Begin-->
<div id="tswcsstabs">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.htmp">About</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
</ul>
</div>
<!-- Menu Bar End-->

Stuff Here
<!-- Center column end-->
<!-- Footer begin-->
<div align="center">
Footer goes here!
</div>
<!-- Footer end-->
</body>
</html>

Maybe this'll help identify the issue? If not, maybe you could post your current code and we'll have a look.

effpeetee
05-30-2009, 11:01 PM
Just a small point DCRoose,

Your html comments should be like this. You left out some --

<!-- Header begin-->

Frank (84 yrs old in September.)

zoe20
05-31-2009, 09:47 AM
Using tables is outdated i think

raja19
05-31-2009, 09:48 AM
Using tables is outdated i think

Yes i totally agree wid u

abduraooft
05-31-2009, 01:09 PM
Using tables is outdated i think


Yes i totally agree wid u Tables are not outdated and it's the correct semantic (http://boagworld.com/technology/semantic-code-what-why-how) tag to display tabular data. But using tables for making layout is the bad thing (http://www.hotdesign.com/seybold/)!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum