Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    33
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Question css button alignment problem

    i used some button to my form ...i can not align these buttons wht I want..

    see this img :


    relevant code is :
    PHP Code:
    <tr><td colspan="2">
    <
    center
    <
    button class="action redbtn" type="submit" id="upload" name="upload"><span class="label">Upload</span></button><button class="action" type="reset"><span class="label">Cancel</span></button>
    <
    font color="#FF0000">* -: Required Fields</font>      
    </
    center>
    </
    td>
    </
    tr
    I used below css style sheet to get these buttons:

    Code:
    /*------------------------------------*\
    	$WRAPPER
    \*------------------------------------*/
    .buttons {/* Style as you wish (toolbar) */
    }
    /* The Magnificent CLEARFIX */
    .buttons:before, .buttons:after {
    	content: "\0020";
    	display: block;
    	height: 0;
    	visibility: hidden;
    }
    .buttons:after {
    	clear: both;
    }
    .buttons {
    	zoom: 1;
    }
    /* ------------------------ */
    
    
    /*------------------------------------*\
    	$BUTTON
    \*------------------------------------*/
    button {
    	text-decoration: none;
    	text-shadow: 0 1px 0 #fff;
    	font: bold 11px Helvetica, Arial, sans-serif;
    	color: #444;
    	line-height: 17px;
    	height: 18px;
    	display: inline-block;
    	float: left;
    	margin: 5px;
    	padding: 5px 6px 4px 6px;
    	background: #F3F3F3;
    	border: solid 1px #D9D9D9;
    	border-radius: 2px;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
     -webkit-transition: border-color .20s;
     -moz-transition: border-color .20s;
     -o-transition: border-color .20s;
     transition: border-color .20s;
    	height: 29px !important;
    	cursor: pointer;
    }
    button:hover {
    	background: #F4F4F4;
    	border-color: #C0C0C0;
    	color: #333;
    }
    button:active {
    	border-color: #4D90FE;
    	color: #4D90FE;
    	-moz-box-shadow:inset 0 0 10px #D4D4D4;
    	-webkit-box-shadow:inset 0 0 10px #D4D4D4;
    	box-shadow:inset 0 0 10px #D4D4D4;
    }
    button.bluebtn {
    	border: 1px solid #3079ED !important;
    	background: #4B8DF8;
    	background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -o-linear-gradient(top, #4C8FFD, #4787ED);
     -webkit-transition: border .20s;
     -moz-transition: border .20s;
     -o-transition: border .20s;
     transition: border .20s;
    }
    button.bluebtn:hover {
    	border: 1px solid #2F5BB7 !important;
    	background: #3F83F1;
    	background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
    	background: -moz-linear-gradient(top, #4D90FE, #357AE8);
    	background: -ms-linear-gradient(top, #4D90FE, #357AE8);
    	background: -o-linear-gradient(top, #4D90FE, #357AE8);
    }
    button.greenbtn {
    	border: 1px solid #29691D !important;
    	background: #3A8E00;
    	background: -webkit-linear-gradient(top, #3C9300, #398A00);
    	background: -moz-linear-gradient(top, #3C9300, #398A00);
    	background: -ms-linear-gradient(top, #3C9300, #398A00);
    	background: -o-linear-gradient(top, #3C9300, #398A00);
     -webkit-transition: border .20s;
     -moz-transition: border .20s;
     -o-transition: border .20s;
     transition: border .20s;
    }
    button.greenbtn:hover {
    	border: 1px solid #2D6200 !important;
    	background: #3F83F1;
    	background: -webkit-linear-gradient(top, #3C9300, #368200);
    	background: -moz-linear-gradient(top, #3C9300, #368200);
    	background: -ms-linear-gradient(top, #3C9300, #368200);
    	background: -o-linear-gradient(top, #3C9300, #368200);
    }
    button.redbtn {
    	border: 1px solid #D14836 !important;
    	background: #D64937;
    	background: -webkit-linear-gradient(top, #DC4A38, #D14836);
    	background: -moz-linear-gradient(top, #DC4A38, #D14836);
    	background: -ms-linear-gradient(top, #DC4A38, #D14836);
    	background: -o-linear-gradient(top, #DC4A38, #D14836);
     -webkit-transition: border .20s;
     -moz-transition: border .20s;
     -o-transition: border .20s;
     transition: border .20s;
    }
    button.redbtn:hover {
    	border: 1px solid #B0281A !important;
    	background: #D14130;
    	background: -webkit-linear-gradient(top, #DC4A38, #C53727);
    	background: -moz-linear-gradient(top, #DC4A38, #C53727);
    	background: -ms-linear-gradient(top, #DC4A38, #C53727);
    	background: -o-linear-gradient(top, #DC4A38, #C53727);
    }
    button.action:hover {
    	-moz-box-shadow: 0 1px 0px #DDD;
    	-webkit-box-shadow: 0 1px 0px #DDD;
    	box-shadow:iset 0 1px 0px #DDD;
    }
    button.action:active {
    	-moz-box-shadow: none !important;
    	-webkit-box-shadow: none !important;
    	box-shadow: none !important;
    	border-color: #C6C6C6 !important;
    }
    button.bluebtn:active {
    	border-color: #2F5BB7 !important;
    }
    button.greenbtn:active {
    	border-color: #2D6200 !important;
    }
    button.redbtn:active {
    	border-color: #B0281A !important;
    }
    /*------------------------------------*\
    	$BUTTON LABEL
    \*------------------------------------*/
     button span.label {
    	display: inline-block;
    	float: left;
    	line-height: 17px;
    	height: 18px;
    	padding: 0 1px;
    	overflow: hidden;
    	color: #444;
     -webkit-transition: color .20s;
     -moz-transition: color .20s;
     -o-transition: color .20s;
     transition: color .20s;
    }
    button span.label {
    	line-height: 15px !important;
    }
    button:hover .label.bluebtn {
    	color: #7090C8;
    }
    button:hover .label.greenbtn {
    	color: #42B449;
    }
    button:hover .label.yellow {
    	color: #F7CB38;
    }
    button.bluebtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #2F5BB7 !important;
    }
    button.greenbtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #2D6200 !important;
    }
    button.redbtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #B0281A !important;
    }
    button.action .label {
    	padding: 0 17px !important;
    }
    button.action:active .label {
    	color: #333 !important;
    }
    button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label {
    	color: #FFF !important;
    }
    I want to move this two button to the center of the this table row..(near to the "* -: Required Fields" text)..how can I do it ????I think I ned change this css style sheet..plzz help me to do this????thxx in advanced...

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ebookz,
    Maybe a width would move your buttons the way you want. See what this does for you -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    #form {
    	line-height: 41px;
    	width: 350px;
    	margin: 50px auto;
    	border: 1px solid #00f;
    	overflow: auto;
    }
    .buttons {/* Style as you wish (toolbar) */ }
    /* The Magnificent CLEARFIX */
    .buttons:before, .buttons:after {
    	content: "\0020";
    	display: block;
    	height: 0;
    	visibility: hidden;
    }
    .buttons:after { clear: both; }
    .buttons { zoom: 1; }
    /* ------------------------ */
    
    
    /*------------------------------------*\
    	$BUTTON
    \*------------------------------------*/
    button {
    	text-decoration: none;
    	text-shadow: 0 1px 0 #fff;
    	font: bold 11px Helvetica, Arial, sans-serif;
    	color: #444;
    	line-height: 17px;
    	height: 18px;
    	display: inline-block;
    	float: left;
    	margin: 5px;
    	padding: 5px 6px 4px 6px;
    	background: #F3F3F3;
    	border: solid 1px #D9D9D9;
    	border-radius: 2px;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-transition: border-color .20s;
    	-moz-transition: border-color .20s;
    	-o-transition: border-color .20s;
    	transition: border-color .20s;
    	height: 29px !important;
    	cursor: pointer;
    }
    button:hover {
    	background: #F4F4F4;
    	border-color: #C0C0C0;
    	color: #333;
    }
    button:active {
    	border-color: #4D90FE;
    	color: #4D90FE;
    	-moz-box-shadow: inset 0 0 10px #D4D4D4;
    	-webkit-box-shadow: inset 0 0 10px #D4D4D4;
    	box-shadow: inset 0 0 10px #D4D4D4;
    }
    button.bluebtn {
    	border: 1px solid #3079ED !important;
    	background: #4B8DF8;
    	background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -o-linear-gradient(top, #4C8FFD, #4787ED);
    	-webkit-transition: border .20s;
    	-moz-transition: border .20s;
    	-o-transition: border .20s;
    	transition: border .20s;
    }
    button.bluebtn:hover {
    	border: 1px solid #2F5BB7 !important;
    	background: #3F83F1;
    	background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
    	background: -moz-linear-gradient(top, #4D90FE, #357AE8);
    	background: -ms-linear-gradient(top, #4D90FE, #357AE8);
    	background: -o-linear-gradient(top, #4D90FE, #357AE8);
    }
    button.greenbtn {
    	border: 1px solid #29691D !important;
    	background: #3A8E00;
    	background: -webkit-linear-gradient(top, #3C9300, #398A00);
    	background: -moz-linear-gradient(top, #3C9300, #398A00);
    	background: -ms-linear-gradient(top, #3C9300, #398A00);
    	background: -o-linear-gradient(top, #3C9300, #398A00);
    	-webkit-transition: border .20s;
    	-moz-transition: border .20s;
    	-o-transition: border .20s;
    	transition: border .20s;
    }
    button.greenbtn:hover {
    	border: 1px solid #2D6200 !important;
    	background: #3F83F1;
    	background: -webkit-linear-gradient(top, #3C9300, #368200);
    	background: -moz-linear-gradient(top, #3C9300, #368200);
    	background: -ms-linear-gradient(top, #3C9300, #368200);
    	background: -o-linear-gradient(top, #3C9300, #368200);
    }
    button.redbtn {
    	border: 1px solid #D14836 !important;
    	background: #D64937;
    	background: -webkit-linear-gradient(top, #DC4A38, #D14836);
    	background: -moz-linear-gradient(top, #DC4A38, #D14836);
    	background: -ms-linear-gradient(top, #DC4A38, #D14836);
    	background: -o-linear-gradient(top, #DC4A38, #D14836);
    	-webkit-transition: border .20s;
    	-moz-transition: border .20s;
    	-o-transition: border .20s;
    	transition: border .20s;
    }
    button.redbtn:hover {
    	border: 1px solid #B0281A !important;
    	background: #D14130;
    	background: -webkit-linear-gradient(top, #DC4A38, #C53727);
    	background: -moz-linear-gradient(top, #DC4A38, #C53727);
    	background: -ms-linear-gradient(top, #DC4A38, #C53727);
    	background: -o-linear-gradient(top, #DC4A38, #C53727);
    }
    button.action:hover {
    	-moz-box-shadow: 0 1px 0px #DDD;
    	-webkit-box-shadow: 0 1px 0px #DDD;
    	box-shadow: iset 0 1px 0px #DDD;
    }
    button.action:active {
    	-moz-box-shadow: none !important;
    	-webkit-box-shadow: none !important;
    	box-shadow: none !important;
    	border-color: #C6C6C6 !important;
    }
    button.bluebtn:active { border-color: #2F5BB7 !important; }
    button.greenbtn:active { border-color: #2D6200 !important; }
    button.redbtn:active { border-color: #B0281A !important; }
    /*------------------------------------*\
    	$BUTTON LABEL
    \*------------------------------------*/
    button span.label {
    	display: inline-block;
    	float: left;
    	line-height: 17px;
    	height: 18px;
    	padding: 0 1px;
    	overflow: hidden;
    	color: #444;
    	-webkit-transition: color .20s;
    	-moz-transition: color .20s;
    	-o-transition: color .20s;
    	transition: color .20s;
    }
    button span.label { line-height: 15px !important; }
    button:hover .label.bluebtn { color: #7090C8; }
    button:hover .label.greenbtn { color: #42B449; }
    button:hover .label.yellow { color: #F7CB38; }
    button.bluebtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #2F5BB7 !important;
    }
    button.greenbtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #2D6200 !important;
    }
    button.redbtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #B0281A !important;
    }
    button.action .label { padding: 0 17px !important; }
    button.action:active .label { color: #333 !important; }
    button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label { color: #FFF !important; }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="form">  
                    <button class="action redbtn" type="submit" id="upload" name="upload"><span class="label">Upload</span>
                    </button><button class="action" type="reset"><span class="label">Cancel</span></button> 
                <font color="#FF0000">* -: Required Fields</font>       
            <!--end form--></div> 
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ebookz (11-21-2012)

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    33
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by Excavator View Post
    Hello ebookz,
    Maybe a width would move your buttons the way you want. See what this does for you -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    #form {
    	line-height: 41px;
    	width: 350px;
    	margin: 50px auto;
    	border: 1px solid #00f;
    	overflow: auto;
    }
    .buttons {/* Style as you wish (toolbar) */ }
    /* The Magnificent CLEARFIX */
    .buttons:before, .buttons:after {
    	content: "\0020";
    	display: block;
    	height: 0;
    	visibility: hidden;
    }
    .buttons:after { clear: both; }
    .buttons { zoom: 1; }
    /* ------------------------ */
    /*------------------------------------*\
    	$BUTTON
    \*------------------------------------*/
    button {
    	text-decoration: none;
    	text-shadow: 0 1px 0 #fff;
    	font: bold 11px Helvetica, Arial, sans-serif;
    	color: #444;
    	line-height: 17px;
    	height: 18px;
    	display: inline-block;
    	float: left;
    	margin: 5px;
    	padding: 5px 6px 4px 6px;
    	background: #F3F3F3;
    	border: solid 1px #D9D9D9;
    	border-radius: 2px;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	-webkit-transition: border-color .20s;
    	-moz-transition: border-color .20s;
    	-o-transition: border-color .20s;
    	transition: border-color .20s;
    	height: 29px !important;
    	cursor: pointer;
    }
    button:hover {
    	background: #F4F4F4;
    	border-color: #C0C0C0;
    	color: #333;
    }
    button:active {
    	border-color: #4D90FE;
    	color: #4D90FE;
    	-moz-box-shadow: inset 0 0 10px #D4D4D4;
    	-webkit-box-shadow: inset 0 0 10px #D4D4D4;
    	box-shadow: inset 0 0 10px #D4D4D4;
    }
    button.bluebtn {
    	border: 1px solid #3079ED !important;
    	background: #4B8DF8;
    	background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
    	background: -o-linear-gradient(top, #4C8FFD, #4787ED);
    	-webkit-transition: border .20s;
    	-moz-transition: border .20s;
    	-o-transition: border .20s;
    	transition: border .20s;
    }
    button.bluebtn:hover {
    	border: 1px solid #2F5BB7 !important;
    	background: #3F83F1;
    	background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
    	background: -moz-linear-gradient(top, #4D90FE, #357AE8);
    	background: -ms-linear-gradient(top, #4D90FE, #357AE8);
    	background: -o-linear-gradient(top, #4D90FE, #357AE8);
    }
    button.greenbtn {
    	border: 1px solid #29691D !important;
    	background: #3A8E00;
    	background: -webkit-linear-gradient(top, #3C9300, #398A00);
    	background: -moz-linear-gradient(top, #3C9300, #398A00);
    	background: -ms-linear-gradient(top, #3C9300, #398A00);
    	background: -o-linear-gradient(top, #3C9300, #398A00);
    	-webkit-transition: border .20s;
    	-moz-transition: border .20s;
    	-o-transition: border .20s;
    	transition: border .20s;
    }
    button.greenbtn:hover {
    	border: 1px solid #2D6200 !important;
    	background: #3F83F1;
    	background: -webkit-linear-gradient(top, #3C9300, #368200);
    	background: -moz-linear-gradient(top, #3C9300, #368200);
    	background: -ms-linear-gradient(top, #3C9300, #368200);
    	background: -o-linear-gradient(top, #3C9300, #368200);
    }
    button.redbtn {
    	border: 1px solid #D14836 !important;
    	background: #D64937;
    	background: -webkit-linear-gradient(top, #DC4A38, #D14836);
    	background: -moz-linear-gradient(top, #DC4A38, #D14836);
    	background: -ms-linear-gradient(top, #DC4A38, #D14836);
    	background: -o-linear-gradient(top, #DC4A38, #D14836);
    	-webkit-transition: border .20s;
    	-moz-transition: border .20s;
    	-o-transition: border .20s;
    	transition: border .20s;
    }
    button.redbtn:hover {
    	border: 1px solid #B0281A !important;
    	background: #D14130;
    	background: -webkit-linear-gradient(top, #DC4A38, #C53727);
    	background: -moz-linear-gradient(top, #DC4A38, #C53727);
    	background: -ms-linear-gradient(top, #DC4A38, #C53727);
    	background: -o-linear-gradient(top, #DC4A38, #C53727);
    }
    button.action:hover {
    	-moz-box-shadow: 0 1px 0px #DDD;
    	-webkit-box-shadow: 0 1px 0px #DDD;
    	box-shadow: iset 0 1px 0px #DDD;
    }
    button.action:active {
    	-moz-box-shadow: none !important;
    	-webkit-box-shadow: none !important;
    	box-shadow: none !important;
    	border-color: #C6C6C6 !important;
    }
    button.bluebtn:active { border-color: #2F5BB7 !important; }
    button.greenbtn:active { border-color: #2D6200 !important; }
    button.redbtn:active { border-color: #B0281A !important; }
    /*------------------------------------*\
    	$BUTTON LABEL
    \*------------------------------------*/
    button span.label {
    	display: inline-block;
    	float: left;
    	line-height: 17px;
    	height: 18px;
    	padding: 0 1px;
    	overflow: hidden;
    	color: #444;
    	-webkit-transition: color .20s;
    	-moz-transition: color .20s;
    	-o-transition: color .20s;
    	transition: color .20s;
    }
    button span.label { line-height: 15px !important; }
    button:hover .label.bluebtn { color: #7090C8; }
    button:hover .label.greenbtn { color: #42B449; }
    button:hover .label.yellow { color: #F7CB38; }
    button.bluebtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #2F5BB7 !important;
    }
    button.greenbtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #2D6200 !important;
    }
    button.redbtn .label {
    	color: #FFF !important;
    	text-shadow: 0 1px 0 #B0281A !important;
    }
    button.action .label { padding: 0 17px !important; }
    button.action:active .label { color: #333 !important; }
    button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label { color: #FFF !important; }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="form">  
                    <button class="action redbtn" type="submit" id="upload" name="upload"><span class="label">Upload</span>
                    </button><button class="action" type="reset"><span class="label">Cancel</span></button> 
                <font color="#FF0000">* -: Required Fields</font>       
            <!--end form--></div> 
        <!--end container--></div>
    </body>
    </html>
    thank u so much Excavator ur great help..ur code works perfectly for me.....u all doing unbeleivable help for the upcoimg new coders.....world no one forum for coding is http://www.codingforums.com......


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •