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.
Related
Bootstrap 4.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
I have a form (see image). I would like the check box to be underneath the word "Enabled" not centred like the other full width controls.
If I set "width: auto;" on the checkbox, this does the job, but then displays a small checkbox (I want a large one). See image.
<div class="form-group">
<label asp-for="Enabled" class="control-label"></label>
<input asp-for="Enabled" class="form-control" style="width: auto;" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
My question is, how can I get a large left aligned checkbox on my form?
I am also searched before for the same issue, but not satisfied with the above answer that's why I have done my research and I found a good solution. Just add class "col-sm-1"
in the input tag, you are done.
<div class="col-8">
<input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
<span asp-validation-for="IsUrgent" class="text-danger" />
</div>
you can also use like this if you are not satisfying with class name
input[type="checkbox"]{
width: 30px; /*Desired width*/
height: 30px; /*Desired height*/
cursor: pointer;
-webkit-appearance: none; /* if you want check inside box then remove this line*/
appearance: none; /* if you want check inside box then remove this line*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
Its not tidy by setting an height and width for the checkbox should do the trick.
.checkbox-large {
width: 25px !important;
height: 25px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-group">
<label asp-for="Enabled" class="control-label">Enabled</label>
<input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
<span asp-validation-for="Enabled" class="text-danger"></span>
</div>
</form>
I would like to remove all the extra spacing between my form controls using bootstrap 4 horizontal form to make it more compact and smaller. I added the css below which removes some of the spacing, but the spacing between label and input is still there and I cant figure out how to remove it.
.form-group {
margin-top: 0;
margin-bottom: 0;
}
Use !important to prevent override:
.form-group {
margin-bottom: 0px!important;
}
Or use bootstrap 4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<div class="form-group mb-0">
For example:
.space .form-group {
margin-bottom: 0px!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-grou">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<h1>With space</h1>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</form>
Bootstrap sets a default margin-bottom on the .form-group class:
By default it only applies margin-bottom
https://getbootstrap.com/docs/4.1/components/forms/#form-groups
If youre using precompiled bootstrap just overwrite it using a stronger selector (aka proper cascading).
If youre compiling bootstrap yourself just set the $form-group-margin-bottom variable to whatever value you desire (e.g. 0).
I solved it by adding
label {
margin-bottom: 0;
}
It works fine now.
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
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>
I was trying to place a form over an image that I wanted to have it as a background in my whole homepage. Everything works fine. The only problem is that I want to place table some pixels lets 50 more to down. Also I would like to place table not to the end of right, but lets say 30 pixels before of it. Any ideas ?
This is my html code:
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="text">
<div class="homepageTable" width:40px; margin-right:auto; margin-left:auto; style="text-align:right" >
<form action="#" method="post">
<input type="text" size="25" name="first_name" placeholder="first name"><br/>
<input type="text" size="25" name="last_name" placeholder="last name"><br/>
<input type="text" size="25" name="email" placeholder="email"><br/>
<input type="text" size="25" name="retype_email" placeholder="retype your email"><br/>
<input type="text" size="25" name="password" placeholder="password"><br/>
<input type="text" size="25" name="retype_password2" placeholder="retype your password"><br/><br/>
<input type="checkbox" name="I_accept_terms" value=" "><br/>
<input type="submit" value="" name="submit" style="background:url('img/login_button_1.jpg') no-repeat; width:300; height:50; border:none;"/>
</form>
</div>
</div>
</body>
</html>
and this is my css file:
#text
{
width: 961px;
height:219px;
position: relative;
background-image: url(../img/back_img_green.jpg);
background-repeat: none;
}
Any ideas ?
Thanks Stefanos
Absolutely position the image inside a relatively positioned div. Then absolutely position the form by the offset from top left that you want and give the form a higher z-index. Either that or set the image to be the background of the div.