|
CSS - How To Align Submit Buttons Without Using Divs?
Hi, just a quick question. Say I have two input buttons (Just like the submit post/preview post buttons at the bottom of the forms).
Code: <input type="submit" value="blah" /> <input type="submit" value="lol" /> If I want to align them in the center of the row that they're on, I've had to wrap them in a <div> with the text-align: center attribute on the div. Is there anyway to accomplish this same purpose without having to use wrapper <div>s? Similar TutorialsHi, I'm having issues trying to get text to center on a few buttons. Here's the site: http://www.highspeeddirtcheap.com The buttons I'm having problems with are located near the top right, labeled as: Current Deal, How We Roll, and More Deals Moreover, the buttons don't even show up in IE6 or 7. Any ideas of what I'm doing wrong? Thank you. Basically on my main page the left menu and right content divs don't align, i need the rights bit to align with the lefts lower bit. linky -> http://www.gamingonlinux.info/ css that controls them: Code:
.left
{
float: left;
width: 152px;
}
.left_bg
{
background-image: url(images/left.gif);
background-repeat: no-repeat;
}
.left_bg p
{
padding-top: 9px;
padding-left: 6px;
line-height: 150%;
}
.right
{
float: right;
background-image: url(images/content.gif);
background-repeat: no-repeat;
width: 748px;
}
.right p
{
padding-left: 5px;
}
Hi guys. I was trying hard to figure out myself before posting this question on this site: (www dot paintersdirectory.ie/listing/location/leinster/county-longford) there is a "float-right" div ".sidebarSearch". It is hitting left bottom corner of the div "map" above it. I would like my sidebarSearch to be underneath map on the very right. Thank you very much I want to be able to have all of these divs align at the top of the wrapper div, but I am a css newbie, and I can't seem to find a way to get it to work. If anyone can help that would be great! here it is i've heard talk of text-align wrapper hacks, or just plain using tables... i got my main container div to align center by setting it to "margin:auto" but that code doesnt work for the divs inside that div.... can you please help me out... cuz i dont even know what the text-align hack is... i just have heard of it/ i really need to vertical align a div to always be at the bottom of a main div... Code: <div class="container"> <div class="menu"></div> </div> i want .menu to always be at the bottom of .container .... no matter the height of the container div I am trying to get a row of mixed divs to align horizontally center on the page. I would also like to move the Google Checkout logo up a bit so it is vertically centered relative to the logos on that row. Can you help me do these things? TIA! I've tried doing a lot of things including profanity but no go. The screenshot below is how the page looks now with this css: Code: .row div { height:75px; float:left; } #AuthorizeNetSeal,#googleCheckoutLogo,#paypal { margin-top:25px; }
Code: <div class="row"> <!-- (c) 2005, 2011. Authorize.Net is a registered trademark of CyberSource Corporation --> <div class="AuthorizeNetSeal"> <script type="text/javascript" language="javascript">var ANS_customer_id="xxxxxxxx";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js" ></script> <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Online Payment Service</a> </div> <img src="http://www.hotscripts.com/forums/images-manual/small_cc_icon_discover.gif" > <div><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=xxxxxxxxxxx" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" border="0"></A><!-- End Official PayPal Seal --></div> <div id="googleCheckoutLogo"></div><script src='https://checkout.google.com/buttons/logos?merchant_id=xxxxxxxxxxxx&loc=en_US&f=png' ></script> <span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=xxxxxxxx"></script></span> <img src="http://www.hotscripts.com/forums/images-manual/100satisguar80x79.gif"> </div> Here's what it looks like now: I've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows: #col1r1 { float: left; height: 40%; width: 33%; display: inline; text-align: right; } div#col1r1 div#image { bottom: 66%; left: 60%; color: black; vertical-align: bottom; } div#col1r1 div img.pagegr { width: 60%; } HTML: <div id="col1r1"> <div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div> </div> Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box. I'd really appreciate some help. Thanks in advance. I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below Any ideas? Thank you. I have created a nice tablesless form with CSS except for the submit buttons. I can't seem to align them to the middle and in IE6 they overflow the form border html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Interest</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css"> <!-- #Interest label,#Interest input { display: block; width: 200px; float: left; margin-bottom: 10px; } #Interest label { text-align: left; width: 150px; padding-right: 20px; font-weight: bold; } #Interest br { clear: left; } #Interest form { border : 1px solid #000; padding : 5px; } --> </STYLE> </HEAD> <BODY> <DIV ID="Interest"> <FORM METHOD="POST" ACTION="/cgi-bin/form.pl"> <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="paul.wright@npl.co.uk"> <BR> <LABEL FOR="name">Name</LABEL> <INPUT NAME="name" ID="name"><BR> <LABEL FOR="company">Organisation</LABEL> <INPUT NAME="company" ID="company"><BR> <LABEL FOR="email">E-mail address </LABEL> <INPUT NAME="email" ID="email"><BR> <LABEL FOR="phone">Telephone no. </LABEL> <INPUT NAME="phone" ID="phone"><BR> <LABEL FOR="outcome">Comment(s) </LABEL> <TEXTAREA NAME="outcome" ROWS="10" COLS="60" ID="outcome"></TEXTAREA> <BR> <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR> </FORM> </DIV> </BODY> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> The default behaviour for an <input type="submit ... /> is to add a certain amount (perhaps some percentage of the length of the text?) of blank of space to the right and left of the text that is displayed within the button. Very ugly for buttons with long labels. Is there any way to control this without hardcoding a width value? Hi when using a submitbutton (<INPUT TYPE=SUBMIT ...) then the browser makes a grey button with big spaceing left and rigth of the button-text. How can I get rid of this spacing?? I tryed style="margin:0;padding:0;border:0;background-color:#FFFFFF;" The grey desapears, but the big spacing left and rigth is still there. I am aware of image-submitbuttons, but i want to have text-submitbutton. I want to use only html and css. so no images, no javascript, no ... thanks in advanc for help can anyone tell me why the control div with the links and the div to contain the images for my photo album do not look properly aligned? link to photo Album can be found here but please note this is a dynamically set IP so is likely to change: http://85.210.107.231/PA.html I'm trying to adjust the left and right padding in a form submit button (to fake a normal-looking link so I can use the form to pass php variables w/ $_POST instead of $_GET)... I've put the padding-left:0em; everywhere I can think of, can't seem to influence the submit button padding. Does anyone know anything about this one? Tricky... I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> hi all... i been having some trouble with this one, perhaps someone can guide me in the right direction... Code:
.left_top{
width:10px;
height:100px;
border:1px solid white;
background-color:red;
margin:0px;
padding:0px;
float:left;
overflow:scroll;
}
.middle_top{
width:10px;
height:100px;
border:1px solid blue;
background-color:red;
margin:0px;
padding:0px;
overflow:scroll;
}
.right_top{
width:10px;
height:100px;
border:1px solid pink;
background-color:red;
margin:0px;
padding:0px;
overflow:scroll;
float:right;
}
thats the code, it should be pretty clear as to what i'm trying, but here goes anyway... i want the 3 divs to align side by side, in this order left/middle/right. they are inside a <td> but it makes no difference if i make that a <div>... please help me out... frank/ My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left. Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right. Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this. html code Code: <div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div> css tags: Code:
.wide_column_header {
float:left;
width:558px;
margin:0 0 0 5px;
background-image:url(../images/wide_header.jpg);
height:21px;
font-size:100%;
font-weight:900;
line-height:100%;
vertical-align:bottom;
color:#fff;}
.headerbartext {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-left:15px;
line-height: 140%;}
.headerbartextright {
font-size: 12px;
font-weight:bold;
text-align:right;
padding-right:15px;
line-height: 140%;}
Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Hi; i am trying to write a register form for user. i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all. And this problem happens in the IE browser, not in the Firefox browser. Could anyone help me find out the problem, please. please go to the link. http://writeanything.org/Register.php valid password 1) at least 8 char 2) at one lower char 3) at least one upper char 4) at least one digit please fill some invalid input to see the different before and after that. my code as following: Register.php PHP Code: <?php session_start(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> Welcome to login </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <style type="text/css"> body{ padding: 0px; margin: 0px; border: 0px; background-color: white; } #container{ padding: 0px; border-top: 2px solid #1d2add; border-bottom: 2px solid #1d2add; border-left: 1px solid #3b44b5; border-right: 1px solid #3b44b5; margin-left: auto; margin-right: auto; margin-top: 5%; margin-bottom: auto; width: 330px; height: 370px; } #t1{ font-weight: bold; font-size: 18px; color: white; background-color:#3542eb; } form{ padding:0px; border: 0px; margin: auto; width: 280px; } #JoinMe { background-color: #41ac1c; padding: 2px; border: 2px solid #94e07a; color: white; font-size: 12px; font-weight: bold; } #JoinMe:hover { background-color: #237516; border: 2px solid #104108; padding: 2px; } table{ padding: 0; border: 0; margin: 0; } tr{ padding: 0; border: 0; margin: 0; } td{ padding: 0; border: 0; margin: 0; } .errorM{ padding:0; margin:0; font-weight: bold; font-size: 12px; color: red; background-color:white; } </style> </head> <body> <div id="container"> <form action="/RegisterP2.php" method="post"> <table> <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr> <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?> <tr><td> Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Email']; echo "</span>"; } ?></td></tr> <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td> Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr> <tr><td> First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr> <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr> <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr> <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr> <tr><td>Gender:</td><td><input type="radio" checked="checked" name="Sex" value="male">Male <input type="radio" checked="checked" name="Sex" value="female">Female </td></tr> <tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr> </table> </form> </container> </body> </html> ///////////////// RegisterP2.php PHP Code: <?php session_start(); //error massage for validate form $_SESSION['register_errorM_Email']=""; $_SESSION['register_errorM_Password']=""; //flag to check user input, 1=valid, 0=invalid $_SESSION['register_flag']=1; if(isset($_POST['Join'])){ $email_pattern = '#.*@.*\..*#'; $_SESSION['register_email'] = $_POST['email']; //email pass validation; if (preg_match($email_pattern, $_POST['email']) > 0) { } else{ //not validate $_SESSION['register_errorM_Email']="**"; $_SESSION['register_email'] =""; $_SESSION['register_flag']=0; } $password1 = $_POST['pass1']; $password2 = $_POST['pass2']; //valid if ($password2==$password1) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } if( $_SESSION['register_flag']==1) header('Location:RegisterP3.php'); else header('Location:Register.php'); } ?> |
|||||||