...

View Full Version : Buttons



Decker
08-26-2010, 02:30 AM
Alright I have searched everywhere and cannot find this. First go here:

http://xio.net78.net/

Look at the buttons. See that you can edit the text on them, and when you hover your mouse over them they change.

I can design my own buttons and stuff, but I just need to learn how to do that. Does anyone have a link that teaches how? Thank you.

jimhill
08-26-2010, 02:58 AM
They are using CSS.
This is the code that does it.
Read up on cascading style sheets.
This is the HTML

<div id="container">
<div id="menu">
<ul>
<li class="current">
<a href="index.html"><span>home</span></a>
</li>

<li >
<a href="register.html"><span>register</span></a>
</li>

<li >
<a href="download.html"><span>download</span></a>
</li>

<li >
<a href="support.html"><span>support</span></a>
</li>

<!--<li >
<a href="forum.html"><span>forum</span></a>
</li>-->
<li >
<a href="forum"><span>forum</span></a>
</li>

<!--<li class="btn_login">
<a href="#" id="toggle-login"><span>login</span></a>
</li>-->
</ul>
</div>

This is the CSS:

#menu a{position: relative; float: left; display: block; background: url("../images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
#menu span{position: relative; display: block; margin: -6px 5px 0px 5px; padding: 4px 15px 0px 10px; height: 27px; background: url("../images/menuSpan.gif") bottom right;}

#menu a:hover{background: url("../images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("../images/menuSpan.gif") top right;}

teedoff
08-26-2010, 03:11 AM
Decker, you do know you can view code of any page you visit. Well html and CSS. Right click ona page and click view source. This is a good way to get ideas and learn from other's coding. Also if you use firefox, download their web tools as add ons...They have lots of good tools for web development to help learn.

Decker
08-26-2010, 03:17 AM
Doesn't work. I copied and pasted them codes, and even got the correct images and it doesn't work.

bazz
08-26-2010, 03:21 AM
see teedoff's post. go to that page you linked to and save it to your desktop or somewhere you choose.

using your fav text editor, remove the page bit by bit until you are only left with the css and the menu you are interested in. See how the css relates to that html code and understand how it works.

That's the easiest and best way to understand.

Decker
08-26-2010, 01:31 PM
Alright i've got pretty far but there is like a bullet thing beside one of the buttons, I don't know what it is, look:

http://img819.imageshack.us/img819/812/18409306.jpg

Can you tell me how to get rid of that?

abduraooft
08-26-2010, 01:49 PM
Add list-style:none; to ul and li in CSS

Off topic: Please follow #2 of http://www.codingforums.com/postguide.htm, regarding thread titles.

Decker
08-26-2010, 01:59 PM
Lol it worked, thanks alot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum