Web Design Changing tab width on menu

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.

 

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).

 

link

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.

 

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
sheet

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>
</ul>

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
#navlist{
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;}
#leftside{
float: left;
}
-
hope this helps
falcon

 

Specify padding in css class

 

Grate job!!!!!!!!!

I changed..


Thanks to sharing.....