Aligning a button to the right

Forum Moderators: coopster

Message Too Old, No Replies

Aligning a button to the right

Jamier101

7:27 pm on Aug 10, 2011 (gmt 0)

I've been trying to position a logout button the right but it doesn't seem to want to take, I've tried editing the echo code:

 <div id="user_box">
 <?php

if(!isset($_SESSION['username']) || (trim($_SESSION['username']) == ''))
echo ("") ;
//header("location: access-denied.php"); 
else
{ 
if(isset($_SESSION['username']) && (!empty($_SESSION['username'])))
echo "<font color='white'>" . 'Logged in as '.$_SESSION['username'] . "</font><br>"; 
echo '<input type="button" align="right" name="logout" value="Logout" onclick="document.location.href=\'logout.php\'"/>';
}
?>
 </div>

When that failed I decided to try changing the CSS code to change the properties of the user_box:

#user_box {
float:right;
width:auto;
height:auto;
margin:0 auto;
align:right;
}

Unfortunately neither of these amendments seem to move the button and for some reason its remains in the centre... any idea's?

omoutop

8:29 am on Aug 11, 2011 (gmt 0)

remove the margin 0 auto; This centers your content inside your container

rocknbil

4:27 pm on Aug 11, 2011 (gmt 0)

Is there a reason you're using button and not submit? There is only one "good" reason for this, if there are other form submit buttons and this one requires a different action, but from what you've posted it doesn't look like it. The reason being, as you can tell, if Javascript is disabled this fails.

Font and align have long been deprecated. Since you're using CSS, use that instead.

This is happening because these are inline elements, you can try a variety of approaches - wrap them both in a <p>, zero out margins and padding, and assign text-align right to the one with the button - or use floats (below).

position a logout button the right

This fixes all three.


// I'm not sure what is going on above this . . . 
else 
{ 
if(isset($_SESSION['username']) && (!empty($_SESSION['username']))) { 
 echo ' 
 <form method="get" id="logout-form" action="logout.php"> 
 <p><label for="logout-button">Logged in as '.$_SESSION['username'] . '</label> 
 <input type="submit" name="logout" id="logout-button" value="Logout"></p> 
 </form> 
 '; 
 } 
}

.. and a little new CSS that does the trick. Note by setting the width, you don't (shouldn't) need the empty <br>.
#logout-form,#logout-form p { width: 200px; margin:0; padding:0; }
#logout-form label, #logout-button { display: block; }
#logout-form #logout-button { float: right; }

A working test:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<style type="text/css"> 
#logout-form,#logout-form p { width: 200px; margin:0; padding:0; } 
#logout-form label, #logout-button { display: block; white-space: nowrap; } 
#logout-form #logout-button { float: right; } 
</style> 
</head> 
<body> 
 <form method="get" id="logout-form" action="logout.php"> 
 <p><label for="logout-button">Logged in as JohnDoe</label> 
 <input type="submit" name="logout" id="logout-button" value="Logout"></p> 
 </form> 
</body> 
</html>

If you want them both right, which looks better IMO, float them both (note removal of third line:)

#logout-form,#logout-form p { width: 10em; margin:0; padding:0; }
#logout-form label, #logout-button { display: block; white-space: nowrap; float: right; }

Jamier101

11:26 pm on Aug 11, 2011 (gmt 0)

I have changed my CSS file to read:

#user_box {
/*float:right;
width:auto;
height:auto;
*margin:0 auto;*/
}

#logout-form,#logout-form p {
width:10em;
margin:0;
padding:0;
}

#logout-form label, #logout-button {
display:block;
white-space: nowrap;
float: right;
}

The page is reloading nicely but the text is no longer in white and the <p> is not producing a new line which I would have thought it would have done given its function.

rocknbil

4:58 pm on Aug 12, 2011 (gmt 0)

is not producing a new line which I would have thought it would have done given its function.

It should have . . . is the text so small that it allows both label and input within the 10em width? Reduce that value. Also it's relevant if you've actually re-coded the form (i.e., the output html.)

but the text is no longer in white

My page BG was white. :-) Did you wrap it in a label? add

#logout-form label { color: #fff; }