PDA

View Full Version : Making Buttons With CSS and HTML

Obolopo
01-18-2007, 10:13 PM
I've never really ever have had to make buttons with CSS and HTML so I'm a bit confused. (I use images.) Here's my HTML (without the DOCTYPE and stuff):

<div id="menu">
<a href="index.html">Button</a><a href="index.html">Button</a><a href="index.html">Button</a><a href="index.html">Button</a><a href="index.html">Button</a>
</div>

Here's my CSS:

#menu a {
background-color: #cccccc;
border 1px solid #999999;
color: #000000;
display: block;
font-family: Trebuchet MS;
font-size: 12px;
padding: 7px;
}


The code has been edited (style wise) to make it easier for people to help me. I'm trying to make something similar to Server-Logix (http://server-logix.com/)'s navigation menu... I'd just like to know the easiest way to do it and how to do it.

Thanks in advance!
VIPStephan
01-18-2007, 10:22 PM
So why don't you look at the source of Server-Logix's website and see how it's done there? The best way to learn is to copy the masters (not copy and paste but copy the way it's done).


Use a list (ul) for your list of links.
Make the list items display: inline;
Apply padding, border, and background color to the links
You're done.
Obolopo
01-18-2007, 10:24 PM
I did, but their coding is very messy and I couldn't quite figure it out! I've spent the last 30 minutes doing exactly that! I used "<ul><li></li></ul>" and it still turned out wrong!

Could you just write me up a code that pretty much does it and I'll have a look at it, edit it, and ask questions? It would be awesome if you could do that.
Obolopo
01-18-2007, 10:32 PM
Your solution worked! The only thing is, I didn't use a list. How do you do it with a list...

Here's my real CSS:

body {
background-color: #ffffff;
background-image: url('design/images/background.jpg');
}

#container {
color: #555555;
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 11px;
margin: auto;
margin-top: 25px;
width: 600px;
}

#menu {
text-align: center;
width: 600px;
}

#menu a {
background-color: #ffffff;
border: 1px solid #000000;
color: #ff0000;
display: inline;
font-size: 12px;
margin: 1px;
padding: 7px;
}

Here's my real HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="design/style_sheets/style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="menu">
<a href="index.html">Button</a><a href="index.html">Button</a><a href="index.html">Button</a><a href="index.html">Button</a><a href="index.html">Button</a>
</div>
</div>
</body>
</html>
Graft-Creative
01-18-2007, 10:52 PM
ul#menu {
text-align: center;
width: 600px;
}

ul#menu li {
display: inline;

#menu a {
background-color: #ffffff;
border: 1px solid #000000;
color: #ff0000;
font-size: 12px;
margin: 1px;
padding: 7px;
}


<ul id="menu">
<li><a href="index.html">home</li>
<li><a href="index.html">about us</li>
<li><a href="index.html">stuff</li>
<li><a href="index.html">extra stuff</li>
</ul>


something like that....?

Kind regards,

Gary
Obolopo
01-19-2007, 02:55 AM
I don't think it's "ul#menu", I'd think it's "#menu ul".
VIPStephan
01-19-2007, 07:38 AM
Hey, you can be sure that Gary knows what he's doing (if his concentration plays along :)). It is ul#menu - actually the specification that the ul with the ID is supposed to do something can be left off (if there's not another element with such an ID somewhere on the site), resulting in #menu {...}.

If you would write #menu ul you'd address a list within an element with the ID menu which certainly isn't going somewhere in this case.
butlins
01-19-2007, 01:26 PM
There's another couple of approaches to images as links as well if you want ECMAScript-free rollovers using image files

The trifecta button (http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml) which uses separate image files for the out and over states, but has the advantage of being able to load the navigation button with title and alt tags which are useful for search engines as you can repeat your key words three times (in the link text, the alt and title).

Alternatively, you can use a single image file that holds all of the rollover states for your button, and use CSS to offset the background position as per this tutorial (http://www.tutorio.com/tutorial/pure-css-image-rollovers).