CSS - Browse Button,

Hi all,

I want to place a PHP button NEXT TO text.When I place a button it goes under the text.

This what it looks right now...

Code:

Member Stats

Current balance: 0.00 $
Points: 0.00 
Lifetime Earnings: 0.00 $
[Cashout button]

I want it to look like this :

Code:

Member Stats

Current balance: 0.00 $ [Cashout button]
Points: 0.00 
Lifetime Earnings: 0.00 $

This is the Button code...

Code:

<form class='searchform' action='****URL here****' method='post'><input type='hidden' name='offer'><input type='submit' class='button' value='Cashout!'></form>

How can I place it there?

Hello,

Does anyone know of a way to design a button using CSS (or something else), and then save it as an image file?


Thanks,
Jeff

I have a series of image buttons with rollovers that are generated in CSS so I've applied a class to each like this:

<a class="homebutton" title="Home" href="#">This is the Home Button</a>

This works great but I now would like to apply a second class to the href that calls an animated scroll function from a javascript file. I've tested the function on a simple button and it worked perfect:

<a href="#divtwo" class="scroll">Scroll Down</a>

What I would like to do is essentially combine the two so that it would be something like:

<a class="homebutton" title="Home" href="#divtwo" class="scroll">This is the Home Button</a>

But when I do that it ignores the "scroll" class and simply jumps to the #divtwo location on the page without the animation.

Ideas on how to have two classes on one button?

Any help would be GREATLY appreciated!

Hey,

I try to set a button like that:
Code:

<!-- Buuton --><table border="0" class="SiteButtonManageOff" onmouseover="this.className='SiteButtonManageOn'" onmouseout="this.className='SiteButtonManageOff'"><tr><td class="SiteButtonManageIn" onClick="location.href='/s/index.asp';">Edit</td></tr></table><!-- Buuton -->
.SiteButtonManageOff
{
	font-family: arial;
	border-width:1px;
	border-color:#cccccc;
	border-style:solid;
	background-color:#2D3B72;
	display: inline;
}
.SiteButtonManageOn
{
	font-family: arial;
	border-width:1px;
	border-color:#cccccc;
	border-style:solid;
	background-color:#6280F6;
	display: inline;
}
.SiteButtonManageIn
{
	font-family: arial;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	white-space: nowrap;
	cursor:pointer;
}

In IE it's look great but in FF the text go to the top of the button, any solution?

Anyone know a trick to get a submit button to display on the same line as an input field and not have it drop. My issue is that it is either pushed down a few pixels, or up a few pixels, as if something is padded.

Code:

<form action="#" method="post">
            	<span>Join our mailing list</span>
            	<input type="text" name="email" value="your e-mail address" class="v-email" />
                <input type="submit" value="" name="submit" class="btn" />
</form>

In the above example, the submit button is pushed down a few pixels as if it is padded. In Firefox however, it is pushed up a couple pixels. How can I get it to display inline perfectly. Assume that the styled button and the input field are the same height.

ok.. ive been putting together this navigation for my website and i have run into troubles! code is below. link to get a visual:

http://www.reston.com/Tysons%20Corner%20COM/

Basically the 4th button is there if you roll over you see theres a link there.. but the image isnt display. Really confused. The 5th one doesnt roll over

Code:

/***********************************************************************
	4 - PRIMARY NAVIGATION
************************************************************************/

#primary-nav {
	position: absolute;
	background: transparent url(img/bg/primary-nav-v2.gif) no-repeat;
	list-style: none;
	width: 760px;
	height: 26px;
	top: 167px;
	left: 1px;
	z-index: 10;
	padding-left: 5px;
}

#primary-nav li {
	float: left;
	background-position: 0 -26px; 
}

#primary-nav li ul {
	position: absolute;
	background: transparent url(img/primary-nav-top.png) no-repeat;
	list-style: none;
	width: 159px;
	left: -9999px;
	margin-left: -9px;
	padding-top: 5px;
}

#primary-nav a {
	display: block;
	height: 0px !important;
	text-decoration: none;
	overflow: hidden;
}

#primary-nav li a {
	background-position: 0 0; 
}

#primary-nav li#nav-1 {
	background: transparent url(img/bg/nav-1.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-2 {
	background: transparent url(img/bg/nav-2-shopping.png) no-repeat;
	margin-right: 1px;
}

#primary-nav li#nav-4 {
	background: transparent url(img/bg/nav-4-restaurants.png) no-repeat;
}

#primary-nav li#nav-5 {
	background: url(img/bg/nav-5-history.png) no-repeat;
}

#primary-nav li#nav-1:hover, 
#primary-nav li#nav-1.sfhover,
#primary-nav li#nav-2:hover, 
#primary-nav li#nav-2.sfhover,
#primary-nav li#nav-4:hover, 
#primary-nav li#nav-4.sfhover,
#primary-nav li#nav-5.hover,
#primary-nav li#nav-5.sfhover
 {
	background-position: 0 -26px;
}

#primary-nav li#nav-1 a, 
#primary-nav li#nav-2 a,
#primary-nav li#nav-4 a,
#primary-nav li#nav-5 a {
	width: 140px;
	height /**/: 26px;
	padding: 26px 0 0 0;
}

#primary-nav li#nav-1 ul li,
#primary-nav li#nav-2 ul li,
#primary-nav li#nav-4 ul li,
#primary-nav li#nav-5 ul li {
	background: transparent url(img/bg/primary-nav-link-up.png) no-repeat;
	height: 21px;
}

#primary-nav li#nav-1 ul li.bottom,
#primary-nav li#nav-2 ul li.bottom,
#primary-nav li#nav-4 ul li.bottom,
#primary-nav li#nav-5 ul li.bottom {
	background: transparent url(img/bg/primary-nav-bottom.png) no-repeat;
	height: 14px;
	width: 159px;
}

#primary-nav li#nav-1 ul li a,
#primary-nav li#nav-2 ul li a,
#primary-nav li#nav-4 ul li a,
#primary-nav li#nav-5 ul li a {
	overflow: hidden !important;
	overflow: visible;
	font-size: 10px;
	color: #FFF;
	height: 19px !important;
	height: 19px;
	width: 140px;
	padding: 1px 3px 2px 19px;
}

#primary-nav li#nav-1 ul li a:hover,
#primary-nav li#nav-2 ul li a:hover,
#primary-nav li#nav-4 ul li a:hover,
#primary-nav li#nav-5 ul li a:hover{
	background: transparent url(img/bg/primary-nav-link-over.png) no-repeat 0 0;
}

#primary-nav li:hover ul, 
#primary-nav li.sfhover ul {
	left: auto;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-active" id="home" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head style="background-color: rgb(255, 0, 0);">
	<title>TysonsCorner.com&trade;</title>
	<link rel="shortcut icon" href="#">
	<link href="home.css" rel="stylesheet" type="text/css">
	<link href="global.css" rel="stylesheet" type="text/css">
    <link href="nav1.css" rel="stylesheet" type="text/css">

</head><body>
<div id="container">
	<!-- HEADER AREA STARTS HERE -->
<div id="header">
		<ul id="primary-nav">
			<!-- PRIMARY NAVIGATION (CATEGORIES) STARTS HERE -->
			<li id="nav-1"><a href="#" title="Tysons Corner Homepage">Tysons Homepage</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">News</a></li>
					<li><a href="#" title="Tysons 2 Stores">Events</a></li>
                    <li><a href="#" title="More Tysons Shopping">Contact Us</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (BRANDS) STARTS HERE -->
			<li id="nav-2"><a href="#" title="Tysons Corner Shopping">Tysons Shopping</a>
				<ul>
					<li><a href="#" title="Tysons 1 Stores">Tysons I Stores</a></li>
					<li><a href="#" title="Tysons 2 Stores">Tysons II Stores</a></li>
                    <li><a href="#" title="More Tysons Shopping">More Tysons Shopping</a></li>
					<li class="bottom"></li>
				</ul>
			</li>
			<!-- PRIMARY NAVIGATION (PRODUCTS) STARTS HERE -->
			<li id="nav-3"><a href="#" title="Tysons Corner Restaurants">Tysons Restaurants</a>
				<ul>
					<li><a href="#" title="Cajun Food">Cajun</a></li>
					<li><a href="#" title="Grilled Food">Grilled</a></li>
					<li><a href="#" title="Foreign Food">Foreign</a></li>
					<li><a href="#" title=" Full List Restaurants">Complete List</a></li>

					<li class="bottom"></li>
				</ul>
			</li>
			<li id="nav-4"><a href="#" title="Tysons Homepage">Home</a>			</li>
            <li id="nav-5"><a href="#" title="Tysons Homepage">Home</a>			</li>
    </ul>

</div>
        <div id="content">test</div>
</body></html>

If you can spy the issue plz let me know

Hey all,
Wondering why my second button doesn't sow up (presumably, neither would the 3rd or 4th, though I haven't tried yet on those).

Code:

http://www.whywaitwebs.com/clients/icc/jobd.php

You can see the one button there, there should be a second as well... here is the relevant CSS:

Code:

#links {
	padding-top:120px;
	padding-left: 0;
	background-repeat: no-repeat;
	display: block;
	font-size: 0;
	line-height: 0;
	height: 31px;
	margin: 0;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	text-indent: -99999px;
	width: 740px;
}
a.link1{
	width:185px;
	height:31px;
	display:block;
	background: url(links.jpg);
	background-position: 0 0;
}
a.link1:hover{
	background-position: 0 31px;
}
a.link2{
	width:185px;
	height:31px;
	display:block;
	background: url(links.jpg);
	background-position: 0 0;
}
a.link2:hover{
	background-position: 185px 31px;
}

Thanks very much in advance!!

Hello.

I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox.

Not sure how or where this gets changed. It seems to be adding a thicker border or something?

Here is the page:
http://www.nessphysiotherapy.com/testimonials.php

Suggestions?

Thanks

Matt

Hi,

I need quick help with this: I need to make matrix 4x4 of images. Each image has radio button over it (input type=radio). No table.
Please show me some code with it - I know only the image has z-index:-1 and button z-index:0 but I have some trouble with position:absolute vs relative. It shouldn't be hard.

Example:
h t t p://img.photoamp.com/pa/07/07/21/gmqeT8S.jpg

TIA

Hi,

Is it possible to change the default button image so that the same image can be used even when different text is set as the value of the button?

I mean, can I change the button image in a way, that it will appear correctly when the value is set to "OK" and also when the value is set to "Much Longer Value"?

Thanks and Regards,
Sim085

Hey, im just looking at putting some images on my website that change with the users mouse hovering over them, nothing spectacular. With google's help ive managed to figure out the Css code, for one image like this but im struggling to see an easy way to get more images with the same spec without repeating myself in endless lines of code.

Code:

<html>

<head>
<title>Button attempt</title>
<style type="text/css">

.btnContinue {
width: 80px;
height: 10px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no repeat;
background-image:url(image link here); 
}

.btnContinue:hover {
background-image:url(image link here);
}


</style>
</head>

<body>

<a class="btnContinue" href="##">&nbsp;</a>


</body>

</html>

Is there a simple method to use these styles on more than one image, without starting btnContinue2, btnContinue3 etc...

thanks

I'm working on a proof of concept, to be able to create a rounded edge button that will expand with the text on it. To do this I've been using a button tag with a span inside it, such as:

Code:

<form onsubmit="return doSomething()">
	<input type="text" name="textfield" /><br />
	<button type="submit"><span>Button Tag and a really long blah</span></button>
</form>

Unfortunately, IE and Firefox put some default padding on their buttons which is hard to get rid of. With some fiddling, I got this:

Code:

BUTTON {
	background:url(btn_right.jpg) no-repeat top right;
	padding: 0px;
	border: none;
	width: auto;
	overflow: visible;
}
BUTTON SPAN {
	background:url(btn_left.jpg) no-repeat top left;
	display: block;
	padding: 15px 25px 25px 20px;
	margin: 0px -3px;
	white-space: nowrap;
	position: relative;
	top: -1px; /* for Firefox */
}
* HTML BUTTON SPAN { margin: 0px; top: -2px;} /* for IE */

Looking at it in Opera 9, the same top: -1px that makes it work in Firefox is what breaks it in Opera. Past browser detection and serving different stylesheets, is there an easy way to make this work for both Opera and Firefox?