|
|
|
|
Thread title: fixed width css buttons |
|
|
|
|
|
Thread tools
Search this thread
Display Modes
|
|
08-06-2011, 06:11 PM
|
#1
|
Status: I'm new around here
Join date: Jun 2011
Location:
Expertise:
Software:
Posts: 5
|
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
|
Status: I'm new around here
Join date: Jun 2011
Location:
Expertise:
Software:
Posts: 5
|
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
|
Status: Member
Join date: Aug 2007
Location: SF
Expertise: Coder
Software: Sublime Text, Google Chrome
Posts: 211
|
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
|
Status: I'm new around here
Join date: Aug 2011
Location: Oklahoma City
Expertise: Design, HTML/CSS
Software: Webmatrix, Photoshop
Posts: 9
|
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
|
Status: I'm new around here
Join date: Oct 2011
Location:
Expertise:
Software:
Posts: 2
|
try
Code:
a { display:block; }
|
|
10-24-2011, 05:57 AM
|
#6
|
Status: Member
Join date: Jun 2009
Location: Syndey
Expertise: Ruby On Rails
Software:
Posts: 109
|
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
|
Status: I'm new around here
Join date: Aug 2011
Location: Oklahoma City
Expertise: Design, HTML/CSS
Software: Webmatrix, Photoshop
Posts: 9
|
You need to set your height and width on your li tags, not the anchors.
|
|
01-01-2012, 04:47 AM
|
#8
|
Status: I'm new around here
Join date: Jan 2012
Location:
Expertise:
Software:
Posts: 5
|
You need set display option in css
a{
display: block;
}
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|