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
Related
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 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>
http://stepladderuk.com/dev/wedding/exp/
The text in the input button is bold, which I don't want.
I can't work out what's making it bold.
When I inspect the element, I come up with font-weight:100 as I declared in the CSS.
I tried -webkit-appearance: none;
this creates a strange behaviour where the text only unbolds when you hover.
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- meta stuff -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matt & Caroline</title>
<meta name="description" content="Description here">
<meta http-equiv="cleartype" content="on">
<!--FONT LINKAGE -->
<link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/c020518f-a748-4829-83c4-9cd0e83dd476.css"/>
<!-- Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!-- Scripts -->
<script src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOJWH6GtBIMO1GGByFIf3A9Q6nEe050L0"></script>
</head>
<body class="homepage">
<!--IE notice -->
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<section id="rsvp">
<div class="container">
<div class="heading-holder">
<div class="heading-inner">
<img class="arrow-left" src="img/arrow-right.png" alt="arrow">
<h1>rsvp</h1>
<img class="arrow-right" src="img/arrow-left.png" alt="arrow">
</div>
</div>
<div class="inner">
<form action="MAILTO:bz#stepladderuk.com" method="post" enctype="text/plain">
<div class="col col-wide">
<div class="form-group">
<label class="form-row" for="name">Names of everyone in your party</label>
<span class="form-row text-small">Please seperate names with a comma.</span>
<input class="form-row" type="text" name="name">
</div>
<div class="form-group">
<label class="form-row" for="number">Your phone number</label>
<input class="form-row" type="text" name="number">
</div>
<div class="form-group">
<label class="form-row" for="email">Your email address</label>
<input class="form-row" type="text" name="email">
</div>
<div class="form-group">
<label class="form-row" for="dietary-requirements">Special dietary requirements</label>
<input class="form-row" type="text" name="dietary-requirements">
</div>
<div class="form-group">
<label class="form-row" for="song">Favourite song</label>
<input class="form-row" type="text" name="song">
</div>
<div class="form-group">
<label class="form-row" for="transport">Transport</label>
<span class="form-row text-small">Please indicate if travelling by coach whether you will need transport to the venue and which coach you will return on</span>
<input class="form-row" type="text" name="transport">
</div>
</div>
<div class="clear"></div>
<hr class="hr-2-em" />
<p>
<span class="text-small">
Please fill out this form, click send and send the automatically generated email.
</span>
</p>
<div class="col-wide">
<div class="link-style-2 center">
<span class="left-edge"></span>
<input class="text" type="submit" value="Send It!">
<span class="right-edge"></span>
</div>
</div>
</form>
</div><!-- end inner -->
</div><!-- end container -->
<div class="clear"></div>
</section>
</body>
</html>
CSS;
form{
z-index:100;
width:50%;
margin:0 auto;
.form-group{
margin-bottom:2em;
}
.form-row{
display:block;
}
input[type=text]{
border:0;
background-color:white;
padding:.4em;
width:100%;
font-family:$font-main, georgia, serif;
width:100%;
margin-top:.2em;
}
input[type=submit]{
font-family:$font-main, georgia, serif;
border:0;
font-weight:100;
-webkit-appearance: none!important;
}
}
Does this in all browsers except IE. I'm on a mac.
This is how it looks;
This is how it should look (this is another button on the website, but it's just a plain link, not a form input element)
I'm pretty certain the problem is because it's an input.
Why don't you apply normal?
input{
font-weight: normal;
}
I found the fix.
input{
-webkit-font-smoothing: antialiased;
}
You need to add -webkit-font-smoothing: antialiased; to the input.
If you've added this to the html or body element, this rule will work on every element on the page except for inputs, so you need to redeclare it.
I'm new to working with jQuery mobile forms and CSS. I've build a jQuery Mobile form that is contained in a div and I'd like to be able to adjust the position of the form elements withing the , but am not having any luck so far. Below I have unsucessfully tried to align the "Submit" button with the bottom of the container using CSS. Can any one suggest a good way to do this?
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<style type="text/css">
#submitButton {
position: absolute;
bottom: 0%;
width: 50px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="lr" style="height: 500px;">
<form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
<label for="select-choice-0" class="select">Select Label:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<div id="preview"></div>
<button type="button" data-theme="a"
name="Choose" value="submit-value">Choose</button>
<label for="textarea">Text Area Label:</label>
<textarea name="textarea" id="textarea-a"></textarea>
<button id="submitButton" class="ui-btn-top" type="button"
data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
JQM alters the html and applies alot of classes to your original button. If you inspect the element you can see that it looks completely different. Instead of playing with what JQM created too much you can just wrap the button with another div and position that div. i.e.
<div id="submitBtnWrap">
<button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
Then apply your css to the wrapper div.
#submitBtnWrap {
position: absolute;
bottom: 0%;
width: 50px;
}
Is there any way to have the width of a <fieldset> be the width of the largest field inside it?
Just put your question in a general context. A <fieldset> is a block element, thus its default behaviour is to expand to fill the available horizontal space. So you basically have two options:
Set a new explicit width.
Change its layout from block to something else.
Here's a quick example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
fieldset.explicit-width{
width: 1%; /* Will expand to fit content */
}
fieldset.inline-block{
display: inline-block;
}
--></style>
</head>
<body>
<fieldset><legend>Unstyled</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
<fieldset class="explicit-width"><legend>Explicit width</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
<fieldset class="inline-block"><legend>Inline-block</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
</body>
</html>
Update: I forgot to mention that floating a block-level element also changes its layout.
Do you mean this:
jsFiddle fieldset that is wide as biggest containing input-element
<form action="#" id="test" name="test">
<fieldset>
<input type="text" class="first" />
<input type="text" class="second" />
<input type="text" class="third" />
</fieldset>
</form>
fieldset{
overflow: hidden;
float: left;
background-color: #eee;
}
input {
display: block;
}
input.first{ width: 150px; }
input.second{ width: 200px; }
input.third { width: 250px; }
It is a floating fieldset. If you want it in another way, please let us know.