Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,256
Total Threads: 81,169
Total Posts: 566,839
There are 55 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

fixed width css buttons

Thread title: fixed width css buttons
Closed Thread    
    Thread tools Search this thread Display Modes  
08-06-2011, 06:11 PM
#1
polaris1 is offline polaris1
Status: I'm new around here
Join date: Jun 2011
Location:
Expertise:
Software:
 
Posts: 5
iTrader: 0 / 0%
 

polaris1 is on a distinguished road

  Old  fixed width css buttons

I've got a horizontal navigation menu styled with CSS buttons. I want each button to have uniform dimensions of 35px * 110px. I can set the height, but I cannot set the width! The browser seems to completely disregard anything to do with width and shrinks the element box down to the size of the text contained within. Any help would be greatly appreciated. Thank you.

Code:
<nav>
			<ul>
				<li><a href="#">Link1</a></li>
				<li><a href="#">Link2</a></li>
				<li><a href="#">Link3</a></li>
				<li><a href="#">Link4</a></li>
			</ul>
</nav>
CSS:

Code:
nav {
	
	margin-left:150px;
	}

nav li {
	list-style-type:none;
	display:inline;
	margin: 8px 6px 7px 0;
}

nav a {
        height:35px;
        width:110px;
	color:#ffffff;
	text-decoration:none;
	padding:11px 0px 12px;
	text-transform:uppercase;

/*CSS3 Button Normal Gradient--------------------*/
		background: url(images/button-normal.png) no-repeat; /* Old browsers */
		background: -moz-linear-gradient(top, #04ca9e 0%, #03ae84 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#04ca9e), color-stop(100%,#03ae84)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #04ca9e 0%,#03ae84 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #04ca9e 0%,#03ae84 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #04ca9e 0%,#03ae84 100%); /* IE10+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04ca9e', endColorstr='#03ae84',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #04ca9e 0%, #03ae84 100%); /* W3C */

/*CSS3 Rounded Corners---------------------------*/
	-moz-border-radius: 5px;
	border-radius: 5px;
}

nav a:hover{
	/*CSS3 Button Depressed Gradient-----------------*/
		background: url(images/button-pressed.png) no-repeat; /* Old browsers */
		background: -moz-linear-gradient(top, #04c49c 0%, #03af8d 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#04c49c), color-stop(100%,#03af8d)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #04c49c 0%,#03af8d 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #04c49c 0%,#03af8d 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #04c49c 0%,#03af8d 100%); /* IE10+ */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04c49c', endColorstr='#03af8d',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #04c49c 0%,#03af8d 100%); /* W3C */
	
		}

08-06-2011, 06:36 PM
#2
polaris1 is offline polaris1
Status: I'm new around here
Join date: Jun 2011
Location:
Expertise:
Software:
 
Posts: 5
iTrader: 0 / 0%
 

polaris1 is on a distinguished road

  Old

Here's the answer now that you're all dying to know:

the anchor element must be set to display:block; and float:left;

08-06-2011, 10:36 PM
#3
Jake B is offline Jake B
Jake B's Avatar
Status: Member
Join date: Aug 2007
Location: SF
Expertise: Coder
Software: Sublime Text, Google Chrome
 
Posts: 211
iTrader: 1 / 100%
 

Jake B is on a distinguished road

Send a message via AIM to Jake B

  Old

Two things:

1. You don't need to set the <a> tag to have float: left and display: block; Adding just the float property should apply the <a> tag to have a block display. Just a protip.
2. Shouldn't you be floating the <li> tags instead? I'm not too sure how you're planning on setting it up but generally I'd float the <li> elements.

08-28-2011, 01:54 PM
#4
ronaldroe is offline ronaldroe
Status: I'm new around here
Join date: Aug 2011
Location: Oklahoma City
Expertise: Design, HTML/CSS
Software: Webmatrix, Photoshop
 
Posts: 9
iTrader: 0 / 0%
 

ronaldroe is on a distinguished road

  Old

Jake makes a good point about the floats.

As far as the width issue goes, apply the width to the <li> as well. That will give your links uniformly sized containers to rest in.

10-19-2011, 07:12 PM
#5
div.coders is offline div.coders
Status: I'm new around here
Join date: Oct 2011
Location:
Expertise:
Software:
 
Posts: 2
iTrader: 0 / 0%
 

div.coders is on a distinguished road

  Old

try

Code:
a { display:block; }

10-24-2011, 05:57 AM
#6
dgryan is offline dgryan
Status: Member
Join date: Jun 2009
Location: Syndey
Expertise: Ruby On Rails
Software:
 
Posts: 109
iTrader: 3 / 100%
 

dgryan is on a distinguished road

Send a message via Skype™ to dgryan

  Old

You're setting the width to 110px but you're also adding padding onto the button which will make it longer (122px?) by the looks of it.


do,

Code:
#nav a {
  float: left;
  height: 35px;
  line-height: 32px;
  padding: 0 0 0 10px;
  width: 100px; 
  text-transform: uppercase;
}
ps: you shouldn't use set width on navigation items, especially for people that don't have hardware acceleration (if someone zooms in more then once the text will be bigger then the button itself.)

And yes people do it.

12-17-2011, 08:30 PM
#7
ronaldroe is offline ronaldroe
Status: I'm new around here
Join date: Aug 2011
Location: Oklahoma City
Expertise: Design, HTML/CSS
Software: Webmatrix, Photoshop
 
Posts: 9
iTrader: 0 / 0%
 

ronaldroe is on a distinguished road

  Old

You need to set your height and width on your li tags, not the anchors.

01-01-2012, 04:47 AM
#8
vnstheme is offline vnstheme
Status: I'm new around here
Join date: Jan 2012
Location:
Expertise:
Software:
 
Posts: 5
iTrader: 0 / 0%
 

vnstheme is on a distinguished road

  Old

You need set display option in css

a{
display: block;
}

Closed Thread    


Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed