Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with Menu Bar

    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?

    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="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

  • #2
    New Coder
    Join Date
    May 2009
    Location
    LA, USA
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello!

    Try to use a TABLE structure. How about this:

    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="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
    Last edited by VIPStephan; 08-14-2011 at 03:13 PM. Reason: removed self promotional link

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    DON'T use tables. Can't believe nobody else has said this yet.

    Read a view on why here. 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 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,
    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:

    Code:
     <!-- 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:

    Code:
    <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,

    Code:
    <meta name="description" revisit-after="7 days" content="7 days"/>
    should be

    Code:
    <meta name="revisit-after" content="7 days"/>
    although I'm not sure it has much effect.
    Last edited by SB65; 05-29-2009 at 07:48 PM.

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re: Need help with Menu Bar

    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

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    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.

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    RE: Need help with Menu Bar

    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

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    #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.

  • #8
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    RE: Need help with Menu Bar

    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.
    Last edited by dcroose; 05-30-2009 at 06:05 PM.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    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.
    Last edited by SB65; 05-30-2009 at 07:45 PM.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Just a small point DCRoose,

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

    <!-- Header begin-->

    Frank (84 yrs old in September.)
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post
    Using tables is outdated i think

  • #12
    New Coder
    Join Date
    Jan 2006
    Posts
    39
    Thanks
    9
    Thanked 1 Time in 1 Post

    Arrow

    Quote Originally Posted by zoe20 View Post
    Using tables is outdated i think
    Yes i totally agree wid u

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by zoe20 View Post
    Using tables is outdated i think
    Quote Originally Posted by raja19 View Post
    Yes i totally agree wid u
    Tables are not outdated and it's the correct semantic tag to display tabular data. But using tables for making layout is the bad thing!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •