[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Keeping CSS button in correct location

Posted on 2011-04-28
10
Medium Priority
?
455 Views
Last Modified: 2013-11-19
I have and input field and a button which where displaying on the same line, and centered.
<form>
<center>
 <input type="text" size="80" maxlength="500" name="SearchCriteria" id="SearchCriteria" value="" />
 <a onclick="SubmitSearchOption(false)"  class="cssbutton" >Search</a>
 </center>
</form>

Open in new window

I changed the button code to use a css button which requires span tag, and now I can't get the button to align to the right of the input field.
<form>
<center>
 <input type="text" size="80" maxlength="500" name="SearchCriteria" id="SearchCriteria" value="" />
 <a onclick="SubmitSearchOption(false)"  class="button" ><span>Search</span></a>
 </center>
</form>

Open in new window


Above html uses following CSS:
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.ovalbutton{
background: transparent url('img/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('img/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('img/bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('img/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}


</style>

Open in new window


What do I have to do to get the button align correctly?
0
Comment
Question by:Axter
  • 7
  • 3
10 Comments
 
LVL 9

Accepted Solution

by:
cb1393 earned 1000 total points
ID: 35487121
Will something like this work?
<html>
<head>
<title></title>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.ovalbutton{
background: transparent url('img/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('img/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('img/bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: right;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('img/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

#SearchCriteria {
	width:300px;
	float:left;
}
.search_field_wrap {
	width:400px;
}


</style> 

</head>
<body>

<form>
<center>
<div class="search_field_wrap">
 <a onclick="SubmitSearchOption(false)" class="button" ><span>Search</span></a>
 <input type="text" size="80" maxlength="500" name="SearchCriteria" id="SearchCriteria" value="" />
 </center>
<div>
</form> 


</body>
</html>

Open in new window

0
 
LVL 30

Author Comment

by:Axter
ID: 35487327
That works to fix the alignment for that particular line, but I have another button listed at the bottom of the page, and that one will not align to the center.
<table border="0">
	<tr>
		<td>
			<center>
				<div id="footer">
					<center>
						<a onclick="RedirectToUrl('TaskEdit.jsp?NewTask=yes');"
							class="cssbutton"><span>Create Task</span></a>
					</center>
				</div>
			</center>
		</td>
	</tr>
</table>

Open in new window


Isn't there a more generic method to fix the alignment?
0
 
LVL 30

Author Comment

by:Axter
ID: 35487336
Correction:
<table border="0">
	<tr>
		<td>
			<center>
				<div id="footer">
					<center>
						<a onclick="RedirectToUrl('TaskEdit.jsp?NewTask=yes');"
							class="button"><span>Create Task</span></a>
					</center>
				</div>
			</center>
		</td>
	</tr>
</table>

Open in new window


When I use the cssbutton class, the alignment works fine, but as soon as i use the button class, all the alignment fails.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 9

Expert Comment

by:cb1393
ID: 35487833
What happens when you remove the table?


<center>
<div id="footer">
	<a onclick="RedirectToUrl('TaskEdit.jsp?NewTask=yes');" class="button"><span>Create Task</span></a>
</div>
</center>

Open in new window

0
 
LVL 30

Author Comment

by:Axter
ID: 35490594
>>What happens when you remove the table?
The button is still getting displayed on the left instead of being centered.
0
 
LVL 9

Expert Comment

by:cb1393
ID: 35491758
Add this to the styles:

#footer {
      align:center;
}
0
 
LVL 30

Author Comment

by:Axter
ID: 35494076
No change
0
 
LVL 30

Author Comment

by:Axter
ID: 35494117
I'm including the entire CSS file content which has the footer code.
This is separate from the button code in my previous post.
 
table {page:land;}

.cssbutton{
background-color: #A9D0F5;
border: 2px #A9D0F5 outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #ECE0F8;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}

@media print
{
	.cssbutton{display:none;}
}


    
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(img/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(img/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   padding:10px;
}
#body {
	position:absolute;
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}


#footer {
	position:absolute;
	bottom:0;
	height:60px;   /* Height of the footer */
	width: 800px ;
	margin-left: auto ;
	margin-right: auto ;
	align:center;
}

#one-column-emphasis
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
#one-column-emphasis th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	color: #039;
}
#one-column-emphasis td
{
	padding: 10px 15px;
	color: #669;
	border-top: 1px solid #e8edff;
}
.oce-first
{
	background: #d0dafd;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
	color: #339;
	background: #eff2ff;
}

#SearchCriteria {
	width:300px;
	float:left;
}
.search_field_wrap {
	width:400px;
}

Open in new window

0
 
LVL 30

Author Comment

by:Axter
ID: 35505188
Is there any further suggestion for solution to this issue?

I'm will to consider alternative CSS buttons with rounded edges which would keep correct alignment.
I was previously using the below cssbutton class, which work great with alignment.
.cssbutton{
background-color: #F2F2F2;
border: 2px #F2F2F2 outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #ECE0F8;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}

@media print
{
	.cssbutton{display:none;}
}

Open in new window


The only reason I'm replacing this, is because I wanted buttons with rounded ends.  However, I need a replacement method or class which will align properly as the original cssbutton.
Otherwise, I'm going to have to make a lot of changes throughout all the HTML pages.
0
 
LVL 30

Author Closing Comment

by:Axter
ID: 35696024
The solution did not solve the issue in general, but since there's no further comments, I'm accepting this as a partial solution.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question