Jump to content

Fixed Width Button Meniu


kreatur
 Share

Recommended Posts

(my english might be a little off, please bare with me)Hello, i'm learning CSS for around... 3 days, trying to reproduce a web page based on tables. Lots of trouble here, but here's the question:I have an horizontal list menu down in an apdiv, i think i better give you a link http://kreatur.xhost.ro/ - ignore the crappy design.Problem is every button has the side of the lenght of the text. If i have a longer text, the button gets wider. I can control the padding, but what i want to do is make the buttons fixed widht regardless of the text, so that they all have equal size. I'll give you the codes in case you need them. What i need to know is if i can modify this to obtain what i need, or just look for other options.

[b]HTML[/b]  <div id="slidetabsmenu">      <ul>       <li><a href="#"><span>Home</span></a></li>       <li><a href="#"><span>Usi de garaj</span></a></li>       <li><a href="#"><span>Galerie foto</span></a></li>       <li><a href="#"><span>Preturi</span></a></li>       <li><a href="#"><span>Contact</span></a></li>     </ul>   </div> [b]CSS[/b]#slidetabsmenu {	float:left;	width:100%;	font-size:90%;	line-height:normal;}* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/margin-bottom: 1em;}#slidetabsmenu ul{	list-style-type: none;	margin-left: 15px;	padding:0;	margin-top: 0;	margin-right: 0;	margin-bottom: 0;}#slidetabsmenu li{	display:inline;	padding:0;	line-height: 30px;	margin: 0;}#slidetabsmenu a {	float:left;	text-decoration:none;	background-image: url(images/left.png);	background-repeat: no-repeat;	background-position: left top;	padding-top: 0;	padding-right: 0;	padding-bottom: 0;	padding-left: 9px;	margin-top: 0;	margin-right: 1px;	margin-bottom: 0;	margin-left: 0;}#slidetabsmenu a span {	float:left;	display:block;	font-weight:bold;	color:#FFFFFF;	background-image: url(images/right.png);	background-repeat: no-repeat;	background-position: right top;	font-family: Arial, Helvetica, sans-serif;	padding-top: 3px;	padding-right: 17px;	padding-bottom: 3px;	padding-left: 10px;}/* Commented Backslash Hack hides rule from IE5-Mac \*/#slidetabsmenu a span {float:none;}/* End IE5-Mac hack */#slidetabsmenu a:hover span {	color: #FFFFFF;}#slidetabsmenu #current a {background-position:0 -125px;}#slidetabsmenu #current a span {	background-position:100% -125px;	color: #FFFFFF;}#slidetabsmenu a:hover {background-position:0% -125px;}#slidetabsmenu a:hover span {background-position:100% -125px;}

Edited by kreatur
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...