css box/button - how ?

opel · #1 (**permalink**) 09-17-2007, 12:36 PM

Hi all,

I'm trying to create a button/box which is 85px wide by 28px wide and which contains the word Home in the centre.

see image at http://www.principalinternational.co...s2/home_02.jpg

I've got this far

background-color: #663399;
display: inline;
width: 85px;
line-height:28px;
text-align: center;

but the height and width aren't playing ball. Any direction would be most appreciated ,

thanks
Opel

EAS · #2 (**permalink**) 09-17-2007, 03:24 PM

Change this:

Code:

display: inline;

to this:

Code:

display: block;
height: 28px;

And you should be in business.

Orion · #3 (**permalink**) 09-17-2007, 05:50 PM

you may also add some margin or padding -top or -bottom to center the text if it doesn't appear correctly.

and you can also put an image in the background using css then use a :hover selector to produce a rollover effect ... just in case you weren't aware!

weslinda · #4 (**permalink**) 09-17-2007, 05:50 PM

Actually, I've found that typically by applying a float works to kick in the sizing options. I use this on a new site we're still developing Economic Development | Development Aid | Community Economic Development Services. It works great.

I don't like to set the heigh issues as I use flexible font sizes and want them to grow as needed, but that should help.

Ratanfx · #5 (**permalink**) 09-17-2007, 06:45 PM

.topnav a:link, .topnav a:visited{
color: white;
background-color: #663399;
display: block;
width: 85px;
line-height:28px;
text-decoration:none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.topnav a:hover {
background-color: #e4d5f3;
color: #663399;
}

Use the above code.

bj · #6 (**permalink**) 09-17-2007, 09:24 PM

You are aware, of course, that anyone using a larger than default font size is not going to see what you intend, don't you?

langsor · #7 (**permalink**) 09-17-2007, 11:30 PM

bj, you're correct insofar that Firefox and related allows you to resize font-sizes specified in pixels, but IE wont change the size of the font...so that's a huge audience you don't have to worry about.

My results come out almost identical to Fatanfx's example above...so sorry for the redundancy. Of course you will want to place the CSS in an external file for optimization and future update purposes.

<head>
<title>Blue Button Example</title>
<style type="text/css">
a.button {
display: block;
width: 85px;
height: 14px;
padding: 6px 0 8px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #FFF;
background: #55298A;
}

a.button:hover {
color: #000;
background: #EEE;
}
</style>
</head>
<body>
<a class="button" href="#">Home</a>
</body>

weslinda · #8 (**permalink**) 09-17-2007, 11:42 PM

Why the fixed font styles? Doesn't anyone have a concern on accessibility of the site for visitors?

langsor · #9 (**permalink**) 09-17-2007, 11:49 PM

Of course a more realistic example might be something like this, but there are still variants that really depend on the actual layout of the page...thanks for letting me play.

<head>
<title>Mini Menu Example</title>
<style type="text/css">

.menu li {
float: left;
list-style: none;
height: 28px;
overflow: hidden; /*optional*/
}

.menu a {
padding: 6px 12px 8px;
line-height: 28px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #FFF;
background: #55298A;
}

.menu a:hover {
color: #000;
background: #EEE;
}

</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>

langsor · #10 (**permalink**) 09-17-2007, 11:51 PM

weslinda,

I almost always use 'em' sizing for text, however this was an example of trying to replicate a graphical button...and without knowing all the details of the page layout I don't know how much room there is for flexibility. Of course, Firefox resizes 'fixed' sized fonts anyway (and I forget if IE 7 does also, since I dumped the sucker) so there's still options for those desiring flexibility.

markrchisholm · #11 (**permalink**) 09-18-2007, 05:21 AM

langso:

You can re-size fonts in Internet Explorer, by adding your own style sheet in the accessibility options.

I agree in as much as you don't need to worry about it, if someone specifies there own style sheet (obviously a very small percentage) then they should expect to see layout inconsistencies. However the layout should still remain readable (if not pretty) as this option is used by people hard of sight.

DaveSawers · #12 (**permalink**) 09-18-2007, 09:14 AM

Resizing fonts in IE works just fine as long as you specify them using %. It then works in the other browsers too.

langsor · #13 (**permalink**) 09-18-2007, 10:44 AM

I agree completely; I usually use 'em' sizing and this works across all browsers as well.

Styling font elements to be readily resizable is good practice for the reasons stated (accessibility, readability, minimize visitor annoyance, etc.) however I was simply addressing the question at hand and feel that this topic would be tangential to styling a button using CSS to look like the graphic example offered...

But maybe not; since if a client comes to me wanting to add flashing animated Gifs of spinning globes and compasses to their home page, I feel it is my duty to educate them that those elements will likely drive away the more discerning visitors from their site.

Resizable font faces gets my vote...here's the chunk of the above code with relative sized fonts instead of pixel-defined fixed sizing. This works in IE (without any any special style sheets) and all other CSS supporting browsers.

This layout looks fairly acceptable with an increase in size of +1 in FF and IE...

.menu a {
padding: 6px 12px 8px;
line-height: 28px;
font-family: Arial, sans-serif;
font-size: 0.7em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.02em;
color: #FFF;
background: #55298A;
}

opel · #14 (**permalink**) 09-18-2007, 12:37 PM

many thanks for all these replies,

I've looked at the two examples given by EAS and Ratanfx, but found that using the

display: block;

always end up with my menus going vertically and I was hoping for horizontal.

So using the example given by langsor works great for me except the <ul> part is pushing the menu across to the right and I need it back on the left,

I've tried using negative padding and negative margins on the <ul> but to no avail,
having found this article : Un-indenting <UL> in CSS

It seems the best way is to do without the <ul> completely (looks fine in ie and ff) but isn't true code.

Many thanks to you all for helping on my css journey,
Opel.

So my final code is,

<html>
<head>
<title>Mini Menu Example</title>
<style type="text/css">

.menu li {
float: left;
list-style: none;
height: 28px;
overflow: hidden; /*optional*/
}

.menu a {
padding: 6px 12px 8px;
line-height: 28px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #FFF;
background: #55298A;
}

.menu a:hover {
color: #000;
background: #EEE;
}

</style>
</head>
<body>
<div class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>
</body>
</html>

weslinda · #15 (**permalink**) 09-18-2007, 12:45 PM

If using a list. Simply set UL & LI to Margin / Padding 0 and that will keep everything left like needed.

If using the Display Block,you also need the float left option and you need to be inside a div with a specific width to allow the menus to sit side by side.

I also, again, would recommend looking at a non-fixed font size, so that it works more appropriately for accessibility and usability of your visitors.

opel · #16 (**permalink**) 09-18-2007, 01:42 PM

thanks weslinda,

looking at this and adding colour and a background image the block version is working better!

so here my updated code for those who want to see it,

.topnav {
width: 100%;
padding: 0;
margin: 0;
background-image: url('phone.jpg');
background-position: right;
background-repeat: no-repeat;
background-color: 55298a;
line-height:28px;
}

.topnav a:link, .topnav a:visited{
float: left;
color: white;
background-color: #55298a;
display: block;
width: 85px;
line-height:28px;
text-decoration:none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
border-right: thin solid #ffffff;
}
.topnav a:hover {
background-color: #e4d5f3;
color: #663399;
}

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Glossy Button	WPW_Feedbot	Graphics & Design Discussion Forum	0	04-05-2005 04:30 PM
Smooth Button	WPW_Feedbot	Graphics & Design Discussion Forum	0	03-25-2005 02:01 AM
AOL Button	WPW_Feedbot	Graphics & Design Discussion Forum	0	02-20-2005 01:31 AM
O2 Button	WPW_Feedbot	Graphics & Design Discussion Forum	0	02-15-2005 05:31 PM
Button	sun4web	Submit Your Logo For Review	3	11-26-2003 11:55 PM