1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design Changing tab width on menu

Discussion in 'Web Design' started by MizzouTigers, Jan 29, 2012.

  1. MizzouTigers

    MizzouTigers New Member

    I am using the Bike template, how can I change the width of the tabs on the menu. It currently has 7 tabs, I only need 5, but my issue is that I need more space. Example "News" would need to be changed to "saving, paying, and repaying". All of the titles are long, the titles could be word wrapped, it really does not matter that much as long as they look similar all the way across menu.

    Any help would be greatly appreciated.
  2. Geoff Tyrer

    Geoff Tyrer Member

    Could you provide a link to the template you are using?

    The menu items are most likely list items <li>.

    My guess would be that you should change the styling of these to get the effect you want (width and padding).
  3. MizzouTigers

    MizzouTigers New Member


    The link to the template is Free Website Templates. I was thinking it was in the css, but I am not sure. I didn't see anything in the html that looked like I could change the size, but I could be wrong.
  4. navyfalcon

    navyfalcon Well-Known Member Verified Member

    When looking at the website. If you click on the top toolbar of the desktop
    (computer screen) View - Page Source - this will display the source code of
    the page. If you click on "style.css" it should take you to the CSS or style

    line 6. <link href="style.css" rel="stylesheet" type="text/css" />

    Lines 24 - 32
    <ul id="navlist">
    <li><a id="n1" href="http://www.freewebsitetemplates.com"><span>Home</span></a></li>
    <li><a id="n2" href="http://www.freewebsitetemplates.com"><span>News</span></a></li>
    <li><a id="n3" href="http://www.freewebsitetemplates.com"><span>Events</span></a></li>

    <li><a id="n4" href="http://www.freewebsitetemplates.com"><span>Reviews</span></a></li>
    <li><a id="n5" href="http://www.freewebsitetemplates.com"><span>Forum</span></a></li>
    <li><a id="n6" href="http://www.freewebsitetemplates.com"><span>Contact Us</span></a></li>
    <li><a id="n7" href="http://www.freewebsitetemplates.com"><span>Links</span></a></li>

    This is the menu top of the webpage - below the picture
    note: each one takes you to freewebsitetemplates
    you need to change "http://www.freewebsitetemplates.com" to your appropriate web page
    that will place your content on the page

    In your style sheet, I think this is your blue background menu
    margin-left: 0px;
    padding-left: 0px;
    white-space: nowrap;
    position: absolute;
    height: 26px;
    width: 777px;
    top: 225px;
    background: url(images/menubg.jpg) repeat-x top left;
    font-family: Arial;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;

    This appears to be the tab size and position (try changing the values to get your desired output - also you may want to remove the last two - n6 & n7)
    /*#navlist a:hover{background-image: url(images/buttonover.gif); height: 17px; width: 97px;}*/
    #n1{left: 0px;}
    #n2{left: 111px;}
    #n3{left: 222px;}
    #n4{left: 333px;}
    #n5{left: 444px;}
    #n6{left: 555px;}
    #n7{left: 666px;}
    float: left;
    hope this helps
  5. ezinemart

    ezinemart New Member

    Specify padding in css class
  6. smithdavid

    smithdavid New Member

    Grate job!!!!!!!!!

    I changed..

    Thanks to sharing.....