I have tried styling my form submit button, but it isn't responding to any CSS styling. I tried using its class individually and also id individually and even both the class and id together, but nothing is working. I've attached the code:
HTML/PHP
if ($_POST['submit']) {
$member_username = "username";
$member_password = "pass****";
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $member_username && $password == $member_password) {
$_SESSION['username'] = $username;
header('Location: secret.php');
} else {
echo 'Incorrect username or password';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel=stylesheet />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" /><br /><br /><br />
<input class="textbox" type="password" name="password" placeholder="Password" /><br /><br /><br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
CSS
.submit {
width: 200px;
}
#submit {
width: 200px;
}
Its probably just relative pathing to the style sheet, hit F12 (for chrome, though may need to enable dev console, google if needed) and see whether the network panel or console panel show a 404 error for one or more files.
The actual css applies fine
<!DOCTYPE html>
<html>
<head>
<!--
<link href="style.css" rel="stylesheet" />
-->
<style>
.submit{width:200px; color:red;}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" />
<br />
<br />
<br />
<input class="textbox" type="password" name="password" placeholder="Password" />
<br />
<br />
<br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
Ensure that "style.css" is on the same level as the php or html file that is actually being hit, or use relative pathing.
Also its good form to validate your html and css, as unrelated syntax mistakes can break styling.
For html: https://validator.w3.org/
For css: https://jigsaw.w3.org/css-validator/
But these likely wont be able to pickup on pathing issues, just syntax, so ensure you use the developer console for whatever browser your using.
You can try to add an inline style to have precedent over the external style sheet. Just use the tag and then put in the in the head tag area.
<style>
.submit {
width: 200px;
}
#submit {
width: 200px;
}
</style>
Related
When I enter 1 character in my input, I would like to display an error message min 3 char at the bottom of the input.
Like this example:
For now, I have this:
The error message is on the right
I can use a tag <br> but I think there is a better solution?
I tried this solution, but without success, I don't understand what's wrong.
.lastName {
color: blue;
bottom: 10px;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
<input type="submit" value="Save" />
</form>
</body>
</html>
You can make the input a block level element by giving display: block;
input {
display: block;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br />
<input type="submit" value="Save" />
</form>
</body>
</html>
I am trying to style a particular label with an id but not sure if the following code is correct though as nothing is changing.
I am trying to move the label id down a few spaces and am trying to use the positioning for this but can't seem to get it moving.
From my understanding, I think that you can give an id for the label correct?
div.changepassword #temporary_password label {
color: #008000;
font-size: 1em;
white-space: nowrap;
position: absolute;
left: -2em;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="changepassword">
<h2>Update your password here!</h2>
<form class="signup-form" action="changepassword2.php" method="POST">
<br></br>
<label>Username</label>
<input type="text" name="user_uid" placeholder="Username">
<br></br>
<label id="temporary_password">Temporary Password</label>
<br></br>
<div class="changepassword2">
<input type="text" name="temporary_password" placeholder="token">
<br></br>
<label>New Password</label>
<input type="password" name="password" placeholder="Password">
<br></br>
<label>Confirm New Password</label>
<input type="password" name="confirm_password" placeholder="Confirm Password">
<br></br>
<button type="submit" name="submit">Update Password</button>
</div>
</div>
</body>
</html>
add this code
CSS
div.changepassword label#temporary_password {
color:#008000;
font-size: 1em;
white-space: nowrap;
position: absolute;
left: 0em;
}
You can remove the space from bottom of #temporary_password label by removing extra br tags from bottom. Though if its required by your design please find my solution below:
div.changepassword label#temporary_password {
position:absolute;
margin-top:15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link href="https://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet">
</head>
<body>
<div class="changepassword">
<h2>Update your password here!</h2>
<form class="signup-form" action="changepassword2.php" method="POST">
<br></br>
<label>Username</label>
<input type="text" name="user_uid" placeholder="Username">
<br></br>
<label id="temporary_password">Temporary Password</label>
<br></br>
<div class="changepassword2">
<input type="text" name="temporary_password" placeholder="token">
<br></br>
<label>New Password</label>
<input type="password" name="password" placeholder="Password">
<br></br>
<label>Confirm New Password</label>
<input type="password" name="confirm_password" placeholder="Confirm Password">
<br></br>
<button type="submit" name="submit">Update Password</button>
</div>
</div>
</body>
</html>
So, first of all, if you put a hash (#) in front of an identifier in css that means look for the element with this ID. So the div.changepassword part is superfluous.
When you use #temporary_password it targets directly the element with that id. But because you have #temporary_password label it targets any label element inside the element with the id temporary_password.
The easiest it to just target the element that you want to style directly. But this approach is not recommended if you intend to reuse the style (id's need to be unique on the page). In that case you should work with CSS classes instead.
A good way to learn and experiment with CSS is to use the developer tools in chrome. You can test and experiment in real time without having to reload anything. Also very useful is to right click an element in the Elements view and select Copy/Copy Selector. This will give you a CSS selector that targets that element.
I'm new to the ARIA thing and from what I've read on the internet about it nothing says something should be installed in order for this to work. I've tried a very simple example but nothing happens except pure html5 with a little css that I wrote in the style tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>ARIA<h1>
<style>
input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
</body>
</html>
I'm clearly doing something wrong, so can someone please tell me what exactly? :D
Application uses Bootstrap to create logon form below. In mobile devices logon form is too small, centered in mobile screen, lot of white space.
It is difficult to enter user's name and password.
How can I fix this so that the login form looks native in mobile phones also ?
Or is there some template which can used to create usable logon form for any screen resolution ?
<!DOCTYPE html>
<html>
<head>
<link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" />
<link href="/admin/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" />
<title>
Login
</title>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<div class='login-box container'>
<form action="/admin/Account/LogOn" method="post">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="user">User</label>
<input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" />
</div>
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
<input name="RememberMe" type="hidden" value="false" /> Remember me
</label>
</div>
</fieldset>
<input type="submit" value='Logon' class="btn btn-primary" />
</form>
</div>
<script type="text/javascript">
$(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
HTML5, Bootstrap 3, jQuery, jQuery UI, ASP.NET MVC 4, and Razor are used.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
This should be a no brainer but I have a small mystery with the CSS for a pair of divs. Here is the HTML:
<body>
<form id="form1" runat="server">
<div class="centered" id="selectReport">
<asp:DropDownList ID="p0" runat="server"></asp:DropDownList>
<asp:Button ID="viewReport" runat="server" Text="View Report" OnClick="ViewReport" />
</div>
<div>
...a centered table...
</div>
<div class="centered" id="buttons">
<asp:Button runat="server" ID="saveEdits" Text="Save Edits" OnClick="SaveEdits_Click" />
<asp:Button runat="server" ID="redoEdits" Text="Redo Edits" OnClick="RedoEdits_Click" />
</div>
</form>
</body>
If I put this CSS in the same file:
<style>
.centered
{
margin: auto;
}
</style>
Both of the divs are left justified.
However if I put this CSS in a separate file:
.centered
{
margin: auto;
}
the first div is left justified while the second div is centered. I also tried writing identical CSS for each div id with the same results -- the first one is left justified while the second is centered.
Here is the screenshot:
And here is the rendered HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Network Operations Dashboard
</title>
<link href="NetworkOperations.css" rel="Stylesheet" type="text/css" /></head>
<body>
<h1 style="text-align: center; font-size: 30pt" >Network Operations Dashboard</h1>
<form method="post" action="NetworkOperationsReport.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTAyNTkyMjcyNw9kFgICAw9kFgQCAQ8QDxYGHgxBdXRvUG9zdEJhY2tnHg1EYXRhVGV4dEZpZWxkBQ9BcmNoaXZlRmlsZU5hbWUeC18hRGF0YUJvdW5kZ2QQFQYURGFzaGJvYXJkXzIwMTItTWF5LTEGVHJlbmRzBlN0eWxlcwdTY3JpcHRzCEFwcF9EYXRhB0FjY291bnQVBhREYXNoYm9hcmRfMjAxMi1NYXktMQZUcmVuZHMGU3R5bGVzB1NjcmlwdHMIQXBwX0RhdGEHQWNjb3VudBQrAwZnZ2dnZ2dkZAIFDxYCHgdWaXNpYmxlaGRkUrfXkiabK3mrjfzXNLtumhzsq/lXy+2nab/n0oCTc60=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebApp/WebResource.axd?d=J72WHhxz11o7F4T65-nk2s6O8A5yTLJdKan5j1GWRlsyEEDvOExumPz8U-TIG_EGGghKU7cpVHXCxLarpokjZhHzOtYqhdwyIhY1CB4wM9o1&t=634746614287359483" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLY4tiyDgLwppLRBwKPpuCFAgLH2cPODQLV24ysCQLizdSlDwKFsO2xAgLfhdOhDAK46ZnWCAKVndrNAwK4r5OaCipKQs8Qpkd25hYiUSafRFyvUGzpZRXvRzfKNuVsC9Js" />
</div>
<div class="centered" id="selectReport">
<select name="Archives" onchange="javascript:setTimeout('__doPostBack(\'Archives\',\'\')', 0)" id="Archives">
<option selected="selected" value="Dashboard_2012-May-1">Dashboard_2012-May-1</option>
<option value="Trends">Trends</option>
<option value="Styles">Styles</option>
<option value="Scripts">Scripts</option>
<option value="App_Data">App_Data</option>
<option value="Account">Account</option>
</select>
<input type="submit" name="viewReport" value="View Report" id="viewReport" />
</div>
<div class="centered" id="buttons">
<input type="submit" name="saveEdits" value="Save Edits" id="saveEdits" />
<input type="submit" name="redoEdits" value="Redo Edits" id="redoEdits" />
</div>
I must be missing the blindingly obvious but I am stumped. Any advice is appreciated.
Regards.
Try giving your divs a fixed width and centering them:
.centered {
margin: 0 auto;
width: 60%; // or whatever you need.
}
To center a div you usually need to have given it a concrete width.
Your div is likely already centred (although if your CSS rules are, literally, just margin: auto, they're not doing anything until you specify a width on your div). The issue is that the controls inside it (your form fields) are not.
Try adding text-align: center; to your .centered CSS rules.
Remember input elements are inline elements, meaning they are affected by rules that would apply to text (like text-align, line-height, text-indent etc.).
You can see this for yourself by using some developer tools to inspect what's going on. IE has some, WebKit browsers like Chrome and Safari have them, Firefox has them, Opera does too. With them, you can (in real time) understand how your CSS rules affect layout, and the shape of the elements on the page.
Answer provided by a comment from Kit Grose: http://jsfiddle.net/ZrdUY/1/.